xfy
77a22bbfb1
mermaid 代码块( ```mermaid )在富文本编辑器里此前只是普通源码,作者看不到 渲染效果。现在像数学公式、脚注一样在编辑器内直接预览:源码下方加预览区, debounce 500ms 后渲染成 SVG,跟随站点 light/dark 主题切换,与前台文章页 渲染视觉完全一致。 一致性保证(核心): - 同一份 mermaid 运行时:编辑器与前台都加载 /mermaid/mermaid.js(11.16.0) - 同一套主题变量:经 @yggdrasil/shared 单一真相源(上一提交下沉) - 同一份渲染配置:theme:'base' + securityLevel:'strict' + flowchart.curve:'basis' - 同一主题切换机制:监听 THEME_CHANGE_EVENT(与 codemirror-editor 同范式) 实现: - mermaid.ts:加载 bundle + renderMermaid(source, theme) 封装,与前台同逻辑 - code-block-view.ts:mermaid 块构造时建预览区;源码变化 debounce 重渲染; renderToken 防竞态(快速改动只保留最新);主题事件重渲染;language 切入/切出 mermaid 时创建/移除预览区;destroy 清理 timer+监听+token - 渲染失败显示错误态(accent 色左边框),源码仍可编辑修正 - 样式对齐前台 pre[data-mermaid-rendered]:flex 居中、SVG 等比缩放、Latte/Mocha 双主题 - 测试 mock mermaid 运行时,覆盖预览区生命周期、debounce、竞态、主题、错误、清理 服务端 markdown.rs / Dioxus.toml / Rust-JS 桥零改动。
30 lines
826 B
JSON
30 lines
826 B
JSON
{
|
|
"name": "@yggdrasil/tiptap-editor",
|
|
"version": "1.0.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"build": "tsc --noEmit && vite build",
|
|
"dev": "vite",
|
|
"typecheck": "tsc --noEmit",
|
|
"test": "vitest run",
|
|
"test:watch": "vitest"
|
|
},
|
|
"dependencies": {
|
|
"@tiptap/core": "^3.27.3",
|
|
"@tiptap/extension-code-block-lowlight": "^3.27.3",
|
|
"@tiptap/extension-file-handler": "^3.27.3",
|
|
"@tiptap/extension-image": "^3.27.3",
|
|
"@tiptap/extension-link": "^3.27.3",
|
|
"@tiptap/extension-list": "^3.27.3",
|
|
"@tiptap/extension-table": "^3.27.3",
|
|
"@tiptap/markdown": "^3.27.3",
|
|
"@tiptap/pm": "^3.27.3",
|
|
"@tiptap/starter-kit": "^3.27.3",
|
|
"@tiptap/suggestion": "^3.27.3",
|
|
"@yggdrasil/shared": "workspace:*",
|
|
"katex": "^0.16.22",
|
|
"lowlight": "^3.3.0"
|
|
}
|
|
}
|