From 8dd91002d740af4b105633287513fdb59f48f48e Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 14:16:02 +0800
Subject: [PATCH] feat: improve code block parsing

---
 components/common/CommonPaginator.vue    |  1 +
 components/nav/NavSide.vue               |  5 ++++-
 components/status/StatusBody.vue         |  5 +++--
 composables/content.ts                   |  7 ++++---
 layouts/default.vue                      |  1 -
 styles/global.css                        |  2 +-
 tests/__snapshots__/content.test.ts.snap | 17 +++++++++++------
 tests/content.test.ts                    | 18 +++++++++++++++---
 8 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index f4e3d4a9..2001e1c1 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -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'
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 3ce7f768..39788142 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -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>
diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 0f1bf541..91be958b 100644
--- a/components/status/StatusBody.vue
+++ b/components/status/StatusBody.vue
@@ -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"
     />
diff --git a/composables/content.ts b/composables/content.ts
index b0b2476d..49844899 100644
--- a/composables/content.ts
+++ b/composables/content.ts
@@ -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)
diff --git a/layouts/default.vue b/layouts/default.vue
index a4f13fbf..cb9c7021 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,7 +23,6 @@
             <UserSignInEntry v-if="!currentUser" />
             <VDropdown
               v-if="currentUser"
-              :triggers="['click', 'focus']"
               :distance="0"
               placement="bottom-end"
             >
diff --git a/styles/global.css b/styles/global.css
index c23ad6c0..0d7a5dc3 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -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;
diff --git a/tests/__snapshots__/content.test.ts.snap b/tests/__snapshots__/content.test.ts.snap
index 3e2c95d6..6f3499e7 100644
--- a/tests/__snapshots__/content.test.ts.snap
+++ b/tests/__snapshots__/content.test.ts.snap
@@ -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>
 "
 `;
 
diff --git a/tests/content.test.ts b/tests/content.test.ts
index 2fecf9cb..ae475044 100644
--- a/tests/content.test.ts
+++ b/tests/content.test.ts
@@ -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,