fix(stringify): join raw-HTML children without blank lines (#304)

Co-authored-by: Farnabaz <farnabaz@gmail.com>

Author: sandros94

packages/comark/src/internal/stringify/handlers/html.ts

@@ -71,6 +71,9 @@ export async function html(node: ElementNode, state: State, parent?: ElementNode
     childrenContent.push(await state.one(child, state, node))
   }
 
+  // A blank line inside a raw-HTML element would terminate it on reparse
+  const childSeparator = state.context.html ? state.context.blockSeparator : oneLiner ? '' : '\n'
+
   let content = ''
   let isPrevBlock = true
   for (let i = 0; i < children.length; i++) {
@@ -81,13 +84,13 @@ export async function html(node: ElementNode, state: State, parent?: ElementNode
       (blockTags.has(String(child?.[0])) || (!inlineTags.has(String(child?.[0])) && !hasTextSibling))
 
     if (i > 0 && !isPrevBlock && isBlock) {
-      content += state.context.blockSeparator
+      content += childSeparator
     }
     content += childContent
     isPrevBlock = isBlock
 
     if (isBlock && i < children.length - 1) {
-      content += state.context.blockSeparator
+      content += childSeparator
     }
   }
 

packages/comark/test/html-roundtrip.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { parseMarkdown } from '../src/parse'
+import { renderMarkdown } from '../src/render'
+
+/**
+ * A raw-HTML element round-trips when re-parsing the rendered markdown yields
+ * the same tree. A blank line inside the element would terminate the HTML
+ * block (or the paragraph, for inline HTML) and split the element apart.
+ */
+async function roundTrip(md: string) {
+  const t1 = await parseMarkdown(md)
+  const rendered = await renderMarkdown(t1)
+  const t2 = await parseMarkdown(rendered)
+  return { t1, t2, rendered }
+}
+
+describe('raw HTML round-trip (parse → renderMarkdown → parse)', () => {
+  const cases: Record<string, string> = {
+    'picture with source and img': '<picture>\n<source srcset="a.avif">\n<img src="a.jpg">\n</picture>',
+    'figure with img and figcaption': '<figure>\n<img src="a.jpg">\n<figcaption>cap</figcaption>\n</figure>',
+    'inline picture inside a paragraph': 'text <picture><source srcset="a.avif"><img src="a.jpg"></picture> tail',
+    'details with summary and p': '<details>\n<summary>sum</summary>\n<p>body</p>\n</details>',
+    'dl with dt and dd': '<dl>\n<dt>term</dt>\n<dd>def</dd>\n</dl>',
+    'select with two options': '<select>\n<option>a</option>\n<option>b</option>\n</select>',
+    'audio with two sources': '<audio controls>\n<source src="a.mp3">\n<source src="a.ogg">\n</audio>',
+    'object with two params':
+      '<object data="x.swf">\n<param name="a" value="1">\n<param name="b" value="2">\n</object>',
+    'nested divs': '<div>\n<div>one</div>\n<div>two</div>\n</div>',
+    'single-child video': '<video controls>\n<source src="a.mp4" type="video/mp4">\n</video>',
+    'mixed text and element children': '<div>\nsome text\n<figcaption>cap</figcaption>\n</div>',
+  }
+
+  for (const [name, md] of Object.entries(cases)) {
+    it(name, async () => {
+      const { t1, t2, rendered } = await roundTrip(md)
+      expect(rendered.trimEnd()).not.toMatch(/\n[ \t]*\n/)
+      expect(t2.nodes).toEqual(t1.nodes)
+    })
+  }
+})