feat(content): serialize custom emoji

composables/content.ts

@@ -54,7 +54,7 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
     .replace(/:([\w-]+?):/g, (_, name) => {
       const emoji = customEmojis[name]
       if (emoji)
-        return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" />`
+        return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
       return `:${name}:`
     })
     // handle code blocks
@@ -75,10 +75,10 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
       // @ts-expect-error casing
       const text = node.value as string
       const converted = text
+        .replace(/\*\*\*(.*?)\*\*\*/g, '<b><em>$1</em></b>')
         .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
         .replace(/\*(.*?)\*/g, '<em>$1</em>')
         .replace(/~~(.*?)~~/g, '<del>$1</del>')
-        .replace(/__(.*?)__/g, '<u>$1</u>')
         .replace(/`([^`]+?)`/g, '<code>$1</code>')
 
       if (converted !== text)
@@ -149,7 +149,7 @@ export function htmlToText(html: string) {
   return tree.childNodes.map(n => treeToText(n)).join('').trim()
 }
 
-function treeToText(input: Node): string {
+export function treeToText(input: Node): string {
   let pre = ''
   let body = ''
   let post = ''
@@ -185,9 +185,16 @@ function treeToText(input: Node): string {
     pre = '*'
     post = '*'
   }
+  else if (input.nodeName === 'del') {
+    pre = '~~'
+    post = '~~'
+  }
 
   if ('childNodes' in input)
     body = input.childNodes.map(n => treeToText(n)).join('')
 
+  if (input.nodeName === 'img' && input.attrs.some(attr => attr.name === 'class' && attr.value.includes('custom-emoji')))
+    return `:${input.attrs.find(attr => attr.name === 'data-emoji-id')?.value}:`
+
   return pre + body + post
 }

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

@@ -31,6 +31,7 @@ exports[`content-rich > custom emoji 1`] = `
   src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
   alt=\\":nuxt:\\"
   class=\\"custom-emoji\\"
+  data-emoji-id=\\"nuxt\\"
 />
 "
 `;

tests/__snapshots__/html-parse.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`html-parse > code frame 1`] = `
+exports[`html-parse > code frame > html 1`] = `
 "<p>Testing code block</p>
 <p></p>
 <pre><code class=\\"language-ts\\">import { useMouse, usePreferredDark } from '@vueuse/core'
@@ -13,7 +13,20 @@ const isDark = usePreferredDark()</code></pre>
 "
 `;
 
-exports[`html-parse > code frame 2 1`] = `
+exports[`html-parse > code frame > text 1`] = `
+"Testing code block
+
+\`\`\`ts
+import { useMouse, usePreferredDark } from '@vueuse/core'
+
+// tracks mouse position
+const { x, y } = useMouse()
+// is the user prefers dark theme
+const isDark = usePreferredDark()
+\`\`\`"
+`;
+
+exports[`html-parse > code frame 2 > html 1`] = `
 "<p>
   <span class=\\"h-card\\"
     ><a href=\\"https://mas.to/@antfu\\" class=\\"u-url mention\\"
@@ -27,27 +40,48 @@ exports[`html-parse > code frame 2 1`] = `
 "
 `;
 
-exports[`html-parse > custom emoji 1`] = `
+exports[`html-parse > code frame 2 > text 1`] = `
+"@antfu Testing
+
+\`\`\`ts
+const a = hello
+\`\`\`"
+`;
+
+exports[`html-parse > custom emoji > html 1`] = `
 "Daniel Roe
 <img
   src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
   alt=\\":nuxt:\\"
   class=\\"custom-emoji\\"
+  data-emoji-id=\\"nuxt\\"
 />
 "
 `;
 
-exports[`html-parse > empty 1`] = `""`;
+exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`;
 
-exports[`html-parse > inline markdown 1`] = `
+exports[`html-parse > empty > html 1`] = `""`;
-"<p>text <code>code</code> <b>bold</b> <em>italic</em></p>
+
+exports[`html-parse > empty > text 1`] = `""`;
+
+exports[`html-parse > inline markdown > html 1`] = `
+"<p>text <code>code</code> <b>bold</b> <em>italic</em> <del>del</del></p>
 <p></p>
 <pre><code class=\\"language-js\\">code block</code></pre>
 <p></p>
 "
 `;
 
