Add emoji handling for rich text mode

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

@@ -59,7 +59,14 @@ export function SendWysiwygComposer(
         className="mx_SendWysiwygComposer"
         leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
         // TODO add emoji support
-        rightComponent={<EmojiButton menuPosition={menuPosition} addEmoji={() => false} />}
+        rightComponent={(composerFunctions, selectPreviousSelection) =>
+            <EmojiButton menuPosition={menuPosition}
+                addEmoji={(unicode) => {
+                    selectPreviousSelection();
+                    setTimeout(() => composerFunctions.insertText(unicode), 100);
+                    return true;
+                }}
+            />}
         {...props}
     >
         { (ref, composerFunctions) => (

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

@@ -18,21 +18,24 @@ 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(ref as MutableRefObject<HTMLDivElement | null>);
 
             return <div
                 data-testid="WysiwygComposerEditor"
@@ -55,9 +58,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/PlainTextComposer.tsx

@@ -33,7 +33,10 @@ interface PlainTextComposerProps {
     initialContent?: string;
     className?: string;
     leftComponent?: ReactNode;
-    rightComponent?: ReactNode;
+    rightComponent?: (
+        composerFunctions: ComposerFunctions,
+        selectPreviousSelection: () => void
+    ) => ReactNode;
     children?: (
         ref: MutableRefObject<HTMLDivElement | null>,
         composerFunctions: ComposerFunctions,
@@ -58,6 +61,8 @@ export function PlainTextComposer({
     useSetCursorPosition(disabled, ref);
     const { isFocused, onFocus } = useIsFocused();
     const computedPlaceholder = !content && placeholder || undefined;
+    const rightComp =
+        (selectPreviousSelection: () => void) => rightComponent(composerFunctions, selectPreviousSelection);
 
     return <div
         data-testid="PlainTextComposer"
@@ -68,7 +73,7 @@ export function PlainTextComposer({
         onPaste={onPaste}
         onKeyDown={onKeyDown}
     >
-        <Editor ref={ref} disabled={disabled} leftComponent={leftComponent} rightComponent={rightComponent} placeholder={computedPlaceholder} />
+        <Editor ref={ref} disabled={disabled} leftComponent={leftComponent} rightComponent={rightComp} placeholder={computedPlaceholder} />
         { children?.(ref, composerFunctions) }
     </div>;
 }

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

@@ -32,7 +32,10 @@ interface WysiwygComposerProps {
     initialContent?: string;
     className?: string;
     leftComponent?: ReactNode;
-    rightComponent?: ReactNode;
+    rightComponent?: (
+        composerFunctions: FormattingFunctions,
+        selectPreviousSelection: () => void
+    ) => ReactNode;
     children?: (
         ref: MutableRefObject<HTMLDivElement | null>,
         wysiwyg: FormattingFunctions,
@@ -69,10 +72,12 @@ export const WysiwygComposer = memo(function WysiwygComposer(
     const { isFocused, onFocus } = useIsFocused();
     const computedPlaceholder = !content && placeholder || undefined;
 
+    const rightComp = (selectPreviousSelection: () => void) => rightComponent(wysiwyg, selectPreviousSelection);
+
     return (
         <div data-testid="WysiwygComposer" className={classNames(className, { [`${className}-focused`]: isFocused })} onFocus={onFocus} onBlur={onFocus}>
             <FormattingButtons composer={wysiwyg} actionStates={actionStates} />
-            <Editor ref={ref} disabled={!isReady} leftComponent={leftComponent} rightComponent={rightComponent} placeholder={computedPlaceholder} />
+            <Editor ref={ref} disabled={!isReady} leftComponent={leftComponent} rightComponent={rightComp} placeholder={computedPlaceholder} />
             { children?.(ref, wysiwyg) }
         </div>
     );

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,54 @@
+/*
+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, useCallback, useEffect, useRef } from "react";
+
+import useFocus from "../../../../../hooks/useFocus";
+
+export function useSelection(ref: RefObject<HTMLDivElement>) {
+    const selectionRef = useRef({
+        anchorOffset: 0,
+        focusOffset: 0,
+    });
+    const [isFocused, focusProps] = useFocus();
+
+    useEffect(() => {
+        function onSelectionChange() {
+            const selection = document.getSelection();
+            console.log('selection', selection);
+            selectionRef.current = {
+                anchorOffset: selection.anchorOffset,
+                focusOffset: selection.focusOffset,
+            };
+        }
+
+        if (isFocused) {
+            document.addEventListener('selectionchange', onSelectionChange);
+        }
+
+        return () => document.removeEventListener('selectionchange', onSelectionChange);
+    }, [isFocused]);
+
+    const selectPreviousSelection = useCallback(() => {
+        const range = new Range();
+        range.setStart(ref.current.firstChild, selectionRef.current.anchorOffset);
+        range.setEnd(ref.current.firstChild, selectionRef.current.focusOffset);
+        document.getSelection().removeAllRanges();
+        document.getSelection().addRange(range);
+    }, [selectionRef, ref]);
+
+    return { ...focusProps, selectPreviousSelection };
+}

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;
 };