fix(code-block): meta property (#2067)

Co-authored-by: nobkd <44443899+nobkd@users.noreply.github.com>
nuxt · May 22, 2023 · e19113d · e19113d
1 parent 52c7659
commit e19113d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/src/runtime/markdown-parser/handler/code.ts b/src/runtime/markdown-parser/handler/code.ts
@@ -12,7 +12,7 @@ type Node = MdastContent & {
 
 export default (h: H, node: Node) => {
   const lang = (node.lang || '') + ' ' + (node.meta || '')
-  const { language, highlights, filename } = parseThematicBlock(lang)
+  const { language, highlights, filename, meta } = parseThematicBlock(lang)
   const code = node.value ? detab(node.value + '\n') : ''
 
   return h(
@@ -22,7 +22,7 @@ export default (h: H, node: Node) => {
       language,
       filename,
       highlights,
-      meta: node.meta,
+      meta,
       code,
       className: [`language-${language}`]
     },

diff --git a/src/runtime/markdown-parser/handler/utils.ts b/src/runtime/markdown-parser/handler/utils.ts
@@ -9,22 +9,25 @@ export function parseThematicBlock (lang: string) {
   /**
    * Language property on node is missing
    */
-  if (!lang) {
+  if (!lang?.trim()) {
     return {
       language: undefined,
       highlights: undefined,
-      fileName: undefined
+      fileName: undefined,
+      meta: undefined
     }
   }
 
   const language = lang.replace(/[{|[](.+)/, '').match(/^[^ \t]+(?=[ \t]|$)/)
-  const highlightTokens = lang.match(/{([^}]+)}/)
-  const filenameTokens = lang.match(/\[(.+)\]/)
+  const highlightTokens = lang.match(/{([^}]*)}/)
+  const filenameTokens = lang.match(/\[([^\]]*)\]/)
+  const meta = lang.replace(/^\w*\s*(\[[^\]]*\]|\{[^}]*\})?\s*(\[[^\]]*\]|\{[^}]*\})?\s*/, '')
 
   return {
     language: language ? language[0] : undefined,
     highlights: parseHighlightedLines(highlightTokens && highlightTokens[1]),
-    filename: Array.isArray(filenameTokens) ? filenameTokens[1] : undefined
+    filename: Array.isArray(filenameTokens) && filenameTokens[1] ? filenameTokens[1] : undefined,
+    meta
   }
 }
 

diff --git a/test/document-driven.test.ts b/test/document-driven.test.ts
@@ -72,6 +72,6 @@ describe('fixtures:document-driven', async () => {
 
   test('redirect in `_dir.yml`', async () => {
     const response = await fetch(url('/redirect'))
-    expect(response.url).toBe('https://nuxtjs.org/')
+    expect(response.url).toBe('https://v2.nuxt.com/')
   })
 })
diff --git a/test/features/parser-markdown.ts b/test/features/parser-markdown.ts
@@ -58,12 +58,62 @@ export const testMarkdownParser = () => {
       expect(parsed.body).toHaveProperty('children[0].props')
       const props = parsed.body.children[0].props
       expect(props).toHaveProperty('meta')
-      expect(props.meta).toBe('[file.ts]{4-6,7} other code block info')
+      expect(props.meta).toBe('other code block info')
       expect(props.language).toBe('ts')
       expect(props.filename).toBe('file.ts')
       expect(props.highlights).toEqual([4, 5, 6, 7])
     })
 
+    test('Keep meta from fenced code block without space', async () => {
+      const parsed = await $fetch('/api/parse', {
+        method: 'POST',
+        body: {
+          id: 'content:index.md',
+          content: [
+            '```ts[file.ts]{4-6,7}other code block info',
+            'let code = undefined;',
+            'return code;',
+            '```'
+          ].join('\n')
+        }
+      })
+
+      expect(parsed).toHaveProperty('body')
+      expect(parsed.body).toHaveProperty('children[0].tag', 'code')
+      expect(parsed.body).toHaveProperty('children[0].props')
+      const props = parsed.body.children[0].props
+      expect(props).toHaveProperty('meta')
+      expect(props.meta).toBe('other code block info')
+      expect(props.language).toBe('ts')
+      expect(props.filename).toBe('file.ts')
+      expect(props.highlights).toEqual([4, 5, 6, 7])
+    })
+
+    test('Keep meta from fenced code block without language', async () => {
+      const parsed = await $fetch('/api/parse', {
+        method: 'POST',
+        body: {
+          id: 'content:index.md',
+          content: [
+            '```[] {4-6,7} other code block info',
+            'let code = undefined;',
+            'return code;',
+            '```'
+          ].join('\n')
+        }
+      })
+
+      expect(parsed).toHaveProperty('body')
+      expect(parsed.body).toHaveProperty('children[0].tag', 'code')
+      expect(parsed.body).toHaveProperty('children[0].props')
+      const props = parsed.body.children[0].props
+      expect(props).toHaveProperty('meta')
+      expect(props.meta).toBe('other code block info')
+      expect(props.language).toBe(undefined)
+      expect(props.filename).toBe(undefined)
+      expect(props.highlights).toEqual([4, 5, 6, 7])
+    })
+
     test('comment', async () => {
       const parsed = await $fetch('/api/parse', {
         method: 'POST',