feat: emoji font

composables/content-parse.ts

@@ -2,6 +2,8 @@ import type { Emoji } from 'masto'
 import type { Node } from 'ultrahtml'
 import { TEXT_NODE, parse, render, walkSync } from 'ultrahtml'
 
+const EMOJI_REGEX = /(\p{Emoji_Presentation})/ug
+
 const decoder = process.client ? document.createElement('textarea') : null as any as HTMLTextAreaElement
 export function decodeHtml(text: string) {
   decoder.innerHTML = text
@@ -21,6 +23,7 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
         return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
       return `:${name}:`
     })
+    .replace(EMOJI_REGEX, '<em-emoji native="$1" />')
 
   if (markdown) {
     // handle code blocks

composables/setups.ts

@@ -1,6 +1,7 @@
 import { pwaInfo } from 'virtual:pwa-info'
 import type { Link } from '@unhead/schema'
 import type { Directions } from 'vue-i18n-routing'
+import { init as initEmojis } from 'emoji-mart'
 import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
 import type { LocaleObject } from '#i18n'
 
@@ -74,3 +75,9 @@ export async function setupI18n() {
     })
   })
 }
+
+export function setupEmojis() {
+  initEmojis({
+    data: () => import('@emoji-mart/data').then(r => r.default),
+  })
+}