Half-Shot
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import type { JSX } from "react";
|
|
import type { MatrixEvent } from "matrix-js-sdk";
|
|
|
|
/**
|
|
* Targets in Element for custom components.
|
|
* @public
|
|
*/
|
|
export enum CustomComponentTarget {
|
|
/**
|
|
* Component that renders "m.room.message" events in the room timeline.
|
|
*/
|
|
TextualBody = "TextualBody",
|
|
}
|
|
|
|
/**
|
|
* Properties for the render component.
|
|
* @public
|
|
*/
|
|
export type CustomComponentProps = {
|
|
[CustomComponentTarget.TextualBody]: {
|
|
/**
|
|
* The Matrix event for this textual body.
|
|
*/
|
|
mxEvent: MatrixEvent;
|
|
/**
|
|
* Words to highlight on (e.g. from search results).
|
|
* May be undefined if the client does not need to highlight
|
|
*/
|
|
highlights?: string[];
|
|
/**
|
|
* Should previews be shown for this event
|
|
*/
|
|
showUrlPreview?: boolean;
|
|
/**
|
|
* Is this event being rendered to a static export
|
|
*/
|
|
forExport?: boolean;
|
|
};
|
|
};
|
|
/**
|
|
* Render function. Returning null skips this function and passes it onto the next registered renderer.
|
|
* @public
|
|
*/
|
|
export type CustomComponentRenderFunction<T extends CustomComponentTarget> = (
|
|
/**
|
|
* Properties from the given target to be used for rendering.
|
|
*/
|
|
props: CustomComponentProps[T],
|
|
/**
|
|
* Render function for the original component.
|
|
*/
|
|
originalComponent: () => JSX.Element,
|
|
) => JSX.Element | null;
|
|
|
|
/**
|
|
* API for inserting custom components into Element.
|
|
* @public
|
|
*/
|
|
export interface CustomComponentsApi {
|
|
/**
|
|
* Register a renderer for a component type.
|
|
* The render function should either return a rendered component, or `null` if the
|
|
* component should not be overidden.
|
|
*
|
|
* 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.
|
|
*
|
|
* @param target - The target location for the component.
|
|
* @param renderer - The render method.
|
|
*/
|
|
register<T extends CustomComponentTarget>(target: T, renderer: CustomComponentRenderFunction<T>): void;
|
|
}
|