zurfyx-lexical-react 0.39.1-nightly.20251225.0 → 0.39.1-nightly.20251225.1

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

@@ -1,461 +0,0 @@
-/**
- * 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

@@ -1,246 +0,0 @@
-/**
- * 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);
-        });
-      });
-    },
-  );
-});