Add regional indicators

src/components/emoji_picker/emoji_picker.js

@@ -47,8 +47,8 @@ const UNICODE_EMOJI_GROUP_ICON = {
   flags: 'flag'
 }
 
-const maybeLocalizedKeywords = (emoji, languages) => {
+const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
-  const res = [emoji.displayText]
+  const res = [emoji.displayText, nameLocalizer(emoji)]
   if (emoji.annotations) {
     languages.forEach(lang => {
       const keywords = emoji.annotations[lang]?.keywords || []
@@ -59,13 +59,13 @@ const maybeLocalizedKeywords = (emoji, languages) => {
   return res
 }
 
-const filterByKeyword = (list, keyword = '', languages) => {
+const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
   if (keyword === '') return list
 
   const keywordLowercase = keyword.toLowerCase()
   const orderedEmojiList = []
   for (const emoji of list) {
-    const indices = maybeLocalizedKeywords(emoji, languages)
+    const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
       .map(k => k.toLowerCase().indexOf(keywordLowercase))
       .filter(k => k > -1)
 
@@ -189,7 +189,7 @@ const EmojiPicker = {
       this.showingStickers = value
     },
     filterByKeyword (list, keyword) {
-      return filterByKeyword(list, keyword, this.languages)
+      return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName)
     },
     initializeLazyLoad () {
       this.destroyLazyLoad()
@@ -305,7 +305,6 @@ const EmojiPicker = {
       }, 500)
     },
     languages () {
-      console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage))
       return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
     },
     maybeLocalizedEmojiName () {
@@ -314,6 +313,10 @@ const EmojiPicker = {
           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

src/i18n/en.json

@@ -211,7 +211,8 @@
       "travel-and-places": "Travel & Places"
     },
     "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
-    "load_all": "Loading all {emojiAmount} emoji"
+    "load_all": "Loading all {emojiAmount} emoji",
+    "regional_indicator": "Regional indicator {letter}"
   },
   "errors": {
     "storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."

src/modules/instance.js

@@ -16,6 +16,26 @@ const SORTED_EMOJI_GROUP_IDS = [
   'flags'
 ]
 
+const REGIONAL_INDICATORS = (() => {
+  const start = 0x1F1E6
+  const end = 0x1F1FF
+  const A = 'A'.codePointAt(0)
+  const res = new Array(end - start + 1)
+  for (let i = start; i <= end; ++i) {
+    const letter = String.fromCodePoint(A + i - start)
+    res[i - start] = {
+      replacement: String.fromCodePoint(i),
+      imageUrl: false,
+      displayText: 'regional_indicator_' + letter,
+      displayTextI18n: {
+        key: 'emoji.regional_indicator',
+        args: { letter }
+      }
+    }
+  }
+  return res
+})()
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -129,6 +149,11 @@ const injectAnnotations = (emoji, annotations) => {
   }
 }
 
+const injectRegionalIndicators = groups => {
+  groups.symbols.push(...REGIONAL_INDICATORS)
+  return groups
+}
+
 const instance = {
   state: defaultState,
   mutations: {
@@ -219,7 +244,7 @@ const instance = {
             }))
             return res
           }, {})
-          commit('setInstanceOption', { name: 'emoji', value: emoji })
+          commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) })
         } else {
           throw (res)
         }
@@ -234,7 +259,7 @@ const instance = {
 
       return Promise.all(
         langList
-          .forEach(async lang => {
+          .map(async lang => {
             if (!state.unicodeEmojiAnnotations[lang]) {
               const annotations = await loadAnnotations(lang)
               commit('setUnicodeEmojiAnnotations', { lang, annotations })