fix: convert json attributes to yaml syntax

Author: farnabaz

package.json

@@ -99,7 +99,7 @@
     "rehype-sort-attributes": "^5.0.1",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
-    "remark-mdc": "https://pkg.pr.new/remark-mdc@3401af1",
+    "remark-mdc": "https://pkg.pr.new/remark-mdc@597e125",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "remark-stringify": "^11.0.0",

pnpm-lock.yaml

@@ -166,7 +166,7 @@ const mdcRemarkNodeHandlers = {
     // if node is not a list item or paragraph and has no children, wrap it in a paragraph and render it as a text component
     if (!['li', 'p'].includes(parent?.tagName || '') && !node.children?.length) {
       const attributes = Object.entries(node.properties || {})
-      if (attributes.length < 4 && !attributes.some(([key]) => key.includes('\n'))) {
+      if (attributes.length < 4 && !attributes.some(([key, value]) => String(value).includes('\n') || key.startsWith(':'))) {
         return {
           type: 'paragraph',
           children: [{

src/runtime/stringify/mdc-remark.ts

@@ -43,4 +43,47 @@ describe('stringify format', () => {
     const result = await stringifyMarkdown(body)
     expect(result).toBe(md)
   })
+
+  it('should stringify format correctly with yaml props', async () => {
+    const md = [
+      '::page-container',
+      '---',
+      'simple-array:',
+      '  - item1',
+      '  - item2',
+      '  - item3',
+      '---',
+      '::',
+      '',
+      '::page-container',
+      '---',
+      'items:',
+      '  - name: Item 1',
+      '    description: First item',
+      '  - name: Item 2',
+      '    description: Second item',
+      '---',
+      '::',
+      '',
+      '::page-container',
+      '---',
+      'attributes:',
+      '  - domains:',
+      '      - internal',
+      '  - env:',
+      '      - dev',
+      '      - staging',
+      '      - prod',
+      '  - dogs:',
+      '      - husky',
+      '      - beagle',
+      '---',
+      '::',
+      '',
+    ].join('\n')
+
+    const { body } = await parseMarkdown(md)
+    const result = await stringifyMarkdown(body)
+    expect(result).toBe(md)
+  })
 })