From 660e92bc0fd9b878ca8d50a8b0a66ac426fc2abb Mon Sep 17 00:00:00 2001
From: edenliu <hxfdarling@hotmail.com>
Date: Mon, 17 Aug 2026 11:20:47 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20Mermaid=20=E6=B5=AE?=
 =?UTF-8?q?=E5=B1=82=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=9B=BE=E7=89=87=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/desktop/src/app/i18n/zh-CN.curated.ts    |   3 +
 .../src/features/editor/FileTabView.test.tsx  |  38 +++++
 .../src/features/editor/FileTabView.tsx       |  44 +++++
 .../extensions/livePreviewBlocks.test.ts      |  43 +++++
 .../editor/extensions/livePreviewBlocks.ts    |  15 ++
 .../editor/extensions/livePreviewTheme.ts     |   1 +
 .../src/features/editor/imagePreview.ts       |  16 ++
 .../mermaid/MermaidFullscreenHost.test.tsx    |  51 ++++++
 .../editor/mermaid/MermaidFullscreenHost.tsx  | 154 ++++++++++++------
 9 files changed, 317 insertions(+), 48 deletions(-)
 create mode 100644 apps/desktop/src/features/editor/imagePreview.ts

diff --git a/apps/desktop/src/app/i18n/zh-CN.curated.ts b/apps/desktop/src/app/i18n/zh-CN.curated.ts
index 80b051c6..3dedf21b 100644
--- a/apps/desktop/src/app/i18n/zh-CN.curated.ts
+++ b/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":
diff --git a/apps/desktop/src/features/editor/FileTabView.test.tsx b/apps/desktop/src/features/editor/FileTabView.test.tsx
index 06996bba..5c128d93 100644
--- a/apps/desktop/src/features/editor/FileTabView.test.tsx
+++ b/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([
             {
diff --git a/apps/desktop/src/features/editor/FileTabView.tsx b/apps/desktop/src/features/editor/FileTabView.tsx
index 8cb14062..7c18705d 100644
--- a/apps/desktop/src/features/editor/FileTabView.tsx
+++ b/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)",
                             }}
                         />
