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()

components/settings/SettingsProfileMetadata.vue

@@ -43,7 +43,7 @@ const chooseIcon = (i: number, text: string) => {
     <div flex="~ col gap4">
       <div v-for="i in fieldCount" :key="i" flex="~ gap3" items-center>
         <CommonDropdown ref="dropdown" placement="left">
-          <CommonTooltip content="Pick a icon">
+          <CommonTooltip :content="$t('tooltip.pick_an_icon')">
             <button type="button" btn-action-icon>
               <div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
             </button>

components/tiptap/TiptapEmojiList.vue

@@ -83,7 +83,7 @@ defineExpose({
     <template v-if="isPending">
       <div flex gap-1 items-center p2 animate-pulse>
         <div i-ri:loader-2-line animate-spin />
-        <span>Fetching...</span>
+        <span>{{ $t('common.fetching') }}</span>
       </div>
     </template>
     <template v-if="items.length">

components/tiptap/TiptapHashtagList.vue

@@ -52,7 +52,7 @@ defineExpose({
         <div animate-spin preserve-3d>
           <div i-ri:loader-2-line />
         </div>
-        <span>Fetching...</span>
+        <span>{{ $t('common.fetching') }}</span>
       </div>
     </template>
     <template v-if="items.length">

components/tiptap/TiptapMentionList.vue

@@ -52,7 +52,7 @@ defineExpose({
         <div animate-spin preserve-3d>
           <div i-ri:loader-2-line />
         </div>
-        <span>Fetching...</span>
+        <span>{{ $t('common.fetching') }}</span>
       </div>
     </template>
     <template v-if="items.length">