Merge pull request #9503 from matrix-org/feat/add-plain-text-mode

Feat/add plain text mode

res/css/views/rooms/_MessageComposer.pcss

@@ -240,7 +240,7 @@ limitations under the License.
 */
 .mx_MessageComposer_wysiwyg {
     .mx_MessageComposer_e2eIcon.mx_E2EIcon,.mx_MessageComposer_button, .mx_MessageComposer_sendMessage {
-        margin-top: 22px;
+        margin-top: 28px;
     }
 }
 
@@ -264,6 +264,14 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
 }
 
+.mx_MessageComposer_plain_text::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/plain_text.svg');
+}
+
+.mx_MessageComposer_rich_text::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/rich_text.svg');
+}
+
 .mx_MessageComposer_location::before {
     mask-image: url('$(res)/img/element-icons/room/composer/location.svg');
 }

src/components/views/rooms/MessageComposer.tsx

@@ -60,6 +60,7 @@ import {
 } from '../../../voice-broadcast';
 import { SendWysiwygComposer, sendMessage } from './wysiwyg_composer/';
 import { MatrixClientProps, withMatrixClientHOC } from '../../../contexts/MatrixClientContext';
+import { htmlToPlainText } from '../../../utils/room/htmlToPlaintext';
 
 let instanceCount = 0;
 
@@ -100,6 +101,9 @@ interface IState {
     showStickersButton: boolean;
     showPollsButton: boolean;
     showVoiceBroadcastButton: boolean;
+    isWysiwygLabEnabled: boolean;
+    isRichTextEnabled: boolean;
+    initialComposerContent: string;
 }
 
 export class MessageComposer extends React.Component<IProps, IState> {
@@ -117,6 +121,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
     public static defaultProps = {
         compact: false,
         showVoiceBroadcastButton: false,
+        isRichTextEnabled: true,
     };
 
     public constructor(props: IProps) {
@@ -133,13 +138,17 @@ export class MessageComposer extends React.Component<IProps, IState> {
             showStickersButton: SettingsStore.getValue("MessageComposerInput.showStickersButton"),
             showPollsButton: SettingsStore.getValue("MessageComposerInput.showPollsButton"),
             showVoiceBroadcastButton: SettingsStore.getValue(Features.VoiceBroadcast),
+            isWysiwygLabEnabled: SettingsStore.getValue<boolean>("feature_wysiwyg_composer"),
+            isRichTextEnabled: true,
+            initialComposerContent: '',
         };
 
         this.instanceId = instanceCount++;
 
         SettingsStore.monitorSetting("MessageComposerInput.showStickersButton", null);
         SettingsStore.monitorSetting("MessageComposerInput.showPollsButton", null);
         SettingsStore.monitorSetting(Features.VoiceBroadcast, null);
+        SettingsStore.monitorSetting("feature_wysiwyg_composer", null);
     }
 
     private get voiceRecording(): Optional<VoiceMessageRecording> {
@@ -220,6 +229,12 @@ export class MessageComposer extends React.Component<IProps, IState> {
                         }
                         break;
                     }
+                    case "feature_wysiwyg_composer": {
+                        if (this.state.isWysiwygLabEnabled !== settingUpdatedPayload.newValue) {
+                            this.setState({ isWysiwygLabEnabled: Boolean(settingUpdatedPayload.newValue) });
+                        }
+                        break;
+                    }
                 }
             }
         }
@@ -318,12 +333,13 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
         this.messageComposerInput.current?.sendMessage();
 
-        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
-        if (isWysiwygComposerEnabled) {
+        if (this.state.isWysiwygLabEnabled) {
             const { permalinkCreator, relation, replyToEvent } = this.props;
             sendMessage(this.state.composerContent,
+                this.state.isRichTextEnabled,
                 { mxClient: this.props.mxClient, roomContext: this.context, permalinkCreator, relation, replyToEvent });
             dis.dispatch({ action: Action.ClearAndFocusSendMessageComposer });
+            this.setState({ composerContent: '', initialComposerContent: '' });
         }
     };
 
@@ -340,6 +356,16 @@ export class MessageComposer extends React.Component<IProps, IState> {
         });
     };
 
+    private onRichTextToggle = () => {
+        this.setState(state => ({
+            isRichTextEnabled: !state.isRichTextEnabled,
+            initialComposerContent: !state.isRichTextEnabled ?
+                state.composerContent :
+                // TODO when available use rust model plain text
+                htmlToPlainText(state.composerContent),
+        }));
+    };
+
     private onVoiceStoreUpdate = () => {
         this.updateRecordingState();
     };
