fix: enable decorations for structure: inline (#1103)

Co-authored-by: Aashish_Jha_1107 <user.email:"aashishjha1107@gmail.com>

Author: Aashish-Jha-11

packages/core/src/highlight/code-to-hast.ts

@@ -207,6 +207,9 @@ export function tokensToHast(
       lineNodes.push(lineNode)
       lines.push(lineNode)
     }
+    else if (structure === 'inline') {
+      lineNodes.push(lineNode)
+    }
   })
 
   if (structure === 'classic') {
@@ -220,6 +223,55 @@ export function tokensToHast(
 
     root.children.push(preNode)
   }
+  else if (structure === 'inline') {
+    // For inline structure, we need to invoke code hooks for transformers like decorations
+    // Build a synthetic code structure from the root's children
+    const syntheticLines: Element[] = []
+    let currentLine: Element = {
+      type: 'element',
+      tagName: 'span',
+      properties: { class: 'line' },
+      children: [],
+    }
+
+    for (const child of root.children) {
+      if (child.type === 'element' && child.tagName === 'br') {
+        syntheticLines.push(currentLine)
+        currentLine = {
+          type: 'element',
+          tagName: 'span',
+          properties: { class: 'line' },
+          children: [],
+        }
+      }
+      else if (child.type === 'element' || child.type === 'text') {
+        currentLine.children.push(child)
+      }
+    }
+    syntheticLines.push(currentLine)
+
+    const syntheticCode: Element = {
+      type: 'element',
+      tagName: 'code',
+      properties: {},
+      children: syntheticLines,
+    }
+
+    let transformedCode = syntheticCode
+    for (const transformer of transformers)
+      transformedCode = transformer?.code?.call(context, transformedCode) || transformedCode
+
+    // Extract the transformed children back to root
+    root.children = []
+    for (let i = 0; i < transformedCode.children.length; i++) {
+      if (i > 0)
+        root.children.push({ type: 'element', tagName: 'br', properties: {}, children: [] })
+
+      const line = transformedCode.children[i]
+      if (line.type === 'element')
+        root.children.push(...line.children)
+    }
+  }
 
   let result = root
   for (const transformer of transformers)

packages/core/test/decorations.test.ts

@@ -153,6 +153,64 @@ describe('decorations', () => {
     await expect(style + html)
       .toMatchFileSnapshot('./out/decorations/adjacent.html')
   })
+
+  it('works with structure inline', async () => {
+    const html = await codeToHtml('const foo = "bar"', {
+      theme: 'vitesse-light',
+      lang: 'ts',
+      structure: 'inline',
+      decorations: [
+        {
+          start: { line: 0, character: 6 },
+          end: { line: 0, character: 9 },
+          properties: { class: 'highlighted' },
+        },
+        {
+          start: { line: 0, character: 12 },
+          end: { line: 0, character: 17 },
+          properties: { class: 'highlighted-body' },
+        },
+      ],
+    })
+
+    await expect(style + html)
+      .toMatchFileSnapshot('./out/decorations/inline.html')
+  })
+
+  it('works with structure inline multiline', async () => {
+    const multilineCode = `const x = 1
+const y = 2
+const z = 3`
+
+    const html = await codeToHtml(multilineCode, {
+      theme: 'vitesse-light',
+      lang: 'ts',
+      structure: 'inline',
+      decorations: [
+        // Highlight "x" in first line
+        {
+          start: { line: 0, character: 6 },
+          end: { line: 0, character: 7 },
+          properties: { class: 'highlighted' },
+        },
+        // Highlight "y" in second line
+        {
+          start: { line: 1, character: 6 },
+          end: { line: 1, character: 7 },
+          properties: { class: 'highlighted-body' },
+        },
+        // Highlight across lines
+        {
+          start: { line: 1, character: 10 },
+          end: { line: 2, character: 6 },
+          properties: { class: 'highlighted-border' },
+        },
+      ],
+    })
+
+    await expect(style + html)
+      .toMatchFileSnapshot('./out/decorations/inline-multiline.html')
+  })
 })
 
 describe('decorations errors', () => {