[lexical-yjs] Bug Fix: prevent collab element nodes from removing other nodes from node map (#7295)

Author: james-atticus

packages/lexical-playground/__tests__/e2e/Collaboration.spec.mjs

@@ -670,4 +670,75 @@ test.describe('Collaboration', () => {
       `,
     );
   });
+
+  test('$handleNormalizationMergeConflicts handles nodes that have been reparented', async ({
+    page,
+    isCollab,
+  }) => {
+    test.skip(!isCollab);
+
+    // Add paragraph, type ABC into second paragraph, bold the B, backspace text into the first paragraph to reparent the text nodes
+    await focusEditor(page);
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('ABC');
+    await page.keyboard.press('ArrowLeft');
+    await selectCharacters(page, 'left', 'B'.length);
+    await toggleBold(page);
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('Backspace');
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">A</span>
+          <strong
+            class="PlaygroundEditorTheme__textBold"
+            data-lexical-text="true">
+            B
+          </strong>
+          <span data-lexical-text="true">C</span>
+        </p>
+      `,
+    );
+
+    // Right collaborator deletes A, left deletes B.
+    await sleep(1050);
+    await page.keyboard.press('Delete');
+    await sleep(50);
+    await page
+      .frameLocator('iframe[name="right"]')
+      .locator('[data-lexical-editor="true"]')
+      .focus();
+    await page.keyboard.press('Delete');
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">C</span>
+        </p>
+      `,
+    );
+
+    // Left collaborator undoes their deletion of A.
+    await page.frameLocator('iframe[name="left"]').getByLabel('Undo').click();
+
+    // Check that normalization worked properly.
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">AC</span>
+        </p>
+      `,
+    );
+  });
 });

packages/lexical-yjs/src/CollabDecoratorNode.ts

@@ -95,7 +95,9 @@ export class CollabDecoratorNode {
 
   destroy(binding: Binding): void {
     const collabNodeMap = binding.collabNodeMap;
-    collabNodeMap.delete(this._key);
+    if (collabNodeMap.get(this._key) === this) {
+      collabNodeMap.delete(this._key);
+    }
   }
 }
 

packages/lexical-yjs/src/CollabElementNode.ts

@@ -679,7 +679,9 @@ export class CollabElementNode {
       children[i].destroy(binding);
     }
 
-    collabNodeMap.delete(this._key);
+    if (collabNodeMap.get(this._key) === this) {
+      collabNodeMap.delete(this._key);
+    }
   }
 }
 

packages/lexical-yjs/src/CollabLineBreakNode.ts

@@ -54,7 +54,9 @@ export class CollabLineBreakNode {
 
   destroy(binding: Binding): void {
     const collabNodeMap = binding.collabNodeMap;
-    collabNodeMap.delete(this._key);
+    if (collabNodeMap.get(this._key) === this) {
+      collabNodeMap.delete(this._key);
+    }
   }
 }
 

packages/lexical-yjs/src/CollabTextNode.ts

@@ -162,7 +162,9 @@ export class CollabTextNode {
 
   destroy(binding: Binding): void {
     const collabNodeMap = binding.collabNodeMap;
-    collabNodeMap.delete(this._key);
+    if (collabNodeMap.get(this._key) === this) {
+      collabNodeMap.delete(this._key);
+    }
   }
 }