feat: show emoji tooltip (#2485)

.gitignore

@@ -2,6 +2,7 @@ node_modules
 *.log
 dist
 .output
+.pnpm-store
 .nuxt
 .env
 .DS_Store

components/emoji/Emoji.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { as, alt, dataEmojiId } = $defineProps<{
+  as: string
+  alt?: string
+  dataEmojiId?: string
+}>()
+
+let title = $ref<string | undefined>()
+
+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" :alt="alt" :data-emoji-id="dataEmojiId" :title="title">
+    <slot />
+  </component>
+</template>

composables/content-render.ts

@@ -6,6 +6,7 @@ import { RouterLink } from 'vue-router'
 import { decode } from 'tiny-decode'
 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'
@@ -19,8 +20,11 @@ function getTextualAstComponents(astChildren: Node[]): string {
 }
 
 /**
-* Raw HTML to VNodes
-*/
+ * Raw HTML to VNodes.
+ *
+ * @param content HTML content.
+ * @param options Options.
+ */
 export function contentToVNode(
   content: string,
   options?: ContentParseOptions,
@@ -43,6 +47,17 @@ export function nodeToVNode(node: Node): VNode | string | null {
   if (node.name === 'mention-group')
     return h(ContentMentionGroup, node.attributes, () => node.children.map(treeToVNode))
 
+  // add tooltip to emojis
+  if (node.name === 'picture' || (node.name === 'img' && node.attributes?.alt)) {
+    const props = node.attributes ?? {}
+    props.as = node.name
+    return h(
+      Emoji,
+      props,
+      () => node.children.map(treeToVNode),
+    )
+  }
+
   if ('children' in node) {
     if (node.name === 'a' && (node.attributes.href?.startsWith('/') || node.attributes.href?.startsWith('.'))) {
       node.attributes.to = node.attributes.href

package.json

@@ -79,6 +79,7 @@
     "js-yaml": "^4.1.0",
     "lru-cache": "^10.0.0",
     "masto": "^5.11.3",
+    "node-emoji": "^2.1.3",
     "nuxt-security": "^0.13.1",
     "page-lifecycle": "^0.1.2",
     "pinia": "^2.1.4",

tests/nuxt/__snapshots__/content-rich.test.ts.snap

@@ -58,7 +58,7 @@ exports[`content-rich > code frame no lang 1`] = `"<p><pre class="code-block">he
 
 exports[`content-rich > custom emoji 1`] = `
 "Daniel Roe
-<picture alt=":nuxt:" class="custom-emoji" data-emoji-id="nuxt"
+<picture class="custom-emoji" alt=":nuxt:" data-emoji-id="nuxt" title="nuxt"
   ><source
     srcset="
       https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png
@@ -67,6 +67,7 @@ exports[`content-rich > custom emoji 1`] = `
   <img
     src="https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png"
     alt=":nuxt:"
+    title="nuxt"
 /></picture>
 "
 `;
@@ -129,8 +130,8 @@ exports[`content-rich > link + mention 1`] = `
   Happy
   <img
     src="/emojis/twemoji/1f917.svg"
-    alt="🤗"
     class="iconify-emoji iconify-emoji--twemoji"
+    alt="🤗"
   />
   we’re now using
   <span class="h-card"