time-base saving & toastTips (#7662)

* time-base saving & toastTips

* refactor hasChanged

---------

Co-authored-by: First <first@FirstdeMacBook-Pro.local>

frontend/src/pages/excalidraw-editor/index.js

@@ -59,8 +59,18 @@ const ExcaliEditor = () => {
       }
     }, SAVE_INTERVAL_TIME);
 
+    const handleBeforeUnload = (event) => {
+      if (isChangedRef.current) {
+        event.preventDefault();
+        event.returnValue = '';
+      }
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
     return () => {
       clearInterval(saveInterval);
+      window.removeEventListener('beforeunload', handleBeforeUnload);
     };
   }, [saveSceneContent]);
 

frontend/src/pages/excalidraw-editor/simple-editor.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Excalidraw, MainMenu } from '@excalidraw/excalidraw';
 import isHotkey from 'is-hotkey';
 import CodeMirrorLoading from '../../components/code-mirror-loading';
@@ -13,6 +13,7 @@ const SimpleEditor = ({
   isFetching
 }) => {
   const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+  const prevElementsRef = useRef([]);
   const UIOptions = {
     canvasActions: {
       saveToActiveFile: false,
@@ -23,7 +24,10 @@ const SimpleEditor = ({
 
   const handleChange = () => {
     const elements = excalidrawAPI.getSceneElements();
+    if (hasChanged(elements, prevElementsRef.current)) {
       onChangeContent(elements);
+    }
+    prevElementsRef.current = elements;
   };
 
   useEffect(() => {
@@ -40,6 +44,14 @@ const SimpleEditor = ({
     };
   }, [excalidrawAPI, onSaveContent]);
 
+  const hasChanged = (prev, current) => {
+    if (prev.length !== current.length) return true;
+
+    return current.some((element, index) => {
+      return element.version !== prev[index]?.version;
+    });
+  };
+
   if (isFetching) {
     return (
       <div className='excali-container'>