zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/src/__tests__/unit/CollaborationSnapshot.test.ts

@@ -0,0 +1,461 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $getYChangeState,
+  CLEAR_DIFF_VERSIONS_COMMAND__EXPERIMENTAL,
+  DIFF_VERSIONS_COMMAND__EXPERIMENTAL,
+} from '@lexical/yjs';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getNodeByKeyOrThrow,
+  $getRoot,
+  LexicalEditor,
+  MutationListener,
+  ParagraphNode,
+  TextNode,
+} from 'lexical';
+import {expectHtmlToBeEqual, html} from 'lexical/src/__tests__/utils';
+import {afterEach, beforeEach, describe, it} from 'vitest';
+import * as Y from 'yjs';
+
+import {Client, createTestConnection, waitForReact} from './utils';
+
+describe('CollaborationSnapshot', () => {
+  let container: null | HTMLDivElement = null;
+  let client1: Client;
+  let client2: Client;
+  let editor1: LexicalEditor;
+  let editor2: LexicalEditor;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    const connector = createTestConnection(true);
+    client1 = connector.createClient('1');
+    client2 = connector.createClient('2');
+    client1.start(container!);
+    client2.start(container!);
+    editor1 = client1.getEditor();
+    editor2 = client2.getEditor();
+
+    const mutationListener: MutationListener = (mutations) => {
+      editor1.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutations) {
+          if (mutation === 'destroyed') {
+            continue;
+          }
+          const element = editor1.getElementByKey(nodeKey);
+          if (!element) {
+            continue;
+          }
+          element.classList.remove('removed', 'added');
+          const node = $getNodeByKeyOrThrow<TextNode>(nodeKey);
+          const ychange = $getYChangeState<void>(node);
+          if (!ychange) {
+            continue;
+          }
+          const {type} = ychange;
+          switch (type) {
+            case 'removed':
+              element.classList.add('y-removed');
+              break;
+            case 'added':
+              element.classList.add('y-added');
+              break;
+            default:
+            // no change
+          }
+        }
+      });
+    };
+
+    editor1.registerMutationListener(TextNode, mutationListener);
+    editor1.registerMutationListener(ParagraphNode, mutationListener);
+  });
+
+  afterEach(() => {
+    client1.stop();
+    client2.stop();
+    document.body.removeChild(container!);
+    container = null;
+  });
+
+  describe('DIFF_VERSIONS_COMMAND', () => {
+    it('should diff between two snapshots', async () => {
+      editor1.update(
+        () => {
+          $getRoot()
+            .clear()
+            .append(
+              $createParagraphNode().append($createTextNode('ABC')),
+              $createParagraphNode().append(
+                $createTextNode('Removed between snapshots'),
+              ),
+              $createParagraphNode().append(
+                $createTextNode('Removed before prevSnapshot'),
+              ),
+            );
+        },
+        {discrete: true},
+      );
+
+      editor1.update(
+        () => {
+          $getRoot().getChildAtIndex<ParagraphNode>(2)!.remove();
+        },
+        {discrete: true},
+      );
+
+      const prevSnapshot = Y.snapshot(client1.getDoc());
+
+      editor1.update(
+        () => {
+          const paragraph = $getRoot().getChildAtIndex<ParagraphNode>(0)!;
+          paragraph.getChildAtIndex<TextNode>(0)!.spliceText(2, 1, '123');
+          $getRoot().getChildAtIndex<ParagraphNode>(1)!.remove();
+        },
+        {discrete: true},
+      );
+
+      const snapshot = Y.snapshot(client1.getDoc());
+
+      editor1.update(
+        () => {
+          const paragraph = $getRoot().getChildAtIndex<ParagraphNode>(0)!;
+          paragraph.append($createTextNode('!'));
+        },
+        {discrete: true},
+      );
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, {
+          prevSnapshot,
+          snapshot,
+        }),
+      );
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">AB</span>
+            <span class="y-removed" data-lexical-text="true">C</span>
+            <span class="y-added" data-lexical-text="true">123</span>
+          </p>
+          <p class="y-removed" dir="auto">
+            <span class="y-removed" data-lexical-text="true">
+              Removed between snapshots
+            </span>
+          </p>
+        `,
+      );
+
+      expectHtmlToBeEqual(
+        client2.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">AB123!</span>
+          </p>
+        `,
+      );
+    });
+
+    it('should diff from start of time if no prevSnapshot is provided', async () => {
+      editor1.update(
+        () => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('Hello'));
+        },
+        {discrete: true},
+      );
+      const snapshot = Y.snapshot(client1.getDoc());
+
+      // Another update that will not be in the snapshot
+      editor1.update(
+        () => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode(' world'));
+        },
+        {discrete: true},
+      );
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, {
+          snapshot,
+        }),
+      );
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p class="y-added" dir="auto">
+            <span class="y-added" data-lexical-text="true">Hello</span>
+          </p>
+        `,
+      );
+
+      expectHtmlToBeEqual(
+        client2.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">Hello world</span>
+          </p>
+        `,
+      );
+    });
+
+    it('should diff to latest state if no snapshot is provided', async () => {
+      editor1.update(
+        () => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('Hello'));
+        },
+        {discrete: true},
+      );
+      const prevSnapshot = Y.snapshot(client1.getDoc());
+
+      editor1.update(
+        () => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode(' world'));
+        },
+        {discrete: true},
+      );
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, {
+          prevSnapshot,
+        }),
+      );
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">Hello</span>
+            <span class="y-added" data-lexical-text="true">world</span>
+          </p>
+        `,
+      );
+
+      expectHtmlToBeEqual(
+        client2.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">Hello world</span>
+          </p>
+        `,
+      );
+    });
+
+    it('should not include elements that were added and removed between snapshots', async () => {
+      editor1.update(
+        () => {
+          $getRoot()
+            .getFirstChildOrThrow<ParagraphNode>()
+            .append($createTextNode('First paragraph'));
+        },
+        {discrete: true},
+      );
+
+      editor1.update(
+        () => {
+          $getRoot().append(
+            $createParagraphNode().append(
+              $createTextNode('Paragraph that will be removed'),
+            ),
+          );
+        },
+        {discrete: true},
+      );
+
+      editor1.update(
+        () => {
+          $getRoot().splice(1, 1, []);
+        },
+        {discrete: true},
+      );
+
+      const snapshot = Y.snapshot(client1.getDoc());
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, {
+          snapshot,
+        }),
+      );
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p class="y-added" dir="auto">
+            <span class="y-added" data-lexical-text="true">
+              First paragraph
+            </span>
+          </p>
+        `,
+      );
+    });
+
+    it('should ignore changes from other clients while in diff mode', async () => {
+      await waitForReact(() => {
+        editor1.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('ABC'));
+        });
+      });
+
+      const snapshot = Y.snapshot(client1.getDoc());
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, {
+          snapshot,
+        }),
+      );
+
+      await waitForReact(() => {
+        editor2.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('XYZ'));
+        });
+      });
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p class="y-added" dir="auto">
+            <span class="y-added" data-lexical-text="true">ABC</span>
+          </p>
+        `,
+      );
+
+      expectHtmlToBeEqual(
+        client2.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">ABCXYZ</span>
+          </p>
+        `,
+      );
+    });
+
+    it('should not sync changes to yjs while in diff mode', async () => {
+      await waitForReact(() => {
+        editor1.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('ABC'));
+        });
+      });
+
+      const snapshot = Y.snapshot(client1.getDoc());
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, {
+          snapshot,
+        }),
+      );
+
+      await waitForReact(() => {
+        editor1.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('!'));
+        });
+      });
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p class="y-added" dir="auto">
+            <span class="y-added" data-lexical-text="true">ABC</span>
+            <span data-lexical-text="true">!</span>
+          </p>
+        `,
+      );
+
+      expectHtmlToBeEqual(
+        client2.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">ABC</span>
+          </p>
+        `,
+      );
+    });
+  });
+
+  describe('CLEAR_DIFF_VERSIONS_COMMAND', () => {
+    it('recover editor state after clear diff versions command', async () => {
+      await waitForReact(() => {
+        editor1.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('ABC'));
+        });
+      });
+
+      const snapshot = Y.snapshot(client1.getDoc());
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, {
+          snapshot,
+        }),
+      );
+
+      await waitForReact(() => {
+        editor2.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('XYZ'));
+        });
+      });
+
+      await waitForReact(() =>
+        editor1.dispatchCommand(
+          CLEAR_DIFF_VERSIONS_COMMAND__EXPERIMENTAL,
+          undefined,
+        ),
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">ABCXYZ</span>
+          </p>
+        `,
+      );
+      expectHtmlToBeEqual(client1.getHTML(), client2.getHTML());
+
+      // Ensure that updates after synced again.
+      await waitForReact(() => {
+        editor1.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('!'));
+        });
+      });
+
+      await waitForReact(() => {
+        editor2.update(() => {
+          const paragraph = $getRoot().getFirstChildOrThrow<ParagraphNode>();
+          paragraph.append($createTextNode('?'));
+        });
+      });
+
+      expectHtmlToBeEqual(
+        client1.getHTML(),
+        html`
+          <p dir="auto">
+            <span data-lexical-text="true">ABCXYZ!?</span>
+          </p>
+        `,
+      );
+      expectHtmlToBeEqual(client1.getHTML(), client2.getHTML());
+    });
+  });
+});

