Fix emoji in RTE edition

Author: florianduros

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, RefObject, useRef } from "react";
+import React, { ForwardedRef, forwardRef, MutableRefObject, useRef } from "react";
 import classNames from "classnames";
 
 import EditorStateTransfer from "../../../../utils/EditorStateTransfer";
@@ -24,16 +24,18 @@ import { useWysiwygEditActionHandler } from "./hooks/useWysiwygEditActionHandler
 import { useEditing } from "./hooks/useEditing";
 import { useInitialContent } from "./hooks/useInitialContent";
 import { ComposerContext, getDefaultContextValue } from "./ComposerContext";
+import { ComposerFunctions } from "./types";
 
 interface ContentProps {
-    disabled: boolean;
+    disabled?: boolean;
+    composerFunctions: ComposerFunctions;
 }
 
 const Content = forwardRef<HTMLElement, ContentProps>(function Content(
-    { disabled }: ContentProps,
-    forwardRef: RefObject<HTMLElement>,
+    { disabled = false, composerFunctions }: ContentProps,
+    forwardRef: ForwardedRef<HTMLElement>,
 ) {
-    useWysiwygEditActionHandler(disabled, forwardRef);
+    useWysiwygEditActionHandler(disabled, forwardRef as MutableRefObject<HTMLElement>, composerFunctions);
     return null;
 });
 
@@ -65,9 +67,9 @@ export default function EditWysiwygComposer({ editorStateTransfer, className, ..
                 onSend={editMessage}
                 {...props}
             >
-                {(ref) => (
+                {(ref, composerFunctions) => (
                     <>
-                        <Content disabled={props.disabled} ref={ref} />
+                        <Content disabled={props.disabled} ref={ref} composerFunctions={composerFunctions} />
                         <EditionButtons
                             onCancelClick={endEditing}
                             onSaveClick={editMessage}

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

@@ -22,28 +22,23 @@ import dis from "../../../../../dispatcher/dispatcher";
 import { ComposerInsertPayload } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../../../dispatcher/actions";
 import { useRoomContext } from "../../../../../contexts/RoomContext";
-import { useComposerContext } from "../ComposerContext";
-import { setSelection } from "../utils/selection";
 
 interface EmojiProps {
     menuPosition: AboveLeftOf;
 }
 
 export function Emoji({ menuPosition }: EmojiProps) {
     const roomContext = useRoomContext();
-    const composerContext = useComposerContext();
 
     return (
         <EmojiButton
             menuPosition={menuPosition}
             addEmoji={(emoji) => {
-                setSelection(composerContext.selection).then(() =>
-                    dis.dispatch<ComposerInsertPayload>({
-                        action: Action.ComposerInsert,
-                        text: emoji,
-                        timelineRenderingType: roomContext.timelineRenderingType,
-                    }),
-                );
+                dis.dispatch<ComposerInsertPayload>({
+                    action: Action.ComposerInsert,
+                    text: emoji,
+                    timelineRenderingType: roomContext.timelineRenderingType,
+                });
                 return true;
             }}
         />

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

@@ -22,9 +22,18 @@ import { ActionPayload } from "../../../../../dispatcher/payloads";
 import { TimelineRenderingType, useRoomContext } from "../../../../../contexts/RoomContext";
 import { useDispatcher } from "../../../../../hooks/useDispatcher";
 import { focusComposer } from "./utils";
+import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
+import { ComposerFunctions } from "../types";
+import { setSelection } from "../utils/selection";
+import { useComposerContext } from "../ComposerContext";
 
-export function useWysiwygEditActionHandler(disabled: boolean, composerElement: RefObject<HTMLElement>) {
+export function useWysiwygEditActionHandler(
+    disabled: boolean,
+    composerElement: RefObject<HTMLElement>,
+    composerFunctions: ComposerFunctions,
+) {
     const roomContext = useRoomContext();
+    const composerContext = useComposerContext();
     const timeoutId = useRef<number | null>(null);
 
     const handler = useCallback(
@@ -39,9 +48,21 @@ export function useWysiwygEditActionHandler(disabled: boolean, composerElement:
                 case Action.FocusEditMessageComposer:
                     focusComposer(composerElement, context, roomContext, timeoutId);
                     break;
+                case Action.ComposerInsert:
+                    if (payload.timelineRenderingType !== roomContext.timelineRenderingType) break;
+                    if (payload.composerType !== ComposerType.Edit) break;
+
+                    if (payload.userId) {
+                        // TODO insert mention - see SendMessageComposer
+                    } else if (payload.event) {
+                        // TODO insert quote message - see SendMessageComposer
+                    } else if (payload.text) {
+                        setSelection(composerContext.selection).then(() => composerFunctions.insertText(payload.text));
+                    }
+                    break;
             }
         },
-        [disabled, composerElement, timeoutId, roomContext],
+        [disabled, composerElement, composerFunctions, timeoutId, roomContext, composerContext],
     );
 
     useDispatcher(defaultDispatcher, handler);

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

@@ -24,13 +24,16 @@ import { useDispatcher } from "../../../../../hooks/useDispatcher";
 import { focusComposer } from "./utils";
 import { ComposerFunctions } from "../types";
 import { ComposerType } from "../../../../../dispatcher/payloads/ComposerInsertPayload";
+import { useComposerContext } from "../ComposerContext";
+import { setSelection } from "../utils/selection";
 
 export function useWysiwygSendActionHandler(
     disabled: boolean,
     composerElement: MutableRefObject<HTMLElement>,
     composerFunctions: ComposerFunctions,
 ) {
     const roomContext = useRoomContext();
+    const composerContext = useComposerContext();
     const timeoutId = useRef<number | null>(null);
 
     const handler = useCallback(
@@ -59,12 +62,12 @@ export function useWysiwygSendActionHandler(
                     } else if (payload.event) {
                         // TODO insert quote message - see SendMessageComposer
                     } else if (payload.text) {
-                        composerFunctions.insertText(payload.text);
+                        setSelection(composerContext.selection).then(() => composerFunctions.insertText(payload.text));
                     }
                     break;
             }
         },
-        [disabled, composerElement, composerFunctions, timeoutId, roomContext],
+        [disabled, composerElement, roomContext, composerFunctions, composerContext],
     );
 
     useDispatcher(defaultDispatcher, handler);