Make emoji picker use grouped unicode emojis

src/components/emoji_input/suggestor.js

@@ -2,7 +2,7 @@
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
  * data.emoji - optional, an array of all emoji available i.e.
- *   (state.instance.emoji + state.instance.customEmoji)
+ *   (getters.standardEmojiList + state.instance.customEmoji)
  * data.users - optional, an array of all known users
  * updateUsersList - optional, a function to search and append to users
  *

src/components/emoji_picker/emoji_picker.js

@@ -214,16 +214,18 @@ const EmojiPicker = {
     defaultGroup () {
       return Object.keys(this.allCustomGroups)[0]
     },
+    unicodeEmojiGroups () {
+      return this.$store.getters.standardEmojiGroupList.map(group => ({
+        id: `standard-${group.id}`,
+        text: this.$t(`emoji.unicode_groups.${group.id}`),
+        icon: 'box-open',
+        emojis: group.emojis
+      }))
+    },
     allEmojiGroups () {
-      const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)
         .map(([_, v]) => v)
-        .concat({
+        .concat(this.unicodeEmojiGroups)
-          id: 'standard',
-          text: this.$t('emoji.unicode'),
-          icon: 'box-open',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
-        })
     },
     filteredEmojiGroups () {
       return this.allEmojiGroups

src/components/post_status_form/post_status_form.js

@@ -189,7 +189,7 @@ const PostStatusForm = {
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ],
         store: this.$store
@@ -198,13 +198,13 @@ const PostStatusForm = {
     emojiSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ]
       })
     },
     emoji () {
-      return this.$store.state.instance.emoji || []
+      return this.$store.getters.standardEmojiList || []
     },
     customEmoji () {
       return this.$store.state.instance.customEmoji || []

src/components/react_button/react_button.js

@@ -59,7 +59,7 @@ const ReactButton = {
       if (this.filterWord !== '') {
         const filterWordLowercase = trim(this.filterWord.toLowerCase())
         const orderedEmojiList = []
-        for (const emoji of this.$store.state.instance.emoji) {
+        for (const emoji of this.$store.getters.standardEmojiList) {
           if (emoji.replacement === this.filterWord) return [emoji]
 
           const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
@@ -72,7 +72,7 @@ const ReactButton = {
         }
         return orderedEmojiList.flat()
       }
-      return this.$store.state.instance.emoji || []
+      return this.$store.getters.standardEmojiList || []
     },
     mergedConfig () {
       return this.$store.getters.mergedConfig

src/components/settings_modal/tabs/profile_tab.js

@@ -64,7 +64,7 @@ const ProfileTab = {
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ],
         store: this.$store
@@ -73,7 +73,7 @@ const ProfileTab = {
     emojiSuggestor () {
       return suggestor({
         emoji: [
-          ...this.$store.state.instance.emoji,
+          ...this.$store.getters.standardEmojiList,
           ...this.$store.state.instance.customEmoji
         ]
       })

src/modules/instance.js

@@ -3,6 +3,18 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 
+const SORTED_EMOJI_GROUP_IDS = [
+  'smileys-and-emotion',
+  'people-and-body',
+  'animals-and-nature',
+  'food-and-drink',
+  'travel-and-places',
+  'activities',
+  'objects',
+  'symbols',
+  'flags'
+]
+
 const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
@@ -64,7 +76,7 @@ const defaultState = {
   // Nasty stuff
   customEmoji: [],
   customEmojiFetched: false,
-  emoji: [],
+  emoji: {},
   emojiFetched: false,
   pleromaBackend: true,
   postFormats: [],
@@ -139,6 +151,17 @@ const instance = {
           return res
         }, {})
     },
+    standardEmojiList (state) {
+      return SORTED_EMOJI_GROUP_IDS
+        .map(groupId => state.emoji[groupId] || [])
+        .reduce((a, b) => a.concat(b), [])
+    },
+    standardEmojiGroupList (state) {
+      return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
+        id: groupId,
+        emojis: state.emoji[groupId] || []
+      }))
+    },
     instanceDomain (state) {
       return new URL(state.server).hostname
     }
@@ -165,13 +188,14 @@ const instance = {
         const res = await window.fetch('/static/emoji.json')
         if (res.ok) {
           const values = await res.json()
-          const emoji = Object.keys(values).map((key) => {
+          const emoji = Object.keys(values).reduce((res, groupId) => {
-            return {
+            res[groupId] = values[groupId].map(e => ({
-              displayText: key,
+              displayText: e.name,
               imageUrl: false,
-              replacement: values[key]
+              replacement: e.emoji
-            }
+            }))
-          }).sort((a, b) => a.name > b.name ? 1 : -1)
+            return res
+          }, {})
           commit('setInstanceOption', { name: 'emoji', value: emoji })
         } else {
           throw (res)