feat: improve code block parsing

This commit is contained in:
Anthony Fu 2022-11-27 14:16:02 +08:00
parent 2bf4f8913a
commit 8dd91002d7
8 changed files with 39 additions and 17 deletions

View file

@ -1,4 +1,5 @@
<script setup lang="ts">
// @ts-expect-error missing types
import { DynamicScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import type { Paginator } from 'masto'

View file

@ -11,7 +11,10 @@
<NavSideItem text="Conversations" to="/conversations" icon="i-ri:at-line" />
<NavSideItem text="Favourites" to="/favourites" icon="i-ri:heart-3-line" />
<NavSideItem text="Bookmarks" to="/bookmarks" icon="i-ri:bookmark-line " />
<NavSideItem text="Lists" :to="getAccountPath(currentUser.account)" icon="i-ri:list-check-2-line">
<NavSideItem
:text="currentUser.account.displayName || 'Profile'"
:to="getAccountPath(currentUser.account)" icon="i-ri:list-check-2-line"
>
<template #icon>
<AccountAvatar :account="currentUser.account" h="1.2em" />
</template>

View file

@ -6,12 +6,13 @@ const { status, withAction = true } = defineProps<{
withAction?: boolean
}>()
const { translation } = useTranslation(status)
const content = $computed(() => translation.visible ? translation.text : status.content)
const content = $computed(() => translation.visible ? translation.text : status.content)
</script>
<template>
<div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }">
<ContentRich v-if="content"
<ContentRich
v-if="content"
:content="content"
:emojis="status.emojis"
/>

View file

@ -60,9 +60,10 @@ export function contentToVNode(
return `:${name}:`
})
// handle code frames
.replace(/<p>(```|~~~)([\w]*)([\s\S]+?)\1/g, (_1, _2, lang, raw) => {
const code = htmlToText(`<p>${raw}</p>`)
return `<custom-code lang="${lang?.trim().toLowerCase() || ''}" code="${encodeURIComponent(code)}"></custom-code>`
.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 tree = parseFragment(content)

View file

@ -23,7 +23,6 @@
<UserSignInEntry v-if="!currentUser" />
<VDropdown
v-if="currentUser"
:triggers="['click', 'focus']"
:distance="0"
placement="bottom-end"
>

View file

@ -69,7 +69,7 @@ html {
}
.code-block {
--at-apply: bg-code text-0.9rem p3 rounded overflow-auto leading-1.6em;
--at-apply: bg-code text-0.9rem p3 mt-2 rounded overflow-auto leading-1.6em;
.shiki {
background: transparent !important;

View file

@ -1,15 +1,20 @@
// Vitest Snapshot v1
exports[`content-rich > code frame 1`] = `
"<p>Testing code block</p>
<pre lang=\\"ts\\">
import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;
"<p>Testing code block</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></p>
const isDark = usePreferredDark()</pre></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>
"
`;

View file

@ -33,15 +33,27 @@ describe('content-rich', () => {
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()
})
})
async function render(content: string, emojis?: Record<string, Emoji>) {
const vnode = contentToVNode(content, emojis)
const html = (await renderToString(vnode))
.replace(/<!--[\[\]]-->/g, '')
const formatted = format(html, {
parser: 'html',
})
let formatted = ''
try {
formatted = format(html, {
parser: 'html',
})
}
catch (e) {
formatted = html
}
return {
vnode,