From 0f0665363605e29f93917a44102f7b6d617da2e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 2 Dec 2022 10:19:31 +0800
Subject: [PATCH] fix: render code block without language (#276)

---
 components/content/ContentCode.vue            |  4 ++--
 composables/content.ts                        |  9 ++++-----
 tests/__snapshots__/content-rich.test.ts.snap | 16 ++++++++++++++++
 tests/content-rich.test.ts                    | 10 ++++++++++
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/components/content/ContentCode.vue b/components/content/ContentCode.vue
index 4ffc9bc7..7b034b3c 100644
--- a/components/content/ContentCode.vue
+++ b/components/content/ContentCode.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   code: string
-  lang: string
+  lang?: string
 }>()
 
 const raw = $computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
@@ -13,7 +13,7 @@ const langMap: Record<string, string> = {
 }
 
 const highlighted = computed(() => {
-  return props.lang ? highlightCode(raw, langMap[props.lang] || props.lang as any) : raw
+  return props.lang ? highlightCode(raw, (langMap[props.lang] || props.lang) as any) : raw
 })
 </script>
 
diff --git a/composables/content.ts b/composables/content.ts
index 4e3e87c0..54c71f51 100644
--- a/composables/content.ts
+++ b/composables/content.ts
@@ -38,7 +38,7 @@ function handleCodeBlock(el: Element) {
     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])
+    const code = codeEl.childNodes[0] ? treeToText(codeEl.childNodes[0]) : ''
     return h(ContentCode, { lang, code: encodeURIComponent(code) })
   }
 }
@@ -61,11 +61,10 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
       return `:${name}:`
     })
     // handle code blocks
-    .replace(/>(```|~~~)([\s\S]+?)\1/g, (_1, _2, raw) => {
-      const plain = htmlToText(raw)
-      const [lang, ...code] = plain.split('\n')
+    .replace(/>(```|~~~)(\w*)([\s\S]+?)\1/g, (_1, _2, lang, raw) => {
+      const code = htmlToText(raw)
       const classes = lang ? ` class="language-${lang}"` : ''
-      return `><pre><code${classes}>${code.join('\n')}</code></pre>`
+      return `><pre><code${classes}>${code}</code></pre>`
     })
 
   const tree = parseFragment(processed)
diff --git a/tests/__snapshots__/content-rich.test.ts.snap b/tests/__snapshots__/content-rich.test.ts.snap
index fafa68b8..6e129390 100644
--- a/tests/__snapshots__/content-rich.test.ts.snap
+++ b/tests/__snapshots__/content-rich.test.ts.snap
@@ -25,6 +25,22 @@ exports[`content-rich > code frame 2 1`] = `
 "
 `;
 
+exports[`content-rich > code frame empty 1`] = `
+"<p></p>
+<pre></pre>
+<br />
+<p></p>
+"
+`;
+
+exports[`content-rich > code frame no lang 1`] = `
+"<p></p>
+<pre>hello world</pre>
+<br />no lang
+<p></p>
+"
+`;
+
 exports[`content-rich > custom emoji 1`] = `
 "Daniel Roe
 <img
diff --git a/tests/content-rich.test.ts b/tests/content-rich.test.ts
index b15355f6..828b5155 100644
--- a/tests/content-rich.test.ts
+++ b/tests/content-rich.test.ts
@@ -39,6 +39,16 @@ describe('content-rich', () => {
     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('code frame no lang', async () => {
+    const { formatted } = await render('<p>```<br />hello world<br />```<br />no lang</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it('code frame empty', async () => {
+    const { formatted } = await render('<p>```<br /><br />```<br /></p>')
+    expect(formatted).toMatchSnapshot()
+  })
 })
 
 async function render(content: string, emojis?: Record<string, Emoji>) {