add new search to reaction picker and make hardcoded set... better

1 files changed, 57 insertions, 14 deletions

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index e65bfd93..2a0dac85 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import { ensureFinalFallback } from '../../i18n/languages.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
@@ -43,31 +44,73 @@ const ReactButton = {
         const input = this.$el.querySelector('input')
         if (input) input.focus()
       })
+    },
+    // Vaguely adjusted copypaste from emoji_input and emoji_picker!
+    maybeLocalizedEmojiNamesAndKeywords (emoji) {
+      const names = [emoji.displayText]
+      const keywords = []
+
+      if (emoji.displayTextI18n) {
+        names.push(this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args))
+      }
+
+      if (emoji.annotations) {
+        this.languages.forEach(lang => {
+          names.push(emoji.annotations[lang]?.name)
+
+          keywords.push(...(emoji.annotations[lang]?.keywords || []))
+        })
+      }
+
+      return {
+        names: names.filter(k => k),
+        keywords: keywords.filter(k => k)
+      }
+    },
+    maybeLocalizedEmojiName (emoji) {
+      if (!emoji.annotations) {
+        return emoji.displayText
+      }
+
+      if (emoji.displayTextI18n) {
+        return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
+      }
+
+      for (const lang of this.languages) {
+        if (emoji.annotations[lang]?.name) {
+          return emoji.annotations[lang].name
+        }
+      }
+
+      return emoji.displayText
     }
   },
   computed: {
     commonEmojis () {
-      return [
-        { displayText: 'thumbsup', replacement: '👍' },
-        { displayText: 'angry', replacement: '😠' },
-        { displayText: 'eyes', replacement: '👀' },
-        { displayText: 'joy', replacement: '😂' },
-        { displayText: 'fire', replacement: '🔥' }
-      ]
+      const hardcodedSet = new Set(['👍', '😠', '👀', '😂', '🔥'])
+      return this.$store.getters.standardEmojiList.filter(emoji => hardcodedSet.has(emoji.replacement))
+    },
+    languages () {
+      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
     },
     emojis () {
       if (this.filterWord !== '') {
-        const filterWordLowercase = trim(this.filterWord.toLowerCase())
+        const keywordLowercase = trim(this.filterWord.toLowerCase())
+
         const orderedEmojiList = []
         for (const emoji of this.$store.getters.standardEmojiList) {
-          if (emoji.replacement === this.filterWord) return [emoji]
+          const indices = this.maybeLocalizedEmojiNamesAndKeywords(emoji)
+            .keywords
+            .map(k => k.toLowerCase().indexOf(keywordLowercase))
+            .filter(k => k > -1)
+
+          const indexOfKeyword = indices.length ? Math.min(...indices) : -1
 
-          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
-          if (indexOfFilterWord > -1) {
-            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
-              orderedEmojiList[indexOfFilterWord] = []
+          if (indexOfKeyword > -1) {
+            if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
+              orderedEmojiList[indexOfKeyword] = []
             }
-            orderedEmojiList[indexOfFilterWord].push(emoji)
+            orderedEmojiList[indexOfKeyword].push(emoji)
           }
         }
         return orderedEmojiList.flat()