package/src/__tests__/unit/CollaborationWithCollisions.test.ts

@@ -0,0 +1,246 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $createParagraphNode,
+  $createRangeSelection,
+  $createTextNode,
+  $getRoot,
+  $isTextNode,
+  $setSelection,
+  BaseSelection,
+  LexicalNode,
+} from 'lexical';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+
+import {
+  connectClients,
+  createAndStartClients,
+  createTestConnection,
+  disconnectClients,
+  stopClients,
+  testClientsForEquality,
+  waitForReact,
+} from './utils';
+
+const $insertParagraph = (...children: Array<string | LexicalNode>) => {
+  const root = $getRoot();
+  const paragraph = $createParagraphNode();
+  const nodes = children.map((child) => {
+    return typeof child === 'string' ? $createTextNode(child) : child;
+  });
+  paragraph.append(...nodes);
+  root.append(paragraph);
+};
+
+const $createSelectionByPath = ({
+  anchorPath,
+  anchorOffset,
+  focusPath,
+  focusOffset,
+}: {
+  anchorOffset: number;
+  anchorPath: Array<number>;
+  focusOffset: number;
+  focusPath: Array<number>;
+}): BaseSelection => {
+  const selection = $createRangeSelection();
+  const root = $getRoot();
+
+  const anchorNode = anchorPath.reduce(
+    (node, index) => node.getChildAtIndex(index)!,
+    root,
+  );
+  const focusNode = focusPath.reduce(
+    (node, index) => node.getChildAtIndex(index)!,
+    root,
+  );
+
+  selection.anchor.set(
+    anchorNode.getKey(),
+    anchorOffset,
+    $isTextNode(anchorNode) ? 'text' : 'element',
+  );
+  selection.focus.set(
+    focusNode.getKey(),
+    focusOffset,
+    $isTextNode(focusNode) ? 'text' : 'element',
+  );
+
+  $setSelection(selection);
+
+  return selection;
+};
+
+const $replaceTextByPath = ({
+  anchorPath,
+  anchorOffset,
+  focusPath,
+  focusOffset,
+  text = '',
+}: {
+  anchorOffset: number;
+  anchorPath: Array<number>;
+  focusOffset: number;
+  focusPath: Array<number>;
+  text: string | null | undefined;
+}) => {
+  const selection = $createSelectionByPath({
+    anchorOffset,
+    anchorPath,
+    focusOffset,
+    focusPath,
+  });
+  selection.insertText(text!);
+};
+
+describe('CollaborationWithCollisions', () => {
+  let container: HTMLDivElement | null = null;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container!);
+    container = null;
+  });
+
+  const SIMPLE_TEXT_COLLISION_TESTS: Array<{
+    clients: Array<() => void>;
+    expectedHTML: string | null | undefined;
+    init: () => void;
+    name: string;
+  }> = [
+    {
+      clients: [
+        () => {
+          // First client deletes text from first and second paragraphs
+          $replaceTextByPath({
+            anchorOffset: 5,
+            anchorPath: [0, 0],
+            focusOffset: 6,
+            focusPath: [1, 0],
+            text: '',
+          });
+        },
+        () => {
+          // Second client deletes first paragraph
+          $getRoot().getFirstChild()!.remove();
+        },
+      ],
+      expectedHTML: null,
+      init: () => {
+        $insertParagraph('Hello world 1');
+        $insertParagraph('Hello world 2');
+        $insertParagraph('Hello world 3');
+      },
+      name: 'Remove text at within the first of multiple paragraphs colliding with removing first paragraph',
+    },
+    {
+      clients: [
+        () => {
+          // First client deletes first two paragraphs
+          const paragraphs = $getRoot().getChildren();
+          paragraphs[0].remove();
+          paragraphs[1].remove();
+        },
+        () => {
+          // Second client deletes first paragraph
+          $getRoot().getFirstChild()!.remove();
+        },
+      ],
+      expectedHTML: null,
+      init: () => {
+        $insertParagraph('Hello world 1');
+        $insertParagraph('Hello world 2');
+        $insertParagraph('Hello world 3');
+      },
+      name: 'Remove first two paragraphs colliding with removing first paragraph',
+    },
+    {
+      clients: [
+        () => {
+          $replaceTextByPath({
+            anchorOffset: 0,
+            anchorPath: [0, 0],
+            focusOffset: 7,
+            focusPath: [1, 0],
+            text: 'Hello client 1',
+          });
+        },
+        () => {
+          $replaceTextByPath({
+            anchorOffset: 5,
+            anchorPath: [1, 0],
+            focusOffset: 5,
+            focusPath: [2, 0],
+            text: 'Hello client 2',
+          });
+        },
+      ],
+      expectedHTML: null,
+      init: () => {
+        $insertParagraph('Hello world 1');
+        $insertParagraph('Hello world 2');
+        $insertParagraph('Hello world 3');
+      },
+      name: 'Editing first and second paragraphs colliding with editing second and third paragraphs (with overlapping edit)',
+    },
+  ];
+
+  describe.each([[false], [true]])(
+    'useCollabV2: %s',
+    (useCollabV2: boolean) => {
+      SIMPLE_TEXT_COLLISION_TESTS.forEach((testCase) => {
+        it(testCase.name, async () => {
+          const connection = createTestConnection(useCollabV2);
+          const clients = createAndStartClients(
+            connection,
+            container!,
+            testCase.clients.length,
+          );
+
+          // Set initial content (into first editor only, the rest will be sync'd)
+          const clientA = clients[0];
+
+          await waitForReact(() => {
+            clientA.update(() => {
+              $getRoot().clear();
+              testCase.init();
+            });
+          });
+
+          testClientsForEquality(clients);
+
+          // Disconnect clients and apply client-specific actions, reconnect them back and
+          // verify that they're sync'd and have the same content
+          disconnectClients(clients);
+
+          for (let i = 0; i < clients.length; i++) {
+            await waitForReact(() => {
+              clients[i].update(testCase.clients[i]);
+            });
+          }
+
+          await waitForReact(() => {
+            connectClients(clients);
+          });
+
+          if (testCase.expectedHTML) {
+            expect(clientA.getHTML()).toEqual(testCase.expectedHTML);
+          }
+
+          testClientsForEquality(clients);
+          stopClients(clients);
+        });
+      });
+    },
+  );
+});