From 0732f128aeee350708e54412a5a9377ae4638c73 Mon Sep 17 00:00:00 2001
From: Ivaylo Pavlov <ivailo90@gmail.com>
Date: Fri, 10 Jan 2025 23:30:17 +0000
Subject: [PATCH] Clean up nested editor update

---
 .../src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx | 12 +++++-------
 .../lexical-playground/src/nodes/ImageComponent.tsx  | 12 +++++-------
 .../nodes/InlineImageNode/InlineImageComponent.tsx   | 12 +++++-------
 .../src/nodes/PageBreakNode/index.tsx                | 12 +++++-------
 .../lexical-playground/src/nodes/PollComponent.tsx   | 12 +++++-------
 .../src/LexicalBlockWithAlignableContents.tsx        | 12 +++++-------
 .../lexical-react/src/LexicalHorizontalRuleNode.tsx  | 12 +++++-------
 7 files changed, 35 insertions(+), 49 deletions(-)

diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
index 259935a41f6..ee80664f93e 100644
--- a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
+++ b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx
@@ -57,16 +57,14 @@ export default function ExcalidrawComponent({
     (event: KeyboardEvent) => {
       if (isSelected) {
         event.preventDefault();
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey);
-          if (node) {
-            node.remove();
-          }
-        });
+        const node = $getNodeByKey(nodeKey);
+        if (node) {
+          node.remove();
+        }
       }
       return false;
     },
-    [editor, isSelected, nodeKey],
+    [isSelected, nodeKey],
   );
 
   useEffect(() => {
diff --git a/packages/lexical-playground/src/nodes/ImageComponent.tsx b/packages/lexical-playground/src/nodes/ImageComponent.tsx
index 7cd2deff7ce..6eb6a3d7cc8 100644
--- a/packages/lexical-playground/src/nodes/ImageComponent.tsx
+++ b/packages/lexical-playground/src/nodes/ImageComponent.tsx
@@ -180,17 +180,15 @@ export default function ImageComponent({
       if (isSelected && $isNodeSelection(deleteSelection)) {
         const event: KeyboardEvent = payload;
         event.preventDefault();
-        editor.update(() => {
-          deleteSelection.getNodes().forEach((node) => {
-            if ($isImageNode(node)) {
-              node.remove();
-            }
-          });
+        deleteSelection.getNodes().forEach((node) => {
+          if ($isImageNode(node)) {
+            node.remove();
+          }
         });
       }
       return false;
     },
-    [editor, isSelected],
+    [isSelected],
   );
 
   const $onEnter = useCallback(
diff --git a/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx b/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx
index 4a2629ffb45..6cbd4377861 100644
--- a/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx
+++ b/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx
@@ -210,18 +210,16 @@ export default function InlineImageComponent({
         const event: KeyboardEvent = payload;
         event.preventDefault();
         if (isSelected && $isNodeSelection(deleteSelection)) {
-          editor.update(() => {
-            deleteSelection.getNodes().forEach((node) => {
-              if ($isInlineImageNode(node)) {
-                node.remove();
-              }
-            });
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isInlineImageNode(node)) {
+              node.remove();
+            }
           });
         }
       }
       return false;
     },
-    [editor, isSelected],
+    [isSelected],
   );
 
   const $onEnter = useCallback(
diff --git a/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx b/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx
index 1ef6246ce61..0b4911c4383 100644
--- a/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx
+++ b/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx
@@ -40,17 +40,15 @@ function PageBreakComponent({nodeKey}: {nodeKey: NodeKey}) {
       event.preventDefault();
       const deleteSelection = $getSelection();
       if (isSelected && $isNodeSelection(deleteSelection)) {
-        editor.update(() => {
-          deleteSelection.getNodes().forEach((node) => {
-            if ($isPageBreakNode(node)) {
-              node.remove();
-            }
-          });
+        deleteSelection.getNodes().forEach((node) => {
+          if ($isPageBreakNode(node)) {
+            node.remove();
+          }
         });
       }
       return false;
     },
-    [editor, isSelected],
+    [isSelected],
   );
 
   useEffect(() => {
diff --git a/packages/lexical-playground/src/nodes/PollComponent.tsx b/packages/lexical-playground/src/nodes/PollComponent.tsx
index 687a924bc8b..52119d350cd 100644
--- a/packages/lexical-playground/src/nodes/PollComponent.tsx
+++ b/packages/lexical-playground/src/nodes/PollComponent.tsx
@@ -150,17 +150,15 @@ export default function PollComponent({
       if (isSelected && $isNodeSelection(deleteSelection)) {
         const event: KeyboardEvent = payload;
         event.preventDefault();
-        editor.update(() => {
-          deleteSelection.getNodes().forEach((node) => {
-            if ($isPollNode(node)) {
-              node.remove();
-            }
-          });
+        deleteSelection.getNodes().forEach((node) => {
+          if ($isPollNode(node)) {
+            node.remove();
+          }
         });
       }
       return false;
     },
-    [editor, isSelected],
+    [isSelected],
   );
 
   useEffect(() => {
diff --git a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx
index 0a48094ce42..c2b68ff747a 100644
--- a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx
+++ b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx
@@ -57,17 +57,15 @@ export function BlockWithAlignableContents({
       const deleteSelection = $getSelection();
       if (isSelected && $isNodeSelection(deleteSelection)) {
         event.preventDefault();
-        editor.update(() => {
-          deleteSelection.getNodes().forEach((node) => {
-            if ($isDecoratorNode(node)) {
-              node.remove();
-            }
-          });
+        deleteSelection.getNodes().forEach((node) => {
+          if ($isDecoratorNode(node)) {
+            node.remove();
+          }
         });
       }
       return false;
     },
-    [editor, isSelected],
+    [isSelected],
   );
 
   useEffect(() => {
diff --git a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
index feb649b6028..41339c51c7d 100644
--- a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
+++ b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
@@ -53,17 +53,15 @@ function HorizontalRuleComponent({nodeKey}: {nodeKey: NodeKey}) {
       const deleteSelection = $getSelection();
       if (isSelected && $isNodeSelection(deleteSelection)) {
         event.preventDefault();
-        editor.update(() => {
-          deleteSelection.getNodes().forEach((node) => {
-            if ($isHorizontalRuleNode(node)) {
-              node.remove();
-            }
-          });
+        deleteSelection.getNodes().forEach((node) => {
+          if ($isHorizontalRuleNode(node)) {
+            node.remove();
+          }
         });
       }
       return false;
     },
-    [editor, isSelected],
+    [isSelected],
   );
 
   useEffect(() => {