Add emoji handling for rich text mode

Author: florianduros

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

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

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

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

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

@@ -32,7 +32,7 @@ interface WysiwygComposerProps {
     initialContent?: string;
     className?: string;
     leftComponent?: ReactNode;
-    rightComponent?: ReactNode;
+    rightComponent?: (composerFunctions: FormattingFunctions) => ReactNode;
     children?: (
         ref: MutableRefObject<HTMLDivElement | null>,
         wysiwyg: FormattingFunctions,
@@ -69,10 +69,12 @@ export const WysiwygComposer = memo(function WysiwygComposer(
     const { isFocused, onFocus } = useIsFocused();
     const computedPlaceholder = !content && placeholder || undefined;
 
+    //    const rightComp = rightComponent(wysiwyg);
+
     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={rightComponent(wysiwyg)} 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/types.ts

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