Add emoji handling for rich text mode

matrix-org · Nov 30, 2022 · 2064ccb · 2064ccb
1 parent dd91250
commit 2064ccb
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx b/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) => (

diff --git a/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/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,

diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/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>
  );

diff --git a/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts b/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]);
 }
diff --git a/src/components/views/rooms/wysiwyg_composer/types.ts b/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;
 };