feat: support custom emoji

components/account/AccountInfo.vue

@@ -14,9 +14,7 @@ defineProps<{
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="`/@${account.acct}`">
-      <h4 font-bold>
-        {{ account.displayName }}
-      </h4>
+      <CommonRichContent font-bold :content="account.displayName" />
       <p op35 text-sm>
         @{{ account.acct }}
       </p>

components/account/AccountInlineInfo.vue

@@ -9,6 +9,6 @@ defineProps<{
 <template>
   <a :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
     <img :src="account.avatar" class="w-5 h-5 rounded">
-    {{ account.displayName }}
+    <CommonRichContent :content="account.displayName" />
   </a>
 </template>

components/common/RichContent.ts

@@ -1,3 +1,5 @@
+import type { Emoji } from 'masto'
+
 export default defineComponent({
   props: {
     content: {
@@ -6,6 +8,15 @@ export default defineComponent({
     },
   },
   setup(props) {
-    return () => contentToVNode(props.content)
+    const emojis = shallowRef<Record<string, Emoji>>({})
+
+    onMounted(() => {
+      const { server } = useAppCookies()
+      const { serverInfos } = useClientState()
+      if (server.value)
+        emojis.value = serverInfos.value[server.value].customEmojis || {}
+    })
+
+    return () => h('div', { class: 'rich-content' }, contentToVNode(props.content, undefined, emojis.value))
   },
 })

components/status/StatusBody.vue

@@ -11,23 +11,3 @@ const { status } = defineProps<{
     <CommonRichContent :content="status.content" />
   </div>
 </template>
-
-<style lang="postcss">
-.status-body {
-  a {
-    --at-apply: text-primary hover:underline;
-    .invisible {
-      --at-apply: hidden;
-    }
-    .ellipsis {
-      --at-apply: truncate overflow-hidden ws-nowrap;
-    }
-  }
-  b {
-    --at-apply: font-bold;
-  }
-  p {
-    --at-apply: my-2;
-  }
-}
-</style>

composables/content.ts

@@ -1,3 +1,4 @@
+import type { Emoji } from 'masto'
 import type { DefaultTreeAdapterMap } from 'parse5'
 import { parseFragment } from 'parse5'
 import type { VNode } from 'vue'
@@ -33,7 +34,14 @@ export function defaultHandle(el: Element) {
 export function contentToVNode(
   content: string,
   handle: (node: Element) => Element | undefined | null | void = defaultHandle,
+  customEmojis: Record<string, Emoji> = {},
 ): VNode {
+  content = content.replace(/:([\w-]+?):/g, (_, name) => {
+    const emoji = customEmojis[name]
+    if (emoji)
+      return `<img src="${emoji.url}" alt="${name}" class="custom-emoji" />`
+    return `:${name}:`
+  })
   const tree = parseFragment(content)
   return h(Fragment, tree.childNodes.map(n => treeToVNode(n, handle)))
 }

styles/global.css

@@ -27,4 +27,29 @@
 /* Force vertical scrollbar to be always visible to avoid layout shift while loading the content */
 html {
   overflow-y: scroll;
-}
+}
+
+.custom-emoji {
+  display: inline-block;
+  height: 1.2em;
+  width: 1.2em;
+  vertical-align: middle;
+}
+
+.rich-content {
+  a {
+    --at-apply: text-primary hover:underline;
+    .invisible {
+      --at-apply: hidden;
+    }
+    .ellipsis {
+      --at-apply: truncate overflow-hidden ws-nowrap;
+    }
+  }
+  b {
+    --at-apply: font-bold;
+  }
+  p {
+    --at-apply: my-2;
+  }
+}