Check modification taking care of redo and undo

Author: newrun

src/renderer/components/editor/CodeEditor.jsx

@@ -5,35 +5,60 @@ import { useCodeEditor } from './useCodeEditors';
 
 export default function CodeEditor({ tabKey }) {
   const containerRef = useRef(null);
-  const [editor, setEditor] = useState(null);
-  const [value, setValue] = useState(null);
-  const { filepath, language, monacoOption, load, setDirty } = useCodeEditor({
+  const editorRef = useRef(null);
+  const versionRef = useRef(-1);
+  const [mounted, setMounted] = useState(false);
+  const {
+    filepath,
+    language,
+    monacoOption,
+    register,
+    unregister,
+    load,
+    setDirty,
+    isDifferentWithSavedValue,
+  } = useCodeEditor({
     tabKey,
-    ref: editor,
   });
   const { width, height } = useResizeObserver({
     ref: containerRef,
     round: Math.floor,
   });
 
+  useEffect(() => {
+    if (tabKey && mounted) {
+      register(tabKey, editorRef.current);
+    }
+
+    return () => {
+      unregister(tabKey);
+    };
+  }, [tabKey, mounted]);
+
   function handleEditorDidMount(editor, monaco) {
-    setEditor(editor);
+    editorRef.current = editor;
+    setMounted(true);
     load().then((value) => {
       if (value) {
         editor.setValue(value);
       }
     });
   }
 
-  const handleChange = useCallback(
-    (newValue) => {
-      if (value !== null) {
-        setDirty(true);
-      }
-      setValue(newValue);
-    },
-    [value]
-  );
+  const handleChange = async (newValue, event) => {
+    console.log(event);
+    const versionId = event.versionId;
+    const pervVersionId = versionRef.current;
+
+    versionRef.current = versionId;
+
+    if (event.isUndoing || event.isRedoing) {
+      const modified = await isDifferentWithSavedValue(newValue);
+      setDirty(modified);
+    } else if (versionId >= 3 && versionId !== pervVersionId) {
+      setDirty(true);
+    }
+  };
 
   return (
     <div
@@ -49,7 +74,6 @@ export default function CodeEditor({ tabKey }) {
         path={filepath}
         defaultLanguage={language}
         options={monacoOption}
-        value={value}
         onMount={handleEditorDidMount}
         onChange={handleChange}
       />

src/renderer/components/editor/useCodeEditors.js

@@ -1,11 +1,4 @@
-import {
-  useRef,
-  useEffect,
-  useLayoutEffect,
-  useState,
-  useCallback,
-  useMemo,
-} from 'react';
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { nanoid } from 'nanoid';
 import { createContext } from '../../hooks/context';
 import { defaultOption, toggleEditorOption } from './manacoOption';
@@ -207,7 +200,7 @@ export function useCodeEditorTabs() {
   return { tabs, setActiveTabKey };
 }
 
-export function useCodeEditor({ tabKey, ref }) {
+export function useCodeEditor({ tabKey }) {
   const { tabs, monacoOption, setDirty, load, register, unregister } =
     useCodeEditorsContext();
 
@@ -216,25 +209,29 @@ export function useCodeEditor({ tabKey, ref }) {
     return { filepath: tab?.filepath, language: tab?.language };
   }, [tabs, tabKey]);
 
-  useLayoutEffect(() => {
-    register(tabKey, ref);
-    return () => {
-      unregister(tabKey);
-    };
-  }, [tabKey, ref]);
-
   const setDirtyCallback = useCallback(
     (value) => setDirty(tabKey, value),
     [tabKey]
   );
 
   const loadCallback = useCallback(async () => await load(tabKey), [tabKey]);
 
+  const isDifferentWithSavedValue = useCallback(
+    async (value) => {
+      const savedValue = await load(tabKey);
+      return savedValue !== value;
+    },
+    [tabKey]
+  );
+
   return {
     filepath,
     language,
     monacoOption,
+    register,
+    unregister,
     load: loadCallback,
     setDirty: setDirtyCallback,
+    isDifferentWithSavedValue,
   };
 }