Merge pull request #32 from element-hq/hs/custom-component-api
Support custom components for messages
This commit is contained in:
Will Hunt
GitHub
@@ -1,233 +1,263 @@
|
|||||||
## API Report File for "@element-hq/element-web-module-api"
|
## 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/).
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
|
|
||||||
import { ModuleApi } from '@matrix-org/react-sdk-module-api';
|
import { JSX } from 'react';
|
||||||
import { Root } from 'react-dom/client';
|
import { MatrixEvent } from 'matrix-js-sdk/lib/matrix';
|
||||||
import { RuntimeModule } from '@matrix-org/react-sdk-module-api';
|
import { ModuleApi } from '@matrix-org/react-sdk-module-api';
|
||||||
|
import { Root } from 'react-dom/client';
|
||||||
// @alpha @deprecated (undocumented)
|
import { RuntimeModule } from '@matrix-org/react-sdk-module-api';
|
||||||
export interface AliasCustomisations {
|
|
||||||
// (undocumented)
|
// @alpha @deprecated (undocumented)
|
||||||
getDisplayAliasForAliasSet?(canonicalAlias: string | null, altAliases: string[]): string | null;
|
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
|
|
||||||
//
|
// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyModuleApiExtension" which is marked as @alpha
|
||||||
// @public
|
// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyCustomisationsApiExtension" which is marked as @alpha
|
||||||
export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiExtension {
|
//
|
||||||
readonly config: ConfigApi;
|
// @public
|
||||||
createRoot(element: Element): Root;
|
export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiExtension {
|
||||||
readonly i18n: I18nApi;
|
readonly config: ConfigApi;
|
||||||
readonly rootNode: HTMLElement;
|
createRoot(element: Element): Root;
|
||||||
}
|
readonly customComponents: CustomComponentsApi;
|
||||||
|
readonly i18n: I18nApi;
|
||||||
// @alpha @deprecated (undocumented)
|
readonly rootNode: HTMLElement;
|
||||||
export interface ChatExportCustomisations<ExportFormat, ExportType> {
|
}
|
||||||
getForceChatExportParameters(): {
|
|
||||||
format?: ExportFormat;
|
// @alpha @deprecated (undocumented)
|
||||||
range?: ExportType;
|
export interface ChatExportCustomisations<ExportFormat, ExportType> {
|
||||||
numberOfMessages?: number;
|
getForceChatExportParameters(): {
|
||||||
includeAttachments?: boolean;
|
format?: ExportFormat;
|
||||||
sizeMb?: number;
|
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;
|
|
||||||
}
|
// @alpha @deprecated (undocumented)
|
||||||
|
export interface ComponentVisibilityCustomisations {
|
||||||
// @public
|
shouldShowComponent?(component: "UIComponent.sendInvites" | "UIComponent.roomCreation" | "UIComponent.spaceCreation" | "UIComponent.exploreRooms" | "UIComponent.addIntegrations" | "UIComponent.filterContainer" | "UIComponent.roomOptionsMenu"): boolean;
|
||||||
export interface Config {
|
}
|
||||||
// (undocumented)
|
|
||||||
brand: string;
|
// @public
|
||||||
}
|
export interface Config {
|
||||||
|
// (undocumented)
|
||||||
// @public
|
brand: string;
|
||||||
export interface ConfigApi {
|
}
|
||||||
// (undocumented)
|
|
||||||
get(): Config;
|
// @public
|
||||||
// (undocumented)
|
export interface ConfigApi {
|
||||||
get<K extends keyof Config>(key: K): Config[K];
|
// (undocumented)
|
||||||
// (undocumented)
|
get(): Config;
|
||||||
get<K extends keyof Config = never>(key?: K): Config | Config[K];
|
// (undocumented)
|
||||||
}
|
get<K extends keyof Config>(key: K): Config[K];
|
||||||
|
// (undocumented)
|
||||||
// @alpha @deprecated (undocumented)
|
get<K extends keyof Config = never>(key?: K): Config | Config[K];
|
||||||
export interface DirectoryCustomisations {
|
}
|
||||||
// (undocumented)
|
|
||||||
requireCanonicalAliasAccessToPublish?(): boolean;
|
// @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
|
||||||
// @public
|
// Warning: (ae-incompatible-release-tags) The symbol "registerMessageRenderer" is marked as @public, but its signature references "CustomMessageRenderHints" which is marked as @alpha
|
||||||
export interface I18nApi {
|
registerMessageRenderer(eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean), renderer: CustomMessageRenderFunction, hints?: CustomMessageRenderHints): void;
|
||||||
get language(): string;
|
}
|
||||||
register(translations: Partial<Translations>): void;
|
|
||||||
translate(key: keyof Translations, variables?: Variables): string;
|
// @alpha
|
||||||
}
|
export type CustomMessageComponentProps = {
|
||||||
|
mxEvent: MatrixEvent;
|
||||||
// @alpha @deprecated (undocumented)
|
};
|
||||||
export type LegacyCustomisations<T extends object> = (customisations: T) => void;
|
|
||||||
|
// @alpha
|
||||||
// @alpha @deprecated (undocumented)
|
export type CustomMessageRenderFunction = (
|
||||||
export interface LegacyCustomisationsApiExtension {
|
props: CustomMessageComponentProps,
|
||||||
// @deprecated (undocumented)
|
originalComponent?: (props?: OriginalComponentProps) => React.JSX.Element) => JSX.Element;
|
||||||
readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
|
|
||||||
// @deprecated (undocumented)
|
// @alpha
|
||||||
readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
|
export type CustomMessageRenderHints = {
|
||||||
// @deprecated (undocumented)
|
allowEditingEvent?: boolean;
|
||||||
readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
|
};
|
||||||
// @deprecated (undocumented)
|
|
||||||
readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
|
// @alpha @deprecated (undocumented)
|
||||||
// @deprecated (undocumented)
|
export interface DirectoryCustomisations {
|
||||||
readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
|
// (undocumented)
|
||||||
// @deprecated (undocumented)
|
requireCanonicalAliasAccessToPublish?(): boolean;
|
||||||
readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
|
}
|
||||||
// @deprecated (undocumented)
|
|
||||||
readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
|
// @public
|
||||||
// @deprecated (undocumented)
|
export interface I18nApi {
|
||||||
readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
|
get language(): string;
|
||||||
// @deprecated (undocumented)
|
register(translations: Partial<Translations>): void;
|
||||||
readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<WidgetPermissionsCustomisations<never, never>>;
|
translate(key: keyof Translations, variables?: Variables): string;
|
||||||
// @deprecated (undocumented)
|
}
|
||||||
readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
|
|
||||||
}
|
// @alpha @deprecated (undocumented)
|
||||||
|
export type LegacyCustomisations<T extends object> = (customisations: T) => void;
|
||||||
// @alpha @deprecated (undocumented)
|
|
||||||
export interface LegacyModuleApiExtension {
|
// @alpha @deprecated (undocumented)
|
||||||
// @deprecated
|
export interface LegacyCustomisationsApiExtension {
|
||||||
_registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
|
// @deprecated (undocumented)
|
||||||
}
|
readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
|
||||||
|
// @deprecated (undocumented)
|
||||||
// @alpha @deprecated (undocumented)
|
readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
|
||||||
export interface LifecycleCustomisations {
|
// @deprecated (undocumented)
|
||||||
// (undocumented)
|
readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
|
||||||
onLoggedOutAndStorageCleared?(): void;
|
// @deprecated (undocumented)
|
||||||
}
|
readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
|
||||||
|
// @deprecated (undocumented)
|
||||||
// @alpha @deprecated (undocumented)
|
readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
|
||||||
export interface Media {
|
// @deprecated (undocumented)
|
||||||
// (undocumented)
|
readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
|
||||||
downloadSource(): Promise<Response>;
|
// @deprecated (undocumented)
|
||||||
// (undocumented)
|
readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
|
||||||
getSquareThumbnailHttp(dim: number): string | null;
|
// @deprecated (undocumented)
|
||||||
// (undocumented)
|
readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
|
||||||
getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
// @deprecated (undocumented)
|
||||||
// (undocumented)
|
readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<WidgetPermissionsCustomisations<never, never>>;
|
||||||
getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
// @deprecated (undocumented)
|
||||||
// (undocumented)
|
readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
|
||||||
readonly hasThumbnail: boolean;
|
}
|
||||||
// (undocumented)
|
|
||||||
readonly isEncrypted: boolean;
|
// @alpha @deprecated (undocumented)
|
||||||
// (undocumented)
|
export interface LegacyModuleApiExtension {
|
||||||
readonly srcHttp: string | null;
|
// @deprecated
|
||||||
// (undocumented)
|
_registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
|
||||||
readonly srcMxc: string;
|
}
|
||||||
// (undocumented)
|
|
||||||
readonly thumbnailHttp: string | null;
|
// @alpha @deprecated (undocumented)
|
||||||
// (undocumented)
|
export interface LifecycleCustomisations {
|
||||||
readonly thumbnailMxc: string | null | undefined;
|
// (undocumented)
|
||||||
}
|
onLoggedOutAndStorageCleared?(): void;
|
||||||
|
}
|
||||||
// @alpha @deprecated (undocumented)
|
|
||||||
export interface MediaContructable<PreparedMedia> {
|
// @alpha @deprecated (undocumented)
|
||||||
// (undocumented)
|
export interface Media {
|
||||||
new (prepared: PreparedMedia): Media;
|
// (undocumented)
|
||||||
}
|
downloadSource(): Promise<Response>;
|
||||||
|
// (undocumented)
|
||||||
// @alpha @deprecated (undocumented)
|
getSquareThumbnailHttp(dim: number): string | null;
|
||||||
export interface MediaCustomisations<Content, Client, PreparedMedia> {
|
// (undocumented)
|
||||||
// (undocumented)
|
getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
||||||
readonly Media: MediaContructable<PreparedMedia>;
|
// (undocumented)
|
||||||
// (undocumented)
|
getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
|
||||||
mediaFromContent(content: Content, client?: Client): Media;
|
// (undocumented)
|
||||||
// (undocumented)
|
readonly hasThumbnail: boolean;
|
||||||
mediaFromMxc(mxc?: string, client?: Client): Media;
|
// (undocumented)
|
||||||
}
|
readonly isEncrypted: boolean;
|
||||||
|
// (undocumented)
|
||||||
// @public
|
readonly srcHttp: string | null;
|
||||||
export interface Module {
|
// (undocumented)
|
||||||
// (undocumented)
|
readonly srcMxc: string;
|
||||||
load(): Promise<void>;
|
// (undocumented)
|
||||||
}
|
readonly thumbnailHttp: string | null;
|
||||||
|
// (undocumented)
|
||||||
// @public
|
readonly thumbnailMxc: string | null | undefined;
|
||||||
export interface ModuleFactory {
|
}
|
||||||
// (undocumented)
|
|
||||||
new (api: Api): Module;
|
// @alpha @deprecated (undocumented)
|
||||||
// (undocumented)
|
export interface MediaContructable<PreparedMedia> {
|
||||||
readonly moduleApiVersion: string;
|
// (undocumented)
|
||||||
// (undocumented)
|
new (prepared: PreparedMedia): Media;
|
||||||
readonly prototype: Module;
|
}
|
||||||
}
|
|
||||||
|
// @alpha @deprecated (undocumented)
|
||||||
// @public
|
export interface MediaCustomisations<Content, Client, PreparedMedia> {
|
||||||
export class ModuleIncompatibleError extends Error {
|
// (undocumented)
|
||||||
constructor(pluginVersion: string);
|
readonly Media: MediaContructable<PreparedMedia>;
|
||||||
}
|
// (undocumented)
|
||||||
|
mediaFromContent(content: Content, client?: Client): Media;
|
||||||
// @public
|
// (undocumented)
|
||||||
export class ModuleLoader {
|
mediaFromMxc(mxc?: string, client?: Client): Media;
|
||||||
constructor(api: Api);
|
}
|
||||||
// Warning: (ae-forgotten-export) The symbol "ModuleExport" needs to be exported by the entry point index.d.ts
|
|
||||||
//
|
// @public
|
||||||
// (undocumented)
|
export interface Module {
|
||||||
load(moduleExport: ModuleExport): Promise<void>;
|
// (undocumented)
|
||||||
// (undocumented)
|
load(): Promise<void>;
|
||||||
start(): Promise<void>;
|
}
|
||||||
}
|
|
||||||
|
// @public
|
||||||
// @alpha @deprecated (undocumented)
|
export interface ModuleFactory {
|
||||||
export interface RoomListCustomisations<Room> {
|
// (undocumented)
|
||||||
isRoomVisible?(room: Room): boolean;
|
new (api: Api): Module;
|
||||||
}
|
// (undocumented)
|
||||||
|
readonly moduleApiVersion: string;
|
||||||
// @alpha @deprecated (undocumented)
|
// (undocumented)
|
||||||
export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
|
readonly prototype: Module;
|
||||||
|
}
|
||||||
// @public
|
|
||||||
export type Translations = Record<string, {
|
// @public
|
||||||
[ietfLanguageTag: string]: string;
|
export class ModuleIncompatibleError extends Error {
|
||||||
}>;
|
constructor(pluginVersion: string);
|
||||||
|
}
|
||||||
// @alpha @deprecated (undocumented)
|
|
||||||
export interface UserIdentifierCustomisations {
|
// @public
|
||||||
getDisplayUserIdentifier(userId: string, opts: {
|
export class ModuleLoader {
|
||||||
roomId?: string;
|
constructor(api: Api);
|
||||||
withDisplayName?: boolean;
|
// Warning: (ae-forgotten-export) The symbol "ModuleExport" needs to be exported by the entry point index.d.ts
|
||||||
}): string | null;
|
//
|
||||||
}
|
// (undocumented)
|
||||||
|
load(moduleExport: ModuleExport): Promise<void>;
|
||||||
// @public
|
// (undocumented)
|
||||||
export type Variables = {
|
start(): Promise<void>;
|
||||||
count?: number;
|
}
|
||||||
[key: string]: number | string | undefined;
|
|
||||||
};
|
// @alpha
|
||||||
|
export type OriginalComponentProps = {
|
||||||
// @alpha @deprecated (undocumented)
|
showUrlPreview?: boolean;
|
||||||
export interface WidgetPermissionsCustomisations<Widget, Capability> {
|
};
|
||||||
preapproveCapabilities?(widget: Widget, requestedCapabilities: Set<Capability>): Promise<Set<Capability>>;
|
|
||||||
}
|
// @alpha @deprecated (undocumented)
|
||||||
|
export interface RoomListCustomisations<Room> {
|
||||||
// @alpha @deprecated (undocumented)
|
isRoomVisible?(room: Room): boolean;
|
||||||
export interface WidgetVariablesCustomisations {
|
}
|
||||||
isReady?(): Promise<void>;
|
|
||||||
provideVariables?(): {
|
// @alpha @deprecated (undocumented)
|
||||||
currentUserId: string;
|
export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
|
||||||
userDisplayName?: string;
|
|
||||||
userHttpAvatarUrl?: string;
|
// @public
|
||||||
clientId?: string;
|
export type Translations = Record<string, {
|
||||||
clientTheme?: string;
|
[ietfLanguageTag: string]: string;
|
||||||
clientLanguage?: string;
|
}>;
|
||||||
deviceId?: string;
|
|
||||||
baseUrl?: string;
|
// @alpha @deprecated (undocumented)
|
||||||
};
|
export interface UserIdentifierCustomisations {
|
||||||
}
|
getDisplayUserIdentifier(userId: string, opts: {
|
||||||
|
roomId?: string;
|
||||||
// (No @packageDocumentation comment for this package)
|
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/react-dom": "^19.0.4",
|
||||||
"@types/semver": "^7.5.8",
|
"@types/semver": "^7.5.8",
|
||||||
"@vitest/coverage-v8": "^3.0.4",
|
"@vitest/coverage-v8": "^3.0.4",
|
||||||
|
"matrix-js-sdk": "^37.5.0",
|
||||||
"matrix-web-i18n": "^3.3.0",
|
"matrix-web-i18n": "^3.3.0",
|
||||||
"semver": "^7.6.3",
|
"semver": "^7.6.3",
|
||||||
"typescript": "^5.7.3",
|
"typescript": "^5.7.3",
|
||||||
@@ -50,6 +51,7 @@
|
|||||||
"@matrix-org/react-sdk-module-api": "*",
|
"@matrix-org/react-sdk-module-api": "*",
|
||||||
"@types/react": "*",
|
"@types/react": "*",
|
||||||
"@types/react-dom": "*",
|
"@types/react-dom": "*",
|
||||||
|
"matrix-js-sdk": "*",
|
||||||
"matrix-web-i18n": "*",
|
"matrix-web-i18n": "*",
|
||||||
"react": "^19"
|
"react": "^19"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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 { LegacyCustomisationsApiExtension } from "./legacy-customisations";
|
||||||
import { ConfigApi } from "./config";
|
import { ConfigApi } from "./config";
|
||||||
import { I18nApi } from "./i18n";
|
import { I18nApi } from "./i18n";
|
||||||
|
import { CustomComponentsApi } from "./custom-components";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Module interface for modules to implement.
|
* Module interface for modules to implement.
|
||||||
@@ -86,6 +87,12 @@ export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiEx
|
|||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
readonly rootNode: HTMLElement;
|
readonly rootNode: HTMLElement;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The custom message component API.
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
readonly customComponents: CustomComponentsApi;
|
||||||
/**
|
/**
|
||||||
* Create a ReactDOM root for rendering React components.
|
* Create a ReactDOM root for rendering React components.
|
||||||
* Exposed to allow modules to avoid needing to bundle their own ReactDOM.
|
* 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 { Api, Module, ModuleFactory } from "./api";
|
||||||
export type { Config, ConfigApi } from "./api/config";
|
export type { Config, ConfigApi } from "./api/config";
|
||||||
export type { I18nApi, Variables, Translations } from "./api/i18n";
|
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-modules";
|
||||||
export type * from "./api/legacy-customisations";
|
export type * from "./api/legacy-customisations";
|
||||||
|
|||||||
Reference in New Issue
Block a user