Merge a8cf0ea80b into 9c39eed209

components/emoji/Emoji.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { as, alt, dataEmojiId } = $defineProps<{
+  as: string
+  alt?: string
+  dataEmojiId?: string
+}>()
+
+let title = $ref()
+
+if (alt) {
+  if (alt.startsWith(':')) {
+    title = alt.replace(/:/g, '')
+  }
+  else {
+    import('node-emoji').then(({ find }) => {
+      title = find(alt)?.key.replace(/_/g, ' ')
+    })
+  }
+}
+
+// if it has a data-emoji-id, use that as the title instead
+if (dataEmojiId)
+  title = dataEmojiId
+</script>
+
+<template>
+  <component :is="as" v-bind="$attrs" :title="title">
+    <slot />
+  </component>
+</template>

composables/content-render.ts

@@ -4,9 +4,9 @@ import { Fragment, h, isVNode } from 'vue'
 import type { VNode } from 'vue'
 import { RouterLink } from 'vue-router'
 import { decode } from 'tiny-decode'
-import { find as findEmoji } from 'node-emoji'
 import type { ContentParseOptions } from './content-parse'
 import { parseMastodonHTML } from './content-parse'
+import Emoji from '~/components/emoji/Emoji.vue'
 import ContentCode from '~/components/content/ContentCode.vue'
 import ContentMentionGroup from '~/components/content/ContentMentionGroup.vue'
 import AccountHoverWrapper from '~/components/account/AccountHoverWrapper.vue'
@@ -50,16 +50,11 @@ export function nodeToVNode(node: Node): VNode | string | null {
   // add tooltip to emojis
   if (node.name === 'picture' || (node.name === 'img' && node.attributes?.alt)) {
     const props = node.attributes ?? {}
-    if (props['alt'])
-      props.title = props['alt'].startsWith(':') ? props['alt'].replace(/:/g, '') : findEmoji(props.alt)?.key.replace(/_/g, ' ')
-    // if it has a data-emoji-id, use that as the title instead
-    if (props['data-emoji-id'])
-      props.title = props['data-emoji-id']
-
+    props.as = node.name
     return h(
-      node.name,
+      Emoji,
       props,
-      node.children.map(treeToVNode),
+      () => node.children.map(treeToVNode),
     )
   }