From 8c2a035302bf43eb32de4bbf00c82f6325d3b7bd Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 23 Jun 2025 10:54:23 +0100 Subject: [PATCH 1/5] Add support for Module API 1.3.0 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/RoomPreviewBar.tsx | 20 ++++++- src/modules/Api.ts | 11 +++- src/modules/Auth.ts | 41 +++++++++++++++ src/modules/Dialog.tsx | 52 +++++++++++++++++++ src/modules/Navigation.ts | 43 +++++++++++++++ src/modules/Profile.ts | 31 +++++++++++ src/modules/customComponentApi.ts | 22 +++++++- 7 files changed, 216 insertions(+), 4 deletions(-) create mode 100644 src/modules/Auth.ts create mode 100644 src/modules/Dialog.tsx create mode 100644 src/modules/Navigation.ts create mode 100644 src/modules/Profile.ts diff --git a/src/components/views/rooms/RoomPreviewBar.tsx b/src/components/views/rooms/RoomPreviewBar.tsx index 6939fec099a..b6edeeb9eb1 100644 --- a/src/components/views/rooms/RoomPreviewBar.tsx +++ b/src/components/views/rooms/RoomPreviewBar.tsx @@ -31,6 +31,7 @@ import { UIFeature } from "../../../settings/UIFeature"; import { ModuleRunner } from "../../../modules/ModuleRunner"; import { Icon as AskToJoinIcon } from "../../../../res/img/element-icons/ask-to-join.svg"; import Field from "../elements/Field"; +import ModuleApi from "../../../modules/Api.ts"; const MemberEventHtmlReasonField = "io.element.html_reason"; @@ -116,7 +117,7 @@ interface IState { reason?: string; } -export default class RoomPreviewBar extends React.Component { +class RoomPreviewBar extends React.Component { public static defaultProps = { onJoinClick() {}, }; @@ -747,3 +748,20 @@ export default class RoomPreviewBar extends React.Component { ); } } + +const WrappedRoomPreviewBar = (props: IProps): JSX.Element => { + const moduleRenderer = ModuleApi.customComponents.roomPreviewBarRenderer; + if (moduleRenderer) { + return moduleRenderer( + { + roomId: props.room?.roomId ?? props.roomId, + roomAlias: props.room?.getCanonicalAlias() ?? props.roomAlias, + }, + (props) => , + ); + } + + return ; +}; + +export default WrappedRoomPreviewBar; diff --git a/src/modules/Api.ts b/src/modules/Api.ts index db7dd803344..6ba89ebb861 100644 --- a/src/modules/Api.ts +++ b/src/modules/Api.ts @@ -21,7 +21,11 @@ import { WidgetPermissionCustomisations } from "../customisations/WidgetPermissi import { WidgetVariableCustomisations } from "../customisations/WidgetVariables.ts"; import { ConfigApi } from "./ConfigApi.ts"; import { I18nApi } from "./I18nApi.ts"; -import { CustomComponentsApi } from "./customComponentApi.ts"; +import { CustomComponentsApi } from "./customComponentApi.tsx"; +import { WatchableProfile } from "./Profile.ts"; +import { NavigationApi } from "./Navigation.ts"; +import { openDialog } from "./Dialog.tsx"; +import { overwriteAccountAuth } from "./Auth.ts"; const legacyCustomisationsFactory = (baseCustomisations: T) => { let used = false; @@ -57,6 +61,11 @@ class ModuleApi implements Api { legacyCustomisationsFactory(WidgetVariableCustomisations); /* eslint-enable @typescript-eslint/naming-convention */ + public readonly navigation = new NavigationApi(); + public readonly openDialog = openDialog; + public readonly overwriteAccountAuth = overwriteAccountAuth; + public readonly profile = new WatchableProfile(); + public readonly config = new ConfigApi(); public readonly i18n = new I18nApi(); public readonly customComponents = new CustomComponentsApi(); diff --git a/src/modules/Auth.ts b/src/modules/Auth.ts new file mode 100644 index 00000000000..b17c797943d --- /dev/null +++ b/src/modules/Auth.ts @@ -0,0 +1,41 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { type AccountAuthInfo } from "@element-hq/element-web-module-api"; + +import type { OverwriteLoginPayload } from "../dispatcher/payloads/OverwriteLoginPayload.ts"; +import { Action } from "../dispatcher/actions.ts"; +import defaultDispatcher from "../dispatcher/dispatcher.ts"; +import type { ActionPayload } from "../dispatcher/payloads.ts"; + +export async function overwriteAccountAuth(accountInfo: AccountAuthInfo): Promise { + const { promise, resolve } = Promise.withResolvers(); + + const onAction = (payload: ActionPayload): void => { + if (payload.action === Action.OnLoggedIn) { + // We want to wait for the new login to complete before returning. + // See `Action.OnLoggedIn` in dispatcher. + resolve(); + } + }; + const dispatcherRef = defaultDispatcher.register(onAction); + + defaultDispatcher.dispatch( + { + action: Action.OverwriteLogin, + credentials: { + ...accountInfo, + guest: false, + }, + }, + true, + ); // require to be sync to match inherited interface behaviour + + // wait for login to complete + await promise; + defaultDispatcher.unregister(dispatcherRef); +} diff --git a/src/modules/Dialog.tsx b/src/modules/Dialog.tsx new file mode 100644 index 00000000000..97d2839f0f0 --- /dev/null +++ b/src/modules/Dialog.tsx @@ -0,0 +1,52 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import React, { type ComponentType, type JSX, useCallback } from "react"; +import { type DialogProps, type DialogOptions, type DialogHandle } from "@element-hq/element-web-module-api"; + +import Modal from "../Modal"; +import BaseDialog from "../components/views/dialogs/BaseDialog.tsx"; + +const OuterDialog = ({ + title, + Dialog, + props, + onFinished, +}: { + title: string; + Dialog: ComponentType & P>; + props: P; + onFinished(ok: boolean, model: M | null): void; +}): JSX.Element => { + const close = useCallback(() => onFinished(false, null), [onFinished]); + const submit = useCallback((model: M) => onFinished(true, model), [onFinished]); + return ( + + + + ); +}; + +export function openDialog( + initialOptions: DialogOptions, + Dialog: ComponentType

