Merge pull request #9661 from matrix-org/feat/emoji-picker-rich-text-mode

Add emoji handling for rich text mode

Author: andybalaam

package.json

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

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

@@ -22,8 +22,8 @@ import { PlainTextComposer } from './components/PlainTextComposer';
 import { ComposerFunctions } from './types';
 import { E2EStatus } from '../../../../utils/ShieldUtils';
 import E2EIcon from '../E2EIcon';
-import { EmojiButton } from '../EmojiButton';
 import { AboveLeftOf } from '../../../structures/ContextMenu';
+import { Emoji } from './components/Emoji';
 
 interface ContentProps {
     disabled?: boolean;
@@ -58,8 +58,8 @@ export function SendWysiwygComposer(
     return <Composer
         className="mx_SendWysiwygComposer"
         leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
-        // TODO add emoji support
-        rightComponent={<EmojiButton menuPosition={menuPosition} addEmoji={() => false} />}
+        rightComponent={(selectPreviousSelection) =>
+            <Emoji menuPosition={menuPosition} selectPreviousSelection={selectPreviousSelection} />}
         {...props}
     >
         { (ref, composerFunctions) => (

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

@@ -18,21 +18,23 @@ import classNames from 'classnames';
 import React, { CSSProperties, forwardRef, memo, MutableRefObject, ReactNode } from 'react';
 
 import { useIsExpanded } from '../hooks/useIsExpanded';
+import { useSelection } from '../hooks/useSelection';
 
 const HEIGHT_BREAKING_POINT = 20;
 
 interface EditorProps {
     disabled: boolean;
     placeholder?: string;
     leftComponent?: ReactNode;
-    rightComponent?: ReactNode;
+    rightComponent?: (selectPreviousSelection: () => void) => ReactNode;
 }
 
 export const Editor = memo(
     forwardRef<HTMLDivElement, EditorProps>(
         function Editor({ disabled, placeholder, leftComponent, rightComponent }: EditorProps, ref,
         ) {
             const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
+            const { onFocus, onBlur, selectPreviousSelection } = useSelection();
 
             return <div
                 data-testid="WysiwygComposerEditor"
@@ -55,9 +57,11 @@ export const Editor = memo(
                     aria-haspopup="listbox"
                     dir="auto"
                     aria-disabled={disabled}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
                     />
                 </div>
-                { rightComponent }
+                { rightComponent?.(selectPreviousSelection) }
             </div>;
         },
     ),

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

@@ -0,0 +1,45 @@
+/*
+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 from 'react';
+
+import { AboveLeftOf } from "../../../../structures/ContextMenu";
+import { EmojiButton } from "../../EmojiButton";
+import dis from '../../../../../dispatcher/dispatcher';
+import { ComposerInsertPayload } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
+import { Action } from "../../../../../dispatcher/actions";
+import { useRoomContext } from "../../../../../contexts/RoomContext";
+
+interface EmojiProps {
+    selectPreviousSelection: () => void;
+    menuPosition: AboveLeftOf;
+}
+
+export function Emoji({ selectPreviousSelection, menuPosition }: EmojiProps) {
+    const roomContext = useRoomContext();
+
+    return <EmojiButton menuPosition={menuPosition}
+        addEmoji={(emoji) => {
+            selectPreviousSelection();
+            dis.dispatch<ComposerInsertPayload>({
+                action: Action.ComposerInsert,
+                text: emoji,
+                timelineRenderingType: roomContext.timelineRenderingType,
+            });
+            return true;
+        }}
+    />;
+}

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

@@ -33,7 +33,9 @@ interface PlainTextComposerProps {
     initialContent?: string;
     className?: string;
     leftComponent?: ReactNode;
-    rightComponent?: ReactNode;
+    rightComponent?: (
+        selectPreviousSelection: () => void
+    ) => ReactNode;
     children?: (
         ref: MutableRefObject<HTMLDivElement | null>,
         composerFunctions: ComposerFunctions,

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

@@ -32,7 +32,9 @@ interface WysiwygComposerProps {
     initialContent?: string;
     className?: string;
     leftComponent?: ReactNode;
-    rightComponent?: ReactNode;
+    rightComponent?: (
+        selectPreviousSelection: () => void
+    ) => ReactNode;
     children?: (
         ref: MutableRefObject<HTMLDivElement | null>,
         wysiwyg: FormattingFunctions,

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

@@ -23,5 +23,8 @@ export function useComposerFunctions(ref: RefObject<HTMLDivElement>) {
                 ref.current.innerHTML = '';
             }
         },
+        insertText: (text: string) => {
+            // TODO
+        },
     }), [ref]);
 }

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

@@ -0,0 +1,59 @@
+/*
+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 { useCallback, useEffect, useRef } from "react";
+
+import useFocus from "../../../../../hooks/useFocus";
+import { setSelection } from "../utils/selection";
+
+type SubSelection = Pick<Selection, 'anchorNode' | 'anchorOffset' | 'focusNode' | 'focusOffset'>;
+
+export function useSelection() {
+    const selectionRef = useRef<SubSelection>({
+        anchorNode: null,
+        anchorOffset: 0,
+        focusNode: null,
+        focusOffset: 0,
+    });
+    const [isFocused, focusProps] = useFocus();
+
+    useEffect(() => {
+        function onSelectionChange() {
+            const selection = document.getSelection();
+
+            if (selection) {
+                selectionRef.current = {
+                    anchorNode: selection.anchorNode,
+                    anchorOffset: selection.anchorOffset,
+                    focusNode: selection.focusNode,
+                    focusOffset: selection.focusOffset,
+                };
+            }
+        }
+
+        if (isFocused) {
+            document.addEventListener('selectionchange', onSelectionChange);
+        }
+
+        return () => document.removeEventListener('selectionchange', onSelectionChange);
+    }, [isFocused]);
+
+    const selectPreviousSelection = useCallback(() => {
+        setSelection(selectionRef.current);
+    }, [selectionRef]);
+
+    return { ...focusProps, selectPreviousSelection };
+}

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

@@ -23,6 +23,7 @@ import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/R
 import { useDispatcher } from "../../../../../hooks/useDispatcher";
 import { focusComposer } from "./utils";
 import { ComposerFunctions } from "../types";
+import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
 
 export function useWysiwygSendActionHandler(
     disabled: boolean,
@@ -48,7 +49,18 @@ export function useWysiwygSendActionHandler(
                 composerFunctions.clear();
                 focusComposer(composerElement, context, roomContext, timeoutId);
                 break;
-            // TODO: case Action.ComposerInsert: - see SendMessageComposer
+            case Action.ComposerInsert:
+                if (payload.timelineRenderingType !== roomContext.timelineRenderingType) break;
+                if (payload.composerType !== ComposerType.Send) break;
+
+                if (payload.userId) {
+                    // TODO insert mention - see SendMessageComposer
+                } else if (payload.event) {
+                    // TODO insert quote message - see SendMessageComposer
+                } else if (payload.text) {
+                    composerFunctions.insertText(payload.text);
+                }
+                break;
         }
     }, [disabled, composerElement, composerFunctions, timeoutId, roomContext]);
 

src/components/views/rooms/wysiwyg_composer/types.ts

@@ -16,4 +16,5 @@ limitations under the License.
 
 export type ComposerFunctions = {
     clear: () => void;
+    insertText: (text: string) => void;
 };