Atlas Zeng
5e416eccef
* feat(mermaid): 新增 mermaid 懒加载 chunk（构建链四处同步 + mermaid 依赖） tsdown CHUNKS / bundle-route CHUNK_NAMES / chunk-loader ChunkName / package.json files 同步注册 mermaid chunk；mermaid ^11.16.1 进依赖与 lockfile；chunk 构建注入 uuid 浏览器入口别名，绕开 node:crypto 纯度门。 * feat(mermaid): Markdown 预览安全渲染 mermaid 图表 + 点击放大弹窗 - splitMermaidBlocks 纯函数按 fence 切块，无 mermaid 文件零行为变化； - mermaid.initialize 走 securityLevel strict + htmlLabels:false，不应用 bindFunctions（静态图）；渲染 SVG 经 mermaid-sanitize 二次清洗： 删 foreignObject/script/外来 HTML 元素、剥 @*/on* 属性、移除全部 href/xlink:href，仅接受 SVG 根，解析失败返回空串； - 点击图表弹出放大弹窗（滚轮缩放/拖拽平移/快捷键，借鉴 PR #75 交互， 基于已清洗 SVG 克隆重写，不新增攻击面）； - 深浅色跟随重渲、失败回退错误条 + 原码、CodeBlock 同款 chrome。 * test(mermaid): splitter/sanitize 单测 + chunk 清单同步 + 挂载冒烟 diagram.md - mermaid-blocks.spec 10 例 fence 切块语义； - mermaid-sanitize.spec 8 例 XSS（foreignObject/on*/@*/href/xlink:href/ script/外来元素/畸形 XML/非 SVG 根）； - bundle-route / chunk-artifact / manifest-consistency 清单加入 mermaid （chunk-artifact 补 addEventListener stub）； - 挂载冒烟新增 diagram.md：client-mermaid.js 往返、SVG 节点文字、 点击弹窗 Esc 关闭、preview 模式编辑器隐藏。 * docs(mermaid): 安全渲染设计文档 + lazy-chunks 表 + README 双语更新 设计文档记录基线决策（PR #99 架构 + PR #75 点击放大）、安全模型 （strict/htmlLabels/清洗/href 剥离/无 bindFunctions）、验证与取舍。 * fix(mermaid): sanitizer 属性名大小写归一，堵住混合大小写属性绕过（CR P1） XML 属性名保留大小写，而输出会经 HTML 解析归一化（dangerouslySetInnerHTML）， oNload/HREF/xlink:HREF 这类混合大小写属性此前会漏过清洗。比较前先 toLowerCase()，按原名删除；新增混合大小写事件/链接属性回归用例。 * fix(mermaid): sanitizer 元素黑名单大小写归一，堵住混合大小写元素绕过（CR P1） XML 元素名保留大小写，querySelectorAll('script') 等选择器匹配不到 <sCrIpT>/<foreignobject>，而输出经 HTML 解析会被归一化为 SVG script/foreignObject（可执行/可注入 HTML）。改为遍历全部元素按 localName.toLowerCase() 命中小写黑名单后整节点删除；新增混合大小写 script/foreignObject/外来 HTML 元素回归用例（jsdom 实证：旧选择器 命中 0，新逻辑命中 2）。 * fix(mermaid): 单次 Markdown 解析 + 占位交换（CR P1）+ CommonMark fence 规则（CR P2） P1（跨 fence 语义）：弃用逐块 MarkdownText 拆分，改为整篇文档单次 MarkdownText 渲染，布局后把 language-mermaid 代码块交换为 MermaidDiagram （React 管理的 .md-code-block 宿主保留在树中、display:contents 抑制盒子， 协调安全；块不再 mermaid 时还原原 children）。新增 tests/mermaid-markdown.spec.tsx 与 e2e 跨 fence 引用链接断言。 P2（fence 匹配）：支持 3+ 反引号与波浪号开 fence；闭 fence 须同字符且 长度不小于开 fence；反引号 info string 含反引号不视为开 fence；修复 带缩进开 fence 的 info 提取。blocks 单测 +3 例。
93 lines
4.1 KiB
TypeScript
93 lines
4.1 KiB
TypeScript
/**
|
|
* Markdown/mermaid block splitting: the pure splitter the markdown preview
|
|
* uses to lift mermaid fences out of the MarkdownText stream. Covers fence
|
|
* recognition (case, attributes, indentation), non-mermaid fences staying
|
|
* untouched, interleaved ordering, and open-fence recovery.
|
|
*/
|
|
import { describe, expect, it } from 'vitest'
|
|
import { splitMermaidBlocks } from '../src/client/mermaid-blocks.ts'
|
|
|
|
describe('splitMermaidBlocks', () => {
|
|
it('leaves mermaid-free markdown as one markdown block', () => {
|
|
expect(splitMermaidBlocks('# hi\n\ntext')).toEqual([
|
|
{ kind: 'markdown', text: '# hi\n\ntext' },
|
|
])
|
|
})
|
|
|
|
it('lifts a mermaid fence into a diagram block with the raw source', () => {
|
|
const blocks = splitMermaidBlocks('before\n```mermaid\ngraph TD\n A-->B\n```\nafter')
|
|
expect(blocks).toEqual([
|
|
{ kind: 'markdown', text: 'before' },
|
|
{ kind: 'mermaid', code: 'graph TD\n A-->B' },
|
|
{ kind: 'markdown', text: 'after' },
|
|
])
|
|
})
|
|
|
|
it('is case-insensitive and accepts mermaid attribute info strings', () => {
|
|
const lower = splitMermaidBlocks('```Mermaid\na-->b\n```')
|
|
expect(lower[0]).toEqual({ kind: 'mermaid', code: 'a-->b' })
|
|
const attributed = splitMermaidBlocks("```mermaid{theme:'dark'}\na-->b\n```")
|
|
expect(attributed[0]).toEqual({ kind: 'mermaid', code: 'a-->b' })
|
|
})
|
|
|
|
it('allows up to 3 spaces of fence indent (CommonMark)', () => {
|
|
const blocks = splitMermaidBlocks(' ```mermaid\na-->b\n ```')
|
|
expect(blocks).toEqual([{ kind: 'mermaid', code: 'a-->b' }])
|
|
})
|
|
|
|
it('does not lift fences inside a 4-space indented code block', () => {
|
|
const source = ' ```mermaid\n a-->b\n ```'
|
|
expect(splitMermaidBlocks(source)).toEqual([{ kind: 'markdown', text: source }])
|
|
})
|
|
|
|
it('keeps non-mermaid fences in the markdown stream untouched', () => {
|
|
const source = '```ts\nconst a = 1\n```'
|
|
expect(splitMermaidBlocks(source)).toEqual([{ kind: 'markdown', text: source }])
|
|
})
|
|
|
|
it('interleaves multiple diagrams preserving source order', () => {
|
|
const blocks = splitMermaidBlocks(
|
|
'# t\n```mermaid\ngraph TD\n A\n```\nmid\n```mermaid\npie\n "a": 1\n```\ntail',
|
|
)
|
|
expect(blocks.map(block => block.kind)).toEqual(['markdown', 'mermaid', 'markdown', 'mermaid', 'markdown'])
|
|
expect(blocks[1]).toEqual({ kind: 'mermaid', code: 'graph TD\n A' })
|
|
expect(blocks[3]).toEqual({ kind: 'mermaid', code: 'pie\n "a": 1' })
|
|
})
|
|
|
|
it('handles an empty file and mermaid-free text with no markdown blocks', () => {
|
|
expect(splitMermaidBlocks('')).toEqual([])
|
|
expect(splitMermaidBlocks('a\n\nb')).toEqual([{ kind: 'markdown', text: 'a\n\nb' }])
|
|
})
|
|
|
|
it('swallows the rest of the file on an unterminated mermaid fence', () => {
|
|
const blocks = splitMermaidBlocks('```mermaid\ngraph TD\n A-->B')
|
|
expect(blocks).toEqual([{ kind: 'mermaid', code: 'graph TD\n A-->B' }])
|
|
})
|
|
|
|
it('treats an empty mermaid fence as an empty diagram block', () => {
|
|
const blocks = splitMermaidBlocks('```mermaid\n```')
|
|
expect(blocks).toEqual([{ kind: 'mermaid', code: '' }])
|
|
})
|
|
|
|
it('lifts four-backtick and tilde fences (CommonMark fence runs)', () => {
|
|
const backticks = splitMermaidBlocks('````mermaid\ngraph TD\n A\n````')
|
|
expect(backticks).toEqual([{ kind: 'mermaid', code: 'graph TD\n A' }])
|
|
const tildes = splitMermaidBlocks('~~~mermaid\ngraph TD\n A\n~~~')
|
|
expect(tildes).toEqual([{ kind: 'mermaid', code: 'graph TD\n A' }])
|
|
})
|
|
|
|
it('only a same-char, at-least-as-long fence closes the opening fence', () => {
|
|
// A shorter backtick run must not close a 4-backtick opening fence.
|
|
const blocks = splitMermaidBlocks('````mermaid\na\n```\nb\n````')
|
|
expect(blocks).toEqual([{ kind: 'mermaid', code: 'a\n```\nb' }])
|
|
// A different fence character must not close the fence either.
|
|
const mixed = splitMermaidBlocks('~~~mermaid\na\n```\n~~~')
|
|
expect(mixed).toEqual([{ kind: 'mermaid', code: 'a\n```' }])
|
|
})
|
|
|
|
it('ignores backticks inside a backtick fence info string (CommonMark)', () => {
|
|
const source = '```mermaid`graph\na-->b\n```'
|
|
expect(splitMermaidBlocks(source)).toEqual([{ kind: 'markdown', text: source }])
|
|
})
|
|
})
|