feat(editor): add auto-save and unsaved changes protection for diagrams

2026-05-07 06:23:06 +08:00 · 2026-03-12 02:25:20 +00:00
parent 7b69727a30
commit 131511a94e
4 changed files with 424 additions and 129 deletions
@@ -7,7 +7,14 @@ import {
  Text,
  useComputedColorScheme,
 } from "@mantine/core";
-import { lazy, Suspense, useState } from "react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { svgStringToFile } from "@/lib";
 import { useDisclosure } from "@mantine/hooks";
@@ -20,6 +27,7 @@ import { IconEdit } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useHandleLibrary } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
+import { modals } from "@mantine/modals";

 const ExcalidrawComponent = lazy(() =>
  import("@excalidraw/excalidraw").then((module) => ({
@@ -42,59 +50,122 @@ export default function ExcalidrawView(props: NodeViewProps) {
  const [opened, { open, close }] = useDisclosure(false);
  const computedColorScheme = useComputedColorScheme();

+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const isInitialLoadRef = useRef(true);
+  const lastFingerprintRef = useRef("");
+
  const handleOpen = async () => {
    if (!editor.isEditable) {
      return;
    }
+    isDirtyRef.current = false;
+    isInitialLoadRef.current = true;
    open();
  };

-  const handleSave = async () => {
-    if (!excalidrawAPI) {
+  const saveData = useCallback(async (updateSrc = true) => {
+    if (!excalidrawAPI || isSavingRef.current) {
      return;
    }

-    const { exportToSvg } = await import("@excalidraw/excalidraw");
+    isSavingRef.current = true;

-    const svg = await exportToSvg({
-      elements: excalidrawAPI?.getSceneElements(),
-      appState: {
-        exportEmbedScene: true,
-        exportWithDarkMode: false,
-      },
-      files: excalidrawAPI?.getFiles(),
-    });
+    try {
+      const { exportToSvg } = await import("@excalidraw/excalidraw");

-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svg);
+      const svg = await exportToSvg({
+        elements: excalidrawAPI?.getSceneElements(),
+        appState: {
+          exportEmbedScene: true,
+          exportWithDarkMode: false,
+        },
+        files: excalidrawAPI?.getFiles(),
+      });

-    svgString = svgString.replace(
-      /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
-      "https://unpkg.com/@excalidraw/excalidraw@latest",
-    );
+      const serializer = new XMLSerializer();
+      let svgString = serializer.serializeToString(svg);

-    const fileName = "diagram.excalidraw.svg";
-    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
+      svgString = svgString.replace(
+        /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
+        "https://unpkg.com/@excalidraw/excalidraw@latest",
+      );

-    // @ts-ignore
-    const pageId = editor.storage?.pageId;
+      const fileName = "diagram.excalidraw.svg";
+      const excalidrawSvgFile = await svgStringToFile(svgString, fileName);

-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(excalidrawSvgFile, pageId);
+      // @ts-ignore
+      const pageId = editor.storage?.pageId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(excalidrawSvgFile, pageId);
+      }
+
+      if (updateSrc) {
+        updateAttributes({
+          src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+          title: attachment.fileName,
+          size: attachment.fileSize,
+          attachmentId: attachment.id,
+        });
+      } else {
+        updateAttributes({
+          attachmentId: attachment.id,
+        });
+      }
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [excalidrawAPI, editor, attachmentId, updateAttributes]);
+
+  const handleSaveAndExit = useCallback(async () => {
+    try {
+      await saveData();
+      close();
+    } catch {
+      /* empty */
+    }
+  }, [saveData, close]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
    }

-    updateAttributes({
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
+    modals.openConfirmModal({
+      title: t("Unsaved changes"),
+      children: (
+        <Text size="sm">
+          {t("You have unsaved changes that will be lost.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Discard"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => {
+        isDirtyRef.current = false;
+        close();
+      },
    });
+  }, [close, t]);

-    close();
-  };
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current) {
+        saveData(false).catch(() => {});
+      }
+    }, 60_000);
+
+    return () => clearInterval(interval);
+  }, [opened, saveData]);

  return (
    <NodeViewWrapper data-drag-handle>
@@ -105,7 +176,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
          zIndex: 200,
        }}
        isOpen={opened}
-        onRequestClose={close}
+        onRequestClose={handleClose}
        disableCloseOnBgClick={true}
        contentProps={{
          style: {
@@ -120,10 +191,10 @@ export default function ExcalidrawView(props: NodeViewProps) {
          bg="var(--mantine-color-body)"
          p="xs"
        >
-          <Button onClick={handleSave} size={"compact-sm"}>
+          <Button onClick={handleSaveAndExit} size={"compact-sm"}>
            {t("Save & Exit")}
          </Button>
-          <Button onClick={close} color="red" size={"compact-sm"}>
+          <Button onClick={handleClose} color="red" size={"compact-sm"}>
            {t("Exit")}
          </Button>
        </Group>
@@ -131,6 +202,18 @@ export default function ExcalidrawView(props: NodeViewProps) {
          <Suspense fallback={null}>
            <ExcalidrawComponent
              excalidrawAPI={(api) => setExcalidrawAPI(api)}
+              onChange={(elements, _appState, files) => {
+                const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
+                if (isInitialLoadRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isInitialLoadRef.current = false;
+                  return;
+                }
+                if (fingerprint !== lastFingerprintRef.current) {
+                  lastFingerprintRef.current = fingerprint;
+                  isDirtyRef.current = true;
+                }
+              }}
              initialData={{
                ...excalidrawData,
                scrollToContent: true,