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
This commit is contained in:
Menghuan1918
@@ -48,6 +48,11 @@ const SEEDED_FILE = 'hello.txt'
|
||||
* and render a sanitized SVG diagram. */
|
||||
const SEEDED_MD_FILE = 'diagram.md'
|
||||
|
||||
/** A GitHub-style README markdown (badge div, <details> nesting markdown,
|
||||
* inline tags in table cells), opened through the Files window's tree to
|
||||
* prove raw-HTML runs render as sanitized DOM and the TOC outline works. */
|
||||
const SEEDED_README_FILE = 'readme-style.md'
|
||||
|
||||
/**
|
||||
* The plugin's crash markers. The client mounts inside an error boundary that
|
||||
* renders a strip whose text starts with these prefixes instead of crashing
|
||||
@@ -87,6 +92,41 @@ async function seedSession(): Promise<void> {
|
||||
'tail text',
|
||||
'',
|
||||
].join('\n'))
|
||||
// The README-style probe file: raw-HTML runs (badge wall div with an
|
||||
// embedded script, a <details> nesting a fence + heading) plus inline tags
|
||||
// inside a table cell. The script must be sanitized away in the preview.
|
||||
writeFileSync(join(WORKSPACE_PATH, SEEDED_README_FILE), [
|
||||
'# Readme Style',
|
||||
'',
|
||||
'<div align="center">',
|
||||
' <img alt="badge" src="https://img.shields.io/badge/x-y-blue" />',
|
||||
' <script>alert(1)</script>',
|
||||
'</div>',
|
||||
'',
|
||||
'## Setup',
|
||||
'',
|
||||
'[docs link][def]',
|
||||
'',
|
||||
'<details>',
|
||||
'<summary><b>Steps</b></summary>',
|
||||
'',
|
||||
'### Inside',
|
||||
'',
|
||||
'```sh',
|
||||
'dsh plugin --profile web add x',
|
||||
'```',
|
||||
'',
|
||||
'</details>',
|
||||
'',
|
||||
'## Table',
|
||||
'',
|
||||
'| col | note |',
|
||||
'| --- | --- |',
|
||||
'| alpha | line one<br/>line two |',
|
||||
'',
|
||||
'[def]: https://example.com/def',
|
||||
'',
|
||||
].join('\n'))
|
||||
const workspace = await api.post(`${BASE_URL}/api/workspace.create`, {
|
||||
data: { type: 'client-request', rpcId: 'e2e-workspace', method: 'workspace.create', payload: { path: WORKSPACE_PATH } },
|
||||
})
|
||||
@@ -433,6 +473,75 @@ test('plugin mounts into the DSH shell and survives a built-in tab sweep', async
|
||||
).toBeHidden()
|
||||
await assertNoCrash()
|
||||
|
||||
// README-style markdown (raw-HTML runs + TOC): open the seeded file and
|
||||
// require the full round-trip — sanitized HTML leaves (badge image as a
|
||||
// real element, active content stripped), markdown nested inside the
|
||||
// unclosed <details> run, the inline pass turning the table cell's <br/>
|
||||
// into an element, the reference link resolving across the HTML run, and
|
||||
// the TOC outline jumping into the collapsed details (auto-expanding it).
|
||||
await sidebar.locator('[title="Files"][draggable="true"]').first().click()
|
||||
const readmeRow = sidebar.locator(`[role="button"][title$="${SEEDED_README_FILE}"]:visible`)
|
||||
await expect(
|
||||
readmeRow,
|
||||
`the seeded "${SEEDED_README_FILE}" file must appear in the files window's tree`,
|
||||
).toHaveCount(1, { timeout: 30_000 })
|
||||
await readmeRow.click({ position: { x: 8, y: 8 } })
|
||||
await expect(
|
||||
sidebar.locator(`[title="${SEEDED_README_FILE}"][draggable="true"]`),
|
||||
'separate mode opens a new tab for the README-style markdown file',
|
||||
).toHaveCount(1, { timeout: 30_000 })
|
||||
// The hero div renders as a sanitized leaf with the badge image as a real
|
||||
// element (the remote src may not load in the sandboxed lane; the ELEMENT
|
||||
// is the proof of rendering, not the bytes).
|
||||
await expect(
|
||||
sidebar.locator('[data-dsh-html-segment] img[src*="img.shields.io"]'),
|
||||
'the badge-wall div must render its image as a real element',
|
||||
).toHaveCount(1, { timeout: 30_000 })
|
||||
// Active content never survives sanitization.
|
||||
await expect(
|
||||
sidebar.locator('script'),
|
||||
'the embedded <script> must be sanitized away',
|
||||
).toHaveCount(0)
|
||||
// The unclosed <details> run lowers the following markdown inside itself.
|
||||
const details = sidebar.locator('details')
|
||||
await expect(
|
||||
details,
|
||||
'the details run must render as a real element',
|
||||
).toHaveCount(1, { timeout: 30_000 })
|
||||
await expect(details.locator('summary'), 'the details summary must render').toHaveCount(1)
|
||||
await expect(
|
||||
details.locator('h3', { hasText: 'Inside' }),
|
||||
'the heading between the details tags must nest inside the element',
|
||||
).toHaveCount(1)
|
||||
// The inline pass: the table cell's literal <br/> became a real element.
|
||||
await expect(
|
||||
sidebar.locator('[data-html-inline] br'),
|
||||
'the table cell <br/> must render as a real element',
|
||||
).toHaveCount(1, { timeout: 30_000 })
|
||||
// The reference link resolves although its definition sits after an HTML run.
|
||||
await expect(
|
||||
sidebar.locator('a[href="https://example.com/def"]'),
|
||||
'reference links must resolve across lifted HTML runs',
|
||||
).toHaveCount(1, { timeout: 30_000 })
|
||||
// TOC: the outline button appears (4 headings), opens the panel, and
|
||||
// jumping into the collapsed details expands it.
|
||||
const tocButton = sidebar.locator('[data-dsh-md-toc]')
|
||||
await expect(
|
||||
tocButton,
|
||||
'the TOC button must appear once the document has enough headings',
|
||||
).toHaveCount(1, { timeout: 30_000 })
|
||||
await tocButton.click()
|
||||
const tocPanel = sidebar.locator('[data-dsh-md-toc-panel]')
|
||||
await expect(tocPanel, 'the TOC panel must open').toHaveCount(1)
|
||||
const insideItem = tocPanel.locator('button', { hasText: 'Inside' })
|
||||
await expect(insideItem, 'the nested heading must appear in the outline').toHaveCount(1)
|
||||
await insideItem.click()
|
||||
await expect(
|
||||
details,
|
||||
'jumping into a collapsed details must expand it',
|
||||
).toHaveAttribute('open', '')
|
||||
await assertNoCrash()
|
||||
|
||||
// The plugin's own console prefix must never appear in errors, and no
|
||||
// unhandled rejection may escape the sweep.
|
||||
const pluginErrors = consoleErrors.filter((text) => /dsh-better-sidebar|Unhandled/.test(text))
|
||||
|
||||
Reference in New Issue
Block a user