@@ -395,7 +421,6 @@ export class MessageComposer extends React.Component<IProps, IState> {
     }
 
     public render() {
-        const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
         const controls = [
             this.props.e2eStatus ?
                 <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> :
@@ -410,12 +435,14 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
         const canSendMessages = this.context.canSendMessages && !this.context.tombstone;
         if (canSendMessages) {
-            if (isWysiwygComposerEnabled) {
+            if (this.state.isWysiwygLabEnabled) {
                 controls.push(
                     <SendWysiwygComposer key="controls_input"
                         disabled={this.state.haveRecording}
                         onChange={this.onWysiwygChange}
                         onSend={this.sendMessage}
+                        isRichTextEnabled={this.state.isRichTextEnabled}
+                        initialContent={this.state.initialComposerContent}
                     />,
                 );
             } else {
@@ -503,7 +530,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
             "mx_MessageComposer": true,
             "mx_MessageComposer--compact": this.props.compact,
             "mx_MessageComposer_e2eStatus": this.props.e2eStatus != undefined,
-            "mx_MessageComposer_wysiwyg": isWysiwygComposerEnabled,
+            "mx_MessageComposer_wysiwyg": this.state.isWysiwygLabEnabled && this.state.isRichTextEnabled,
         });
 
         return (
@@ -532,6 +559,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
                             showLocationButton={!window.electron}
                             showPollsButton={this.state.showPollsButton}
                             showStickersButton={this.showStickersButton}
+                            showComposerModeButton={this.state.isWysiwygLabEnabled}
+                            isRichTextEnabled={this.state.isRichTextEnabled}
+                            onComposerModeClick={this.onRichTextToggle}
                             toggleButtonMenu={this.toggleButtonMenu}
                             showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
                             onStartVoiceBroadcastClick={() => {

src/components/views/rooms/MessageComposerButtons.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import classNames from 'classnames';
 import { IEventRelation } from "matrix-js-sdk/src/models/event";
 import { M_POLL_START } from "matrix-events-sdk";
-import React, { createContext, ReactElement, useContext, useRef } from 'react';
+import React, { createContext, MouseEventHandler, ReactElement, useContext, useRef } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
@@ -55,6 +55,9 @@ interface IProps {
     toggleButtonMenu: () => void;
     showVoiceBroadcastButton: boolean;
     onStartVoiceBroadcastClick: () => void;
+    isRichTextEnabled: boolean;
+    showComposerModeButton: boolean;
+    onComposerModeClick: () => void;
 }
 
 type OverflowMenuCloser = () => void;
@@ -85,6 +88,8 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
     } else {
         mainButtons = [
             emojiButton(props),
+            props.showComposerModeButton &&
+                <ComposerModeButton key="composerModeButton" isRichTextEnabled={props.isRichTextEnabled} onClick={props.onComposerModeClick} />,
             uploadButton(), // props passed via UploadButtonContext
         ];
         moreButtons = [
@@ -397,4 +402,23 @@ function showLocationButton(
     );
 }
 
+interface WysiwygToggleButtonProps {
+    isRichTextEnabled: boolean;
+    onClick: MouseEventHandler<HTMLDivElement>;
+}
+
+function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonProps) {
+    const title = isRichTextEnabled ? _t("Show plain text") : _t("Show formatting");
+
+    return <CollapsibleButton
+        className="mx_MessageComposer_button"
+        iconClassName={classNames({
+            "mx_MessageComposer_plain_text": isRichTextEnabled,
+            "mx_MessageComposer_rich_text": !isRichTextEnabled,
+        })}
+        onClick={onClick}
+        title={title}
+    />;
+}
+
 export default MessageComposerButtons;

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

@@ -15,32 +15,38 @@ 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';
+import { PlainTextComposer } from './components/PlainTextComposer';
+import { ComposerFunctions } from './types';
 
-interface SendWysiwygComposerProps {
-    disabled?: boolean;
-    onChange: (content: string) => void;
-    onSend: () => void;
-}
 interface ContentProps {
     disabled: boolean;
-    formattingFunctions: FormattingFunctions;
+    composerFunctions: ComposerFunctions;
 }
 
 const Content = forwardRef<HTMLElement, ContentProps>(
-    function Content({ disabled, formattingFunctions: wysiwyg }: ContentProps, forwardRef: RefObject<HTMLElement>) {
-        useWysiwygSendActionHandler(disabled, forwardRef, wysiwyg);
+    function Content({ disabled, composerFunctions }: ContentProps, forwardRef: RefObject<HTMLElement>) {
+        useWysiwygSendActionHandler(disabled, forwardRef, composerFunctions);
         return null;
     },
 );
 
-export function SendWysiwygComposer(props: SendWysiwygComposerProps) {
-    return (
-        <WysiwygComposer className="mx_SendWysiwygComposer" {...props}>{ (ref, wysiwyg) => (
-            <Content disabled={props.disabled} ref={ref} formattingFunctions={wysiwyg} />
+interface SendWysiwygComposerProps {
+    initialContent?: string;
+    isRichTextEnabled: boolean;
+    disabled?: boolean;
+    onChange: (content: string) => void;
+    onSend: () => void;
+}
+
+export function SendWysiwygComposer({ isRichTextEnabled, ...props }: SendWysiwygComposerProps) {
+    const Composer = isRichTextEnabled ? WysiwygComposer : PlainTextComposer;
+
+    return <Composer className="mx_SendWysiwygComposer" {...props}>
+        { (ref, composerFunctions) => (
+            <Content disabled={props.disabled} ref={ref} composerFunctions={composerFunctions} />
         ) }
-        </WysiwygComposer>);
+    </Composer>;
 }

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

@@ -0,0 +1,56 @@
+/*
+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, { MutableRefObject, ReactNode } from 'react';
+
+import { useComposerFunctions } from '../hooks/useComposerFunctions';
+import { usePlainTextInitialization } from '../hooks/usePlainTextInitialization';
+import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
+import { useSetCursorPosition } from '../hooks/useSetCursorPosition';
+import { ComposerFunctions } from '../types';
+import { Editor } from "./Editor";
+
+interface PlainTextComposerProps {
+    disabled?: boolean;
+    onChange?: (content: string) => void;
+    onSend: () => void;
+    initialContent?: string;
+    className?: string;
+    children?: (
+        ref: MutableRefObject<HTMLDivElement | null>,
+        composerFunctions: ComposerFunctions,
+    ) => ReactNode;
+}
+
+export function PlainTextComposer({
+    className, disabled, onSend, onChange, children, initialContent }: PlainTextComposerProps,
+) {
+    const { ref, onInput, onPaste, onKeyDown } = usePlainTextListeners(onChange, onSend);
+    const composerFunctions = useComposerFunctions(ref);
+    usePlainTextInitialization(initialContent, ref);
+    useSetCursorPosition(disabled, ref);
+
+    return <div
+        data-testid="PlainTextComposer"
+        className={className}
+        onInput={onInput}
+        onPaste={onPaste}
+        onKeyDown={onKeyDown}
+    >
+        <Editor ref={ref} disabled={disabled} />
+        { children?.(ref, composerFunctions) }
+    </div>;
+}

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

@@ -20,6 +20,7 @@ import { useWysiwyg, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 import { FormattingButtons } from './FormattingButtons';
 import { Editor } from './Editor';
 import { useInputEventProcessor } from '../hooks/useInputEventProcessor';
+import { useSetCursorPosition } from '../hooks/useSetCursorPosition';
 
 interface WysiwygComposerProps {
     disabled?: boolean;
@@ -47,10 +48,13 @@ export const WysiwygComposer = memo(function WysiwygComposer(
         }
     }, [onChange, content, disabled]);
 
+    const isReady = isWysiwygReady && !disabled;
+    useSetCursorPosition(!isReady, ref);
+
     return (
-        <div className={className}>
+        <div data-testid="WysiwygComposer" className={className}>
             <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
-            <Editor ref={ref} disabled={!isWysiwygReady || disabled} />
+            <Editor ref={ref} disabled={!isReady} />
             { children?.(ref, wysiwyg) }
         </div>
     );

src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts

@@ -0,0 +1,27 @@
+/*
+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 { RefObject, useMemo } from "react";
+
+export function useComposerFunctions(ref: RefObject<HTMLDivElement>) {
+    return useMemo(() => ({
+        clear: () => {
+            if (ref.current) {
+                ref.current.innerHTML = '';
+            }
+        },
+    }), [ref]);
+}