feat: rework content handling to support inline markdown

composables/content.ts

@@ -1,7 +1,7 @@
 import type { Emoji } from 'masto'
 import type { DefaultTreeAdapterMap } from 'parse5'
-import { parseFragment } from 'parse5'
+import { parseFragment, serialize } from 'parse5'
-import type { Component, VNode } from 'vue'
+import type { VNode } from 'vue'
 import { Fragment, h, isVNode } from 'vue'
 import { RouterLink } from 'vue-router'
 import ContentCode from '~/components/content/ContentCode.vue'
@@ -9,10 +9,6 @@ import ContentCode from '~/components/content/ContentCode.vue'
 type Node = DefaultTreeAdapterMap['childNode']
 type Element = DefaultTreeAdapterMap['element']
 
-const CUSTOM_BLOCKS: Record<string, Component> = {
-  'custom-code': ContentCode,
-}
-
 function handleMention(el: Element) {
   // Redirect mentions to the user page
   if (el.tagName === 'a' && el.attrs.find(i => i.name === 'class' && i.value.includes('mention'))) {
@@ -34,48 +30,92 @@ function handleMention(el: Element) {
   return undefined
 }
 
-function handleBlocks(el: Element) {
+function handleCodeBlock(el: Element) {
-  if (el.tagName in CUSTOM_BLOCKS) {
+  if (el.tagName === 'pre' && el.childNodes[0]?.nodeName === 'code') {
-    const block = CUSTOM_BLOCKS[el.tagName]
+    const codeEl = el.childNodes[0] as Element
-    const attrs = Object.fromEntries(el.attrs.map(i => [i.name, i.value]))
+    const classes = codeEl.attrs.find(i => i.name === 'class')?.value
-    return h(block, attrs, () => el.childNodes.map(treeToVNode))
+    const lang = classes?.split(/\s/g).find(i => i.startsWith('language-'))?.replace('language-', '')
+    const code = treeToText(codeEl.childNodes[0])
+    return h(ContentCode, { lang, code: encodeURIComponent(code) })
   }
 }
 
 function handleNode(el: Element) {
-  return handleBlocks(el) || handleMention(el) || el
+  return handleCodeBlock(el) || handleMention(el) || el
 }
 
-export function contentToVNode(
+/**
-  content: string,
+ * Parse raw HTML form Mastodon server to AST,
-  customEmojis: Record<string, Emoji> = {},
+ * with interop of custom emojis and inline Markdown syntax
-): VNode {
+ */
-  content = content
+export function parseMastodonHTML(html: string, customEmojis: Record<string, Emoji> = {}) {
-    .trim()
+  const processed = html
-    // handle custom emojis
+    // custom emojis
     .replace(/:([\w-]+?):/g, (_, name) => {
       const emoji = customEmojis[name]
       if (emoji)
         return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" />`
       return `:${name}:`
     })
-    // handle code frames
+    // handle code blocks
     .replace(/>(```|~~~)([\s\S]+?)\1/g, (_1, _2, raw) => {
       const plain = htmlToText(raw)
       const [lang, ...code] = plain.split('\n')
-      return `><custom-code lang="${lang?.trim().toLowerCase() || ''}" code="${encodeURIComponent(code.join('\n'))}" />`
+      const classes = lang ? ` class="language-${lang}"` : ''
+      return `><pre><code${classes}>${code.join('\n')}</code></pre>`
     })
 
-  const tree = parseFragment(content)
+  const tree = parseFragment(processed)
+
+  function walk(node: Node) {
+    if ('childNodes' in node)
+      node.childNodes = node.childNodes.flatMap(n => walk(n))
+
+    if (node.nodeName === '#text') {
+      // @ts-expect-error casing
+      const text = node.value as string
+      const converted = text
+        .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)
+        return parseFragment(converted).childNodes
+    }
+    return [node]
+  }
+
+  tree.childNodes = tree.childNodes.flatMap(n => walk(n))
+
+  return tree
+}
+
+export function convertMastodonHTML(html: string, customEmojis: Record<string, Emoji> = {}) {
+  const tree = parseMastodonHTML(html, customEmojis)
+  return serialize(tree)
+}
+
+/**
+ * Raw HTML to VNodes
+ */
+export function contentToVNode(
+  content: string,
+  customEmojis: Record<string, Emoji> = {},
+): VNode {
+  const tree = parseMastodonHTML(content, customEmojis)
   return h(Fragment, tree.childNodes.map(n => treeToVNode(n)))
 }
 
-export function treeToVNode(
+function treeToVNode(
   input: Node,
 ): VNode | string | null {
-  if (input.nodeName === '#text')
+  if (input.nodeName === '#text') {
     // @ts-expect-error casing
-    return input.value
+    const text = input.value as string
+    return text
+  }
 
   if ('childNodes' in input) {
     const node = handleNode(input)

composables/statusDrafts.ts

@@ -42,7 +42,7 @@ export function getDefaultDraft(options: Partial<Draft['params'] & Omit<Draft, '
 
 export function getDraftFromStatus(status: Status, text?: null | string): Draft {
   return getDefaultDraft({
-    status: text || status.content,
+    status: text || convertMastodonHTML(status.content),
     mediaIds: status.mediaAttachments.map(att => att.id),
     visibility: status.visibility,
     attachments: status.mediaAttachments,

styles/global.css

@@ -68,7 +68,7 @@ body {
     --at-apply: my-2;
   }
   code {
-    --at-apply: bg-code text-code px1 py0.5 rounded text-sm;
+    --at-apply: bg-code text-code px1 py0.5 rounded text-0.9em;
   }
   pre code {
     --at-apply: text-base bg-transparent px0 py0 rounded-none;

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,
+  }
+}