From 1e8d5a61be728197f5106d92cba9c71e35c71501 Mon Sep 17 00:00:00 2001
From: Bitshifter-9 <bandarampranav@gmail.com>
Date: Tue, 18 Nov 2025 09:30:43 +0530
Subject: [PATCH 1/2] fix: workaround for prettier removing list indentation in
 HTML blocks

This adds a transformer that ensures lists inside HTML blocks maintain
proper indentation to prevent Vue parse errors when prettier-plugin-slidev
removes the required indentation.

Note: This is a workaround. The proper fix should be in prettier-plugin-slidev
to preserve indentation during formatting. This transformer ensures
compatibility even when Prettier removes the required indentation.

Fixes #2337
---
 .../node/syntax/transform/html-list-indent.ts | 170 ++++++++++++++++++
 .../slidev/node/syntax/transform/index.ts     |   2 +
 test/__snapshots__/transform.test.ts.snap     |  13 ++
 test/transform.test.ts                        |  18 ++
 4 files changed, 203 insertions(+)
 create mode 100644 packages/slidev/node/syntax/transform/html-list-indent.ts

diff --git a/packages/slidev/node/syntax/transform/html-list-indent.ts b/packages/slidev/node/syntax/transform/html-list-indent.ts
new file mode 100644
index 0000000000..d5dd173f3f
--- /dev/null
+++ b/packages/slidev/node/syntax/transform/html-list-indent.ts
@@ -0,0 +1,170 @@
+import type { MarkdownTransformContext } from '@slidev/types'
+
+const voidTags = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+])
+
+const rawContentTags = new Set([
+  'pre',
+  'code',
+  'script',
+  'style',
+  'textarea',
+])
+
+const openTagRE = /^\s*<([A-Z][\w:-]*)(?:\s[^>]*)?>\s*$/i
+const closeTagRE = /^\s*<\/([A-Z][\w:-]*)\s*>\s*$/i
+const listMarkerRE = /^(\s*)(?:[-+*]|\d{1,9}[.)])\s+/
+
+interface HtmlStackItem {
+  tag: string
+  indent: number
+}
+
+function countIndent(input: string): number {
+  let count = 0
+  for (const ch of input) {
+    if (ch === ' ')
+      count += 1
+    else if (ch === '\t')
+      count += 2
+    else
+      break
+  }
+  return count
+}
+
+function repeatSpaces(length: number) {
+  return ' '.repeat(Math.max(length, 0))
+}
+
+function matchFence(line: string): { char: '`' | '~', size: number } | null {
+  const trimmed = line.trimStart()
+  if (!trimmed)
+    return null
+  if (trimmed.startsWith('```')) {
+    const match = trimmed.match(/^`{3,}/)
+    return match ? { char: '`', size: match[0].length } : null
+  }
+  if (trimmed.startsWith('~~~')) {
+    const match = trimmed.match(/^~{3,}/)
+    return match ? { char: '~', size: match[0].length } : null
+  }
+  return null
+}
+
+/**
+ * Workaround for prettier-plugin-slidev removing indentation from lists inside HTML blocks.
+ * This ensures lists inside HTML blocks maintain proper indentation to prevent Vue parse errors.
+ *
+ * Note: This is a workaround. The proper fix should be in prettier-plugin-slidev to preserve
+ * indentation during formatting. This transformer ensures compatibility even when Prettier
+ * removes the required indentation.
+ *
+ * @see https://github.com/slidevjs/slidev/issues/2337
+ */
+export function transformHtmlListIndent(ctx: MarkdownTransformContext) {
+  const code = ctx.s.toString()
+  if (!code.includes('<'))
+    return
+
+  const lines = code.split(/\r?\n/)
+  const newline = code.includes('\r\n') ? '\r\n' : '\n'
+
+  const stack: HtmlStackItem[] = []
+  let fenceChar: '`' | '~' | null = null
+  let fenceSize = 0
+  let changed = false
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const trimmed = line.trim()
+
+    const fenceMatch = matchFence(line)
+    if (fenceMatch) {
+      if (fenceChar === null) {
+        fenceChar = fenceMatch.char
+        fenceSize = fenceMatch.size
+      }
+      else if (fenceMatch.char === fenceChar && fenceMatch.size >= fenceSize) {
+        fenceChar = null
+        fenceSize = 0
+      }
+      continue
+    }
+
+    if (fenceChar)
+      continue
+
+    if (!trimmed) {
+      continue
+    }
+
+    const closeMatch = closeTagRE.exec(trimmed)
+    if (closeMatch) {
+      const tagName = closeMatch[1].toLowerCase()
+      for (let idx = stack.length - 1; idx >= 0; idx--) {
+        if (stack[idx].tag === tagName) {
+          stack.splice(idx)
+          break
+        }
+      }
+      continue
+    }
+
+    if (trimmed.startsWith('<!--'))
+      continue
+
+    const openMatch = openTagRE.exec(trimmed)
+    if (openMatch) {
+      const tagName = openMatch[1].toLowerCase()
+      if (!voidTags.has(tagName) && !trimmed.endsWith('/>')) {
+        stack.push({
+          tag: tagName,
+          indent: countIndent(line),
+        })
+      }
+      continue
+    }
+
+    if (!stack.length)
+      continue
+
+    if (stack.some(item => rawContentTags.has(item.tag)))
+      continue
+
+    const listMatch = listMarkerRE.exec(line)
+    if (!listMatch)
+      continue
+
+    const currentIndent = countIndent(listMatch[1])
+    const baseIndent = stack.at(-1)!.indent
+    const targetIndent = Math.max(baseIndent, 2)
+
+    if (currentIndent >= targetIndent)
+      continue
+
+    const content = line.slice(listMatch[1].length)
+    lines[i] = `${repeatSpaces(targetIndent)}${content}`
+    changed = true
+  }
+
+  if (!changed)
+    return
+
+  ctx.s.overwrite(0, code.length, lines.join(newline))
+}
diff --git a/packages/slidev/node/syntax/transform/index.ts b/packages/slidev/node/syntax/transform/index.ts
index e013370344..72bd4af17d 100644
--- a/packages/slidev/node/syntax/transform/index.ts
+++ b/packages/slidev/node/syntax/transform/index.ts
@@ -1,6 +1,7 @@
 import type { MarkdownTransformer, ResolvedSlidevOptions } from '@slidev/types'
 import setupTransformers from '../../setups/transformers'
 import { transformCodeWrapper } from './code-wrapper'
