Add emoji handling for plain text mode (#9727)

Add emoji handling for plain text mode

Author: florianduros

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

@@ -34,7 +34,7 @@ export const Editor = memo(
         function Editor({ disabled, placeholder, leftComponent, rightComponent }: EditorProps, ref,
         ) {
             const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
-            const { onFocus, onBlur, selectPreviousSelection } = useSelection();
+            const { onFocus, onBlur, selectPreviousSelection, onInput } = useSelection();
 
             return <div
                 data-testid="WysiwygComposerEditor"
@@ -59,6 +59,7 @@ export const Editor = memo(
                     aria-disabled={disabled}
                     onFocus={onFocus}
                     onBlur={onBlur}
+                    onInput={onInput}
                     />
                 </div>
                 { rightComponent?.(selectPreviousSelection) }

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

@@ -54,8 +54,9 @@ export function PlainTextComposer({
     rightComponent,
 }: PlainTextComposerProps,
 ) {
-    const { ref, onInput, onPaste, onKeyDown, content } = usePlainTextListeners(initialContent, onChange, onSend);
-    const composerFunctions = useComposerFunctions(ref);
+    const { ref, onInput, onPaste, onKeyDown, content, setContent } =
+        usePlainTextListeners(initialContent, onChange, onSend);
+    const composerFunctions = useComposerFunctions(ref, setContent);
     usePlainTextInitialization(initialContent, ref);
     useSetCursorPosition(disabled, ref);
     const { isFocused, onFocus } = useIsFocused();

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

@@ -16,15 +16,30 @@ limitations under the License.
 
 import { RefObject, useMemo } from "react";
 
-export function useComposerFunctions(ref: RefObject<HTMLDivElement>) {
+import { setSelection } from "../utils/selection";
+
+export function useComposerFunctions(ref: RefObject<HTMLDivElement>, setContent: (content: string) => void) {
     return useMemo(() => ({
         clear: () => {
             if (ref.current) {
                 ref.current.innerHTML = '';
             }
         },
         insertText: (text: string) => {
-            // TODO
+            const selection = document.getSelection();
+
+            if (ref.current && selection) {
+                const content = ref.current.innerHTML;
+                const { anchorOffset, focusOffset } = selection;
+                ref.current.innerHTML = `${content.slice(0, anchorOffset)}${text}${content.slice(focusOffset)}`;
+                setSelection({
+                    anchorNode: ref.current.firstChild,
+                    anchorOffset: anchorOffset + text.length,
+                    focusNode: ref.current.firstChild,
+                    focusOffset: focusOffset + text.length,
+                });
+                setContent(ref.current.innerHTML);
+            }
         },
-    }), [ref]);
+    }), [ref, setContent]);
 }

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

@@ -36,12 +36,16 @@ export function usePlainTextListeners(
         onSend?.();
     }), [ref, onSend]);
 
+    const setText = useCallback((text: string) => {
+        setContent(text);
+        onChange?.(text);
+    }, [onChange]);
+
     const onInput = useCallback((event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>) => {
         if (isDivElement(event.target)) {
-            setContent(event.target.innerHTML);
-            onChange?.(event.target.innerHTML);
+            setText(event.target.innerHTML);
         }
-    }, [onChange]);
+    }, [setText]);
 
     const isCtrlEnter = useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
     const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
@@ -52,5 +56,5 @@ export function usePlainTextListeners(
         }
     }, [isCtrlEnter, send]);
 
-    return { ref, onInput, onPaste: onInput, onKeyDown, content };
+    return { ref, onInput, onPaste: onInput, onKeyDown, content, setContent: setText };
 }

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

@@ -14,13 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useEffect, useRef } from "react";
+import { MutableRefObject, useCallback, useEffect, useRef } from "react";
 
 import useFocus from "../../../../../hooks/useFocus";
 import { setSelection } from "../utils/selection";
 
 type SubSelection = Pick<Selection, 'anchorNode' | 'anchorOffset' | 'focusNode' | 'focusOffset'>;
 
+function setSelectionRef(selectionRef: MutableRefObject<SubSelection>) {
+    const selection = document.getSelection();
+
+    if (selection) {
+        selectionRef.current = {
+            anchorNode: selection.anchorNode,
+            anchorOffset: selection.anchorOffset,
+            focusNode: selection.focusNode,
+            focusOffset: selection.focusOffset,
+        };
+    }
+}
+
 export function useSelection() {
     const selectionRef = useRef<SubSelection>({
         anchorNode: null,
@@ -32,16 +45,7 @@ export function useSelection() {
 
     useEffect(() => {
         function onSelectionChange() {
-            const selection = document.getSelection();
-
-            if (selection) {
-                selectionRef.current = {
-                    anchorNode: selection.anchorNode,
-                    anchorOffset: selection.anchorOffset,
-                    focusNode: selection.focusNode,
-                    focusOffset: selection.focusOffset,
-                };
-            }
+            setSelectionRef(selectionRef);
         }
 
         if (isFocused) {
@@ -51,9 +55,13 @@ export function useSelection() {
         return () => document.removeEventListener('selectionchange', onSelectionChange);
     }, [isFocused]);
 
+    const onInput = useCallback(() => {
+        setSelectionRef(selectionRef);
+    }, []);
+
     const selectPreviousSelection = useCallback(() => {
         setSelection(selectionRef.current);
-    }, [selectionRef]);
+    }, []);
 
-    return { ...focusProps, selectPreviousSelection };
+    return { ...focusProps, selectPreviousSelection, onInput };
 }

test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx

@@ -251,7 +251,7 @@ describe('SendWysiwygComposer', () => {
 
     describe.each([
         { isRichTextEnabled: true },
-    // TODO    { isRichTextEnabled: false },
+        { isRichTextEnabled: false },
     ])('Emoji when %s', ({ isRichTextEnabled }) => {
         let emojiButton: HTMLElement;