feat(editor): Markdown 预览内嵌 HTML 安全渲染 + 目录大纲（TOC）

宿主 MarkdownText 出于聊天安全把 raw HTML 按字面文本渲染，预览 GitHub
风格 README（徽章墙 div、details 折叠块内嵌 markdown、表格单元格内联
标签、video/picture）时全是源码文本。本次在不动渲染器的前提下：

- markdown-html.ts（纯函数）：fence 感知切分器把文档切成 markdown/html
  段（CommonMark type-6 块级标签名单 + 注释段 + 空行终止）；段内标签
  tokenizer 归约 open/close/html parts；全文档引用定义收集（每段追加
  保持 [text][id] 跨段语义）
- MarkdownHtml.tsx：DOMPurify 白名单消毒（显式禁 script/iframe/form
  等；a 强制 _blank+noopener；本地媒体 src 经 /sidebar/file 重写）；
  MarkdownDocument 帧栈状态机让 <details> 跨段嵌套内部 markdown；
  MarkdownSegment 内联替换（MutationObserver 幂等 pass，把表格单元格
  等处标签文本消毒还原为元素，纯散文不误伤）
- md-toc.tsx：零高度 sticky 浮动目录按钮（≥3 标题）+ 弹出大纲，跳转
  平滑滚动 + 自动展开折叠 details + 高亮闪现。关键修复：子组件读父
  ref 在 React layout 阶段恒为 null（子先于父），改为经自身 bar ref
  的 parentElement 定位容器（jsdom 单测传预填 ref 掩盖了该 bug，仅
  真实挂载 e2e 抓到）
- 纯 markdown 文档走原单次解析路径零变化（现有 mermaid e2e 守卫一字
  不动）；新增 readme-style.md 种子 + 探针（消毒渲染/嵌套/内联/TOC
  全链路）；19 语言词典新增 toc 键；dompurify 提升为直接依赖（与
  mermaid 传递依赖去重单版本）

设计文档 docs/plans/2026-08-24-markdown-html-toc-design.md

src/client/TextEditor.tsx

@@ -14,7 +14,6 @@
  * renders the controls instead.
  */
 import { useEffect, useMemo, useRef, useState } from 'react'
-import type { ComponentType } from 'react'
 import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import { EditorState } from '@codemirror/state'
@@ -30,7 +29,10 @@ import { SandboxStatusBar } from './SandboxStatusBar.tsx'
 import { appendToDraft } from './conversation-draft.ts'
 import { buildSelectionInsert, linesOfSelection } from './selection-payload.ts'
 import { lazyChunkComponent } from './lazy-chunk.tsx'
-import { splitMermaidBlocks, type MermaidMarkdownProps } from './mermaid-blocks.ts'
+import { analyzeMarkdownHtml } from './markdown-html.ts'
+import { LazyMermaidMarkdown, MarkdownDocument, type MarkdownHtmlMedia } from './MarkdownHtml.tsx'
+import { MdToc } from './md-toc.tsx'
+import { splitMermaidBlocks } from './mermaid-blocks.ts'
 import { t } from './locales.ts'
 import type { EditorToolbarState, FileViewerProps } from './service.ts'
 import css from './sidebar.module.css'
@@ -45,16 +47,6 @@ interface SelectionPopup {
   top: number
 }
 
-/**
- * The chunk-resident markdown preview renderer (mermaid lazy chunk): one
- * MarkdownText pass over the whole source, with rendered mermaid fences
- * swapped for diagrams. Module-level `pick` keeps the load effect stable.
- */
-const LazyMermaidMarkdown = lazyChunkComponent<MermaidMarkdownProps>(
-  'mermaid',
-  (mod) => mod.MermaidMarkdown as ComponentType<MermaidMarkdownProps> | undefined,
-)
-
 /**
  * The sandbox tokens of the HTML preview iframe. NO allow-same-origin (the
  * preview must stay in an opaque origin — with the route's own origin it
@@ -266,9 +258,28 @@ export function TextEditor(props: FileViewerProps) {
     () => (markdown && mode === 'preview' ? splitMermaidBlocks(mdText) : []),
     [markdown, mode, mdText],
   )
+  /** Raw-HTML analysis (block runs lifted out + inline gate). Non-null only
+   *  for documents that actually contain HTML — plain markdown keeps the
+   *  legacy single-pass render path below, byte-for-byte. */
+  const htmlInfo = useMemo(
+    () => (markdown && mode === 'preview' ? analyzeMarkdownHtml(mdText) : null),
+    [markdown, mode, mdText],
+  )
   const hasMermaid = useMemo(
-    () => mdBlocks.some(block => block.kind === 'mermaid'),
-    [mdBlocks],
+    () => htmlInfo !== null
+      ? htmlInfo.segments.some((segment) => segment.kind === 'markdown'
+        && splitMermaidBlocks(segment.text).some((block) => block.kind === 'mermaid'))
+      : mdBlocks.some((block) => block.kind === 'mermaid'),
+    [htmlInfo, mdBlocks],
+  )
+  /** The media context for the split renderer (local-src rewriting inside
+   *  sanitized HTML). Memoized on primitives: MarkdownDocument sanitizes per
+   *  `media` identity, so a fresh object per render would re-sanitize every
+   *  keystroke. */
+  const htmlMedia = useMemo<MarkdownHtmlMedia>(
+    () => ({ scope, path, origin: window.location.origin }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scope.sessionId, scope.cwd, path],
   )
   const codeLabels = { copyLabel: t('copy'), copiedLabel: t('copied') }
 
@@ -395,13 +406,23 @@ export function TextEditor(props: FileViewerProps) {
               dictionary: the DSH MarkdownText/CodeBlock are cordis-free and
               fall back to hardcoded Chinese otherwise (same pattern as the
               chat's AssistantMarkdown). Render-time t() keeps them following
-              the active locale on live switches. Mermaid fences hand the
-              whole document to the mermaid lazy chunk (single markdown
-              parse; cross-fence references/footnotes stay intact); files
-              without one render exactly as before. */}
-          {hasMermaid
-            ? <LazyMermaidMarkdown text={previewText} codeLabels={codeLabels} />
-            : <MarkdownText text={previewText} codeLabels={codeLabels} />}
+              the active locale on live switches. Plain markdown (no HTML)
+              renders exactly as before — one MarkdownText pass for the whole
+              document, or the mermaid lazy chunk (single markdown parse;
+              cross-fence references/footnotes stay intact) when a mermaid
+              fence exists. Documents containing HTML (block runs or inline
+              tags) render through the split document renderer: markdown runs
+              keep the MarkdownText/mermaid path while raw-HTML runs render
+              as sanitized DOM (see markdown-html.tsx). */}
+          {/* The outline button rides on top of the preview scroll container
+              (sticky, zero-height — first child so it pins from the very
+              top) once the document has enough headings. */}
+          <MdToc />
+          {htmlInfo !== null
+            ? <MarkdownDocument info={htmlInfo} media={htmlMedia} codeLabels={codeLabels} />
+            : hasMermaid
+              ? <LazyMermaidMarkdown text={previewText} codeLabels={codeLabels} />
+              : <MarkdownText text={previewText} codeLabels={codeLabels} />}
         </div>
       )}
       {html && mode === 'preview' && (