[lexical] Bug Fix: Fix bug in transformer loop that would cause nodes not to get reconciled

Author: etrepum

packages/lexical-list/src/LexicalListNode.ts

@@ -193,31 +193,26 @@ export class ListNode extends ElementNode {
     return false;
   }
 
-  append(...nodesToAppend: LexicalNode[]): this {
-    for (let i = 0; i < nodesToAppend.length; i++) {
-      const currentNode = nodesToAppend[i];
-
-      if ($isListItemNode(currentNode)) {
-        super.append(currentNode);
-      } else {
-        const listItemNode = $createListItemNode();
-
-        if ($isListNode(currentNode)) {
-          listItemNode.append(currentNode);
-        } else if ($isElementNode(currentNode)) {
-          if (currentNode.isInline()) {
-            listItemNode.append(currentNode);
-          } else {
-            const textNode = $createTextNode(currentNode.getTextContent());
-            listItemNode.append(textNode);
-          }
-        } else {
-          listItemNode.append(currentNode);
+  splice(
+    start: number,
+    deleteCount: number,
+    nodesToInsert: LexicalNode[],
+  ): this {
+    let listItemNodesToInsert = nodesToInsert;
+    for (let i = 0; i < nodesToInsert.length; i++) {
+      const node = nodesToInsert[i];
+      if (!$isListItemNode(node)) {
+        if (listItemNodesToInsert === nodesToInsert) {
+          listItemNodesToInsert = [...nodesToInsert];
         }
-        super.append(listItemNode);
+        listItemNodesToInsert[i] = $createListItemNode().append(
+          $isElementNode(node) && !($isListNode(node) || node.isInline())
+            ? $createTextNode(node.getTextContent())
+            : node,
+        );
       }
     }
-    return this;
+    return super.splice(start, deleteCount, listItemNodesToInsert);
   }
 
   extractWithChild(child: LexicalNode): boolean {

packages/lexical/src/LexicalReconciler.ts

@@ -617,7 +617,7 @@ function $reconcileNode(
     return dom;
   }
   // If the node key doesn't point to the same instance in both maps,
-  // it means it were cloned. If they're also dirty, we mark them as mutated.
+  // it was cloned. If it's also dirty, we mark it as mutated.
   if (prevNode !== nextNode && isDirty) {
     setMutatedNode(
       mutatedNodes,

packages/lexical/src/LexicalUpdates.ts

@@ -308,6 +308,7 @@ function $applyAllTransforms(
     for (const currentUntransformedDirtyElement of untransformedDirtyElements) {
       const nodeKey = currentUntransformedDirtyElement[0];
       const intentionallyMarkedAsDirty = currentUntransformedDirtyElement[1];
+      dirtyElements.set(nodeKey, intentionallyMarkedAsDirty);
       if (nodeKey !== 'root' && !intentionallyMarkedAsDirty) {
         continue;
       }
@@ -320,8 +321,6 @@ function $applyAllTransforms(
       ) {
         $applyTransforms(editor, node, transformsCache);
       }
-
-      dirtyElements.set(nodeKey, intentionallyMarkedAsDirty);
     }
 
     untransformedDirtyLeaves = editor._dirtyLeaves;

packages/lexical/src/nodes/LexicalRootNode.ts

@@ -82,18 +82,18 @@ export class RootNode extends ElementNode {
   }
 
   // Mutate
-
-  append(...nodesToAppend: LexicalNode[]): this {
-    for (let i = 0; i < nodesToAppend.length; i++) {
-      const node = nodesToAppend[i];
-      if (!$isElementNode(node) && !$isDecoratorNode(node)) {
-        invariant(
-          false,
-          'rootNode.append: Only element or decorator nodes can be appended to the root node',
-        );
-      }
+  splice(
+    start: number,
+    deleteCount: number,
+    nodesToInsert: LexicalNode[],
+  ): this {
+    for (const node of nodesToInsert) {
+      invariant(
+        $isElementNode(node) || $isDecoratorNode(node),
+        'rootNode.splice: Only element or decorator nodes can be inserted to the root node',
+      );
     }
-    return super.append(...nodesToAppend);
+    return super.splice(start, deleteCount, nodesToInsert);
   }
 
   static importJSON(serializedNode: SerializedRootNode): RootNode {