Composer file upload Module API

apps/web/playwright/e2e/messages/messages.spec.ts

@@ -252,6 +252,7 @@ test.describe("Message url previews", () => {
                         "og:title": "A simple site",
                         "og:description": "And with a brief description",
                         "og:image": mxc,
+                        "og:image:alt": "The riot logo",
                     },
                 });
             });

apps/web/res/css/_common.pcss

@@ -598,6 +598,9 @@ legend {
         .mx_AccessSecretStorageDialog button,
         .mx_InviteDialog_section button,
         .mx_InviteDialog_editor button,
+        .mx_ModuleOuterDialog button,
+        [data-kind|="primary"],
+        [data-kind|="secondary"],
         [class|="maplibregl"]
     ),
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
@@ -620,11 +623,14 @@ legend {
     button:not(
         .mx_Dialog_nonDialogButton,
         [class|="maplibregl"],
+        [data-kind|="primary"],
+        [data-kind|="secondary"],
         .mx_AccessibleButton,
         .mx_UserProfileSettings button,
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
+        .mx_ModuleOuterDialog button,
         .mx_EncryptionUserSettingsTab button
     ):last-child {
     margin-right: 0px;
@@ -634,6 +640,9 @@ legend {
     button:not(
         .mx_Dialog_nonDialogButton,
         [class|="maplibregl"],
+        [data-kind|="primary"],
+        [data-kind|="secondary"],
+        .mx_ModuleOuterDialog button,
         .mx_AccessibleButton,
         .mx_UserProfileSettings button,
         .mx_ThemeChoicePanel_CustomTheme button,
@@ -659,6 +668,7 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
+        .mx_ModuleOuterDialog button,
         .mx_EncryptionUserSettingsTab button
     ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
@@ -678,6 +688,7 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
+        .mx_ModuleOuterDialog button,
         .mx_EncryptionUserSettingsTab button
     ),
 .mx_Dialog_buttons input[type="submit"].danger {
@@ -695,7 +706,9 @@ legend {
 .mx_Dialog
     button:not(
         .mx_Dialog_nonDialogButton,
-        [class|="maplibregl"],
+        [data-kind|="primary"],
+        [data-kind|="secondary"],
+        .mx_ModuleOuterDialog button,
         .mx_AccessibleButton,
         .mx_UserProfileSettings button,
         .mx_ThemeChoicePanel_CustomTheme button,

apps/web/src/PosthogTrackers.ts

@@ -13,7 +13,6 @@ import { type Interaction as InteractionEvent } from "@matrix-org/analytics-even
 import { type PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction";
 import { type RoomListSortingAlgorithmChanged } from "@matrix-org/analytics-events/types/typescript/RoomListSortingAlgorithmChanged";
 import { type UrlPreviewRendered } from "@matrix-org/analytics-events/types/typescript/UrlPreviewRendered";
-import { type UrlPreview } from "@element-hq/web-shared-components";
 
 import PageType from "./PageTypes";
 import Views from "./Views";
@@ -151,7 +150,7 @@ export default class PosthogTrackers {
      * @param isEncrypted Whether the event (and effectively the room) was encrypted.
      * @param previews The previews generated from the event.
      */
-    public trackUrlPreview(eventId: string, isEncrypted: boolean, previews: UrlPreview[]): void {
+    public trackUrlPreview(eventId: string, isEncrypted: boolean, previews: { image?: unknown }[]): void {
         // Discount any previews that we have already tracked.
         if (this.previewedEventIds.get(eventId)) {
             return;

apps/web/src/components/views/rooms/MessageComposer.tsx

@@ -38,7 +38,10 @@ import { RecordingState } from "../../../audio/VoiceRecording";
 import type ResizeNotifier from "../../../utils/ResizeNotifier";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import SendMessageComposer, { type SendMessageComposer as SendMessageComposerClass } from "./SendMessageComposer";
-import { type ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
+import {
+    IComposerInsertEventContent,
+    type ComposerInsertPayload,
+} from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
 import type EditorModel from "../../../editor/model";
 import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
@@ -54,6 +57,7 @@ import { type MatrixClientProps, withMatrixClientHOC } from "../../../contexts/M
 import { UIFeature } from "../../../settings/UIFeature";
 import { formatTimeLeft } from "../../../DateUtils";
 import RoomReplacedSvg from "../../../../res/img/room_replaced.svg";
+import type { ComposerExtraContentPreview } from "@element-hq/element-web-module-api";
 
 // The prefix used when persisting editor drafts to localstorage.
 export const WYSIWYG_EDITOR_STATE_STORAGE_PREFIX = "mx_wysiwyg_state_";
@@ -101,6 +105,7 @@ interface IState {
     isWysiwygLabEnabled: boolean;
     isRichTextEnabled: boolean;
     initialComposerContent: string;
+    extraEventContent: Map<string, { content: Record<string, unknown>; renderer: ComposerExtraContentPreview }>;
 }
 
 type WysiwygComposerState = {
@@ -152,6 +157,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
             isWysiwygLabEnabled: isWysiwygLabEnabled,
             isRichTextEnabled: isRichTextEnabled,
             initialComposerContent: initialComposerContent,
+            extraEventContent: new Map(),
         };
 
         this.instanceId = instanceCount++;
@@ -276,6 +282,22 @@ export class MessageComposer extends React.Component<IProps, IState> {
                 }
                 break;
 
+            case Action.ComposerInsert: {
+                const composerInsertPayload = payload as IComposerInsertEventContent;
+                if (
+                    !composerInsertPayload.eventContent ||
+                    !composerInsertPayload.key ||
+                    !composerInsertPayload.previewRenderable
+                ) {
+                    this.setState((s) => {
+                        s.extraEventContent.set(composerInsertPayload.key, {
+                            content: composerInsertPayload.eventContent,
+                            renderer: composerInsertPayload.previewRenderable,
+                        });
+                    });
+                }
+                break;
+            }
             case Action.SettingUpdated: {
                 const settingUpdatedPayload = payload as SettingUpdatedPayload;
                 switch (settingUpdatedPayload.settingName) {
@@ -526,6 +548,17 @@ export class MessageComposer extends React.Component<IProps, IState> {
         }
     };
 
+    private readonly onExtraContentChange = (key: string, newContent: Record<string, unknown> | null): void => {
+        this.setState((s) => {
+            if (newContent === null) {
+                s.extraEventContent.delete(key);
+            } else {
+                s.extraEventContent.set(key, { ...s.extraEventContent.get(key)!, content: newContent });
+            }
+            return s;
+        });
+    };
+
     public render(): React.ReactNode {
         let leftIcon: false | JSX.Element = false;
         if (!this.state.isWysiwygLabEnabled) {

apps/web/src/components/views/rooms/MessageComposerButtons.tsx

@@ -23,6 +23,8 @@ import {
     StickerIcon,
     TextFormattingIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ComposerApiFileUploadLocal } from "@element-hq/element-web-module-api";
+import { MultiOptionButton } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import { CollapsibleButton } from "./CollapsibleButton";
@@ -43,6 +45,7 @@ import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
+import { ModuleApi } from "../../../modules/Api.ts";
 
 interface IProps {
     addEmoji: (emoji: string) => boolean;
@@ -89,7 +92,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
             ),
         ];
         moreButtons = [
-            uploadButton(), // props passed via UploadButtonContext
+            <UploadButton key="uploads" />, // props passed via UploadButtonContext
             showStickersButton(props),
             voiceRecordingButton(props, narrow),
             props.showPollsButton ? pollButton(room, props.relation) : null,
@@ -106,7 +109,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
             ) : (
                 emojiButton(props)
             ),
-            uploadButton(), // props passed via UploadButtonContext
+            <UploadButton key="uploads" />, // props passed via UploadButtonContext
         ];
         moreButtons = [
             showStickersButton(props),
@@ -164,9 +167,43 @@ function emojiButton(props: IProps): ReactElement {
     );
 }
 
-function uploadButton(): ReactElement {
-    return <UploadButton key="controls_upload" />;
-}
+const UploadButton: React.FC = () => {
+    const overflowMenuCloser = useContext(OverflowMenuContext);
+    const onLocalUploadClick = useContext(UploadButtonContext);
+    const { room } = useScopedRoomContext("room");
+
+    const onLocalClick = (): void => {
+        onLocalUploadClick?.();
+        overflowMenuCloser?.(); // close overflow menu
+    };
+
+    const options = [...ModuleApi.instance.composer.fileUploadOptions.values()].map((uploadOption) => {
+        if (uploadOption.type === ComposerApiFileUploadLocal) {
+            return {
+                icon: AttachmentIcon,
+                label: _t("common|attachment"),
+                onSelect: onLocalClick,
+            };
+        } else {
+            return {
+                icon: uploadOption.icon,
+                label: uploadOption.label,
+                onSelect: () => {
+                    uploadOption.onSelected(room!.roomId, (res) => {
+                        console.log("Do something with the result", res);
+                    });
+                },
+            };
+        }
+    });
+
+    return (
+        <MultiOptionButton
+            options={options}
+            multipleOptionsButton={{ label: _t("action|upload_file"), icon: AttachmentIcon }}
+        />
+    );
+};
 
 type UploadButtonFn = () => void;
 export const UploadButtonContext = createContext<UploadButtonFn | null>(null);
@@ -234,23 +271,6 @@ const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, rel
     );
 };
 
-// Must be rendered within an UploadButtonContextProvider
-const UploadButton: React.FC = () => {
-    const overflowMenuCloser = useContext(OverflowMenuContext);
-    const uploadButtonFn = useContext(UploadButtonContext);
-
-    const onClick = (): void => {
-        uploadButtonFn?.();
-        overflowMenuCloser?.(); // close overflow menu
-    };
-
-    return (
-        <CollapsibleButton className="mx_MessageComposer_button" onClick={onClick} title={_t("common|attachment")}>
-            <AttachmentIcon />
-        </CollapsibleButton>
-    );
-};
-
 function showStickersButton(props: IProps): ReactElement | null {
     return props.showStickersButton ? (
         <CollapsibleButton

apps/web/src/components/views/rooms/SendMessageComposer.tsx

@@ -70,6 +70,7 @@ export function createMessageContent(
     model: EditorModel,
     replyToEvent: MatrixEvent | undefined,
     relation: IEventRelation | undefined,
+    extraEventContent?: Record<string, unknown>,
 ): RoomMessageEventContent {
     const isEmote = containsEmote(model);
     if (isEmote) {
@@ -85,6 +86,7 @@ export function createMessageContent(
     const content: RoomMessageEventContent = {
         msgtype: isEmote ? MsgType.Emote : MsgType.Text,
         body: body,
+        ...extraEventContent,
     };
     const formattedBody = htmlSerializeIfNeeded(model, {
         useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
@@ -130,6 +132,7 @@ interface ISendMessageComposerProps extends MatrixClientProps {
     disabled?: boolean;
     onChange?(model: EditorModel): void;
     toggleStickerPickerOpen: () => void;
+    extraEventContent?: Record<string, unknown>;
 }
 
 export class SendMessageComposer extends React.Component<ISendMessageComposerProps> {
@@ -160,6 +163,9 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
         const parts = this.restoreStoredEditorState(partCreator) || [];
         this.model = new EditorModel(parts, partCreator);
         this.sendHistoryManager = new SendHistoryManager(this.props.room.roomId, "mx_cider_history_");
+        this.state = {
+            extraEventContent: new Map(),
+        };
     }
 
     public componentDidMount(): void {
@@ -411,6 +417,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                     model,
                     replyToEvent,
                     this.props.relation,
+                    this.props.extraEventContent,
                 );
             }
             // don't bother sending an empty message
@@ -428,6 +435,8 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                 (actualRoomId: string) => this.props.mxClient.sendMessage(actualRoomId, threadId ?? null, content!),
                 this.props.mxClient,
             );
+            // Clear existing links
+            this.setState({ extraEventContent: new Map() });
             if (replyToEvent) {
                 // Clear reply_to_event as we put the message into the queue
                 // if the send fails, retry will handle resending.
@@ -638,6 +647,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
     private focusComposer = (): void => {
         this.editorRef.current?.focus();
     };
+    1;
 
     public render(): React.ReactNode {
         const threadId =

apps/web/src/dispatcher/payloads/ComposerInsertPayload.ts

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { type ActionPayload } from "../payloads";
 import { type Action } from "../actions";
 import { type TimelineRenderingType } from "../../contexts/RoomContext";
+import { ComposerExtraContentPreview } from "@element-hq/element-web-module-api";
 
 export enum ComposerType {
     Send = "send",
@@ -29,4 +30,13 @@ interface IComposerInsertPlaintextPayload extends IBaseComposerInsertPayload {
     text: string;
 }
 
-export type ComposerInsertPayload = IComposerInsertMentionPayload | IComposerInsertPlaintextPayload;
+export interface IComposerInsertEventContent<T = Record<string, unknown>> extends IBaseComposerInsertPayload {
+    key: string;
+    previewRenderable: ComposerExtraContentPreview<T>;
+    eventContent: T;
+}
+
+export type ComposerInsertPayload =
+    | IComposerInsertMentionPayload
+    | IComposerInsertPlaintextPayload
+    | IComposerInsertEventContent;

apps/web/src/modules/Api.ts

@@ -33,6 +33,7 @@ import { StoresApi } from "./StoresApi.ts";
 import { WidgetLifecycleApi } from "./WidgetLifecycleApi.ts";
 import { WidgetApi } from "./WidgetApi.ts";
 import { CustomisationsApi } from "./customisationsApi.ts";
+import { ComposerApi } from "./ComposerApi.ts";
 
 const legacyCustomisationsFactory = <T extends object>(baseCustomisations: T) => {
     let used = false;
@@ -94,6 +95,7 @@ export class ModuleApi implements Api {
     public readonly rootNode = document.getElementById("matrixchat")!;
     public readonly client = new ClientApi();
     public readonly stores = new StoresApi();
+    public readonly composer = new ComposerApi();
 
     public createRoot(element: Element): Root {
         return createRoot(element);