fix(markdown): attributes of span inside headings

src/runtime/markdown-parser/remark-mdc/micromark-extension/tokenize-span.ts

@@ -2,9 +2,11 @@ import { markdownSpace } from 'micromark-util-character'
 import type { Effects, State, Code, TokenizeContext } from 'micromark-util-types'
 import { Codes } from './constants'
 import createLabel from './factory-label'
+import createAttributes from './factory-attributes'
 
 const label: any = { tokenize: tokenizeLabel, partial: true }
 const gfmCheck: any = { tokenize: checkGfmTaskCheckbox, partial: true }
+const attributes: any = { tokenize: tokenizeAttributes, partial: true }
 
 function tokenize (this: TokenizeContext, effects: Effects, ok: State, nok: State) {
   const self = this
@@ -33,10 +35,19 @@ function tokenize (this: TokenizeContext, effects: Effects, ok: State, nok: Stat
   }
 
   function exit (code: Code): void | State {
-    // prevent conflict with link syntax
+    // Prevent conflict with link syntax
     if (code === Codes.openingParentheses || code === Codes.openingSquareBracket) {
       return nok(code)
     }
+    // Attemp parsing attributes
+    if (code === Codes.openingCurlyBracket) {
+      return effects.attempt(attributes, exitOK, exitOK)(code)
+    }
+
+    return exitOK(code)
+  }
+
+  function exitOK (code: Code): void | State {
     effects.exit('textSpan')
     return ok(code)
   }
@@ -80,3 +91,23 @@ function checkGfmTaskCheckbox (effects: Effects, ok: State, nok: State) {
     return nok(code)
   }
 }
+
+function tokenizeAttributes (effects: Effects, ok: State, nok: State) {
+  // Always a `{`
+  return createAttributes(
+    effects,
+    ok,
+    nok,
+    'componentTextAttributes',
+    'componentTextAttributesMarker',
+    'componentTextAttribute',
+    'componentTextAttributeId',
+    'componentTextAttributeClass',
+    'componentTextAttributeName',
+    'componentTextAttributeInitializerMarker',
+    'componentTextAttributeValueLiteral',
+    'componentTextAttributeValue',
+    'componentTextAttributeValueMarker',
+    'componentTextAttributeValueData'
+  )
+}

test/features/parser-markdown.ts

@@ -119,5 +119,26 @@ export const testMarkdownParser = () => {
       expect(parsed.body.children.length).toEqual(1)
       expect(parsed.body.children[0].tag).toEqual('h1')
     })
+
+    test('span attributes', async () => {
+      const parsed = await $fetch('/api/parse', {
+        method: 'POST',
+        body: {
+          id: 'content:index.md',
+          content: [
+            '# Hello [World]{.text-green}',
+            'The answer to life the universe and everything: [42]{.font-bold .text-green}'
+          ].join('\n')
+        }
+      })
+
+      expect(parsed.body).toHaveProperty('children')
+      expect(parsed.body.children.length).toEqual(2)
+      expect(parsed.body.children[0].tag).toEqual('h1')
+      expect(parsed.body.children[0].children[1].props.class).toEqual('text-green')
+
+      expect(parsed.body.children[1].tag).toEqual('p')
+      expect(parsed.body.children[1].children[1].props.class).toEqual('font-bold text-green')
+    })
   })
 }