Add message editing to wysiwyg composer

package.json

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

res/css/_components.pcss

@@ -299,8 +299,10 @@
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
-@import "./views/rooms/wysiwyg_composer/_FormattingButtons.pcss";
-@import "./views/rooms/wysiwyg_composer/_WysiwygComposer.pcss";
+@import "./views/rooms/wysiwyg_composer/components/_Editor.pcss";
+@import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
+@import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
+@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";

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

@@ -0,0 +1,58 @@
+/*
+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_EditWysiwygComposer {
+    --EditWysiwygComposer-padding-inline: 3px;
+
+    display: flex;
+    flex-direction: column;
+    max-width: 100%; /* disable overflow */
+    width: auto;
+    gap: 8px;
+    padding: 8px var(--EditWysiwygComposer-padding-inline);
+
+    .mx_WysiwygComposer_content {
+        border-radius: 4px;
+        border: solid 1px $primary-hairline-color;
+        background-color: $background;
+        max-height: 200px;
+        padding: 3px 6px;
+
+        &:focus {
+            border-color: rgba($accent, 0.5); /* Only ever used here */
+        }
+    }
+
+    .mx_EditWysiwygComposer_buttons {
+        display: flex;
+        flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
+        justify-content: flex-end;
+        gap: 5px;
+        margin-inline-start: auto;
+
+        .mx_AccessibleButton {
+            flex: 1;
+            box-sizing: border-box;
+            min-width: 100px; /* magic number to align the edge of the button with the input area */
+        }
+    }
+
+    .mx_FormattingButtons_Button {
+        &:first-child {
+            margin-left: 0px;
+        }
+    }
+}

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_WysiwygComposer {
+.mx_SendWysiwygComposer {
     flex: 1;
     display: flex;
     flex-direction: column;

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -0,0 +1,37 @@
+/*
+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_container {
+    position: relative;
+
+    @keyframes visualbell {
+        from { background-color: $visual-bell-bg-color; }
+        to { background-color: $background; }
+    }
+
+    .mx_WysiwygComposer_content {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+        overflow-x: hidden;
+
+        /* Force caret nodes to be selected in full so that they can be */
+        /* navigated through in a single keypress */
+        .caretNode {
+            user-select: all;
+        }
+    }
+}

res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss → res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -45,7 +45,7 @@ limitations under the License.
             left: 6px;
             height: 16px;
             width: 16px;
-            background-color: $icon-button-color;
+            background-color: $tertiary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
             mask-position: center;

src/components/views/messages/TextualBody.tsx

@@ -48,6 +48,7 @@ import RoomContext from "../../../contexts/RoomContext";
 import AccessibleButton from '../elements/AccessibleButton';
 import { options as linkifyOpts } from "../../../linkify-matrix";
 import { getParentEventId } from '../../../utils/Reply';
+import { EditWysiwygComposer } from '../rooms/wysiwyg_composer';
 
 const MAX_HIGHLIGHT_LENGTH = 4096;
 
@@ -562,7 +563,10 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
     render() {
         if (this.props.editState) {
-            return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
+            const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
+            return isWysiwygComposerEnabled ?
+                <EditWysiwygComposer editorStateTransfer={this.props.editState} className="mx_EventTile_content" /> :
+                <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
         }
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();

src/components/views/rooms/MessageComposer.tsx

@@ -58,7 +58,8 @@ import {
     startNewVoiceBroadcastRecording,
     VoiceBroadcastRecordingsStore,
 } from '../../../voice-broadcast';
-import { WysiwygComposer } from './wysiwyg_composer/WysiwygComposer';
+import { SendWysiwygComposer, sendMessage } from './wysiwyg_composer/';
+import { MatrixClientProps, withMatrixClientHOC } from '../../../contexts/MatrixClientContext';
 
 let instanceCount = 0;
 
@@ -78,7 +79,7 @@ function SendButton(props: ISendButtonProps) {
     );
 }
 
