feat: rework content handling to support inline markdown

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

@@ -1,20 +1,27 @@
 // Vitest Snapshot v1
 
 exports[`content-rich > code frame 1`] = `
-"<p>Testing code block</p><p><pre lang=\\"ts\\">import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;
+"<p>Testing code block</p>
+<p></p>
+<pre lang=\\"ts\\">
+import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;
 
 // tracks mouse position
 const { x, y } = useMouse()
 // is the user prefers dark theme
-const isDark = usePreferredDark()</pre></p>"
+const isDark = usePreferredDark()</pre
+>
+<p></p>
+"
 `;
 
 exports[`content-rich > code frame 2 1`] = `
 "<p>
   <span class=\\"h-card\\"><a class=\\"u-url mention\\" to=\\"/@antfu@mas.to\\"></a></span>
   Testing<br />
-  <pre lang=\\"ts\\">const a = hello</pre>
 </p>
+<pre lang=\\"ts\\">const a = hello</pre>
+<p></p>
 "
 `;
 

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

@@ -0,0 +1,73 @@
+// Vitest Snapshot v1
+
+exports[`html-parse > code frame 1`] = `
+"<p>Testing code block</p>
+<p></p>
+<pre><code class=\\"language-ts\\">import { useMouse, usePreferredDark } from '@vueuse/core'
+
+// tracks mouse position
+const { x, y } = useMouse()
+// is the user prefers dark theme
+const isDark = usePreferredDark()</code></pre>
+<p></p>
+"
+`;
+
+exports[`html-parse > code frame 2 1`] = `
+"<p>
+  <span class=\\"h-card\\"
+    ><a href=\\"https://mas.to/@antfu\\" class=\\"u-url mention\\"
+      >@<span>antfu</span></a
+    ></span
+  >
+  Testing<br />
+</p>
+<pre><code class=\\"language-ts\\">const a = hello</code></pre>
+<p></p>
+"
+`;
+
+exports[`html-parse > custom emoji 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\\"
+/>
+"
+`;
+
+exports[`html-parse > empty 1`] = `""`;
+
+exports[`html-parse > inline markdown 1`] = `
+"<p>text <code>code</code> <b>bold</b> <em>italic</em></p>
+<p></p>
+<pre><code class=\\"language-js\\">code block</code></pre>
+<p></p>
+"
+`;
+
+exports[`html-parse > link + mention 1`] = `
+"<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>
+"
+`;

tests/html-parse.test.ts

@@ -0,0 +1,66 @@
+import type { Emoji } from 'masto'
+import { describe, expect, it } from 'vitest'
+import { format } from 'prettier'
+import { serialize } from 'parse5'
+import { parseMastodonHTML } from '~/composables/content'
+
+describe('html-parse', () => {
+  it('empty', async () => {
+    const { formatted } = await render('')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  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>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it('custom emoji', async () => {
+    const { formatted } = 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',
+        staticUrl: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png',
+        visibleInPicker: true,
+      },
+    })
+    expect(formatted).toMatchSnapshot()
+  })
+
+  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>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  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>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it('inline markdown', async () => {
+    const { formatted } = await render('<p>text `code` **bold** *italic*</p><p>```js<br />code block<br />```</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+})
+
+async function render(content: string, emojis?: Record<string, Emoji>) {
+  const node = parseMastodonHTML(content, emojis)
+  const html = serialize(node)
+  let formatted = ''
+
+  try {
+    formatted = format(html, {
+      parser: 'html',
+    })
+  }
+  catch (e) {
+    formatted = html
+  }
+
+  return {
+    html,
+    formatted,
+  }
+}