From aa4edaa1e679a949ccf0d51b9f18d4e98d183d65 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 13 Sep 2024 10:54:18 +0530
Subject: [PATCH] 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'
---
 .../components/widgets/WootWriter/Editor.vue       |  2 +-
 .../widgets/WootWriter/keyboardEmojiSelector.vue   | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 2180a870d..d7de1977a 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/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;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue b/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
index ee06e8ea5..f84ab967e 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
+++ b/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>