[APP-836] Emoji picker for web (#1254)

* add emoji-mart package for emoji dropdown picker

* remove emoji picker modal

* load emoji mart data not as part of the main bundle

* remove @emoji-mart/data

* setup emoji insertion with events

* get emoji data from local static assets

* close emoji picker after one emoji has been inserted

* Switch emoji picker trigger to an icon

* Update emoji-mart-data.js

* make grabbing emoji data work on more browsers

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     '*.lock',
     '.husky',
     'patches',
+    'bskyweb',
     '*.html',
     'bskyweb',
   ],

package.json

@@ -27,6 +27,7 @@
     "@atproto/api": "^0.6.6",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
+    "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^18.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -69,6 +70,7 @@
     "base64-js": "^1.5.1",
     "bcp-47-match": "^2.0.3",
     "email-validator": "^2.0.4",
+    "emoji-mart": "^5.5.2",
     "eventemitter3": "^5.0.1",
     "expo": "~48.0.18",
     "expo-application": "~5.1.1",

src/platform/polyfills.web.ts

@@ -9,4 +9,9 @@ if (!globalThis.Intl?.Segmenter) {
   const script = document.createElement('script')
   script.setAttribute('src', '/static/js/intl-segmenter-polyfill.min.js')
   document.head.appendChild(script)
+
+  // loading emoji mart data
+  const emojiMartScript = document.createElement('script')
+  emojiMartScript.setAttribute('src', '/static/js/emoji-mart-data.js')
+  document.head.appendChild(emojiMartScript)
 }

src/view/com/composer/Composer.tsx

@@ -45,6 +45,7 @@ import {Gallery} from './photos/Gallery'
 import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
 import {LabelsBtn} from './labels/LabelsBtn'
 import {SelectLangBtn} from './select-language/SelectLangBtn'
+import {EmojiPickerButton} from './text-input/web/EmojiPicker.web'
 import {insertMentionAt} from 'lib/strings/mention-manip'
 
 type Props = ComposerOpts & {
@@ -394,6 +395,7 @@ export const ComposePost = observer(function ComposePost({
               <OpenCameraBtn gallery={gallery} />
             </>
           ) : null}
+          {isDesktopWeb ? <EmojiPickerButton /> : null}
           <View style={s.flex1} />
           <SelectLangBtn />
           <CharProgress count={graphemeLength} />

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,9 +134,22 @@ 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
       blur: () => {}, // TODO

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',
+  },
+})

src/view/index.ts

@@ -40,6 +40,7 @@ import {faEnvelope} from '@fortawesome/free-solid-svg-icons/faEnvelope'
 import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation'
 import {faEye} from '@fortawesome/free-solid-svg-icons/faEye'
 import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash'
+import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile'
 import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk'
 import {faGear} from '@fortawesome/free-solid-svg-icons/faGear'
 import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe'
@@ -134,6 +135,7 @@ export function setup() {
     faEye,
     faExclamation,
     farEyeSlash,
+    faFaceSmile,
     faFloppyDisk,
     faGear,
     faGlobe,

web/static/js/emoji-mart-data.js

@@ -0,0 +1,7 @@
+async function grabEmojiData() {
+  const response = await fetch('/static/emojis.2023.json')
+  const emojiMartData = await response.json()
+  window.emojiMartData = emojiMartData
+}
+
+grabEmojiData()

yarn.lock

@@ -2852,6 +2852,11 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
+"@emoji-mart/react@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
+  integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -9625,6 +9630,11 @@ emittery@^0.8.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
+emoji-mart@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
+  integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"