2 files changed, 106 insertions, 12 deletions

diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
index b7ebdd989..dfe1e26a1 100644
--- a/src/view/com/composer/text-input/TextInput.web.tsx
+++ b/src/view/com/composer/text-input/TextInput.web.tsx
@@ -16,6 +16,7 @@ import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
 import {createSuggestion} from './web/Autocomplete'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {isUriImage, blobToDataUri} from 'lib/media/util'
+import {Emoji} from './web/EmojiPicker.web'
 
 export interface TextInputRef {
   focus: () => void
@@ -34,6 +35,8 @@ interface TextInputProps {
   onError: (err: string) => void
 }
 
+export const textInputWebEmitter = new EventEmitter()
+
 export const TextInput = React.forwardRef(
   (
     {
@@ -54,21 +57,18 @@ export const TextInput = React.forwardRef(
       'ProseMirror-dark',
     )
 
-    // we use a memoized emitter to propagate events out of tiptap
-    // without triggering re-runs of the useEditor hook
-    const emitter = React.useMemo(() => new EventEmitter(), [])
     React.useEffect(() => {
-      emitter.addListener('publish', onPressPublish)
+      textInputWebEmitter.addListener('publish', onPressPublish)
       return () => {
-        emitter.removeListener('publish', onPressPublish)
+        textInputWebEmitter.removeListener('publish', onPressPublish)
       }
-    }, [emitter, onPressPublish])
+    }, [onPressPublish])
     React.useEffect(() => {
-      emitter.addListener('photo-pasted', onPhotoPasted)
+      textInputWebEmitter.addListener('photo-pasted', onPhotoPasted)
       return () => {
-        emitter.removeListener('photo-pasted', onPhotoPasted)
+        textInputWebEmitter.removeListener('photo-pasted', onPhotoPasted)
       }
-    }, [emitter, onPhotoPasted])
+    }, [onPhotoPasted])
 
     const editor = useEditor(
       {
@@ -105,12 +105,12 @@ export const TextInput = React.forwardRef(
             }
 
             getImageFromUri(items, (uri: string) => {
-              emitter.emit('photo-pasted', uri)
+              textInputWebEmitter.emit('photo-pasted', uri)
             })
           },
           handleKeyDown: (_, event) => {
             if ((event.metaKey || event.ctrlKey) && event.code === 'Enter') {
-              emitter.emit('publish')
+              textInputWebEmitter.emit('publish')
             }
           },
         },
@@ -134,8 +134,21 @@ export const TextInput = React.forwardRef(
           }
         },
       },
-      [modeClass, emitter],
+      [modeClass],
+    )
+
+    const onEmojiInserted = React.useCallback(
+      (emoji: Emoji) => {
+        editor?.chain().focus('end').insertContent(emoji.native).run()
+      },
+      [editor],
     )
+    React.useEffect(() => {
+      textInputWebEmitter.addListener('emoji-inserted', onEmojiInserted)
+      return () => {
+        textInputWebEmitter.removeListener('emoji-inserted', onEmojiInserted)
+      }
+    }, [onEmojiInserted])
 
     React.useImperativeHandle(ref, () => ({
       focus: () => {}, // TODO
diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
new file mode 100644
index 000000000..6c7d890a4
--- /dev/null
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import Picker from '@emoji-mart/react'
+import {StyleSheet, View} from 'react-native'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import {textInputWebEmitter} from '../TextInput.web'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from 'lib/hooks/usePalette'
+
+export type Emoji = {
+  aliases?: string[]
+  emoticons: string[]
+  id: string
+  keywords: string[]
+  name: string
+  native: string
+  shortcodes?: string
+  unified: string
+}
+
+export function EmojiPickerButton() {
+  const pal = usePalette('default')
+  const [open, setOpen] = React.useState(false)
+  const onOpenChange = (o: boolean) => {
+    setOpen(o)
+  }
+
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
+      <DropdownMenu.Trigger style={styles.trigger}>
+        <FontAwesomeIcon
+          icon={['far', 'face-smile']}
+          color={pal.colors.link}
+          size={22}
+        />
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content>
+          <EmojiPicker
+            close={() => {
+              setOpen(false)
+            }}
+          />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}
+
+export function EmojiPicker({close}: {close: () => void}) {
+  const onInsert = (emoji: Emoji) => {
+    textInputWebEmitter.emit('emoji-inserted', emoji)
+    close()
+  }
+  return (
+    <View style={styles.mask}>
+      <Picker
+        // @ts-ignore we set emojiMartData in `emoji-mart-data.js` file
+        data={window.emojiMartData}
+        onEmojiSelect={onInsert}
+        autoFocus={false}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  mask: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+  trigger: {
+    backgroundColor: 'transparent',
+    border: 'none',
+    paddingTop: 4,
+    paddingHorizontal: 10,
+    cursor: 'pointer',
+  },
+})