release: v0.4.5 — Mermaid 图表渲染支持

新增 Mermaid 图表渲染:
- npm 安装 mermaid@10 作为项目依赖
- markdown.ts 新增 rehypeMermaid 插件:将 mermaid 代码块
  转换为 .me-mermaid 容器(与 MetonaEditor 内置输出一致)
- Editor.tsx 初始化 mermaid (startOnLoad: false)
- 绑定 afterRender 事件 → mermaid.run() 渲染 SVG 图表
- 首次加载 setTimeout 兜底渲染

技术实现:
- rehypeMermaid 插件在 rehypeHighlight 之后运行
- 查找 pre > code.language-mermaid 节点
- 替换为 div.me-mermaid > div.mermaid 容器
- 保持 unified 管线完整(图片路径修复 + sanitize + highlight)
- mermaid.run({ querySelector: '.me-mermaid .mermaid' })

质量保证:
- TypeScript 严格模式: 0 errors
- 单元测试: 98/98 passed (16 markdown + 82 others)
This commit is contained in:
thzxx
2026-07-25 16:41:14 +08:00
parent 2e7baa1073
commit d6ae9e3c8e
4 changed files with 58 additions and 2 deletions
+2 -1
View File
@@ -1,6 +1,6 @@
{
"name": "marklite",
"version": "0.4.4",
"version": "0.4.5",
"description": "Lightweight Markdown Editor for Windows",
"main": "./dist/main/index.js",
"scripts": {
@@ -31,6 +31,7 @@
"@metona-team/metona-editor": "0.2.4",
"@metona-team/metona-toast": "0.2.1",
"dexie": "^4.0.11",
"mermaid": "^10.9.6",
"nanoid": "^5.1.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",