fix warning on leave and autosave exalidraw

Author: fccview

app/_components/FeatureComponents/Notes/Parts/TipTap/CustomExtensions/ExcalidrawExtension.tsx

@@ -106,6 +106,14 @@ export const ExcalidrawNodeView = ({
     }
   };
 
+  const handleClose = () => {
+    if (excalidrawAPI) {
+      handleSave();
+    } else {
+      setIsEditing(false);
+    }
+  };
+
   const handleDelete = () => {
     setShowDeleteModal(true);
   };
@@ -129,7 +137,7 @@ export const ExcalidrawNodeView = ({
     <NodeViewWrapper className="excalidraw-node-wrapper">
       <Modal
         isOpen={isEditing && !!initialData}
-        onClose={() => setIsEditing(false)}
+        onClose={handleClose}
         title={
           <div className="flex items-center gap-2">
             {t("editor.editDiagram")}

app/_hooks/useNoteEditor.tsx

@@ -115,6 +115,7 @@ export const useNoteEditor = ({
     registerNavigationGuard,
     unregisterNavigationGuard,
     executePendingNavigation,
+    setHasUnsavedChanges: setProviderUnsaved,
   } = useNavigationGuard();
   const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -167,10 +168,15 @@ export const useNoteEditor = ({
   }, [isEditing]);
 
   useEffect(() => {
-    if (notesDefaultMode !== "edit" && !isEditing) return;
+    if (notesDefaultMode !== "edit" && !isEditing) {
+      setProviderUnsaved(false);
+      return;
+    }
     const titleChanged = title !== note.title;
     const categoryChanged = category !== (note.category || "Uncategorized");
-    setHasUnsavedChanges(contentIsDirty || titleChanged || categoryChanged);
+    const dirty = contentIsDirty || titleChanged || categoryChanged;
+    setHasUnsavedChanges(dirty);
+    setProviderUnsaved(dirty);
   }, [contentIsDirty, title, category, note, isEditing]);
 
   const handleSave = useCallback(
@@ -275,6 +281,7 @@ export const useNoteEditor = ({
         setIsEditing(false);
         setIsEditingEncrypted(false);
         setContentIsDirty(false);
+        setProviderUnsaved(false);
 
         const categoryPath = buildCategoryPath(
           category || "Uncategorized",
@@ -352,6 +359,7 @@ export const useNoteEditor = ({
     setTitle(note.title);
     setCategory(note.category || "Uncategorized");
     setContentIsDirty(false);
+    setProviderUnsaved(false);
     const { contentWithoutMetadata } = extractYamlMetadata(note.content || "");
     if (isMinimalMode) {
       setEditorContent(contentWithoutMetadata);

app/_providers/NavigationGuardProvider.tsx

@@ -5,6 +5,7 @@ import {
   useContext,
   useState,
   useCallback,
+  useEffect,
   ReactNode,
 } from "react";
 
@@ -59,6 +60,17 @@ export const NavigationGuardProvider = ({
     return navigationGuard ? !navigationGuard() : false;
   }, [navigationGuard]);
 
+  useEffect(() => {
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges) {
+        e.preventDefault();
+      }
+    };
+
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [hasUnsavedChanges]);
+
   const executePendingNavigation = useCallback(() => {
     if (pendingNavigation) {
       pendingNavigation();