fix(parse): preserve inline children inside self-contained block-level HTML (#192)

Author: danielroe

packages/comark/SPEC/HTML/block+inline-children.md

@@ -0,0 +1,42 @@
+## Input
+
+```md
+<p><img src="/foo.png" alt="x"></p>
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "p",
+      {
+        "$": { "html": 1, "block": 1 }
+      },
+      [
+        "img",
+        {
+          "$": { "html": 1, "block": 1 },
+          "src": "/foo.png",
+          "alt": "x"
+        }
+      ]
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<p><img src="/foo.png" alt="x" /></p>
+```
+
+## Markdown
+
+```md
+<p><img src="/foo.png" alt="x" /></p>
+```

packages/comark/src/internal/parse/token-processor.ts

@@ -48,6 +48,20 @@ export function marmdownItTokensToComarkTree(
   let i = 0
   let endLine = options.startLine
   while (i < tokens.length) {
+    const token = tokens[i]
+
+    // An html_block whose own content already closes its outer element
+    // (e.g. `<p><img></p>`, `<div>foo</div>`, `<img>`, `<!-- ... -->`) has no
+    // paired html_block_close later in the stream.
+    if (token.type === 'html_block' && htmlBlockHasOwnClose(token.content || '')) {
+      const htmlNodes = htmlToComarkNodes(token.content || '')
+      for (const htmlNode of htmlNodes) {
+        nodes.push(htmlNode)
+      }
+      i++
+      continue
+    }
+
     const result = processBlockToken(tokens, i, false, state)
     if (result.node) {
       if (options.preservePositions) {
@@ -69,6 +83,24 @@ export function marmdownItTokensToComarkTree(
   return nodes
 }
 
+/**
+ * Whether an `html_block` token's content already closes its own outer element.
+ * The block tokeniser only emits an `html_block_close` for lines that begin with
+ * `</`, so any block whose closer sits on the opener's line (`<p><img></p>`),
+ * including void elements and comments, has no companion close token.
+ */
+function htmlBlockHasOwnClose(content: string): boolean {
+  const trimmed = content.trim()
+  if (!trimmed) return false
+  // Comments, declarations, CDATA, processing instructions: self-terminating.
+  if (trimmed.startsWith('<!') || trimmed.startsWith('<?')) return true
+  const match = trimmed.match(/^<\s*([a-zA-Z][a-zA-Z0-9]*)/)
+  if (!match) return false
+  const tag = match[1]
+  if (VOID_ELEMENTS.has(tag.toLowerCase())) return true
+  return new RegExp(`</\\s*${tag}\\s*>`, 'i').test(trimmed)
+}
+
 /**
  * Extract and process attributes from a token's attrs array
  */
@@ -289,18 +321,11 @@ function processBlockToken(
       return { node: [null, {}, inner] as unknown as ComarkNode, nextIndex: startIndex + 1 }
     }
 
-    const htmlNodes = htmlToComarkNodes(content)
-    const [node1] = htmlNodes
+    const children = processBlockChildren(tokens, startIndex + 1, 'html_block_close', false, false, false, state)
+    const [node1] = htmlToComarkNodes(content)
     if (!node1) {
       return { node: null, nextIndex: startIndex + 1 }
     }
-
-    const isVoid = Array.isArray(node1) && VOID_ELEMENTS.has(node1[0] as string)
-    if (isVoid) {
-      return { node: node1, nextIndex: startIndex + 1 }
-    }
-
-    const children = processBlockChildren(tokens, startIndex + 1, 'html_block_close', false, false, false, state)
     const node = [node1[0]!, node1[1]! as ComarkElementAttributes, ...children.nodes] as ComarkNode
 
     return { node, nextIndex: children.nextIndex + 1 }

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

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { parse } from '../src/index'
+
+describe('block-level raw HTML', () => {
+  it('preserves inline children inside a self-contained block-level <p>', async () => {
+    const result = await parse('<p><img src="/foo.png" alt="x"></p>')
+
+    expect(result.nodes).toEqual([
+      ['p', { $: { html: 1, block: 1 } }, ['img', { $: { html: 1, block: 1 }, src: '/foo.png', alt: 'x' }]],
+    ])
+  })
+
+  it('preserves mixed text and inline children inside a single-line block-level <p>', async () => {
+    const result = await parse('<p>hello <img src="/foo.png" alt="x"> world</p>')
+
+    expect(result.nodes).toEqual([
+      [
+        'p',
+        { $: { html: 1, block: 1 } },
+        'hello',
+        ['img', { $: { html: 1, block: 1 }, src: '/foo.png', alt: 'x' }],
+        'world',
+      ],
+    ])
+  })
+
+  it('does not merge the following markdown paragraph into the preceding block-level <p>', async () => {
+    const md = `# Hello
+
+<p><img src="/foo.png" alt="x"></p>
+
+That is some text here.`
+
+    const result = await parse(md)
+
+    expect(result.nodes).toEqual([
+      ['h1', { id: 'hello' }, 'Hello'],
+      ['p', { $: { html: 1, block: 1 } }, ['img', { $: { html: 1, block: 1 }, src: '/foo.png', alt: 'x' }]],
+      ['p', {}, 'That is some text here.'],
+    ])
+  })
+
+  it('preserves text inside a single-line block-level <div>', async () => {
+    const result = await parse('<div>foo</div>')
+
+    expect(result.nodes).toEqual([['div', { $: { html: 1, block: 1 } }, 'foo']])
+  })
+})