diff --git a/apps/desktop/src/features/editor/extensions/livePreviewBlocks.test.ts b/apps/desktop/src/features/editor/extensions/livePreviewBlocks.test.ts
index be2cc67a..6f1b7bd1 100644
--- a/apps/desktop/src/features/editor/extensions/livePreviewBlocks.test.ts
+++ b/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");
diff --git a/apps/desktop/src/features/editor/extensions/livePreviewBlocks.ts b/apps/desktop/src/features/editor/extensions/livePreviewBlocks.ts
index 10a2810f..103abb58 100644
--- a/apps/desktop/src/features/editor/extensions/livePreviewBlocks.ts
+++ b/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`;
diff --git a/apps/desktop/src/features/editor/extensions/livePreviewTheme.ts b/apps/desktop/src/features/editor/extensions/livePreviewTheme.ts
index b32b43be..ced7acfb 100644
--- a/apps/desktop/src/features/editor/extensions/livePreviewTheme.ts
+++ b/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)",
diff --git a/apps/desktop/src/features/editor/imagePreview.ts b/apps/desktop/src/features/editor/imagePreview.ts
new file mode 100644
index 00000000..719f6197
--- /dev/null
+++ b/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 },
+        }),
+    );
+}
diff --git a/apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.test.tsx b/apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.test.tsx
index 0a277dd1..2b8afde3 100644
--- a/apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.test.tsx
+++ b/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");
+    });
 });
diff --git a/apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.tsx b/apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.tsx
index 460cb0ce..120a9a95 100644
--- a/apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.tsx
+++ b/apps/desktop/src/features/editor/mermaid/MermaidFullscreenHost.tsx
@@ -6,6 +6,7 @@ import {
     useRef,
     useState,
 } from "react";
+import { createPortal } from "react-dom";
 import {
     isWheelZoomGesture,
     useWheelZoomModifier,
@@ -17,6 +18,10 @@ import {
     type OpenMermaidFullscreenPayload,
 } from "./mermaidFullscreen";
 import { parseMermaidSvg } from "./mermaidSvg";
+import {
+    OPEN_IMAGE_PREVIEW_EVENT,
+    type OpenImagePreviewPayload,
+} from "../imagePreview";
 
 const MIN_ZOOM = 0.25;
 const MAX_ZOOM = 8;
@@ -30,6 +35,10 @@ interface ZoomAnchor {
     nextZoom: number;
 }
 
+type PreviewContent =
+    | { kind: "mermaid"; source: string }
+    | { kind: "image"; src: string; alt: string };
+
 function clampZoom(value: number) {
     return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, value));
 }
@@ -39,7 +48,7 @@ function clampScrollOffset(value: number) {
 }
 
 export function MermaidFullscreenHost() {
-    const [svgSource, setSvgSource] = useState<string | null>(null);
+    const [content, setContent] = useState<PreviewContent | null>(null);
     const [zoom, setZoom] = useState(1);
     const viewportRef = useRef<HTMLDivElement>(null);
     const svgMountRef = useRef<HTMLDivElement>(null);
@@ -47,15 +56,31 @@ export function MermaidFullscreenHost() {
     const pendingZoomAnchorRef = useRef<ZoomAnchor | null>(null);
     const previousFocusRef = useRef<HTMLElement | null>(null);
     const wheelZoomModifierRef = useWheelZoomModifier();
-    const svg = useMemo(
-        () => (svgSource ? parseMermaidSvg(svgSource) : null),
-        [svgSource],
-    );
+    const svg = useMemo(() => {
+        if (content?.kind !== "mermaid") return null;
+        return parseMermaidSvg(content.source);
+    }, [content]);
 
     const close = useCallback(() => {
-        setSvgSource(null);
+        setContent(null);
+        pendingZoomAnchorRef.current = null;
+        window.setTimeout(() => {
+            const previousFocus = previousFocusRef.current;
+            if (previousFocus?.isConnected) {
+                previousFocus.focus({ preventScroll: true });
+            }
+        }, 0);
+    }, []);
+
+    const open = useCallback((nextContent: PreviewContent) => {
+        previousFocusRef.current =
+            document.activeElement instanceof HTMLElement
+                ? document.activeElement
+                : null;
+        zoomRef.current = 1;
         pendingZoomAnchorRef.current = null;
-        window.setTimeout(() => previousFocusRef.current?.focus(), 0);
+        setZoom(1);
+        setContent(nextContent);
     }, []);
 
     const setZoomAround = useCallback((requestedZoom: number, anchor?: { x: number; y: number }) => {
@@ -81,30 +106,32 @@ export function MermaidFullscreenHost() {
                 .detail;
             if (!detail?.svg.trim() || !parseMermaidSvg(detail.svg)) return;
 
-            previousFocusRef.current =
-                document.activeElement instanceof HTMLElement
-                    ? document.activeElement
-                    : null;
-            zoomRef.current = 1;
-            pendingZoomAnchorRef.current = null;
-            setZoom(1);
-            setSvgSource(detail.svg);
+            open({ kind: "mermaid", source: detail.svg });
+        };
+
+        const handleOpenImage = (event: Event) => {
+            const detail = (event as CustomEvent<OpenImagePreviewPayload>)
+                .detail;
+            if (!detail?.src.trim()) return;
+            open({ kind: "image", src: detail.src, alt: detail.alt });
         };
 
         window.addEventListener(OPEN_MERMAID_FULLSCREEN_EVENT, handleOpen);
-        return () =>
+        window.addEventListener(OPEN_IMAGE_PREVIEW_EVENT, handleOpenImage);
+        return () => {
             window.removeEventListener(
                 OPEN_MERMAID_FULLSCREEN_EVENT,
                 handleOpen,
             );
-    }, []);
+            window.removeEventListener(
+                OPEN_IMAGE_PREVIEW_EVENT,
+                handleOpenImage,
+            );
+        };
+    }, [open]);
 
     useEffect(() => {
-        if (!svgSource) return;
-
-        const previousOverflow = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        viewportRef.current?.focus();
+        if (!content) return;
 
         const handleKeyDown = (event: KeyboardEvent) => {
             if (event.key !== "Escape") return;
@@ -115,14 +142,13 @@ export function MermaidFullscreenHost() {
 
         window.addEventListener("keydown", handleKeyDown, true);
         return () => {
-            document.body.style.overflow = previousOverflow;
             window.removeEventListener("keydown", handleKeyDown, true);
         };
-    }, [close, svgSource]);
+    }, [close, content]);
 
     useEffect(() => {
         const viewport = viewportRef.current;
-        if (!viewport || !svgSource) return;
+        if (!viewport || !content) return;
         let gestureStartZoom = zoomRef.current;
 
         const handleWheel = (event: WheelEvent) => {
@@ -171,7 +197,7 @@ export function MermaidFullscreenHost() {
             viewport.removeEventListener("gesturestart", handleGestureStart);
             viewport.removeEventListener("gesturechange", handleGestureChange);
         };
-    }, [setZoomAround, svgSource, wheelZoomModifierRef]);
+    }, [content, setZoomAround, wheelZoomModifierRef]);
 
     useLayoutEffect(() => {
         const viewport = viewportRef.current;
@@ -202,9 +228,13 @@ export function MermaidFullscreenHost() {
         mount.replaceChildren(clone);
     }, [svg]);
 
-    if (!svgSource || !svg) return null;
+    if (!content || (content.kind === "mermaid" && !svg)) return null;
 
-    return (
+    const previewLabel = translate(
+        content.kind === "mermaid" ? "Mermaid preview" : "Image preview",
+    );
+
+    return createPortal(
         <div
             className="fixed inset-0"
             style={{
@@ -215,7 +245,7 @@ export function MermaidFullscreenHost() {
             }}
             role="dialog"
             aria-modal="true"
-            aria-label={translate("Mermaid preview")}
+            aria-label={previewLabel}
         >
             <div
                 className="absolute left-4 top-4 z-10 rounded-lg px-3 py-2 text-[12px] font-semibold"
@@ -226,7 +256,7 @@ export function MermaidFullscreenHost() {
                     boxShadow: "var(--shadow-soft)",
                 }}
             >
-                {translate("Mermaid preview")}
+                {previewLabel}
             </div>
 
             <div
@@ -295,29 +325,57 @@ export function MermaidFullscreenHost() {
                     touchAction: "pan-x pan-y pinch-zoom",
                 }}
                 tabIndex={-1}
-                aria-label={translate("Mermaid canvas")}
+                aria-label={translate(
+                    content.kind === "mermaid"
+                        ? "Mermaid canvas"
+                        : "Image canvas",
+                )}
             >
-                <div
-                    className="flex min-h-full items-start justify-center"
-                    style={{
-                        width: `${zoom * 100}%`,
-                        margin: "0 auto",
-                    }}
-                >
+                {content.kind === "mermaid" ? (
                     <div
-                        ref={svgMountRef}
+                        className="flex min-h-full items-start justify-center"
                         style={{
-                            width: "100%",
-                            minWidth: 0,
-                            borderRadius: 12,
-                            padding: 16,
-                            background: "var(--bg-primary)",
-                            boxShadow: "0 24px 80px rgb(0 0 0 / 0.22)",
+                            width: `${zoom * 100}%`,
+                            margin: "0 auto",
                         }}
-                    />
-                </div>
+                    >
+                        <div
+                            ref={svgMountRef}
+                            style={{
+                                width: "100%",
+                                minWidth: 0,
+                                borderRadius: 12,
+                                padding: 16,
+                                background: "var(--bg-primary)",
+                                boxShadow: "0 24px 80px rgb(0 0 0 / 0.22)",
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <div
+                        className="flex min-h-full min-w-full items-start justify-center"
+                    >
+                        <div style={{ zoom }}>
+                            <img
+                                src={content.src}
+                                alt={content.alt}
+                                draggable={false}
+                                style={{
+                                    display: "block",
+                                    maxWidth: "calc(100vw - 64px)",
+                                    maxHeight: "calc(100vh - 96px)",
+                                    objectFit: "contain",
+                                    borderRadius: 12,
+                                    boxShadow:
+                                        "0 24px 80px rgb(0 0 0 / 0.28)",
+                                }}
+                            />
+                        </div>
+                    </div>
+                )}
             </div>
-        </div>
+        </div>,
+        document.body,
     );
 }
 

From 9f3ce27d123a44f493a6a81f247dcc2375fc0a83 Mon Sep 17 00:00:00 2001
From: edenliu <hxfdarling@hotmail.com>
Date: Mon, 17 Aug 2026 11:20:47 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=8F=91=E5=B8=83=20BifrostWrite=201.2.9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                           | 10 ++++++++++
 apps/desktop/native-backend/Cargo.toml |  2 +-
 apps/desktop/package-lock.json         |  4 ++--
 apps/desktop/package.json              |  2 +-
 apps/desktop/src-tauri/Cargo.toml      |  2 +-
 apps/desktop/src-tauri/tauri.conf.json |  2 +-
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25e35a24..96ab77c0 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/desktop/native-backend/Cargo.toml b/apps/desktop/native-backend/Cargo.toml
index 6478585e..9a15de01 100644
--- a/apps/desktop/native-backend/Cargo.toml
+++ b/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]
diff --git a/apps/desktop/package-lock.json b/apps/desktop/package-lock.json
index a1c43e9f..b40bf19b 100644
--- a/apps/desktop/package-lock.json
+++ b/apps/desktop/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "bifrostwrite-desktop",
-    "version": "1.2.8",
+    "version": "1.2.9",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "bifrostwrite-desktop",
-            "version": "1.2.8",
+            "version": "1.2.9",
             "hasInstallScript": true,
             "dependencies": {
                 "@codemirror/commands": "^6.10.3",
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index c2e0d981..041395db 100644
--- a/apps/desktop/package.json
+++ b/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": {
diff --git a/apps/desktop/src-tauri/Cargo.toml b/apps/desktop/src-tauri/Cargo.toml
index b670a543..607d2577 100644
--- a/apps/desktop/src-tauri/Cargo.toml
+++ b/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"
diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index 566da2c1..71a30d37 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/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",