Use Event for emoji

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,15 +58,8 @@ export function SendWysiwygComposer(
     return <Composer
         className="mx_SendWysiwygComposer"
         leftComponent={e2eStatus && <E2EIcon status={e2eStatus} />}
-        // TODO add emoji support
+        rightComponent={(selectPreviousSelection) =>
-        rightComponent={(composerFunctions, selectPreviousSelection) =>
+            <Emoji menuPosition={menuPosition} selectPreviousSelection={selectPreviousSelection} />}
-            <EmojiButton menuPosition={menuPosition}
-                addEmoji={(unicode) => {
-                    selectPreviousSelection();
-                    setTimeout(() => composerFunctions.insertText(unicode), 100);
-                    return true;
-                }}
-            />}
         {...props}
     >
         { (ref, composerFunctions) => (

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

@@ -34,7 +34,6 @@ interface PlainTextComposerProps {
     className?: string;
     leftComponent?: ReactNode;
     rightComponent?: (
-        composerFunctions: ComposerFunctions,
         selectPreviousSelection: () => void
     ) => ReactNode;
     children?: (
@@ -61,8 +60,6 @@ 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"
@@ -73,7 +70,7 @@ export function PlainTextComposer({
         onPaste={onPaste}
         onKeyDown={onKeyDown}
     >
-        <Editor ref={ref} disabled={disabled} leftComponent={leftComponent} rightComponent={rightComp} placeholder={computedPlaceholder} />
+        <Editor ref={ref} disabled={disabled} leftComponent={leftComponent} rightComponent={rightComponent} placeholder={computedPlaceholder} />
         { children?.(ref, composerFunctions) }
     </div>;
 }

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

@@ -33,7 +33,6 @@ interface WysiwygComposerProps {
     className?: string;
     leftComponent?: ReactNode;
     rightComponent?: (
-        composerFunctions: FormattingFunctions,
         selectPreviousSelection: () => void
     ) => ReactNode;
     children?: (
@@ -72,12 +71,10 @@ 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={rightComp} placeholder={computedPlaceholder} />
+            <Editor ref={ref} disabled={!isReady} leftComponent={leftComponent} rightComponent={rightComponent} placeholder={computedPlaceholder} />
             { children?.(ref, wysiwyg) }
         </div>
     );

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]);