fix(mermaid): 主题切换时重渲染已渲染的流程图
mermaid 把颜色烤进 SVG 内联样式，无法靠 CSS 原地切主题。此前 initMermaid 的幂等守卫一刀切跳过所有已渲染块，导致切主题后流程图停留在首次渲染的主题。 改动： - initMermaid 改为双路径分发：未渲染块(<code>还在)走 IntersectionObserver 懒加载；已渲染块(pre 内容已是 SVG)按 dataset.mermaidSource 缓存源码重渲染， 同主题幂等跳过，主题变化才重渲染。 - 渲染逻辑抽到 renderBlock：用全局自增 renderCounter 生成唯一 id，避开 mermaid 残留的 d-前缀布局节点冲突(#357)与同页 marker id 冲突(#5741)；替换前清空 pre.innerHTML 确保亮/暗两版 SVG 不并存。 - source 存进 dataset.mermaidSource 供重渲染回取（此时 <code> 已被 SVG 替换）。 触发机制不变：post_content.rs 的 use_effect 读 use_resolved_theme() 建订阅， 主题切换时重跑重调 __initMermaid 传入新 theme；mermaid.ts 据此决定是否重渲染。
This commit is contained in:
parent
f7a3336b76
commit
6eb7a743e5
@ -117,4 +117,67 @@ describe('initMermaid', () => {
|
||||
expect(root.querySelector('pre')?.classList.contains('mermaid-error')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('主题切换时重渲染已渲染的块', async () => {
|
||||
const root = document.createElement('div');
|
||||
root.className = 'post-content';
|
||||
root.innerHTML = '<pre><code class="language-mermaid">graph TD; A-->B</code></pre>';
|
||||
document.body.appendChild(root);
|
||||
|
||||
// 首次渲染（light）
|
||||
window.__initMermaid('.post-content', 'light');
|
||||
await vi.waitFor(() => {
|
||||
expect(root.querySelector('pre')?.dataset.mermaidRendered).toBe('true');
|
||||
});
|
||||
expect(root.querySelector('pre')?.dataset.mermaidTheme).toBe('light');
|
||||
const firstRenderCalls = mockRender.mock.calls.length;
|
||||
|
||||
// 主题切换 → dark：应触发重渲染
|
||||
window.__initMermaid('.post-content', 'dark');
|
||||
await vi.waitFor(() => {
|
||||
expect(mockRender.mock.calls.length).toBeGreaterThan(firstRenderCalls);
|
||||
});
|
||||
expect(mockInitialize).toHaveBeenLastCalledWith(expect.objectContaining({ theme: 'dark' }));
|
||||
expect(root.querySelector('pre')?.dataset.mermaidTheme).toBe('dark');
|
||||
});
|
||||
|
||||
it('主题未变时重渲染路径幂等（同主题跳过）', async () => {
|
||||
const root = document.createElement('div');
|
||||
root.className = 'post-content';
|
||||
root.innerHTML = '<pre><code class="language-mermaid">graph TD; A-->B</code></pre>';
|
||||
document.body.appendChild(root);
|
||||
|
||||
window.__initMermaid('.post-content', 'light');
|
||||
await vi.waitFor(() => {
|
||||
expect(root.querySelector('pre')?.dataset.mermaidRendered).toBe('true');
|
||||
});
|
||||
mockRender.mockClear();
|
||||
|
||||
// 同主题再调（模拟上下篇切换复用组件实例、effect 重跑）
|
||||
window.__initMermaid('.post-content', 'light');
|
||||
await new Promise((r) => setTimeout(r, 50));
|
||||
expect(mockRender).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('主题切换重渲染用唯一 render id（避免 mermaid 残留节点冲突）', async () => {
|
||||
const root = document.createElement('div');
|
||||
root.className = 'post-content';
|
||||
root.innerHTML = '<pre><code class="language-mermaid">graph TD; A-->B</code></pre>';
|
||||
document.body.appendChild(root);
|
||||
|
||||
window.__initMermaid('.post-content', 'light');
|
||||
await vi.waitFor(() => {
|
||||
expect(root.querySelector('pre')?.dataset.mermaidRendered).toBe('true');
|
||||
});
|
||||
const firstId = mockRender.mock.calls[0][0];
|
||||
|
||||
window.__initMermaid('.post-content', 'dark');
|
||||
await vi.waitFor(() => {
|
||||
expect(mockRender.mock.calls.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
const secondId = mockRender.mock.calls[mockRender.mock.calls.length - 1][0];
|
||||
|
||||
// 两次 render 的 id 必须不同，否则撞上 mermaid 内部残留的 d-前缀节点（#357）
|
||||
expect(secondId).not.toBe(firstId);
|
||||
});
|
||||
});
|
||||
|
||||
@ -12,6 +12,11 @@
|
||||
* 范式照搬 post-content.ts：querySelectorAll + 幂等守卫 + 注入 DOM。
|
||||
* mermaid 无官方 SSR 支持，纯客户端渲染；服务端 markdown.rs 只产出带
|
||||
* `language-mermaid` class 的普通代码块，不挂 data 属性。
|
||||
*
|
||||
* 主题切换：mermaid 把颜色/主题变量烤进 SVG 内联样式，无法靠 CSS 原地改主题。
|
||||
* 唯一办法是移除旧 SVG → 用新主题重新 render → 插入新 SVG。post_content.rs 的
|
||||
* use_effect 读 use_resolved_theme() 建立订阅，主题切换时重跑、重调 __initMermaid
|
||||
* 传入新 theme；本模块用 dataset.mermaidTheme 记住上次渲染主题，主题变化时触发重渲染。
|
||||
*/
|
||||
|
||||
import type { ThemeName } from '@yggdrasil/shared';
|
||||
@ -29,6 +34,9 @@ declare global {
|
||||
|
||||
let mermaidPromise: Promise<MermaidApi> | null = null;
|
||||
|
||||
/** render id 自增计数器，保证每次 render 生成唯一 id，避开 mermaid 残留节点冲突。 */
|
||||
let renderCounter = 0;
|
||||
|
||||
/**
|
||||
* 动态加载 mermaid 独立 IIFE bundle 的底层函数（可注入以便测试）。
|
||||
*
|
||||
@ -75,6 +83,33 @@ function loadMermaid(): Promise<MermaidApi> {
|
||||
return mermaidPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* 把 mermaid 源码渲染成 SVG 并注入父 <pre>。
|
||||
*
|
||||
* - render 用全局自增 id（`mermaid-svg-${++renderCounter}`），避免同页多次 render
|
||||
* 撞上 mermaid 内部残留的 `d`-前缀布局辅助节点（mermaid#357）与 marker id
|
||||
* 冲突（mermaid#5741）。
|
||||
* - 渲染前清空 pre.innerHTML，确保旧 SVG 与残留 `d-` 节点先消失再插入新 SVG，
|
||||
* 不让亮/暗两版并存。
|
||||
* - source 存进 dataset.mermaidSource，主题切换重渲染时回取（此时 <code> 已被
|
||||
* SVG 替换，textContent 不再可用）。
|
||||
*/
|
||||
async function renderBlock(pre: HTMLPreElement, source: string, theme: ThemeName): Promise<void> {
|
||||
const mermaid = await loadMermaid();
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: theme === 'dark' ? 'dark' : 'default',
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
const id = `mermaid-svg-${++renderCounter}`;
|
||||
const { svg } = await mermaid.render(id, source);
|
||||
// 清空 pre 旧内容（旧 SVG + mermaid 残留的 `d-` 辅助节点），再注入新 SVG。
|
||||
pre.innerHTML = svg;
|
||||
pre.dataset.mermaidRendered = 'true';
|
||||
pre.dataset.mermaidSource = source;
|
||||
pre.dataset.mermaidTheme = theme;
|
||||
}
|
||||
|
||||
/**
|
||||
* 为单个 mermaid <pre> 注册 IntersectionObserver：进入视口才渲染。
|
||||
*
|
||||
@ -101,33 +136,32 @@ function observeBlock(pre: HTMLPreElement, render: () => Promise<void>): void {
|
||||
/**
|
||||
* 初始化文章正文里的 mermaid 代码块。
|
||||
*
|
||||
* 两条互斥路径（渲染后 <code> 被 SVG 替换，故两选择器命中的 pre 不会重叠）：
|
||||
* 1. 仍含 `<code class="language-mermaid">` 的 pre（未渲染）→ 缓存源码 +
|
||||
* IntersectionObserver 进视口懒加载。
|
||||
* 2. 已渲染（pre 内容是 SVG，dataset.mermaid-rendered 标记）→ 同主题幂等跳过
|
||||
* （上下篇切换复用组件实例时 post_content.rs 的 effect 会重调本函数）；
|
||||
* 主题变化则取缓存源码重渲染（bundle 已加载，无需 IntersectionObserver）。
|
||||
*
|
||||
* @param selector 文章正文容器选择器（如 '.post-content'）
|
||||
* @param theme 当前生效主题，传给 mermaid 适配暗色
|
||||
*/
|
||||
export function initMermaid(selector: string, theme: ThemeName): void {
|
||||
const root = document.querySelector(selector);
|
||||
if (!root) return;
|
||||
const blocks = root.querySelectorAll<HTMLPreElement>('pre > code.language-mermaid');
|
||||
if (blocks.length === 0) return;
|
||||
|
||||
blocks.forEach((code, i) => {
|
||||
// 路径 1：未渲染的块（<code> 还在）。
|
||||
const blocks = root.querySelectorAll<HTMLPreElement>('pre > code.language-mermaid');
|
||||
blocks.forEach((code) => {
|
||||
const pre = code.parentElement as HTMLPreElement | null;
|
||||
if (!pre) return;
|
||||
if (pre.dataset.mermaidRendered) return; // 幂等：上下篇切换重复调用不重渲染
|
||||
if (pre.dataset.mermaidRendered) return; // 理论不命中（renderBlock 同步替换 innerHTML），防御
|
||||
|
||||
const source = code.textContent || '';
|
||||
pre.dataset.mermaidSource = source;
|
||||
observeBlock(pre, async () => {
|
||||
try {
|
||||
const mermaid = await loadMermaid();
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: theme === 'dark' ? 'dark' : 'default',
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
const { svg } = await mermaid.render(`mermaid-svg-${i}`, source);
|
||||
// 替换整个 <pre> 内容为 SVG，丢弃 copy 按钮（图不需要复制源码）。
|
||||
pre.innerHTML = svg;
|
||||
pre.dataset.mermaidRendered = 'true';
|
||||
await renderBlock(pre, source, theme);
|
||||
} catch (err) {
|
||||
// 渲染失败（语法错误 / bundle 加载失败）：保留原始源码，加错误标记 class
|
||||
// 便于用户发现是 mermaid 源写错了。不破坏页面其余内容。
|
||||
@ -136,4 +170,27 @@ export function initMermaid(selector: string, theme: ThemeName): void {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 路径 2：已渲染的块（<code> 已被 SVG 替换，按 dataset 回找）。无条件执行，
|
||||
// 覆盖「页面上未渲染块与已渲染块并存」的场景。
|
||||
rerenderExistingBlocks(root, theme);
|
||||
}
|
||||
|
||||
/**
|
||||
* 对已渲染（pre 内容已是 SVG、无 <code>）的块按缓存源码重渲染。
|
||||
*
|
||||
* 主题切换重跑 initMermaid 时，已渲染的 pre 里 <code> 已被 SVG 替换，
|
||||
* `pre > code.language-mermaid` 选择器不再命中。这里用 dataset 标记回找。
|
||||
*/
|
||||
function rerenderExistingBlocks(root: Element, theme: ThemeName): void {
|
||||
const rendered = root.querySelectorAll<HTMLPreElement>('pre[data-mermaid-rendered]');
|
||||
rendered.forEach((pre) => {
|
||||
if (pre.dataset.mermaidTheme === theme) return;
|
||||
const source = pre.dataset.mermaidSource;
|
||||
if (!source) return; // 无缓存源码无法重渲染，保守跳过
|
||||
void renderBlock(pre, source, theme).catch((err) => {
|
||||
console.error('mermaid re-render failed:', err);
|
||||
pre.classList.add('mermaid-error');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -137,9 +137,9 @@ pub fn PostContent(content_html: String) -> Element {
|
||||
let fragments = split_content_fragments(&content_html);
|
||||
|
||||
// mermaid 流程图主题需随当前生效主题（light/dark）切换。读 use_resolved_theme()
|
||||
// 建立订阅：主题变化时下方 use_effect 重跑，重新调用 __initMermaid（幂等，
|
||||
// 已渲染的块由 dataset.mermaidRendered 守卫跳过；主题切换暂不强制重渲染图，
|
||||
// 后续如需可在 mermaid.ts 监听 THEME_CHANGE_EVENT）。
|
||||
// 建立订阅：主题变化时下方 use_effect 重跑，重调 __initMermaid 传入新 theme；
|
||||
// mermaid.ts 用 dataset.mermaidTheme 记住上次渲染主题，检测到主题变化时按缓存
|
||||
// 源码重渲染（mermaid 颜色烤进 SVG 内联样式，无法靠 CSS 原地切主题）。
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
let resolved_theme = crate::theme::use_resolved_theme();
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user