-interface IProps {
+interface IProps extends MatrixClientProps {
     room: Room;
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
@@ -89,6 +90,7 @@ interface IProps {
 }
 
 interface IState {
+    composerContent: string;
     isComposerEmpty: boolean;
     haveRecording: boolean;
     recordingTimeLeftSeconds?: number;
@@ -100,13 +102,12 @@ interface IState {
     showVoiceBroadcastButton: boolean;
 }
 
-export default class MessageComposer extends React.Component<IProps, IState> {
+export class MessageComposer extends React.Component<IProps, IState> {
     private dispatcherRef?: string;
     private messageComposerInput = createRef<SendMessageComposerClass>();
     private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
     private ref: React.RefObject<HTMLDivElement> = createRef();
     private instanceId: number;
-    private composerSendMessage?: () => void;
 
     private _voiceRecording: Optional<VoiceMessageRecording>;
 
@@ -124,6 +125,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
         this.state = {
             isComposerEmpty: true,
+            composerContent: '',
             haveRecording: false,
             recordingTimeLeftSeconds: undefined, // when set to a number, shows a toast
             isMenuOpen: false,
@@ -315,7 +317,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         }
 
         this.messageComposerInput.current?.sendMessage();
-        this.composerSendMessage?.();
+
+        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
+        if (isWysiwygComposerEnabled) {
+            const { permalinkCreator, relation, replyToEvent } = this.props;
+            sendMessage(this.state.composerContent,
+                { mxClient: this.props.mxClient, roomContext: this.context, permalinkCreator, relation, replyToEvent });
+            dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
+        }
     };
 
     private onChange = (model: EditorModel) => {
@@ -326,6 +335,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     private onWysiwygChange = (content: string) => {
         this.setState({
+            composerContent: content,
             isComposerEmpty: content?.length === 0,
         });
     };
@@ -402,16 +412,11 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         if (canSendMessages) {
             if (isWysiwygComposerEnabled) {
                 controls.push(
-                    <WysiwygComposer key="controls_input"
+                    <SendWysiwygComposer 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>,
+                        onSend={this.sendMessage}
+                    />,
                 );
             } else {
                 controls.push(
@@ -551,3 +556,6 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         );
     }
 }
+
+const MessageComposerWithMatrixClient = withMatrixClientHOC(MessageComposer);
+export default MessageComposerWithMatrixClient;

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

@@ -0,0 +1,64 @@
+/*
+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, { forwardRef, RefObject } from 'react';
+import classNames from 'classnames';
+
+import EditorStateTransfer from '../../../../utils/EditorStateTransfer';
+import { WysiwygComposer } from './components/WysiwygComposer';
+import { EditionButtons } from './components/EditionButtons';
+import { useWysiwygEditActionHandler } from './hooks/useWysiwygEditActionHandler';
+import { useEditing } from './hooks/useEditing';
+import { useInitialContent } from './hooks/useInitialContent';
+
+interface ContentProps {
+    disabled: boolean;
+}
+
+const Content = forwardRef<HTMLElement, ContentProps>(
+    function Content({ disabled }: ContentProps, forwardRef: RefObject<HTMLElement>) {
+        useWysiwygEditActionHandler(disabled, forwardRef);
+        return null;
+    },
+);
+
+interface EditWysiwygComposerProps {
+    disabled?: boolean;
+    onChange?: (content: string) => void;
+    editorStateTransfer: EditorStateTransfer;
+    className?: string;
+}
+
+export function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
+    const initialContent = useInitialContent(editorStateTransfer);
+    const isReady = !editorStateTransfer || Boolean(initialContent);
+
+    const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(initialContent, editorStateTransfer);
+
+    return isReady && <WysiwygComposer
+        className={classNames("mx_EditWysiwygComposer", className)}
+        initialContent={initialContent}
+        onChange={onChange}
+        onSend={editMessage}
+        {...props}>
+        { (ref) => (
+            <>
+                <Content disabled={props.disabled} ref={ref} />
+                <EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} isSaveDisabled={isSaveDisabled} />
+            </>)
+        }
+    </WysiwygComposer>;
+}

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

@@ -0,0 +1,46 @@
+/*
+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, { forwardRef, RefObject } from 'react';
+import { FormattingFunctions } from '@matrix-org/matrix-wysiwyg';
+
+import { useWysiwygSendActionHandler } from './hooks/useWysiwygSendActionHandler';
+import { WysiwygComposer } from './components/WysiwygComposer';
+
+interface SendWysiwygComposerProps {
+    disabled?: boolean;
+    onChange: (content: string) => void;
+    onSend: () => void;
+}
+interface ContentProps {
+    disabled: boolean;
+    formattingFunctions: FormattingFunctions;
+}
+
+const Content = forwardRef<HTMLElement, ContentProps>(
+    function Content({ disabled, formattingFunctions: wysiwyg }: ContentProps, forwardRef: RefObject<HTMLElement>) {
+        useWysiwygSendActionHandler(disabled, forwardRef, wysiwyg);
+        return null;
+    },
+);
+
+export function SendWysiwygComposer(props: SendWysiwygComposerProps) {
+    return (
+        <WysiwygComposer className="mx_SendWysiwygComposer" {...props}>{ (ref, wysiwyg) => (
+            <Content disabled={props.disabled} ref={ref} formattingFunctions={wysiwyg} />
+        ) }
+        </WysiwygComposer>);
+}