增强 Mermaid 全屏缩放预览并发布 1.2.6

CHANGELOG.md

@@ -32,6 +32,12 @@ refactors, dependency updates, CI changes, and code cleanup do not belong here.
 
 ---
 
+## [1.2.6] - 2026-08-14
+
+### Added
+
+- Added a full-screen Mermaid viewer for Markdown and standalone Mermaid previews, with trackpad pinch zoom, native panning and scrolling, zoom controls, reset, Escape-to-close, and a dedicated close button.
+
 ## [1.2.5] - 2026-08-14
 
 ### Fixed

apps/desktop/native-backend/Cargo.toml

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

apps/desktop/package.json

@@ -1,7 +1,7 @@
 {
     "name": "bifrostwrite-desktop",
     "private": true,
-    "version": "1.2.5",
+    "version": "1.2.6",
     "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.5"
+version = "1.2.6"
 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.5",
+  "version": "1.2.6",
   "identifier": "com.bifrostwrite.desktop",
   "build": {
     "beforeDevCommand": "npm run renderer:dev",

apps/desktop/src/App.tsx

@@ -119,6 +119,7 @@ import { useChatFoldersStore } from "./features/ai/store/chatFoldersStore";
 import { useTerminalRuntimeStore } from "./features/terminal/terminalRuntimeStore";
 import { shouldAllowNativeContextMenu } from "./features/spellcheck/contextMenu";
 import { YouTubeModalHost } from "./features/editor/YouTubeModalHost";
+import { MermaidFullscreenHost } from "./features/editor/mermaid/MermaidFullscreenHost";
 import { ClipNotification } from "./features/clip/ClipNotification";
 import { useClipImportStore } from "./features/clip/clipImportStore";
 import {
@@ -2328,6 +2329,7 @@ export default function App() {
                     <EditorPaneContent emptyStateMessage={translate("No note is open in this window")} />
                 </div>
                 <YouTubeModalHost />
+                <MermaidFullscreenHost />
                 <CommandPalette />
                 <QuickSwitcher />
             </div>
@@ -2373,6 +2375,7 @@ export default function App() {
             </div>
 
             <YouTubeModalHost />
+            <MermaidFullscreenHost />
             <ClipNotification />
             <CommandPalette />
             <QuickSwitcher />

apps/desktop/src/app/i18n/zh-CN.curated.ts

@@ -328,9 +328,14 @@ export const CURATED_ZH_CN_TRANSLATIONS: Readonly<Record<string, string>> = {
     "Map view is unavailable in this hardened build":
         "此安全构建暂不支持概念图视图",
     "Mermaid diagram error": "Mermaid 图表错误",
+    "Mermaid canvas": "Mermaid 画布",
     "Mermaid file mode": "Mermaid 文件模式",
     "Mermaid preview": "Mermaid 预览",
     "Mermaid source is empty.": "Mermaid 源码为空。",
+    "Open Mermaid fullscreen": "全屏查看 Mermaid",
+    "Pinch to zoom • Scroll to pan • Esc to close":
+        "双指捏合缩放 • 滚动平移 • Esc 关闭",
+    "Reset zoom": "重置缩放",
     "No backlinks": "没有反向链接",
     "No concept maps yet.": "还没有概念图。",
     "No file tab active": "当前没有打开的文件标签页",

apps/desktop/src/features/editor/MermaidFilePreview.test.tsx

@@ -42,6 +42,9 @@ A --> B`;
         expect(screen.getByText("Rendering Mermaid diagram...")).toBeInTheDocument();
 
         expect(await screen.findByText("README Flow")).not.toBeNull();
+        expect(
+            screen.getByRole("button", { name: "Open Mermaid fullscreen" }),
+        ).toBeInTheDocument();
         expect(mockedRenderMermaidDiagram).toHaveBeenCalledWith(
             source,
             expect.stringMatching(/^mermaid-file-tab-1-/),

apps/desktop/src/features/editor/MermaidFilePreview.tsx

@@ -4,6 +4,7 @@ import {
     renderMermaidDiagram,
     type MermaidRenderResult,
 } from "./mermaid/mermaidRenderer";
+import { openMermaidFullscreen } from "./mermaid/mermaidFullscreen";
 import { parseMermaidSvg } from "./mermaid/mermaidSvg";
 
 type MermaidFilePreviewState =
@@ -84,12 +85,26 @@ export function MermaidFilePreview({ source, tabId }: MermaidFilePreviewProps) {
                 ) : null}
                 {state.status === "rendered" ? (
                     <div
-                        className="mermaid-file-preview-body flex min-h-full items-start justify-center"
-                        ref={(node) => {
-                            if (!node) return;
-                            node.replaceChildren(state.svg.cloneNode(true));
-                        }}
-                    />
+                        className="mermaid-file-preview-body relative flex min-h-full items-start justify-center"
+                    >
+                        <div
+                            ref={(node) => {
+                                if (!node) return;
+                                node.replaceChildren(
+                                    state.svg.cloneNode(true),
+                                );
+                            }}
+                        />
+                        <button
+                            type="button"
+                            className="mermaid-fullscreen-trigger"
+                            aria-label={translate("Open Mermaid fullscreen")}
+                            title={translate("Open Mermaid fullscreen")}
+                            onClick={() => openMermaidFullscreen(state.svg)}
+                        >
+                            ⛶
+                        </button>
+                    </div>
                 ) : null}
                 {state.status === "error" ? (
                     <div

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

@@ -222,6 +222,11 @@ describe("code block live preview", () => {
             view.dom.querySelector(".cm-mermaid-preview svg foreignObject")
                 ?.textContent,
         ).toBe("README\u00a0Diagram");
+        expect(
+            view.dom.querySelector(
+                'button[aria-label="Open Mermaid fullscreen"]',
+            ),
+        ).not.toBeNull();
         expect(view.dom.querySelector(".cm-mermaid-preview-error")).toBeNull();
 
         view.destroy();

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

@@ -54,6 +54,7 @@ import {
     renderEmbedPreview,
 } from "./notePreviewSource";
 import { renderMermaidDiagram } from "../mermaid/mermaidRenderer";
+import { createMermaidFullscreenButton } from "../mermaid/mermaidFullscreen";
 import { parseMermaidSvg } from "../mermaid/mermaidSvg";
 import { formatCodeFenceLanguageLabel } from "../codeFencePresentation";
 
@@ -1029,6 +1030,9 @@ class MermaidDiagramWidget extends WidgetType {
                     const svg = parseMermaidSvg(result.svg);
                     if (svg) {
                         body.appendChild(svg);
+                        body.appendChild(
+                            createMermaidFullscreenButton(result.svg),
+                        );
                     } else {
                         renderMermaidError(
                             body,

apps/desktop/src/features/editor/extensions/livePreviewTheme.ts

@@ -1069,6 +1069,7 @@ export const livePreviewTheme = EditorView.baseTheme({
         fontSize: "0.9em",
     },
     ".cm-mermaid-preview-body-rendered": {
+        position: "relative",
         display: "flex",
         justifyContent: "center",
         alignItems: "center",

apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.test.tsx

@@ -0,0 +1,99 @@
+import { act, fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { renderComponent } from "../../../test/test-utils";
+import { MermaidFullscreenHost } from "./MermaidFullscreenHost";
+import {
+    createMermaidFullscreenButton,
+    openMermaidFullscreen,
+} from "./mermaidFullscreen";
+
+const TEST_SVG = `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
+        <text>Fullscreen diagram</text>
+    </svg>
+`;
+
+describe("MermaidFullscreenHost", () => {
+    it("opens from a Mermaid preview button and closes from the toolbar", () => {
+        renderComponent(<MermaidFullscreenHost />);
+        const trigger = createMermaidFullscreenButton(TEST_SVG);
+        document.body.appendChild(trigger);
+
+        fireEvent.click(trigger);
+
+        expect(
+            screen.getByRole("dialog", { name: "Mermaid preview" }),
+        ).toBeInTheDocument();
+        expect(screen.getByText("Fullscreen diagram")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Reset zoom" })).toHaveTextContent(
+            "100%",
+        );
+
+        fireEvent.click(screen.getByRole("button", { name: "Close" }));
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        trigger.remove();
+    });
+
+    it("supports toolbar and trackpad zoom while leaving regular scrolling native", () => {
+        renderComponent(<MermaidFullscreenHost />);
+        act(() => openMermaidFullscreen(TEST_SVG));
+
+        fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+        expect(screen.getByRole("button", { name: "Reset zoom" })).toHaveTextContent(
+            "125%",
+        );
+
+        const canvas = screen.getByLabelText("Mermaid canvas");
+        fireEvent.click(screen.getByRole("button", { name: "Reset zoom" }));
+        const gestureStart = new Event("gesturestart", {
+            bubbles: true,
+            cancelable: true,
+        });
+        act(() => canvas.dispatchEvent(gestureStart));
+        const gestureChange = new Event("gesturechange", {
+            bubbles: true,
+            cancelable: true,
+        });
+        Object.defineProperties(gestureChange, {
+            scale: { value: 1.5 },
+            clientX: { value: 40 },
+            clientY: { value: 40 },
+        });
+        act(() => canvas.dispatchEvent(gestureChange));
+        expect(gestureChange.defaultPrevented).toBe(true);
+        expect(screen.getByRole("button", { name: "Reset zoom" })).toHaveTextContent(
+            "150%",
+        );
+
+        fireEvent.click(screen.getByRole("button", { name: "Reset zoom" }));
+        const plainWheel = new WheelEvent("wheel", {
+            bubbles: true,
+            cancelable: true,
+            deltaY: 40,
+        });
+        canvas.dispatchEvent(plainWheel);
+        expect(plainWheel.defaultPrevented).toBe(false);
+        expect(screen.getByRole("button", { name: "Reset zoom" })).toHaveTextContent(
+            "100%",
+        );
+
+        fireEvent.wheel(canvas, {
+            ctrlKey: true,
+            deltaY: -100,
+            clientX: 40,
+            clientY: 40,
+        });
+        expect(screen.getByRole("button", { name: "Reset zoom" })).toHaveTextContent(
+            "125%",
+        );
+    });
+
+    it("closes on Escape", () => {
+        renderComponent(<MermaidFullscreenHost />);
+        act(() => openMermaidFullscreen(TEST_SVG));
+
+        fireEvent.keyDown(window, { key: "Escape" });
+
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+});