feat(i18n): Emojimart localization and fetching entry at en … (#1731)

Co-authored-by: userquin <userquin@gmail.com>

components/publish/PublishEmojiPicker.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import importEmojiLang from 'virtual:emoji-mart-lang-importer'
 import type { Picker } from 'emoji-mart'
 
 const emit = defineEmits<{
@@ -6,12 +7,15 @@ const emit = defineEmits<{
   (e: 'selectCustom', image: any): void
 }>()
 
+const { locale } = useI18n()
+
 const el = $ref<HTMLElement>()
 let picker = $ref<Picker>()
 const colorMode = useColorMode()
 
 async function openEmojiPicker() {
   await updateCustomEmojis()
+
   if (picker) {
     picker.update({
       theme: colorMode.value,
@@ -19,10 +23,14 @@ async function openEmojiPicker() {
     })
   }
   else {
-    const promise = import('@emoji-mart/data/sets/14/twitter.json').then(r => r.default)
-    const { Picker } = await import('emoji-mart')
+    const [Picker, dataPromise, i18n] = await Promise.all([
+      import('emoji-mart').then(({ Picker }) => Picker),
+      import('@emoji-mart/data/sets/14/twitter.json').then((r: any) => r.default).catch(() => {}),
+      importEmojiLang(locale.value.split('-')[0]),
+    ])
+
     picker = new Picker({
-      data: () => promise,
+      data: () => dataPromise,
       onEmojiSelect({ native, src, alt, name }: any) {
         native
           ? emit('select', native)
@@ -31,6 +39,7 @@ async function openEmojiPicker() {
       set: 'twitter',
       theme: colorMode.value,
       custom: customEmojisData.value,
+      i18n,
     })
   }
   await nextTick()