diff --git a/packages/element-web-module-api/element-web-module-api.api.md b/packages/element-web-module-api/element-web-module-api.api.md
index 49ce6f22cf..93b565b681 100644
--- a/packages/element-web-module-api/element-web-module-api.api.md
+++ b/packages/element-web-module-api/element-web-module-api.api.md
@@ -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 {
diff --git a/packages/element-web-module-api/src/api/custom-components.ts b/packages/element-web-module-api/src/api/custom-components.ts
index 87266de5ad..794786538a 100644
--- a/packages/element-web-module-api/src/api/custom-components.ts
+++ b/packages/element-web-module-api/src/api/custom-components.ts
@@ -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 ;
* });
- * customComponents.registerMessageRenderer(/m\.room\.(topic|name)/, (props, originalComponent) => {
- * if (props.mxEvent.isState()) {
- * return ;
- * }
- * // Passthrough.
- * return null;
- * });
+ * customComponents.registerMessageRenderer(
+ * (mxEvent) => mxEvent.getType().matches(/m\.room\.(topic|name)/) && mxEvent.isState(),
+ * (props, originalComponent) => {
+ * return ;
+ * }
+ * );
* ```
*/
- registerMessageRenderer(eventType: string | RegExp, renderer: CustomMessageRenderFunction): void;
+ registerMessageRenderer(
+ eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean),
+ renderer: CustomMessageRenderFunction,
+ hints?: CustomMessageRenderHints,
+ ): void;
}