-exports[`html-parse > link + mention 1`] = `
+exports[`html-parse > inline markdown > text 1`] = `
+"text \`code\` **bold** *italic* ~~del~~
+
+\`\`\`js
+code block
+\`\`\`"
+`;
+
+exports[`html-parse > link + mention > html 1`] = `
 "<p>
   Happy 🤗 we’re now using
   <span class=\\"h-card\\"
@@ -71,3 +105,5 @@ exports[`html-parse > link + mention 1`] = `
 </p>
 "
 `;
+
+exports[`html-parse > link + mention > text 1`] = `"Happy 🤗 we’re now using @vitest (migrated from chai+mocha) https://github.com/ayoayco/astro-reactive-library/pull/203"`;

tests/html-parse.test.ts

@@ -2,22 +2,24 @@ import type { Emoji } from 'masto'
 import { describe, expect, it } from 'vitest'
 import { format } from 'prettier'
 import { serialize } from 'parse5'
-import { parseMastodonHTML } from '~/composables/content'
+import { parseMastodonHTML, treeToText } from '~/composables/content'
 
 describe('html-parse', () => {
   it('empty', async () => {
-    const { formatted } = await render('')
+    const { formatted, serializedText } = await render('')
-    expect(formatted).toMatchSnapshot()
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
   })
 
   it('link + mention', async () => {
     // https://fosstodon.org/@ayo/109383002937620723
-    const { formatted } = await render('<p>Happy 🤗 we’re now using <span class="h-card"><a href="https://mas.to/@vitest" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>vitest</span></a></span> (migrated from chai+mocha) <a href="https://github.com/ayoayco/astro-reactive-library/pull/203" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/ayoayco/astro-react</span><span class="invisible">ive-library/pull/203</span></a></p>')
+    const { formatted, serializedText } = await render('<p>Happy 🤗 we’re now using <span class="h-card"><a href="https://mas.to/@vitest" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>vitest</span></a></span> (migrated from chai+mocha) <a href="https://github.com/ayoayco/astro-reactive-library/pull/203" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/ayoayco/astro-react</span><span class="invisible">ive-library/pull/203</span></a></p>')
-    expect(formatted).toMatchSnapshot()
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
   })
 
   it('custom emoji', async () => {
-    const { formatted } = await render('Daniel Roe :nuxt:', {
+    const { formatted, serializedText } = await render('Daniel Roe :nuxt:', {
       nuxt: {
         shortcode: 'nuxt',
         url: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png',
@@ -25,30 +27,35 @@ describe('html-parse', () => {
         visibleInPicker: true,
       },
     })
-    expect(formatted).toMatchSnapshot()
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
   })
 
   it('code frame', async () => {
     // https://mas.to/@antfu/109396489827394721
-    const { formatted } = await render('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;</p><p>// tracks mouse position<br />const { x, y } = useMouse()</p><p>// is the user prefers dark theme<br />const isDark = usePreferredDark()<br />```</p>')
+    const { formatted, serializedText } = await render('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;</p><p>// tracks mouse position<br />const { x, y } = useMouse()</p><p>// is the user prefers dark theme<br />const isDark = usePreferredDark()<br />```</p>')
-    expect(formatted).toMatchSnapshot()
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
   })
 
   it('code frame 2', async () => {
-    const { formatted } = await render('<p><span class=\"h-card\"><a href=\"https://mas.to/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
+    const { formatted, serializedText } = await render('<p><span class=\"h-card\"><a href=\"https://mas.to/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
-    expect(formatted).toMatchSnapshot()
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
   })
 
   it('inline markdown', async () => {
-    const { formatted } = await render('<p>text `code` **bold** *italic*</p><p>```js<br />code block<br />```</p>')
+    const { formatted, serializedText } = await render('<p>text `code` **bold** *italic* ~~del~~</p><p>```js<br />code block<br />```</p>')
-    expect(formatted).toMatchSnapshot()
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
   })
 })
 
-async function render(content: string, emojis?: Record<string, Emoji>) {
+async function render(input: string, emojis?: Record<string, Emoji>) {
-  const node = parseMastodonHTML(content, emojis)
+  const tree = parseMastodonHTML(input, emojis)
-  const html = serialize(node)
+  const html = serialize(tree)
   let formatted = ''
+  const serializedText = tree.childNodes.map(n => treeToText(n)).join('').trim()
 
   try {
     formatted = format(html, {
@@ -60,6 +67,9 @@ async function render(content: string, emojis?: Record<string, Emoji>) {
   }
 
   return {
+    serializedText,
+    input,
+    tree,
     html,
     formatted,
   }