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

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

apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx

@@ -1,6 +1,6 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { lazy, Suspense, useCallback, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import {
   EditorMenuProps,
@@ -10,9 +10,11 @@ import {
   ActionIcon,
   Button,
   Group,
+  Text,
   Tooltip,
   useComputedColorScheme,
 } from "@mantine/core";
+import { modals } from "@mantine/modals";
 import { useDisclosure } from "@mantine/hooks";
 import clsx from "clsx";
 import {
@@ -52,6 +54,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   });
   const [excalidrawData, setExcalidrawData] = useState<any>(null);
   const computedColorScheme = useComputedColorScheme();
+  const isDirtyRef = useRef(false);
+  const isSavingRef = useRef(false);
+  const isInitialLoadRef = useRef(true);
+  const lastFingerprintRef = useRef("");
 
   const editorState = useEditorState({
     editor,
@@ -160,57 +166,109 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     } catch (err) {
       console.error(err);
     } finally {
+      isDirtyRef.current = false;
+      isInitialLoadRef.current = true;
       open();
     }
   }, [editorState?.src, open]);
 
-  const handleSave = useCallback(async () => {
-    if (!excalidrawAPI) {
+  const saveData = useCallback(async () => {
+    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 attachmentId = editorState?.attachmentId;
+      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;
+      const attachmentId = editorState?.attachmentId;
+
+      let attachment: IAttachment = null;
+      if (attachmentId) {
+        attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
+      } else {
+        attachment = await uploadFile(excalidrawSvgFile, pageId);
+      }
+
+      editor.commands.updateAttributes("excalidraw", {
+        src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+        title: attachment.fileName,
+        size: attachment.fileSize,
+        attachmentId: attachment.id,
+      });
+
+      isDirtyRef.current = false;
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [editor, excalidrawAPI, editorState?.attachmentId]);
+
+  const handleSaveAndExit = useCallback(async () => {
+    try {
+      await saveData();
+      close();
+    } catch {
+      // save failed, modal stays open
+    }
+  }, [saveData, close]);
+
+  const handleClose = useCallback(() => {
+    if (!isDirtyRef.current) {
+      close();
+      return;
     }
 
-    editor.commands.updateAttributes("excalidraw", {
-      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();
-  }, [editor, excalidrawAPI, editorState?.attachmentId, close]);
+  useEffect(() => {
+    if (!opened) return;
+
+    const interval = setInterval(() => {
+      if (isDirtyRef.current && !isSavingRef.current) {
+        saveData().catch(() => {});
+      }
+    }, 60_000);
+
+    return () => clearInterval(interval);
+  }, [opened, saveData]);
 
   return (
     <>
@@ -317,7 +375,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           zIndex: 200,
         }}
         isOpen={opened}
-        onRequestClose={close}
+        onRequestClose={handleClose}
         disableCloseOnBgClick={true}
         contentProps={{
           style: {
@@ -332,10 +390,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           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>
@@ -343,6 +401,18 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
           <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,

apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx

@@ -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(() => {});
+      }
+    }, 30_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,