fix: parse indented raw html children in html blocks (#208)

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

Author: atinux

.oxlintrc.json

@@ -2,9 +2,6 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "plugins": ["typescript", "oxc", "import"],
   "rules": {
-    "no-control-regex": "off",
-    "no-unused-expressions": "off",
-    "no-unused-vars": "off",
     "typescript/no-useless-empty-export": "off"
   },
   "overrides": [

docs/app/utils/components-manifest.ts

@@ -1,16 +1,5 @@
 import { pascalCase } from 'scule'
 import { localComponents, localComponentLoaders } from '#content/components'
-import {
-  UPageHero,
-  UPageSection,
-  UPageCard,
-  UPageCTA,
-  UButton,
-  UBadge,
-  UPageFeature,
-  UPageGrid,
-  UPricingPlan,
-} from '#components'
 
 // Define component imports for the docs app
 const components: Record<string, () => Promise<unknown>> = {

docs/server/api/generate-page.post.ts

@@ -47,7 +47,7 @@ Before generating, fetch the documentation you need:
 3. fetchComponentDoc for EACH component you plan to use — learn exact props and slots`
 
 export default defineEventHandler(async (event) => {
-  const { prompt, mode = 'nuxt-ui', structure } = await readBody(event)
+  const { prompt, mode = 'nuxt-ui', _structure } = await readBody(event)
 
   if (!prompt?.trim()) {
     throw createError({ statusCode: 400, message: 'Prompt is required' })

packages/comark/SPEC/HTML/block+component.md

@@ -20,11 +20,7 @@ Default Slot
       {
         "$": { "html": 1, "block": 1 }
       },
-      [
-        "component",
-        {},
-        "Default Slot"
-      ]
+      "::component\nDefault Slot\n::"
     ]
   ]
 }
@@ -34,18 +30,18 @@ Default Slot
 
 ```html
 <hello>
-  <component>
-    Default Slot
-  </component>
+  ::component
+  Default Slot
+  ::
 </hello>
 ```
 
 ## Markdown
 
 ```md
 <hello>
-  ::component
-  Default Slot
-  ::
+::component
+Default Slot
+::
 </hello>
 ```

packages/comark/SPEC/HTML/block.md

@@ -18,12 +18,7 @@ Hello **World**
       {
         "$": { "html": 1, "block": 1 }
       },
-      "Hello ",
-      [
-        "strong",
-        {},
-        "World"
-      ]
+      "Hello **World**"
     ]
   ]
 }
@@ -33,7 +28,7 @@ Hello **World**
 
 ```html
 <hello>
-  Hello <strong>World</strong>
+  Hello **World**
 </hello>
 ```
 

packages/comark/SPEC/HTML/mix+paragraph.md

@@ -22,6 +22,11 @@ export function autoCloseMarkdown(markdown: string): string {
   let inFrontmatter = false
   let inBlockMath = false
   let tableStart = -1
+  // Tag name when inside a raw-text HTML element (`<style>`, `<script>`,
+  // `<pre>`, `<textarea>`). Their bodies must be passed through verbatim —
+  // any `::root`/`**` markers there are CSS/JS/text, not Comark/markdown.
+  let inRawTextElement: 'style' | 'script' | 'pre' | 'textarea' | null = null
+  const RAW_TEXT_OPEN_RE = /^<(script|pre|style|textarea)(\s|>|$)/i
 
   const componentStack: Array<{
     depth: number
@@ -34,6 +39,23 @@ export function autoCloseMarkdown(markdown: string): string {
     const line = lines[idx]
     const trimmed = line.trim()
 
+    // Raw-text HTML element: skip all line-level processing inside its body,
+    // and update the open/close state. Open and close can sit on the same
+    // line (e.g. `<style>body { ... }</style>` inline).
+    if (inRawTextElement) {
+      const closeRe = new RegExp(`</${inRawTextElement}\\s*>`, 'i')
+      if (closeRe.test(line)) inRawTextElement = null
+      continue
+    }
+    const rawTextMatch = trimmed.match(RAW_TEXT_OPEN_RE)
+    if (rawTextMatch) {
+      const tag = rawTextMatch[1].toLowerCase() as 'style' | 'script' | 'pre' | 'textarea'
+      // Stay "inside" only if the close tag isn't already on this line.
+      const closeRe = new RegExp(`</${tag}\\s*>`, 'i')
+      if (!closeRe.test(line)) inRawTextElement = tag
+      continue
+    }
+
     // Frontmatter: only starts at document line 0
     if (idx === 0 && trimmed === '---') {
       inFrontmatter = true

packages/comark/SPEC/HTML/mix.md

@@ -1,14 +1,13 @@
-// BASED ON https://github.com/serkodev/markdown-exit/blob/fe1351070a5841426223ab4a0a5c7874ba2b1257/packages/markdown-exit/src/parser/block/rules/html_block.ts
+// Standard CommonMark html_block rule — see
+// https://spec.commonmark.org/0.30/#html-blocks
+//
+// 7 sequences in priority order, each: [opener regex, closer regex, can-terminate-paragraph]
 
 import type { StateBlock } from 'markdown-exit'
 import block_names from './html_blocks.ts'
 import { HTML_OPEN_CLOSE_TAG_RE } from './html_re.ts'
 
-// An array of opening and corresponding closing sequences for html tags,
-// last argument defines whether it can terminate a paragraph or not
-//
 const HTML_SEQUENCES: [RegExp, RegExp, boolean][] = [
-  [new RegExp(`${HTML_OPEN_CLOSE_TAG_RE.source}\\s*$`), /^<\/[^>]+>$/, true],
   [/^<(script|pre|style|textarea)(?=(\s|>|$))/i, /<\/(script|pre|style|textarea)>/i, true],
   [/^<!--/, /-->/, true],
   [/^<\?/, /\?>/, true],
@@ -22,9 +21,7 @@ export default function html_block(state: StateBlock, startLine: number, endLine
   let pos = state.bMarks[startLine] + state.tShift[startLine]
   let max = state.eMarks[startLine]
 
-  // if it's indented more than 3 spaces, it should be a code block
   if (state.sCount[startLine] - state.blkIndent >= 4) return false
-
   if (state.src.charCodeAt(pos) !== 0x3c /* < */) return false
 
   let lineText = state.src.slice(pos, max)
@@ -33,23 +30,16 @@ export default function html_block(state: StateBlock, startLine: number, endLine
   for (; i < HTML_SEQUENCES.length; i++) {
     if (HTML_SEQUENCES[i][0].test(lineText)) break
   }
-
   if (i === HTML_SEQUENCES.length) return false
 
-  if (silent) {
-    // true if this sequence can be a terminator, false otherwise
-    return HTML_SEQUENCES[i][2]
-  }
+  if (silent) return HTML_SEQUENCES[i][2]
 
   let nextLine = startLine + 1
 
-  // If we are here - we detected HTML block.
-  // Let's roll down till block end.
-  if (i !== 0 && !HTML_SEQUENCES[i][1].test(lineText)) {
+  // Walk forward until the closer regex matches or we hit a blank line.
+  if (!HTML_SEQUENCES[i][1].test(lineText)) {
     for (; nextLine < endLine; nextLine++) {
-      if (state.sCount[nextLine] < state.blkIndent) {
-        break
-      }
+      if (state.sCount[nextLine] < state.blkIndent) break
 
       pos = state.bMarks[nextLine] + state.tShift[nextLine]
       max = state.eMarks[nextLine]
@@ -61,9 +51,9 @@ export default function html_block(state: StateBlock, startLine: number, endLine
       }
     }
   }
-  state.line = nextLine
 
-  const token = lineText.startsWith('</') ? state.push('html_block_close', '', -1) : state.push('html_block', '', 1)
+  state.line = nextLine
+  const token = state.push('html_block', '', 1)
   token.map = [startLine, nextLine]
   token.content = state.getLines(startLine, nextLine, state.blkIndent, true)