First step of matrix-wysiwyg integration

package.json

@@ -57,6 +57,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@matrix-org/analytics-events": "^0.2.0",
+    "@matrix-org/matrix-wysiwyg": "^0.0.2",
     "@matrix-org/react-sdk-module-api": "^0.0.3",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",

res/css/_components.pcss

@@ -295,6 +295,7 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/rooms/wysiwyg_composer/_WysiwygComposer.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";

res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss

@@ -0,0 +1,53 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_WysiwygComposer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    font-size: $font-14px;
+    /* fixed line height to prevent emoji from being taller than text */
+    line-height: $font-18px;
+    justify-content: center;
+    margin-right: 6px;
+    /* don't grow wider than available space */
+    min-width: 0;
+
+    .mx_WysiwygComposer_container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        /* min-height at this level so the mx_BasicMessageComposer_input */
+        /* still stays vertically centered when less than 55px. */
+        /* We also set this to ensure the voice message recording widget */
+        /* doesn't cause a jump. */
+        min-height: 55px;
+
+        .mx_WysiwygComposer_content {
+            border: 1px solid;
+            border-radius: 20px;
+            padding: 8px 10px;
+            /* this will center the contenteditable */
+            /* in it's parent vertically */
+            /* while keeping the autocomplete at the top */
+            /* of the composer. The parent needs to be a flex container for this to work. */
+            margin: auto 0;
+            /* max-height at this level so autocomplete doesn't get scrolled too */
+            max-height: 140px;
+            overflow-y: auto;
+        }
+    }
+}

src/components/views/rooms/MessageComposer.tsx

@@ -58,6 +58,7 @@ import {
     startNewVoiceBroadcastRecording,
     VoiceBroadcastRecordingsStore,
 } from '../../../voice-broadcast';
+import { WysiwygComposer } from './wysiwyg_composer/WysiwygComposer';
 
 let instanceCount = 0;
 
@@ -105,6 +106,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
     private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
     private ref: React.RefObject<HTMLDivElement> = createRef();
     private instanceId: number;
+    private composerSendMessage?: () => void;
 
     private _voiceRecording: Optional<VoiceMessageRecording>;
 
@@ -313,6 +315,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
 
         this.messageComposerInput.current?.sendMessage();
+        this.composerSendMessage?.();
     };
 
     private onChange = (model: EditorModel) => {
@@ -321,6 +324,12 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         });
     };
 
+    private onWysiwygChange = (content: string) => {
+        this.setState({
+            isComposerEmpty: content?.length === 0,
+        });
+    };
+
     private onVoiceStoreUpdate = () => {
         this.updateRecordingState();
     };
@@ -394,20 +403,37 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
         const canSendMessages = this.context.canSendMessages && !this.context.tombstone;
         if (canSendMessages) {
-            controls.push(
-                <SendMessageComposer
-                    ref={this.messageComposerInput}
-                    key="controls_input"
-                    room={this.props.room}
-                    placeholder={this.renderPlaceholderText()}
-                    permalinkCreator={this.props.permalinkCreator}
-                    relation={this.props.relation}
-                    replyToEvent={this.props.replyToEvent}
-                    onChange={this.onChange}
-                    disabled={this.state.haveRecording}
-                    toggleStickerPickerOpen={this.toggleStickerPickerOpen}
-                />,
-            );
+            const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
+
+            if (isWysiwygComposerEnabled) {
+                controls.push(
+                    <WysiwygComposer key="controls_input"
+                        disabled={this.state.haveRecording}
+                        onChange={this.onWysiwygChange}
+                        permalinkCreator={this.props.permalinkCreator}
+                        relation={this.props.relation}
+                        replyToEvent={this.props.replyToEvent}>
+                        { (sendMessage) => {
+                            this.composerSendMessage = sendMessage;
+                        } }
+                    </WysiwygComposer>,
+                );
+            } else {
+                controls.push(
+                    <SendMessageComposer
+                        ref={this.messageComposerInput}
+                        key="controls_input"
+                        room={this.props.room}
+                        placeholder={this.renderPlaceholderText()}
+                        permalinkCreator={this.props.permalinkCreator}
+                        relation={this.props.relation}
+                        replyToEvent={this.props.replyToEvent}
+                        onChange={this.onChange}
+                        disabled={this.state.haveRecording}
+                        toggleStickerPickerOpen={this.toggleStickerPickerOpen}
+                    />,
+                );
+            }
 
             controls.push(<VoiceRecordComposerTile
                 key="controls_voice_record"

src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx

@@ -0,0 +1,71 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useCallback, useState } from 'react';
+import { useWysiwyg } from "@matrix-org/matrix-wysiwyg";
+import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
+import { useRoomContext } from '../../../../contexts/RoomContext';
+import { sendMessage } from './message';
+import { RoomPermalinkCreator } from '../../../../utils/permalinks/Permalinks';
+import { useMatrixClientContext } from '../../../../contexts/MatrixClientContext';
+
+interface WysiwygProps {
+    disabled?: boolean;
+    onChange: (content: string) => void;
+    relation?: IEventRelation;
+    replyToEvent?: MatrixEvent;
+    permalinkCreator: RoomPermalinkCreator;
+    includeReplyLegacyFallback?: boolean;
+    children?: (sendMessage: () => void) => void;
+}
+
+export function WysiwygComposer(
+    { disabled = false, onChange, children, ...props }: WysiwygProps,
+) {
+    const roomContext = useRoomContext();
+    const mxClient = useMatrixClientContext();
+
+    const [content, setContent] = useState<string>();
+    const { ref, isWysiwygReady, wysiwyg } = useWysiwyg({ onChange: (_content) => {
+        setContent(_content);
+        onChange(_content);
+    } });
+
+    const memoizedSendMessage = useCallback(() => {
+        sendMessage(content, { mxClient, roomContext, ...props });
+        wysiwyg.clear();
+        ref.current?.focus();
+    }, [content, mxClient, roomContext, wysiwyg, props, ref]);
+
+    return (
+        <div className="mx_WysiwygComposer">
+            <div className="mx_WysiwygComposer_container">
+                <div className="mx_WysiwygComposer_content"
+                    ref={ref}
+                    contentEditable={!disabled && isWysiwygReady}
+                    role="textbox"
+                    aria-multiline="true"
+                    aria-autocomplete="list"
+                    aria-haspopup="listbox"
+                    dir="auto"
+                    aria-disabled={disabled || !isWysiwygReady}
+                />
+            </div>
+            { children?.(memoizedSendMessage) }
+        </div>
+    );
+}