mirror of
https://github.com/vector-im/element-web.git
synced 2026-05-04 11:51:36 +02:00
Merge pull request #32 from element-hq/hs/custom-component-api
Support custom components for messages
This commit is contained in:
Will Hunt
GitHub
commit
e5bbf7b45d
@ -1,233 +1,263 @@
|
||||
## API Report File for "@element-hq/element-web-module-api"
|
||||
|
||||
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
||||
|
||||
```ts
|
||||
|
||||
import { ModuleApi } from '@matrix-org/react-sdk-module-api';
|
||||
import { Root } from 'react-dom/client';
|
||||
import { RuntimeModule } from '@matrix-org/react-sdk-module-api';
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface AliasCustomisations {
|
||||
// (undocumented)
|
||||
getDisplayAliasForAliasSet?(canonicalAlias: string | null, altAliases: string[]): string | null;
|
||||
}
|
||||
|
||||
// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyModuleApiExtension" which is marked as @alpha
|
||||
// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyCustomisationsApiExtension" which is marked as @alpha
|
||||
//
|
||||
// @public
|
||||
export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiExtension {
|
||||
readonly config: ConfigApi;
|
||||
createRoot(element: Element): Root;
|
||||
readonly i18n: I18nApi;
|
||||
readonly rootNode: HTMLElement;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface ChatExportCustomisations<ExportFormat, ExportType> {
|
||||
getForceChatExportParameters(): {
|
||||
format?: ExportFormat;
|
||||
range?: ExportType;
|
||||
numberOfMessages?: number;
|
||||
includeAttachments?: boolean;
|
||||
sizeMb?: number;
|
||||
};
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface ComponentVisibilityCustomisations {
|
||||
shouldShowComponent?(component: "UIComponent.sendInvites" | "UIComponent.roomCreation" | "UIComponent.spaceCreation" | "UIComponent.exploreRooms" | "UIComponent.addIntegrations" | "UIComponent.filterContainer" | "UIComponent.roomOptionsMenu"): boolean;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface Config {
|
||||
// (undocumented)
|
||||
brand: string;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface ConfigApi {
|
||||
// (undocumented)
|
||||
get(): Config;
|
||||
// (undocumented)
|
||||
get<K extends keyof Config>(key: K): Config[K];
|
||||
// (undocumented)
|
||||
get<K extends keyof Config = never>(key?: K): Config | Config[K];
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface DirectoryCustomisations {
|
||||
// (undocumented)
|
||||
requireCanonicalAliasAccessToPublish?(): boolean;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface I18nApi {
|
||||
get language(): string;
|
||||
register(translations: Partial<Translations>): void;
|
||||
translate(key: keyof Translations, variables?: Variables): string;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export type LegacyCustomisations<T extends object> = (customisations: T) => void;
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface LegacyCustomisationsApiExtension {
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<WidgetPermissionsCustomisations<never, never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface LegacyModuleApiExtension {
|
||||
// @deprecated
|
||||
_registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface LifecycleCustomisations {
|
||||
// (undocumented)
|
||||
onLoggedOutAndStorageCleared?(): void;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface Media {
|
||||
// (undocumented)
|
||||
downloadSource(): Promise<Response>;
|
||||
// (undocumented)
|
||||
getSquareThumbnailHttp(dim: number): string | null;
|
||||
// (undocumented)
|
||||
getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
||||
// (undocumented)
|
||||
getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
||||
// (undocumented)
|
||||
readonly hasThumbnail: boolean;
|
||||
// (undocumented)
|
||||
readonly isEncrypted: boolean;
|
||||
// (undocumented)
|
||||
readonly srcHttp: string | null;
|
||||
// (undocumented)
|
||||
readonly srcMxc: string;
|
||||
// (undocumented)
|
||||
readonly thumbnailHttp: string | null;
|
||||
// (undocumented)
|
||||
readonly thumbnailMxc: string | null | undefined;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface MediaContructable<PreparedMedia> {
|
||||
// (undocumented)
|
||||
new (prepared: PreparedMedia): Media;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface MediaCustomisations<Content, Client, PreparedMedia> {
|
||||
// (undocumented)
|
||||
readonly Media: MediaContructable<PreparedMedia>;
|
||||
// (undocumented)
|
||||
mediaFromContent(content: Content, client?: Client): Media;
|
||||
// (undocumented)
|
||||
mediaFromMxc(mxc?: string, client?: Client): Media;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface Module {
|
||||
// (undocumented)
|
||||
load(): Promise<void>;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface ModuleFactory {
|
||||
// (undocumented)
|
||||
new (api: Api): Module;
|
||||
// (undocumented)
|
||||
readonly moduleApiVersion: string;
|
||||
// (undocumented)
|
||||
readonly prototype: Module;
|
||||
}
|
||||
|
||||
// @public
|
||||
export class ModuleIncompatibleError extends Error {
|
||||
constructor(pluginVersion: string);
|
||||
}
|
||||
|
||||
// @public
|
||||
export class ModuleLoader {
|
||||
constructor(api: Api);
|
||||
// Warning: (ae-forgotten-export) The symbol "ModuleExport" needs to be exported by the entry point index.d.ts
|
||||
//
|
||||
// (undocumented)
|
||||
load(moduleExport: ModuleExport): Promise<void>;
|
||||
// (undocumented)
|
||||
start(): Promise<void>;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface RoomListCustomisations<Room> {
|
||||
isRoomVisible?(room: Room): boolean;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
|
||||
|
||||
// @public
|
||||
export type Translations = Record<string, {
|
||||
[ietfLanguageTag: string]: string;
|
||||
}>;
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface UserIdentifierCustomisations {
|
||||
getDisplayUserIdentifier(userId: string, opts: {
|
||||
roomId?: string;
|
||||
withDisplayName?: boolean;
|
||||
}): string | null;
|
||||
}
|
||||
|
||||
// @public
|
||||
export type Variables = {
|
||||
count?: number;
|
||||
[key: string]: number | string | undefined;
|
||||
};
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface WidgetPermissionsCustomisations<Widget, Capability> {
|
||||
preapproveCapabilities?(widget: Widget, requestedCapabilities: Set<Capability>): Promise<Set<Capability>>;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface WidgetVariablesCustomisations {
|
||||
isReady?(): Promise<void>;
|
||||
provideVariables?(): {
|
||||
currentUserId: string;
|
||||
userDisplayName?: string;
|
||||
userHttpAvatarUrl?: string;
|
||||
clientId?: string;
|
||||
clientTheme?: string;
|
||||
clientLanguage?: string;
|
||||
deviceId?: string;
|
||||
baseUrl?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// (No @packageDocumentation comment for this package)
|
||||
|
||||
```
|
||||
## API Report File for "@element-hq/element-web-module-api"
|
||||
|
||||
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
||||
|
||||
```ts
|
||||
|
||||
import { JSX } from 'react';
|
||||
import { MatrixEvent } from 'matrix-js-sdk/lib/matrix';
|
||||
import { ModuleApi } from '@matrix-org/react-sdk-module-api';
|
||||
import { Root } from 'react-dom/client';
|
||||
import { RuntimeModule } from '@matrix-org/react-sdk-module-api';
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface AliasCustomisations {
|
||||
// (undocumented)
|
||||
getDisplayAliasForAliasSet?(canonicalAlias: string | null, altAliases: string[]): string | null;
|
||||
}
|
||||
|
||||
// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyModuleApiExtension" which is marked as @alpha
|
||||
// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyCustomisationsApiExtension" which is marked as @alpha
|
||||
//
|
||||
// @public
|
||||
export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiExtension {
|
||||
readonly config: ConfigApi;
|
||||
createRoot(element: Element): Root;
|
||||
readonly customComponents: CustomComponentsApi;
|
||||
readonly i18n: I18nApi;
|
||||
readonly rootNode: HTMLElement;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface ChatExportCustomisations<ExportFormat, ExportType> {
|
||||
getForceChatExportParameters(): {
|
||||
format?: ExportFormat;
|
||||
range?: ExportType;
|
||||
numberOfMessages?: number;
|
||||
includeAttachments?: boolean;
|
||||
sizeMb?: number;
|
||||
};
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface ComponentVisibilityCustomisations {
|
||||
shouldShowComponent?(component: "UIComponent.sendInvites" | "UIComponent.roomCreation" | "UIComponent.spaceCreation" | "UIComponent.exploreRooms" | "UIComponent.addIntegrations" | "UIComponent.filterContainer" | "UIComponent.roomOptionsMenu"): boolean;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface Config {
|
||||
// (undocumented)
|
||||
brand: string;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface ConfigApi {
|
||||
// (undocumented)
|
||||
get(): Config;
|
||||
// (undocumented)
|
||||
get<K extends keyof Config>(key: K): Config[K];
|
||||
// (undocumented)
|
||||
get<K extends keyof Config = never>(key?: K): Config | Config[K];
|
||||
}
|
||||
|
||||
// @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 @alpha
|
||||
// Warning: (ae-incompatible-release-tags) The symbol "registerMessageRenderer" is marked as @public, but its signature references "CustomMessageRenderHints" which is marked as @alpha
|
||||
registerMessageRenderer(eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean), renderer: CustomMessageRenderFunction, hints?: CustomMessageRenderHints): void;
|
||||
}
|
||||
|
||||
// @alpha
|
||||
export type CustomMessageComponentProps = {
|
||||
mxEvent: MatrixEvent;
|
||||
};
|
||||
|
||||
// @alpha
|
||||
export type CustomMessageRenderFunction = (
|
||||
props: CustomMessageComponentProps,
|
||||
originalComponent?: (props?: OriginalComponentProps) => React.JSX.Element) => JSX.Element;
|
||||
|
||||
// @alpha
|
||||
export type CustomMessageRenderHints = {
|
||||
allowEditingEvent?: boolean;
|
||||
};
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface DirectoryCustomisations {
|
||||
// (undocumented)
|
||||
requireCanonicalAliasAccessToPublish?(): boolean;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface I18nApi {
|
||||
get language(): string;
|
||||
register(translations: Partial<Translations>): void;
|
||||
translate(key: keyof Translations, variables?: Variables): string;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export type LegacyCustomisations<T extends object> = (customisations: T) => void;
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface LegacyCustomisationsApiExtension {
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<WidgetPermissionsCustomisations<never, never>>;
|
||||
// @deprecated (undocumented)
|
||||
readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface LegacyModuleApiExtension {
|
||||
// @deprecated
|
||||
_registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface LifecycleCustomisations {
|
||||
// (undocumented)
|
||||
onLoggedOutAndStorageCleared?(): void;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface Media {
|
||||
// (undocumented)
|
||||
downloadSource(): Promise<Response>;
|
||||
// (undocumented)
|
||||
getSquareThumbnailHttp(dim: number): string | null;
|
||||
// (undocumented)
|
||||
getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
||||
// (undocumented)
|
||||
getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
||||
// (undocumented)
|
||||
readonly hasThumbnail: boolean;
|
||||
// (undocumented)
|
||||
readonly isEncrypted: boolean;
|
||||
// (undocumented)
|
||||
readonly srcHttp: string | null;
|
||||
// (undocumented)
|
||||
readonly srcMxc: string;
|
||||
// (undocumented)
|
||||
readonly thumbnailHttp: string | null;
|
||||
// (undocumented)
|
||||
readonly thumbnailMxc: string | null | undefined;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface MediaContructable<PreparedMedia> {
|
||||
// (undocumented)
|
||||
new (prepared: PreparedMedia): Media;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface MediaCustomisations<Content, Client, PreparedMedia> {
|
||||
// (undocumented)
|
||||
readonly Media: MediaContructable<PreparedMedia>;
|
||||
// (undocumented)
|
||||
mediaFromContent(content: Content, client?: Client): Media;
|
||||
// (undocumented)
|
||||
mediaFromMxc(mxc?: string, client?: Client): Media;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface Module {
|
||||
// (undocumented)
|
||||
load(): Promise<void>;
|
||||
}
|
||||
|
||||
// @public
|
||||
export interface ModuleFactory {
|
||||
// (undocumented)
|
||||
new (api: Api): Module;
|
||||
// (undocumented)
|
||||
readonly moduleApiVersion: string;
|
||||
// (undocumented)
|
||||
readonly prototype: Module;
|
||||
}
|
||||
|
||||
// @public
|
||||
export class ModuleIncompatibleError extends Error {
|
||||
constructor(pluginVersion: string);
|
||||
}
|
||||
|
||||
// @public
|
||||
export class ModuleLoader {
|
||||
constructor(api: Api);
|
||||
// Warning: (ae-forgotten-export) The symbol "ModuleExport" needs to be exported by the entry point index.d.ts
|
||||
//
|
||||
// (undocumented)
|
||||
load(moduleExport: ModuleExport): Promise<void>;
|
||||
// (undocumented)
|
||||
start(): Promise<void>;
|
||||
}
|
||||
|
||||
// @alpha
|
||||
export type OriginalComponentProps = {
|
||||
showUrlPreview?: boolean;
|
||||
};
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface RoomListCustomisations<Room> {
|
||||
isRoomVisible?(room: Room): boolean;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
|
||||
|
||||
// @public
|
||||
export type Translations = Record<string, {
|
||||
[ietfLanguageTag: string]: string;
|
||||
}>;
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface UserIdentifierCustomisations {
|
||||
getDisplayUserIdentifier(userId: string, opts: {
|
||||
roomId?: string;
|
||||
withDisplayName?: boolean;
|
||||
}): string | null;
|
||||
}
|
||||
|
||||
// @public
|
||||
export type Variables = {
|
||||
count?: number;
|
||||
[key: string]: number | string | undefined;
|
||||
};
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface WidgetPermissionsCustomisations<Widget, Capability> {
|
||||
preapproveCapabilities?(widget: Widget, requestedCapabilities: Set<Capability>): Promise<Set<Capability>>;
|
||||
}
|
||||
|
||||
// @alpha @deprecated (undocumented)
|
||||
export interface WidgetVariablesCustomisations {
|
||||
isReady?(): Promise<void>;
|
||||
provideVariables?(): {
|
||||
currentUserId: string;
|
||||
userDisplayName?: string;
|
||||
userHttpAvatarUrl?: string;
|
||||
clientId?: string;
|
||||
clientTheme?: string;
|
||||
clientLanguage?: string;
|
||||
deviceId?: string;
|
||||
baseUrl?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// (No @packageDocumentation comment for this package)
|
||||
|
||||
```
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@types/semver": "^7.5.8",
|
||||
"@vitest/coverage-v8": "^3.0.4",
|
||||
"matrix-js-sdk": "^37.5.0",
|
||||
"matrix-web-i18n": "^3.3.0",
|
||||
"semver": "^7.6.3",
|
||||
"typescript": "^5.7.3",
|
||||
@ -50,6 +51,7 @@
|
||||
"@matrix-org/react-sdk-module-api": "*",
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"matrix-js-sdk": "*",
|
||||
"matrix-web-i18n": "*",
|
||||
"react": "^19"
|
||||
},
|
||||
|
||||
98
packages/element-web-module-api/src/api/custom-components.ts
Normal file
98
packages/element-web-module-api/src/api/custom-components.ts
Normal file
@ -0,0 +1,98 @@
|
||||
/*
|
||||
Copyright 2025 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import type { JSX } from "react";
|
||||
import type { MatrixEvent } from "matrix-js-sdk/lib/matrix";
|
||||
|
||||
/**
|
||||
* Properties for all message components.
|
||||
* @alpha Subject to change.
|
||||
*/
|
||||
export type CustomMessageComponentProps = {
|
||||
/**
|
||||
* The Matrix event for this textual body.
|
||||
* @alpha
|
||||
*/
|
||||
mxEvent: MatrixEvent;
|
||||
};
|
||||
|
||||
/**
|
||||
* Properties to alter the render function of the original component.
|
||||
* @alpha Subject to change.
|
||||
*/
|
||||
export type OriginalComponentProps = {
|
||||
/**
|
||||
* Should previews be shown for this event.
|
||||
* This may be overriden by user preferences.
|
||||
*/
|
||||
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.
|
||||
* @alpha Unlikely to change
|
||||
*/
|
||||
export type CustomMessageRenderFunction = (
|
||||
/**
|
||||
* Properties for the message to be renderered.
|
||||
*/
|
||||
props: CustomMessageComponentProps,
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* API for inserting custom components into Element.
|
||||
* @public
|
||||
*/
|
||||
export interface CustomComponentsApi {
|
||||
/**
|
||||
* Register a renderer for a message type in the timeline.
|
||||
*
|
||||
* The render function should return a rendered component.
|
||||
*
|
||||
* 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 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(
|
||||
* (mxEvent) => mxEvent.getType().matches(/m\.room\.(topic|name)/) && mxEvent.isState(),
|
||||
* (props, originalComponent) => {
|
||||
* return <YourCustomStateRenderer mxEvent={props.mxEvent} />;
|
||||
* }
|
||||
* );
|
||||
* ```
|
||||
*/
|
||||
registerMessageRenderer(
|
||||
eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean),
|
||||
renderer: CustomMessageRenderFunction,
|
||||
hints?: CustomMessageRenderHints,
|
||||
): void;
|
||||
}
|
||||
@ -10,6 +10,7 @@ import { LegacyModuleApiExtension } from "./legacy-modules";
|
||||
import { LegacyCustomisationsApiExtension } from "./legacy-customisations";
|
||||
import { ConfigApi } from "./config";
|
||||
import { I18nApi } from "./i18n";
|
||||
import { CustomComponentsApi } from "./custom-components";
|
||||
|
||||
/**
|
||||
* Module interface for modules to implement.
|
||||
@ -86,6 +87,12 @@ export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiEx
|
||||
* @public
|
||||
*/
|
||||
readonly rootNode: HTMLElement;
|
||||
|
||||
/**
|
||||
* The custom message component API.
|
||||
* @public
|
||||
*/
|
||||
readonly customComponents: CustomComponentsApi;
|
||||
/**
|
||||
* Create a ReactDOM root for rendering React components.
|
||||
* Exposed to allow modules to avoid needing to bundle their own ReactDOM.
|
||||
|
||||
@ -9,5 +9,6 @@ export { ModuleLoader, ModuleIncompatibleError } from "./loader";
|
||||
export type { Api, Module, ModuleFactory } from "./api";
|
||||
export type { Config, ConfigApi } from "./api/config";
|
||||
export type { I18nApi, Variables, Translations } from "./api/i18n";
|
||||
export type * from "./api/custom-components";
|
||||
export type * from "./api/legacy-modules";
|
||||
export type * from "./api/legacy-customisations";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user