优化 Mermaid 多图文档的滚动性能

CHANGELOG.md

@@ -32,6 +32,12 @@ refactors, dependency updates, CI changes, and code cleanup do not belong here.
 
 ---
 
+## [1.2.7] - 2026-08-14
+
+### Changed
+
+- Improved scrolling performance in Markdown files with many Mermaid diagrams by rendering diagrams only near the viewport, unloading offscreen SVG DOM while preserving layout, and restoring cached results without rerunning Mermaid.
+
 ## [1.2.6] - 2026-08-14
 
 ### Added

apps/desktop/native-backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "neverwrite-native-backend"
-version = "1.2.6"
+version = "1.2.7"
 edition = "2021"
 
 [dependencies]

apps/desktop/package.json

@@ -1,7 +1,7 @@
 {
     "name": "bifrostwrite-desktop",
     "private": true,
-    "version": "1.2.6",
+    "version": "1.2.7",
     "homepage": "https://github.com/bifrost-proxy/BifrostWrite",
     "type": "module",
     "engines": {

apps/desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "bifrostwrite-desktop"
-version = "1.2.6"
+version = "1.2.7"
 edition = "2021"
 description = "Tauri desktop shell for BifrostWrite"
 license = "Apache-2.0"

apps/desktop/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "BifrostWrite",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "identifier": "com.bifrostwrite.desktop",
   "build": {
     "beforeDevCommand": "npm run renderer:dev",

apps/desktop/src/features/editor/extensions/livePreviewBlocks.test.ts

@@ -5,7 +5,7 @@ import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
 import { forceParsing } from "@codemirror/language";
 import { EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
     getFencedCodeBlockKind,
     resolvePreviewAssetPath,
@@ -53,6 +53,10 @@ beforeEach(() => {
     mockedRenderMermaidDiagram.mockReset();
 });
 
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+
 describe("resolvePreviewAssetPath", () => {
     it("resolves note-relative assets against the current note path", () => {
         expect(
@@ -233,6 +237,108 @@ describe("code block live preview", () => {
         parent.remove();
     });
 
+    it("defers offscreen Mermaid rendering and restores cached SVG", async () => {
+        const observers: FakeIntersectionObserver[] = [];
+
+        class FakeIntersectionObserver {
+            private callback: IntersectionObserverCallback;
+            disconnected = false;
+            observed: Element | null = null;
+
+            constructor(callback: IntersectionObserverCallback) {
+                this.callback = callback;
+                observers.push(this);
+            }
+
+            observe(target: Element) {
+                this.observed = target;
+            }
+
+            disconnect() {
+                this.disconnected = true;
+            }
+
+            trigger(target: Element, isIntersecting: boolean) {
+                this.callback(
+                    [
+                        {
+                            target,
+                            isIntersecting,
+                        } as IntersectionObserverEntry,
+                    ],
+                    this as unknown as IntersectionObserver,
+                );
+            }
+        }
+
+        vi.stubGlobal("IntersectionObserver", FakeIntersectionObserver);
+        vi.stubGlobal(
+            "requestIdleCallback",
+            (callback: IdleRequestCallback) => {
+                callback({
+                    didTimeout: false,
+                    timeRemaining: () => 50,
+                });
+                return 1;
+            },
+        );
+        vi.stubGlobal("cancelIdleCallback", vi.fn());
+        mockedRenderMermaidDiagram.mockResolvedValueOnce({
+            status: "ok",
+            svg: '<svg xmlns="http://www.w3.org/2000/svg"><text>Lazy</text></svg>',
+        });
+
+        const parent = document.createElement("div");
+        document.body.appendChild(parent);
+        const doc = ["```mermaid", "flowchart TD", "  A --> B", "```"].join(
+            "\n",
+        );
+        const view = new EditorView({
+            state: createLivePreviewState(doc),
+            parent,
+        });
+
+        await flushPromises();
+
+        const preview = view.dom.querySelector<HTMLElement>(
+            ".cm-mermaid-preview",
+        );
+        const body = preview?.querySelector<HTMLElement>(
+            ".cm-mermaid-preview-body",
+        );
+        expect(preview).not.toBeNull();
+        expect(body).not.toBeNull();
+        const observer = observers.find(
+            (item) => !item.disconnected && item.observed === preview,
+        );
+        expect(observer).toBeDefined();
+        expect(mockedRenderMermaidDiagram).not.toHaveBeenCalled();
+
+        observer!.trigger(preview!, true);
+        await flushPromises();
+
+        expect(body?.querySelector("svg text")?.textContent).toBe("Lazy");
+        expect(mockedRenderMermaidDiagram).toHaveBeenCalledTimes(1);
+
+        vi.spyOn(body!, "getBoundingClientRect").mockReturnValue({
+            ...body!.getBoundingClientRect(),
+            height: 240,
+        });
+        observer!.trigger(preview!, false);
+
+        expect(body?.querySelector("svg")).toBeNull();
+        expect(body?.style.minHeight).toBe("240px");
+
+        observer!.trigger(preview!, true);
+
+        expect(body?.querySelector("svg text")?.textContent).toBe("Lazy");
+        expect(mockedRenderMermaidDiagram).toHaveBeenCalledTimes(1);
+
+        view.destroy();
+        expect(observer!.disconnected).toBe(true);
+        parent.remove();
+    });
+
     it("renders multiple Mermaid diagrams independently", async () => {
         mockedRenderMermaidDiagram
             .mockResolvedValueOnce({