修复 Mermaid 预览生命周期并发布图片预览 v1.2.9

CHANGELOG.md

@@ -32,6 +32,16 @@ refactors, dependency updates, CI changes, and code cleanup do not belong here.
 
 ---
 
+## [1.2.9] - 2026-08-17
+
+### Added
+
+- Added click-to-open image previews for Markdown images and image files, with trackpad zoom, panning, toolbar zoom controls, reset, Escape-to-close, and a close button.
+
+### Fixed
+
+- Kept the original Mermaid editor and rendered diagram mounted while the full-screen preview is open, preventing editor rerenders and scroll-position shifts when the preview closes.
+
 ## [1.2.8] - 2026-08-15
 
 ### Changed

apps/desktop/native-backend/Cargo.toml

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

apps/desktop/package.json

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

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

@@ -331,6 +331,9 @@ export const CURATED_ZH_CN_TRANSLATIONS: Readonly<Record<string, string>> = {
     "Mermaid canvas": "Mermaid 画布",
     "Mermaid file mode": "Mermaid 文件模式",
     "Mermaid preview": "Mermaid 预览",
+    "Image preview": "图片预览",
+    "Image canvas": "图片画布",
+    "Open image preview": "放大查看图片",
     "Mermaid source is empty.": "Mermaid 源码为空。",
     "Open Mermaid fullscreen": "全屏查看 Mermaid",
     "Pinch to zoom • Scroll to pan • Esc to close":

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

@@ -23,6 +23,10 @@ import {
     setVaultEntries,
 } from "../../test/test-utils";
 import { resetExternalReloadBaselinesForTests } from "./externalReloadBaselineCache";
+import {
+    OPEN_IMAGE_PREVIEW_EVENT,
+    type OpenImagePreviewPayload,
+} from "./imagePreview";
 
 function seedTrackedDiff(
     targetPath: string,
@@ -111,6 +115,40 @@ describe("FileTabView", () => {
         );
     });
 
+    it("opens image files in the zoom preview by click", async () => {
+        const user = userEvent.setup();
+        const previews: OpenImagePreviewPayload[] = [];
+        const handlePreview = (event: Event) => {
+            previews.push(
+                (event as CustomEvent<OpenImagePreviewPayload>).detail,
+            );
+        };
+        window.addEventListener(OPEN_IMAGE_PREVIEW_EVENT, handlePreview);
+
+        setEditorTabs([
+            {
+                id: "image-tab",
+                kind: "file",
+                relativePath: "assets/photo.webp",
+                title: "photo.webp",
+                path: "/vault/assets/photo.webp",
+                mimeType: "image/webp",
+                viewer: "image",
+                content: "",
+            },
+        ]);
+
+        renderComponent(<FileTabView />);
+        await user.click(
+            screen.getByRole("button", { name: "Open image preview" }),
+        );
+
+        expect(previews).toEqual([
+            expect.objectContaining({ alt: "photo.webp" }),
+        ]);
+        window.removeEventListener(OPEN_IMAGE_PREVIEW_EVENT, handlePreview);
+    });
+
     it("supports Command + wheel zoom from fit mode", async () => {
         setEditorTabs([
             {

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

@@ -26,6 +26,7 @@ import { formatZoomPercentage } from "../../app/utils/zoom";
 import { FileTextTabView } from "./FileTextTabView";
 import { CsvFileTabView } from "./CsvFileTabView";
 import { HtmlTabView } from "./HtmlTabView";
+import { openImagePreview } from "./imagePreview";
 
 const IMG_MIN_ZOOM = 0.1;
 const IMG_MAX_ZOOM = 10;
@@ -234,6 +235,17 @@ function ImageFileViewer({ tab }: { tab: FileTab }) {
     return (
         <div className="h-full min-w-0 flex flex-col overflow-hidden">
             <FileHeader tab={tab}>
+                <button
+                    type="button"
+                    onClick={() =>
+                        previewUrl && openImagePreview(previewUrl, tab.title)
+                    }
+                    className="inline-flex items-center rounded px-1.5 text-[10px]"
+                    style={headerButtonStyle}
+                    disabled={!previewUrl || status === "error"}
+                >
+                    {translate("Preview")}
+                </button>
                 <button
                     type="button"
                     onClick={setFit}
@@ -314,6 +326,21 @@ function ImageFileViewer({ tab }: { tab: FileTab }) {
                             src={previewUrl ?? ""}
                             alt={tab.title}
                             draggable={false}
+                            role="button"
+                            tabIndex={0}
+                            aria-label={translate("Open image preview")}
+                            onClick={() =>
+                                previewUrl &&
+                                openImagePreview(previewUrl, tab.title)
+                            }
+                            onKeyDown={(event) => {
+                                if (event.key !== "Enter" && event.key !== " ")
+                                    return;
+                                event.preventDefault();
+                                if (previewUrl) {
+                                    openImagePreview(previewUrl, tab.title);
+                                }
+                            }}
                             onLoad={() => setStatus("ready")}
                             onError={() => setStatus("error")}
                             style={{
@@ -322,6 +349,7 @@ function ImageFileViewer({ tab }: { tab: FileTab }) {
                                 width: "auto",
                                 height: "auto",
                                 objectFit: "contain",
+                                cursor: "zoom-in",
                                 touchAction: IMAGE_TOUCH_ACTION,
                                 boxShadow: "0 16px 40px rgba(0, 0, 0, 0.18)",
                             }}
@@ -338,6 +366,21 @@ function ImageFileViewer({ tab }: { tab: FileTab }) {
                             src={previewUrl ?? ""}
                             alt={tab.title}
                             draggable={false}
+                            role="button"
+                            tabIndex={0}
+                            aria-label={translate("Open image preview")}
+                            onClick={() =>
+                                previewUrl &&
+                                openImagePreview(previewUrl, tab.title)
+                            }
+                            onKeyDown={(event) => {
+                                if (event.key !== "Enter" && event.key !== " ")
+                                    return;
+                                event.preventDefault();
+                                if (previewUrl) {
+                                    openImagePreview(previewUrl, tab.title);
+                                }
+                            }}
                             onLoad={() => setStatus("ready")}
                             onError={() => setStatus("error")}
                             style={{
@@ -348,6 +391,7 @@ function ImageFileViewer({ tab }: { tab: FileTab }) {
                                 transformOrigin: "center top",
                                 transform: `scale(${zoom})`,
                                 touchAction: IMAGE_TOUCH_ACTION,
+                                cursor: "zoom-in",
                                 boxShadow: "0 16px 40px rgba(0, 0, 0, 0.18)",
                             }}
                         />

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

@@ -12,6 +12,10 @@ import {
 } from "./livePreviewBlocks";
 import { exitFencedCodeBlock, livePreviewExtension } from "./livePreview";
 import { renderMermaidDiagram } from "../mermaid/mermaidRenderer";
+import {
+    OPEN_IMAGE_PREVIEW_EVENT,
+    type OpenImagePreviewPayload,
+} from "../imagePreview";
 
 vi.mock("../mermaid/mermaidRenderer", () => ({
     renderMermaidDiagram: vi.fn(),
@@ -89,6 +93,45 @@ describe("resolvePreviewAssetPath", () => {
     });
 });
 
+describe("image live preview", () => {
+    it("opens a rendered image in the zoom overlay without replacing its widget", () => {
+        const parent = document.createElement("div");
+        document.body.appendChild(parent);
+        const doc = [
+            "![Architecture](https://example.com/architecture.png)",
+            "",
+            "After image",
+        ].join("\n");
+        const state = createLivePreviewState(doc, doc.length);
+        const view = new EditorView({ state, parent });
+        const image = view.dom.querySelector<HTMLImageElement>(
+            ".cm-inline-image",
+        );
+        const previews: OpenImagePreviewPayload[] = [];
+        const handlePreview = (event: Event) => {
+            previews.push(
+                (event as CustomEvent<OpenImagePreviewPayload>).detail,
+            );
+        };
+        window.addEventListener(OPEN_IMAGE_PREVIEW_EVENT, handlePreview);
+
+        expect(image).not.toBeNull();
+        image!.click();
+
+        expect(previews).toEqual([
+            {
+                src: "https://example.com/architecture.png",
+                alt: "Architecture",
+            },
+        ]);
+        expect(image!.isConnected).toBe(true);
+
+        window.removeEventListener(OPEN_IMAGE_PREVIEW_EVENT, handlePreview);
+        view.destroy();
+        parent.remove();
+    });
+});
+
 describe("code block live preview", () => {
     it("classifies Mermaid info strings separately from regular code blocks", () => {
         expect(getFencedCodeBlockKind("mermaid")).toBe("mermaid");

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

@@ -60,6 +60,7 @@ import {
 import { createMermaidFullscreenButton } from "../mermaid/mermaidFullscreen";
 import { parseMermaidSvg } from "../mermaid/mermaidSvg";
 import { formatCodeFenceLanguageLabel } from "../codeFencePresentation";
+import { openImagePreview } from "../imagePreview";
 
 const IMAGE_EXTENSIONS = /\.(png|jpe?g|gif|svg|webp|bmp|ico|avif)([?#].*)?$/i;
 const PDF_EXTENSION = /\.pdf([?#].*)?$/i;
@@ -483,6 +484,20 @@ class ImageWidget extends WidgetType {
         img.draggable = false;
         img.loading = "lazy";
         img.decoding = "async";
+        img.tabIndex = 0;
+        img.setAttribute("role", "button");
+        img.setAttribute("aria-label", translate("Open image preview"));
+        img.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            openImagePreview(this.src, this.alt);
+        });
+        img.addEventListener("keydown", (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            event.stopPropagation();
+            openImagePreview(this.src, this.alt);
+        });
         if (this.title) img.title = this.title;
         if (this.width) {
             img.style.width = `${this.width}px`;

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

@@ -729,6 +729,7 @@ export const livePreviewTheme = EditorView.baseTheme({
         maxHeight: "500px",
         borderRadius: "6px",
         objectFit: "contain",
+        cursor: "zoom-in",
     },
     ".cm-inline-image-fallback": {
         color: "var(--text-secondary)",

apps/desktop/src/features/editor/imagePreview.ts

@@ -0,0 +1,16 @@
+export const OPEN_IMAGE_PREVIEW_EVENT = "bifrostwrite:open-image-preview";
+
+export interface OpenImagePreviewPayload {
+    src: string;
+    alt: string;
+}
+
+export function openImagePreview(src: string, alt = "") {
+    if (!src.trim()) return;
+
+    window.dispatchEvent(
+        new CustomEvent<OpenImagePreviewPayload>(OPEN_IMAGE_PREVIEW_EVENT, {
+            detail: { src, alt },
+        }),
+    );
+}

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

@@ -6,6 +6,7 @@ import {
     createMermaidFullscreenButton,
     openMermaidFullscreen,
 } from "./mermaidFullscreen";
+import { openImagePreview } from "../imagePreview";
 
 const TEST_SVG = `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
@@ -96,4 +97,54 @@ describe("MermaidFullscreenHost", () => {
 
         expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
     });
+
+    it("previews images with the same zoom overlay", () => {
+        renderComponent(<MermaidFullscreenHost />);
+
+        act(() => openImagePreview("https://example.com/photo.png", "Photo"));
+
+        expect(
+            screen.getByRole("dialog", { name: "Image preview" }),
+        ).toBeInTheDocument();
+        expect(screen.getByRole("img", { name: "Photo" })).toHaveAttribute(
+            "src",
+            "https://example.com/photo.png",
+        );
+
+        fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+        expect(screen.getByRole("button", { name: "Reset zoom" })).toHaveTextContent(
+            "125%",
+        );
+    });
+
+    it("keeps the source Mermaid node mounted and preserves body layout styles", () => {
+        renderComponent(<MermaidFullscreenHost />);
+        const source = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "svg",
+        );
+        const sourceText = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "text",
+        );
+        sourceText.textContent = "Source diagram";
+        source.appendChild(sourceText);
+        document.body.appendChild(source);
+        document.body.style.overflow = "auto";
+
+        act(() => openMermaidFullscreen(source));
+
+        expect(source.isConnected).toBe(true);
+        expect(source.parentElement).toBe(document.body);
+        expect(document.body.style.overflow).toBe("auto");
+        expect(screen.getAllByText("Source diagram")).toHaveLength(2);
+
+        fireEvent.click(screen.getByRole("button", { name: "Close" }));
+
+        expect(source.isConnected).toBe(true);
+        expect(source.parentElement).toBe(document.body);
+        expect(document.body.style.overflow).toBe("auto");
+        source.remove();
+        document.body.style.removeProperty("overflow");
+    });
 });