mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-04 19:56:45 +02:00
Code Issues Projects Releases Wiki Activity

Add filter function / hints

Browse Source
This commit is contained in:
Half-Shot 2025-06-09 15:41:53 +01:00
parent 8cf426f0e7
commit 240045f433
2 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/element-web-module-api/element-web-module-api.api.md
View File

@ -62,8 +62,9 @@ export interface ConfigApi {
// @public
export interface CustomComponentsApi {
// Warning: (ae-incompatible-release-tags) The symbol "registerMessageRenderer" is marked as @public, but its signature references "CustomMessageRenderFunction" which is marked as @beta
registerMessageRenderer(eventType: string | RegExp, renderer: CustomMessageRenderFunction): void;
// Warning: (ae-incompatible-release-tags) The symbol "registerMessageRenderer" is marked as @public, but its signature references "CustomMessageRenderFunction" which is marked as @alpha
// Warning: (ae-incompatible-release-tags) The symbol "registerMessageRenderer" is marked as @public, but its signature references "CustomMessageRenderHints" which is marked as @alpha
registerMessageRenderer(eventType: string | ((mxEvent: MatrixEvent) => boolean), renderer: CustomMessageRenderFunction, hints?: CustomMessageRenderHints): void;
}
// @alpha
@ -71,13 +72,15 @@ export type CustomMessageComponentProps = {
mxEvent: MatrixEvent;
};
// Warning: (ae-incompatible-release-tags) The symbol "CustomMessageRenderFunction" is marked as @beta, but its signature references "CustomMessageComponentProps" which is marked as @alpha
// Warning: (ae-incompatible-release-tags) The symbol "CustomMessageRenderFunction" is marked as @beta, but its signature references "OriginalComponentProps" which is marked as @alpha
//
// @beta
// @alpha
export type CustomMessageRenderFunction = (
props: CustomMessageComponentProps,
originalComponent?: (props?: OriginalComponentProps) => React.JSX.Element) => JSX.Element | null;
originalComponent?: (props?: OriginalComponentProps) => React.JSX.Element) => JSX.Element;
// @alpha
export type CustomMessageRenderHints = {
allowEditingEvent?: boolean;
};
// @alpha @deprecated (undocumented)
export interface DirectoryCustomisations {

50
packages/element-web-module-api/src/api/custom-components.ts
View File

@ -15,6 +15,7 @@ import type { MatrixEvent } from "matrix-js-sdk/lib/matrix";
export type CustomMessageComponentProps = {
/**
* The Matrix event for this textual body.
* @alpha
*/
mxEvent: MatrixEvent;
};
@ -31,9 +32,23 @@ export type OriginalComponentProps = {
showUrlPreview?: boolean;
};
/**
* Hints to specify to Element when rendering events.
* @alpha Subject to change.
*/
export type CustomMessageRenderHints = {
/**
* Should the event be allowed to be edited in the client. This should
* be set to false if you override the render function, as the module
* API has no way to display message editing at the moment.
* Default is true.
*/
allowEditingEvent?: boolean;
};
/**
* Function used to render a message component.
* @beta Unlikely to change
* @alpha Unlikely to change
*/
export type CustomMessageRenderFunction = (
/**
@ -44,7 +59,7 @@ export type CustomMessageRenderFunction = (
* Render function for the original component. This may be omitted if the message would not normally be rendered.
*/
originalComponent?: (props?: OriginalComponentProps) => React.JSX.Element,
) => JSX.Element | null;
) => JSX.Element;
/**
* API for inserting custom components into Element.
@ -54,29 +69,30 @@ export interface CustomComponentsApi {
/**
* Register a renderer for a message type in the timeline.
*
* The render function should either return a rendered component, or `null` if the
* component should not be overidden (for instance, to passthrough to another module or allow
* the application complete control)
* The render function should return a rendered component.
*
* Multiple render function may be registered for a single target, however the first
* non-null result will be used. If all results are null, or no registrations exist
* for a target then the original component is used.
* Multiple render function may be registered for a single event type, however the first matching
* result will be used. If no events match or are registered then the originalComponent is rendered.
*
* @param eventType - The event type this renderer is for. Use a RegExp instance if you want to target multiple types.
* @param eventTypeOrFilter - The event type this renderer is for. Use a function for more complex filtering.
* @param renderer - The render function.
* @param hints - Hints that alter the way the tile is handled.
* @example
* ```
* customComponents.registerMessageRenderer("m.room.message", (props, originalComponent) => {
* return <YourCustomComponent mxEvent={props.mxEvent} />;
* });
* customComponents.registerMessageRenderer(/m\.room\.(topic|name)/, (props, originalComponent) => {
* if (props.mxEvent.isState()) {
* return <YourCustomStateRenderer mxEvent={props.mxEvent} />;
* }
* // Passthrough.
* return null;
* });
* customComponents.registerMessageRenderer(
* (mxEvent) => mxEvent.getType().matches(/m\.room\.(topic|name)/) && mxEvent.isState(),
* (props, originalComponent) => {
* return <YourCustomStateRenderer mxEvent={props.mxEvent} />;
* }
* );
* ```
*/
registerMessageRenderer(eventType: string | RegExp, renderer: CustomMessageRenderFunction): void;
registerMessageRenderer(
eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean),
renderer: CustomMessageRenderFunction,
hints?: CustomMessageRenderHints,
): void;
}