fix(comark): consume nested brackets in inline component content (#306)

Author: sandros94

packages/comark/src/internal/parse/syntax/brackets.ts

@@ -1,22 +1,36 @@
 /**
- * Parse content within square brackets `[content]`.
- * Returns the content (without the brackets) and the index just past the closing `]`.
+ * Find the index of the `]` closing the `[` at `openIndex`, honouring
+ * backslash escapes and nested `[...]` pairs. Returns -1 when unclosed.
  */
-export function parseBracketContent(str: string, startIndex: number): { content: string; endIndex: number } | null {
-  if (str[startIndex] !== '[') return null
+export function findClosingBracket(str: string, openIndex: number): number {
+  if (str[openIndex] !== '[') return -1
 
-  let index = startIndex + 1
+  let index = openIndex + 1
+  let depth = 0
 
   while (index < str.length) {
     if (str[index] === '\\' && index + 1 < str.length) {
       index += 2
       continue
     }
-    if (str[index] === ']') {
-      return { content: str.slice(startIndex + 1, index), endIndex: index + 1 }
+    if (str[index] === '[') {
+      depth++
+    } else if (str[index] === ']') {
+      if (depth === 0) return index
+      depth--
     }
     index += 1
   }
 
-  return null
+  return -1
+}
+
+/**
+ * Parse content within square brackets `[content]`.
+ * Returns the content (without the brackets) and the index just past the closing `]`.
+ */
+export function parseBracketContent(str: string, startIndex: number): { content: string; endIndex: number } | null {
+  const close = findClosingBracket(str, startIndex)
+  if (close === -1) return null
+  return { content: str.slice(startIndex + 1, close), endIndex: close + 1 }
 }

packages/comark/src/plugins/syntax.ts

@@ -2,7 +2,7 @@ import type { MarkdownExit, PluginSimple, Renderer } from 'markdown-exit'
 import { Token } from 'markdown-exit'
 import type { MarkdownItPlugin, MarkdownItPluginWithOptions } from '../types.ts'
 import { defineComarkPlugin } from '../utils/helpers.ts'
-import { parseBracketContent } from '../internal/parse/syntax/brackets.ts'
+import { findClosingBracket, parseBracketContent } from '../internal/parse/syntax/brackets.ts'
 import { searchProps } from '../internal/parse/syntax/props.ts'
 import { parseBlockParams } from '../internal/parse/syntax/block-params.ts'
 import { parseYaml } from '../internal/yaml.ts'
@@ -427,23 +427,9 @@ const markdownItInlineSpan: PluginSimple = (md) => {
     const start = state.pos
     if (state.src[start] !== '[') return false
 
-    let index = start + 1
-    let depth = 0
-    while (index < state.src.length) {
-      if (state.src[index] === '\\') {
-        index += 2
-        continue
-      }
-      if (state.src[index] === '[') {
-        depth++
-      } else if (state.src[index] === ']') {
-        if (depth === 0) break
-        depth--
-      }
-      index += 1
-    }
-
-    if (index === start) return false
+    // An unclosed span consumes to the end of input (streaming auto-close)
+    const close = findClosingBracket(state.src, start)
+    const index = close === -1 ? state.src.length : close
 
     // Don't match `[text](url)` or `[text][ref]` — let the link parser handle those
     const nextChar = state.src[index + 1]

packages/comark/test/inline-component-content.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { parse } from '../src/index'
+
+/**
+ * The bracket content of `:name[…]` must consume nested `[…]` pairs — images,
+ * links and nested components all contain `]` — instead of terminating at the
+ * first `]` and spilling the remainder into the paragraph.
+ */
+
+describe('inline component bracket content', () => {
+  it('parses an image inside a component', async () => {
+    const result = await parse('See :badge[![icon](i.png)] here')
+
+    expect(result.nodes).toEqual([['p', {}, 'See ', ['badge', {}, ['img', { src: 'i.png', alt: 'icon' }]], ' here']])
+  })
+
+  it('parses a link inside a component', async () => {
+    const result = await parse('See :badge[[docs](https://x.dev)] here')
+
+    expect(result.nodes).toEqual([['p', {}, 'See ', ['badge', {}, ['a', { href: 'https://x.dev' }, 'docs']], ' here']])
+  })
+
+  it('keeps escaped brackets literal', async () => {
+    const result = await parse('See :badge[\\[docs\\](x)] here')
+
+    expect(result.nodes).toEqual([['p', {}, 'See ', ['badge', {}, '[docs](x)'], ' here']])
+  })
+
+  it('parses nested inline components', async () => {
+    const result = await parse('a :alert[:inner[:leaf]] b')
+
+    expect(result.nodes).toEqual([['p', {}, 'a ', ['alert', {}, ['inner', {}, ['leaf', {}]]], ' b']])
+  })
+
+  it('parses an image in a block directive header', async () => {
+    const result = await parse('::card[![alt](i.png)]\n::')
+
+    expect(result.nodes).toEqual([['card', {}, ['img', { src: 'i.png', alt: 'alt' }]]])
+  })
+})

packages/comark/test/syntax/brackets.test.ts

@@ -1,5 +1,31 @@
 import { describe, expect, it } from 'vitest'
-import { parseBracketContent } from '../../src/internal/parse/syntax/brackets'
+import { findClosingBracket, parseBracketContent } from '../../src/internal/parse/syntax/brackets'
+
+describe('findClosingBracket', () => {
+  it('should find the closing bracket', () => {
+    expect(findClosingBracket('[hello]', 0)).toBe(6)
+  })
+
+  it('should skip nested bracket pairs', () => {
+    expect(findClosingBracket('[a [b] c]', 0)).toBe(8)
+  })
+
+  it('should skip escaped brackets', () => {
+    expect(findClosingBracket('[a \\] b]', 0)).toBe(7)
+  })
+
+  it('should return -1 when unclosed', () => {
+    expect(findClosingBracket('[a [b]', 0)).toBe(-1)
+  })
+
+  it('should return -1 when not at an opening bracket', () => {
+    expect(findClosingBracket('a]', 0)).toBe(-1)
+  })
+
+  it('should work with non-zero start index', () => {
+    expect(findClosingBracket('prefix[content]', 6)).toBe(14)
+  })
+})
 
 describe('parseBracketContent', () => {
   it('should parse simple bracket content', () => {
@@ -29,4 +55,20 @@ describe('parseBracketContent', () => {
   it('should work with non-zero start index', () => {
     expect(parseBracketContent('prefix[content]suffix', 6)).toEqual({ content: 'content', endIndex: 15 })
   })
+
+  it('should include nested bracket pairs in the content', () => {
+    expect(parseBracketContent('[a [b] c]', 0)).toEqual({ content: 'a [b] c', endIndex: 9 })
+  })
+
+  it('should include an image in the content', () => {
+    expect(parseBracketContent('[![alt](i.png)]', 0)).toEqual({ content: '![alt](i.png)', endIndex: 15 })
+  })
+
+  it('should include multiple nested pairs in the content', () => {
+    expect(parseBracketContent('[[a] and [b]]', 0)).toEqual({ content: '[a] and [b]', endIndex: 13 })
+  })
+
+  it('should return null when a nested pair is left unclosed', () => {
+    expect(parseBracketContent('[a [b]', 0)).toBeNull()
+  })
 })