fix(stringify): detect inline components

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": "^3.8.1",
+    "remark-mdc": "https://pkg.pr.new/remark-mdc@0c5d4fa",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "remark-stringify": "^11.0.0",

pnpm-lock.yaml

@@ -163,6 +163,19 @@ 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) {
+      return {
+        type: 'paragraph',
+        children: [{
+          type: mdastTextComponentType,
+          name: node.tagName,
+          attributes: node.properties,
+          children: state.all(node),
+        }]
+      }
+    }
+
     let children = state.all(node)
     if (children.every(child => [mdastTextComponentType, 'text'].includes(child.type))) {
       children = [{ type: 'paragraph', children: children }] as unknown as typeof children

src/runtime/stringify/mdc-remark.ts

@@ -0,0 +1,24 @@
+import { expect, it, describe } from 'vitest'
+import { parseMarkdown, stringifyMarkdown } from '../utils/parser'
+
+describe('stringify format', () => {
+  it('should stringify format correctly', async () => {
+    const md = [
+      '::container{background-color="#eee" padding="20px"}',
+      '# This is a header',
+      '',
+      ':icon{color="#000" name="mdi:github" size="36px"}',
+      '',
+      '  :::content2',
+      '  Well',
+      '  :::',
+      '::',
+      ''
+    ].join('\n')
+    
+
+    const { body } = await parseMarkdown(md)
+    const result = await stringifyMarkdown(body)
+    expect(result).toBe(md)
+  })
+})

test/stringify/format.test.ts

@@ -0,0 +1,36 @@
+import { expect, it, describe } from 'vitest'
+import { parseMarkdown, stringifyMarkdown } from '../utils/parser'
+
+describe('stringify ordered list (ol)', () => {
+  it('should stringify complex AST with steps component', async () => {
+    const md = [
+      '::container{padding="0px"}',
+      '  :::container',
+      '  ---',
+      '  styles: |',
+      '    pre {',
+      '      border: 1px solid red !important;',
+      '',
+      '      span {',
+      '        line-height: 1;',
+      '      }',
+      '    }',
+      '  ---',
+      '  This container has a code block.',
+      '',
+      '  ```js',
+      '  function test() {',
+      '    console.log("test");',
+      '  }',
+      '  ```',
+      '  :::',
+      '::',
+      ''
+    ].join('\n')
+    
+
+    const { body } = await parseMarkdown(md)
+    const result = await stringifyMarkdown(body)
+    expect(result).toBe(md)
+  })
+})

test/stringify/nesting.test.ts

@@ -10,7 +10,6 @@ describe('stringify unordered list (ul)', () => {
       '',
     ].join('\n')
     const { body } = await parseMarkdown(md)
-    // console.log(JSON.stringify(body, null, 2))
     const result = await stringifyMarkdown(body)
     expect(result).toBe(md)
   })