Skip to content

Support custom components for messages #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 18 commits into from
Closed

Support custom components for messages #26

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
da3edae
Custom component concept piece
Half-Shot May 16, 2025
53a2411
Document and types'
Half-Shot May 19, 2025
e3ee61f
lint
Half-Shot May 19, 2025
8672c4b
Remove context menu
Half-Shot May 20, 2025
f862a49
Tidyup
Half-Shot May 20, 2025
b6f1034
docs fix
Half-Shot May 20, 2025
a513491
Merge branch 'main' into hs/custom-component-api
Half-Shot May 20, 2025
402ab1d
Update module API
Half-Shot May 30, 2025
a2ca5d8
Merge branch 'main' into hs/custom-component-api
Half-Shot May 30, 2025
04e9061
fixup
Half-Shot Jun 3, 2025
a04d07b
Specify options for the original component.
Half-Shot Jun 5, 2025
40f13ec
Remove unused props
Half-Shot Jun 5, 2025
d0fadec
Add an example
Half-Shot Jun 5, 2025
57c35df
tighten example
Half-Shot Jun 5, 2025
cdf6a18
Add filter function / hints
Half-Shot Jun 9, 2025
1dd9947
Update API docs
Half-Shot Jun 12, 2025
5d4f513
Merge branch 'main' into hs/custom-component-api
Half-Shot Jun 12, 2025
953d029
run CodeQL again
Half-Shot Jun 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/element-web-module-api/src/api/custom-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,15 @@ export interface CustomComponentsApi {
*
* @param eventType - The event type this renderer is for. Use a RegExp instance if you want to target multiple types.
* @param renderer - The render function.
* @example
* ```
* customComponents.registerMessageRenderer("m.room.message", (props, originalComponent) => {
* return <YourCustomComponent mxEvent={props.mxEvent} />;
* });
* customComponents.registerMessageRenderer(/m\.room\.(topic|name)/, (props, originalComponent) => {
* return <YourCustomStateRenderer mxEvent={props.mxEvent} />;
* });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the API distinct state vs not rather than being quite foot-gunny such that if the latter sees an m.room.name timeline event it'd render it?

Copy link
Member Author

@Half-Shot Half-Shot Jun 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, we could tighten up this example. I don't think we need a separate function for state, it's generally good practice within matrix to be checking state keys.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the spirit of the ongoing MVVM work I'd also be keen on simplifying the interface passed, passing entire js-sdk objects around is quite brittle and given we're in the talks of swapping out the js-sdk for the rust-sdk would be guaranteed to break

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what we can do here for the short term, to be honest. I feel like trying to factor MatrixEvent into some sort of common structure is going to have a slight performance overhead per event, and it just feels gross to maintain another structure that we'd have to keep in line with changes to the event structure.

I don't know about the rest of product here but I'd be more in favor of just having a breaking change when the rust-sdk pieces land to support whatever comes next.

* ```
*/
registerMessageRenderer(eventType: string | RegExp, renderer: CustomMessageRenderFunction): void;
}
Loading