feat: Display emoji names and improve search (#10104)

This PR enhances the emoji search functionality in the editor's emoji selector by improving how emoji names are displayed and searched.

The UI now shows emoji names instead of slugs, and the search logic has been updated to generate `searchString` without whitespaces, allowing users to search for emojis like 'face_with' using 'facewith'

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -247,7 +247,7 @@ export default {
           },
         }),
         suggestionsPlugin({
-          matcher: triggerCharacters(':', 1), // Trigger after ':' and at least 1 characters
+          matcher: triggerCharacters(':', 2), // Trigger after ':' and at least 2 characters
           suggestionClass: '',
           onEnter: args => {
             this.showEmojiMenu = true;

app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { shallowRef, computed, onMounted } from 'vue';
-import emojis from 'shared/components/emoji/emojisGroup.json';
+import emojiGroups from 'shared/components/emoji/emojisGroup.json';
 import MentionBox from '../mentions/MentionBox.vue';
 
 const props = defineProps({
@@ -23,10 +23,12 @@ const items = computed(() => {
 });
 
 function loadEmojis() {
-  allEmojis.value = emojis.flatMap(group =>
-    group.emojis.map(emoji => ({
-      ...emoji,
-      searchString: `${emoji.slug} ${emoji.name}`.toLowerCase(),
+  allEmojis.value = emojiGroups.flatMap(({ emojis }) =>
+    emojis.map(({ name, slug, ...rest }) => ({
+      ...rest,
+      name,
+      slug,
+      searchString: `${name.replace(/\s+/g, '')} ${slug}`.toLowerCase(), // Remove all whitespace and convert to lowercase
     }))
   );
 }
@@ -60,7 +62,7 @@ onMounted(() => {
             'font-normal': !selected,
           }"
         >
-          :{{ item.slug }}
+          :{{ item.name }}
         </p>
       </span>
     </template>