teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: rework content handling to support inline markdown

Browse source
This commit is contained in:
Anthony Fu 2022-11-30 13:27:24 +08:00
parent ccf6a17f72
commit db5a022f3b
6 changed files with 216 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
composables/content.ts
View file

@ -1,7 +1,7 @@
import type { Emoji } from 'masto'
import type { DefaultTreeAdapterMap } from 'parse5'
import { parseFragment } from 'parse5'
import type { Component, VNode } from 'vue'
import { parseFragment, serialize } from 'parse5'
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) {
if (el.tagName in CUSTOM_BLOCKS) {
const block = CUSTOM_BLOCKS[el.tagName]
const attrs = Object.fromEntries(el.attrs.map(i => [i.name, i.value]))
return h(block, attrs, () => el.childNodes.map(treeToVNode))
function handleCodeBlock(el: Element) {
if (el.tagName === 'pre' && el.childNodes[0]?.nodeName === 'code') {
const codeEl = el.childNodes[0] as Element
const classes = codeEl.attrs.find(i => i.name === 'class')?.value
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,
customEmojis: Record<string, Emoji> = {},
): VNode {
content = content
.trim()
// handle custom emojis
/**
* Parse raw HTML form Mastodon server to AST,
* with interop of custom emojis and inline Markdown syntax
*/
export function parseMastodonHTML(html: string, customEmojis: Record<string, Emoji> = {}) {
const processed = html
// 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)

2
composables/statusDrafts.ts
View file

@ -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,

2
styles/global.css
View file

@ -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;

13
tests/__snapshots__/content-rich.test.ts.snap
View file

@ -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>
"
`;

73
tests/__snapshots__/html-parse.test.ts.snap Normal file
View file

@ -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>
"
`;

66
tests/html-parse.test.ts Normal file
View file

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