refactor: html parsing

components/content/ContentRich.setup.ts

@@ -4,27 +4,23 @@ defineOptions({
   name: 'ContentRich',
 })
 
-const { content, emojis, markdown = true } = defineProps<{
+const {
+  content,
+  emojis,
+  markdown = true,
+} = defineProps<{
   content: string
-  markdown?: boolean
   emojis?: Emoji[]
+  markdown?: boolean
 }>()
 
-const useEmojis = computed(() => {
-  const result: Emoji[] = []
-  if (emojis)
-    result.push(...emojis)
-
-  result.push(...currentCustomEmojis.value.emojis)
-
-  return emojisArrayToObject(result)
-})
+const emojisObject = useEmojisFallback(() => emojis)
 
 export default () => h(
   'span',
   { class: 'content-rich', dir: 'auto' },
   contentToVNode(content, {
-    emojis: useEmojis.value,
+    emojis: emojisObject.value,
     markdown,
   }),
 )

components/status/StatusBody.vue

@@ -1,23 +1,37 @@
 <script setup lang="ts">
 import type { Status, StatusEdit } from 'masto'
 
-const { status, withAction = true } = defineProps<{
+const {
+  status,
+  withAction = true,
+} = defineProps<{
   status: Status | StatusEdit
   withAction?: boolean
 }>()
 
 const { translation } = useTranslation(status)
+
+const emojisObject = useEmojisFallback(() => status.emojis)
+const vnode = $computed(() => {
+  if (!status.content)
+    return null
+  const vnode = contentToVNode(status.content, {
+    emojis: emojisObject.value,
+    markdown: true,
+  })
+  return vnode
+})
 </script>
 
 <template>
   <div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }">
-    <ContentRich
+    <span
       v-if="status.content"
-      class="line-compact"
-      :content="status.content"
-      :emojis="status.emojis"
-      :lang="'language' in status && status.language"
-    />
+      class="content-rich line-compact" dir="auto"
+      :lang="('language' in status && status.language) || undefined"
+    >
+      <component :is="vnode" />
+    </span>
     <div v-else />
     <template v-if="translation.visible">
       <div my2 h-px border="b base" bg-base />