enable history on selection change

workaround for node mutations initial update
ibastawisi · Aug 11, 2024 · e5a771b · e5a771b
1 parent 19f2b02
commit e5a771b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/src/editor/nodes/StickyNode/StickyComponent.tsx b/src/editor/nodes/StickyNode/StickyComponent.tsx
@@ -46,20 +46,26 @@ export default function StickyComponent({ nodeKey, color, stickyEditor, children
   }
 
   const handleDelete = () => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if (node) {
+    setSelected(true);
+    setTimeout(() => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (!$isStickyNode(node)) return;
+        node.selectPrevious();
         node.remove();
-      }
-    });
+      });
+    }, 0);
   };
 
   const handleColorChange = () => {
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if (!$isStickyNode(node)) return;
-      node.toggleColor();
-    });
+    setSelected(true);
+    setTimeout(() => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (!$isStickyNode(node)) return;
+        node.toggleColor();
+      });
+    }, 0);
   };
 
   return (

diff --git a/src/editor/plugins/ToolbarPlugin/index.tsx b/src/editor/plugins/ToolbarPlugin/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLEAR_HISTORY_COMMAND, FOCUS_COMMAND, LexicalNode } from 'lexical';
+import { $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLEAR_HISTORY_COMMAND, COMMAND_PRIORITY_HIGH, LexicalNode } from 'lexical';
 import { $isCodeNode } from '@lexical/code';
 import { $isListNode, ListNode, } from '@lexical/list';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -146,6 +146,9 @@ function ToolbarPlugin() {
         (_payload, newEditor) => {
           setActiveEditor(newEditor);
           $updateToolbar();
+          if (!isTouched.current) {
+            isTouched.current = true;
+          }
           return false;
         },
         COMMAND_PRIORITY_CRITICAL,
@@ -161,23 +164,37 @@ function ToolbarPlugin() {
 
   useEffect(() => {
     return mergeRegister(
-      activeEditor.registerUpdateListener(({ editorState }) => {
+      activeEditor.registerUpdateListener(({ editorState, tags }) => {
         editorState.read(() => {
           $updateToolbar();
         });
+        try {
+          const revision = JSON.parse(tags.values().next().value);
+          if (revision.id) {
+            isTouched.current = false;
+          }
+        } catch (e) { }
       }),
       activeEditor.registerCommand<boolean>(
         CAN_UNDO_COMMAND,
         (payload) => {
-          setCanUndo(isTouched.current && payload);
+          if (payload && !isTouched.current) {
+            editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+            return false;
+          }
+          setCanUndo(payload);
           return false;
         },
         COMMAND_PRIORITY_CRITICAL,
       ),
       activeEditor.registerCommand<boolean>(
         CAN_REDO_COMMAND,
         (payload) => {
-          setCanRedo(isTouched.current && payload);
+          if (payload && !isTouched.current) {
+            editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+            return false;
+          }
+          setCanRedo(payload);
           return false;
         },
         COMMAND_PRIORITY_CRITICAL,
@@ -190,17 +207,6 @@ function ToolbarPlugin() {
         },
         COMMAND_PRIORITY_CRITICAL,
       ),
-      activeEditor.registerCommand(
-        FOCUS_COMMAND,
-        () => {
-          if (!isTouched.current) {
-            isTouched.current = true;
-            editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_CRITICAL,
-      ),
     );
   }, [activeEditor, $updateToolbar]);