+import { transformHtmlListIndent } from './html-list-indent'
 import { transformPageCSS } from './in-page-css'
 import { transformKaTexWrapper } from './katex-wrapper'
 import { transformMagicMove } from './magic-move'
@@ -16,6 +17,7 @@ export async function getMarkdownTransformers(options: ResolvedSlidevOptions): P
     ...extras.pre,
 
     transformSnippet,
+    transformHtmlListIndent,
     options.data.config.highlighter === 'shiki' && transformMagicMove,
 
     ...extras.preCodeblock,
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index 99112fb263..372f202634 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -10,6 +10,19 @@ function _foo() {
 "
 `;
 
+exports[`html list indent within html blocks 1`] = `
+"
+<div>
+  <div>
+
+  - A
+  - B
+
+  </div>
+</div>
+"
+`;
+
 exports[`inline CSS 1`] = `
 "
 # Page 
diff --git a/test/transform.test.ts b/test/transform.test.ts
index c97cc77121..2512267852 100644
--- a/test/transform.test.ts
+++ b/test/transform.test.ts
@@ -1,5 +1,6 @@
 import { expect, it } from 'vitest'
 import { transformCodeWrapper } from '../packages/slidev/node/syntax/transform/code-wrapper'
+import { transformHtmlListIndent } from '../packages/slidev/node/syntax/transform/html-list-indent'
 import { transformPageCSS } from '../packages/slidev/node/syntax/transform/in-page-css'
 import { transformMermaid } from '../packages/slidev/node/syntax/transform/mermaid'
 import { transformPlantUml } from '../packages/slidev/node/syntax/transform/plant-uml'
@@ -7,6 +8,23 @@ import { transformSlotSugar } from '../packages/slidev/node/syntax/transform/slo
 import { transformSnippet } from '../packages/slidev/node/syntax/transform/snippet'
 import { createTransformContext } from './_tutils'
 
+it('html list indent within html blocks', () => {
+  const ctx = createTransformContext(`
+<div>
+  <div>
+
+- A
+- B
+
+  </div>
+</div>
+`)
+
+  transformHtmlListIndent(ctx)
+
+  expect(ctx.s.toString()).toMatchSnapshot()
+})
+
 it('slot-sugar', () => {
   const ctx = createTransformContext(`
 # Page 

From 998521086d3b2bfbaecce2a0c8181a8f18026a3d Mon Sep 17 00:00:00 2001
From: Bitshifter-9 <bandarampranav@gmail.com>
Date: Tue, 18 Nov 2025 09:43:50 +0530
Subject: [PATCH 2/2] fix: skip Vue components in html-list-indent transformer

Skip processing lists inside Vue components (v-*, PascalCase, template)
to prevent breaking v-clicks and other Vue component functionality.

Fixes Cypress test failure for deep nested lists.
---
 .../node/syntax/transform/html-list-indent.ts | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/slidev/node/syntax/transform/html-list-indent.ts b/packages/slidev/node/syntax/transform/html-list-indent.ts
index d5dd173f3f..3de19d3022 100644
--- a/packages/slidev/node/syntax/transform/html-list-indent.ts
+++ b/packages/slidev/node/syntax/transform/html-list-indent.ts
@@ -89,6 +89,7 @@ export function transformHtmlListIndent(ctx: MarkdownTransformContext) {
   let fenceChar: '`' | '~' | null = null
   let fenceSize = 0
   let changed = false
+  let hasVueComponentAfterLastHtml = false
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i]
@@ -117,6 +118,12 @@ export function transformHtmlListIndent(ctx: MarkdownTransformContext) {
     const closeMatch = closeTagRE.exec(trimmed)
     if (closeMatch) {
       const tagName = closeMatch[1].toLowerCase()
+      // Check if this is a Vue component closing tag
+      const isVueComponent = tagName.startsWith('v-') || tagName === 'template'
+      if (isVueComponent) {
+        hasVueComponentAfterLastHtml = false
+        continue
+      }
       for (let idx = stack.length - 1; idx >= 0; idx--) {
         if (stack[idx].tag === tagName) {
           stack.splice(idx)
@@ -131,10 +138,18 @@ export function transformHtmlListIndent(ctx: MarkdownTransformContext) {
 
     const openMatch = openTagRE.exec(trimmed)
     if (openMatch) {
-      const tagName = openMatch[1].toLowerCase()
-      if (!voidTags.has(tagName) && !trimmed.endsWith('/>')) {
+      const tagName = openMatch[1]
+      const tagNameLower = tagName.toLowerCase()
+      // Skip Vue components (v-*), PascalCase components, and template tags
+      const isPascalCase = tagName.length > 1 && tagName[0] >= 'A' && tagName[0] <= 'Z' && tagName[1] >= 'a' && tagName[1] <= 'z'
+      if (tagNameLower.startsWith('v-') || isPascalCase || tagNameLower === 'template') {
+        hasVueComponentAfterLastHtml = true
+        continue
+      }
+      if (!voidTags.has(tagNameLower) && !trimmed.endsWith('/>')) {
+        hasVueComponentAfterLastHtml = false
         stack.push({
-          tag: tagName,
+          tag: tagNameLower,
           indent: countIndent(line),
         })
       }
@@ -147,6 +162,10 @@ export function transformHtmlListIndent(ctx: MarkdownTransformContext) {
     if (stack.some(item => rawContentTags.has(item.tag)))
       continue
 
+    // Skip lists if there's a Vue component after the last HTML tag
+    if (hasVueComponentAfterLastHtml)
+      continue
+
     const listMatch = listMarkerRE.exec(line)
     if (!listMatch)
       continue