>, + props: P, +): DialogHandle { + const { close, finished } = Modal.createDialog(OuterDialog, { + title: initialOptions.title, + Dialog, + props, + }); + + return { + finished: finished.then(([ok, model]) => ({ + ok: ok ?? false, + model: model ?? null, + })), + close: () => close(false, null), + }; +} diff --git a/src/modules/Navigation.ts b/src/modules/Navigation.ts new file mode 100644 index 00000000000..466cacff5df --- /dev/null +++ b/src/modules/Navigation.ts @@ -0,0 +1,43 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { type NavigationApi as INavigationApi } from "@element-hq/element-web-module-api"; + +import { navigateToPermalink } from "../utils/permalinks/navigator.ts"; +import { parsePermalink } from "../utils/permalinks/Permalinks.ts"; +import { getCachedRoomIDForAlias } from "../RoomAliasCache.ts"; +import { MatrixClientPeg } from "../MatrixClientPeg.ts"; +import dispatcher from "../dispatcher/dispatcher.ts"; +import { Action } from "../dispatcher/actions.ts"; +import SettingsStore from "../settings/SettingsStore.ts"; + +export class NavigationApi implements INavigationApi { + public async toMatrixToLink(link: string, join = false): Promise { + navigateToPermalink(link); + + const parts = parsePermalink(link); + if (parts?.roomIdOrAlias && join) { + let roomId: string | undefined = parts.roomIdOrAlias; + if (roomId.startsWith("#")) { + roomId = getCachedRoomIDForAlias(parts.roomIdOrAlias); + if (!roomId) { + // alias resolution failed + const result = await MatrixClientPeg.safeGet().getRoomIdForAlias(parts.roomIdOrAlias); + roomId = result.room_id; + } + } + + if (roomId) { + dispatcher.dispatch({ + action: Action.JoinRoom, + canAskToJoin: SettingsStore.getValue("feature_ask_to_join"), + roomId, + }); + } + } + } +} diff --git a/src/modules/Profile.ts b/src/modules/Profile.ts new file mode 100644 index 00000000000..efc5982b198 --- /dev/null +++ b/src/modules/Profile.ts @@ -0,0 +1,31 @@ +/* +Copyright 2025 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { type Profile, Watchable } from "@element-hq/element-web-module-api"; + +import { OwnProfileStore } from "../stores/OwnProfileStore.ts"; +import { UPDATE_EVENT } from "../stores/AsyncStore.ts"; + +export class WatchableProfile extends Watchable { + public constructor() { + super({}); + this.value = this.profile; + + OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileChange); + } + + private get profile(): Profile { + return { + userId: OwnProfileStore.instance.matrixClient?.getUserId() ?? undefined, + displayName: OwnProfileStore.instance.displayName ?? undefined, + }; + } + + private readonly onProfileChange = (): void => { + this.value = this.profile; + }; +} diff --git a/src/modules/customComponentApi.ts b/src/modules/customComponentApi.ts index db2f9ab58ac..57b3226792e 100644 --- a/src/modules/customComponentApi.ts +++ b/src/modules/customComponentApi.ts @@ -12,7 +12,7 @@ import type { CustomComponentsApi as ICustomComponentsApi, CustomMessageRenderFunction, CustomMessageComponentProps as ModuleCustomMessageComponentProps, - OriginalComponentProps, + OriginalMessageComponentProps, CustomMessageRenderHints as ModuleCustomCustomMessageRenderHints, MatrixEvent as ModuleMatrixEvent, } from "@element-hq/element-web-module-api"; @@ -72,6 +72,7 @@ export class CustomComponentsApi implements ICustomComponentsApi { ): void { this.registeredMessageRenderers.push({ eventTypeOrFilter: eventTypeOrFilter, renderer, hints }); } + /** * Select the correct renderer based on the event information. * @param mxEvent The message event being rendered. @@ -100,7 +101,7 @@ export class CustomComponentsApi implements ICustomComponentsApi { */ public renderMessage( props: CustomMessageComponentProps, - originalComponent?: (props?: OriginalComponentProps) => React.JSX.Element, + originalComponent?: (props?: OriginalMessageComponentProps) => React.JSX.Element, ): React.JSX.Element | null { const moduleEv = CustomComponentsApi.getModuleMatrixEvent(props.mxEvent); const renderer = moduleEv && this.selectRenderer(moduleEv); @@ -134,4 +135,21 @@ export class CustomComponentsApi implements ICustomComponentsApi { } return null; } + + private _roomPreviewBarRenderer?: CustomRoomPreviewBarRenderFunction; + + /** + * Get the custom room preview bar renderer, if any has been registered. + */ + public get roomPreviewBarRenderer(): CustomRoomPreviewBarRenderFunction | undefined { + return this._roomPreviewBarRenderer; + } + + /** + * Register a custom room preview bar renderer. + * @param renderer - the function that will render the custom room preview bar. + */ + public registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void { + this._roomPreviewBarRenderer = renderer; + } } From c6a5d288edb5db93c89eeae92926c4f06cc16542 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 7 Jul 2025 12:49:35 +0100 Subject: [PATCH 2/5] Add missing import Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/modules/customComponentApi.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/customComponentApi.ts b/src/modules/customComponentApi.ts index 57b3226792e..5121acc7eac 100644 --- a/src/modules/customComponentApi.ts +++ b/src/modules/customComponentApi.ts @@ -15,6 +15,7 @@ import type { OriginalMessageComponentProps, CustomMessageRenderHints as ModuleCustomCustomMessageRenderHints, MatrixEvent as ModuleMatrixEvent, + CustomRoomPreviewBarRenderFunction, } from "@element-hq/element-web-module-api"; import type React from "react"; From 61e266e8e5940bde1e8a1ab8a17929eef2373eb4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 17 Jul 2025 17:31:41 +0100 Subject: [PATCH 3/5] Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/modules/Api.ts | 2 +- src/modules/Profile.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/modules/Api.ts b/src/modules/Api.ts index 6ba89ebb861..ec3ef507338 100644 --- a/src/modules/Api.ts +++ b/src/modules/Api.ts @@ -21,7 +21,7 @@ import { WidgetPermissionCustomisations } from "../customisations/WidgetPermissi import { WidgetVariableCustomisations } from "../customisations/WidgetVariables.ts"; import { ConfigApi } from "./ConfigApi.ts"; import { I18nApi } from "./I18nApi.ts"; -import { CustomComponentsApi } from "./customComponentApi.tsx"; +import { CustomComponentsApi } from "./customComponentApi.ts"; import { WatchableProfile } from "./Profile.ts"; import { NavigationApi } from "./Navigation.ts"; import { openDialog } from "./Dialog.tsx"; diff --git a/src/modules/Profile.ts b/src/modules/Profile.ts index efc5982b198..4df3eb7a048 100644 --- a/src/modules/Profile.ts +++ b/src/modules/Profile.ts @@ -20,6 +20,7 @@ export class WatchableProfile extends Watchable { private get profile(): Profile { return { + isGuest: OwnProfileStore.instance.matrixClient?.isGuest() ?? false, userId: OwnProfileStore.instance.matrixClient?.getUserId() ?? undefined, displayName: OwnProfileStore.instance.displayName ?? undefined, }; From 68a27488135ce720bf5ccc513075768a17542273 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 23 Jul 2025 15:22:07 +0100 Subject: [PATCH 4/5] Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/modules/Api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/Api.ts b/src/modules/Api.ts index ec3ef507338..1f72784bd66 100644 --- a/src/modules/Api.ts +++ b/src/modules/Api.ts @@ -21,7 +21,7 @@ import { WidgetPermissionCustomisations } from "../customisations/WidgetPermissi import { WidgetVariableCustomisations } from "../customisations/WidgetVariables.ts"; import { ConfigApi } from "./ConfigApi.ts"; import { I18nApi } from "./I18nApi.ts"; -import { CustomComponentsApi } from "./customComponentApi.ts"; +import { CustomComponentsApi } from "./customComponentApi"; import { WatchableProfile } from "./Profile.ts"; import { NavigationApi } from "./Navigation.ts"; import { openDialog } from "./Dialog.tsx"; From 008b00497657d0269daeec483c66f7459bd6a97f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 24 Jul 2025 16:25:22 +0100 Subject: [PATCH 5/5] Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/modules/Auth.ts | 2 ++ src/stores/RoomViewStore.tsx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/modules/Auth.ts b/src/modules/Auth.ts index b17c797943d..38a2d1b2292 100644 --- a/src/modules/Auth.ts +++ b/src/modules/Auth.ts @@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details. */ import { type AccountAuthInfo } from "@element-hq/element-web-module-api"; +import { sleep } from "matrix-js-sdk/src/utils.ts"; import type { OverwriteLoginPayload } from "../dispatcher/payloads/OverwriteLoginPayload.ts"; import { Action } from "../dispatcher/actions.ts"; @@ -38,4 +39,5 @@ export async function overwriteAccountAuth(accountInfo: AccountAuthInfo): Promis // wait for login to complete await promise; defaultDispatcher.unregister(dispatcherRef); + await sleep(0); // wait for the next tick to ensure the login is fully processed } diff --git a/src/stores/RoomViewStore.tsx b/src/stores/RoomViewStore.tsx index 633d55f3f63..a17b879c1c7 100644 --- a/src/stores/RoomViewStore.tsx +++ b/src/stores/RoomViewStore.tsx @@ -510,8 +510,8 @@ export class RoomViewStore extends EventEmitter { }); // take a copy of roomAlias & roomId as they may change by the time the join is complete - const { roomAlias, roomId = payload.roomId } = this.state; - const address = roomAlias || roomId!; + const { roomAlias, roomId } = this.state; + const address = roomAlias || payload.roomId || roomId!; const viaServers = this.state.viaServers || []; try { const cli = MatrixClientPeg.safeGet();