[lexical-yjs][lexical-react] Feature: initial implementation of collab v2

package.json

@@ -52,6 +52,9 @@
     "test-e2e-collab-chromium": "cross-env E2E_BROWSER=chromium E2E_EDITOR_MODE=rich-text-with-collab playwright test --project=\"chromium\"",
     "test-e2e-collab-firefox": "cross-env E2E_BROWSER=firefox E2E_EDITOR_MODE=rich-text-with-collab playwright test --project=\"firefox\"",
     "test-e2e-collab-webkit": "cross-env E2E_BROWSER=webkit E2E_EDITOR_MODE=rich-text-with-collab playwright test --project=\"webkit\"",
+    "test-e2e-collab-v2-chromium": "cross-env E2E_BROWSER=chromium E2E_EDITOR_MODE=rich-text-with-collab-v2 playwright test --project=\"chromium\"",
+    "test-e2e-collab-v2-firefox": "cross-env E2E_BROWSER=firefox E2E_EDITOR_MODE=rich-text-with-collab-v2 playwright test --project=\"firefox\"",
+    "test-e2e-collab-v2-webkit": "cross-env E2E_BROWSER=webkit E2E_EDITOR_MODE=rich-text-with-collab-v2 playwright test --project=\"webkit\"",
     "test-e2e-prod-chromium": "cross-env E2E_BROWSER=chromium E2E_PORT=4000 playwright test --project=\"chromium\"",
     "test-e2e-collab-prod-chromium": "cross-env E2E_BROWSER=chromium E2E_PORT=4000 E2E_EDITOR_MODE=rich-text-with-collab playwright test --project=\"chromium\"",
     "test-e2e-ci-chromium": "npm run prepare-ci && cross-env E2E_PORT=4000 npm run test-e2e-chromium",

packages/lexical-code-shiki/src/CodeHighlighterShiki.ts

@@ -779,7 +779,7 @@ export function registerCodeHighlighting(
       editor.registerMutationListener(
         CodeNode,
         (mutations) => {
-          editor.update(() => {
+          editor.getEditorState().read(() => {
             for (const [key, type] of mutations) {
               if (type !== 'destroyed') {
                 const node = $getNodeByKey(key);

packages/lexical-code/src/CodeHighlighterPrism.ts

@@ -771,7 +771,7 @@ export function registerCodeHighlighting(
       editor.registerMutationListener(
         CodeNode,
         (mutations) => {
-          editor.update(() => {
+          editor.getEditorState().read(() => {
             for (const [key, type] of mutations) {
               if (type !== 'destroyed') {
                 const node = $getNodeByKey(key);

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

@@ -160,12 +160,21 @@ test.describe('Collaboration', () => {
         </p>
       `,
     );
-    await assertSelection(page, {
-      anchorOffset: 5,
-      anchorPath: [0, 0, 0],
-      focusOffset: 5,
-      focusPath: [0, 0, 0],
-    });
+    if (isCollab === 1) {
+      await assertSelection(page, {
+        anchorOffset: 5,
+        anchorPath: [0, 0, 0],
+        focusOffset: 5,
+        focusPath: [0, 0, 0],
+      });
+    } else {
+      await assertSelection(page, {
+        anchorOffset: 1,
+        anchorPath: [0],
+        focusOffset: 1,
+        focusPath: [0],
+      });
+    }
 
     await page.keyboard.press('ArrowDown');
     await page.keyboard.type('Some bold text');
@@ -314,7 +323,6 @@ test.describe('Collaboration', () => {
         </p>
       `,
     );
-    const boldSleep = sleep(1050);
 
     // Right collaborator types at the end of the paragraph.
     await page
@@ -339,7 +347,7 @@ test.describe('Collaboration', () => {
     );
 
     // Left collaborator undoes their bold text.
-    await boldSleep;
+    await sleep(1050);
     await page.frameLocator('iframe[name="left"]').getByLabel('Undo').click();
 
     // The undo also removed bold the text node from YJS.
@@ -428,15 +436,27 @@ test.describe('Collaboration', () => {
     // Left collaborator undoes their bold text.
     await page.frameLocator('iframe[name="left"]').getByLabel('Undo').click();
 
-    // The undo causes the text to be appended to the original string, like in the above test.
-    await assertHTML(
-      page,
-      html`
-        <p class="PlaygroundEditorTheme__paragraph" dir="auto">
-          <span data-lexical-text="true">normal boldBOLD</span>
-        </p>
-      `,
-    );
+    if (isCollab === 1) {
+      // The undo causes the text to be appended to the original string, like in the above test.
+      await assertHTML(
+        page,
+        html`
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <span data-lexical-text="true">normal boldBOLD</span>
+          </p>
+        `,
+      );
+    } else {
+      // In v2, the text is not moved.
+      await assertHTML(
+        page,
+        html`
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <span data-lexical-text="true">normal boBOLDld</span>
+          </p>
+        `,
+      );
+    }
 
     // Left collaborator redoes the bold text.
     await page.frameLocator('iframe[name="left"]').getByLabel('Redo').click();
@@ -549,15 +569,27 @@ test.describe('Collaboration', () => {
     // Left collaborator undoes the link.
     await page.frameLocator('iframe[name="left"]').getByLabel('Undo').click();
 
-    // The undo causes the text to be appended to the original string, like in the above test.
-    await assertHTML(
-      page,
-      html`
-        <p class="PlaygroundEditorTheme__paragraph" dir="auto">
-          <span data-lexical-text="true">Check out the website! now</span>
-        </p>
-      `,
-    );
+    if (isCollab === 1) {
+      // The undo causes the text to be appended to the original string, like in the above test.
+      await assertHTML(
+        page,
+        html`
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <span data-lexical-text="true">Check out the website! now</span>
+          </p>
+        `,
+      );
+    } else {
+      // The undo causes the YText node to be removed.
+      await assertHTML(
+        page,
+        html`
+          <p class="PlaygroundEditorTheme__paragraph" dir="auto">
+            <span data-lexical-text="true">Check out the website!</span>
+          </p>
+        `,
+      );
+    }
 
     // Left collaborator redoes the link.
     await page.frameLocator('iframe[name="left"]').getByLabel('Redo').click();
@@ -636,7 +668,7 @@ test.describe('Collaboration', () => {
       `,
     );
 
-    // Right collaborator deletes A, left deletes B.
+    // Left collaborator deletes A, right deletes B.
     await sleep(1050);
     await page.keyboard.press('Delete');
     await sleep(50);

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

@@ -14,6 +14,7 @@ import {
   html,
   initialize,
   insertUploadImage,
+  IS_COLLAB_V2,
   sleep,
   test,
   waitForSelector,
@@ -24,7 +25,8 @@ test.describe('File', () => {
   test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
 
   test(`Can import/export`, async ({page, isPlainText}) => {
-    test.skip(isPlainText);
+    // TODO(collab-v2): nested editors are not supported yet
+    test.skip(isPlainText || IS_COLLAB_V2);
     await focusEditor(page);
     await toggleBold(page);
     await page.keyboard.type('Hello');

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

@@ -22,6 +22,7 @@ import {
   insertSampleImage,
   insertUploadImage,
   insertUrlImage,
+  IS_COLLAB_V2,
   IS_WINDOWS,
   LEGACY_EVENTS,
   SAMPLE_IMAGE_URL,
@@ -33,6 +34,9 @@ import {
 } from '../utils/index.mjs';
 
 test.describe('Images', () => {
+  // TODO(collab-v2): nested editors are not supported yet
+  test.skip(IS_COLLAB_V2);
+
   test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
   test(`Can create a decorator and move selection around it`, async ({
     page,

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

@@ -30,12 +30,12 @@ import {
   click,
   copyToClipboard,
   focusEditor,
+  getExpectedDateTimeHtml,
   html,
   initialize,
-  insertSampleImage,
+  insertDateTime,
   pasteFromClipboard,
   repeat,
-  SAMPLE_IMAGE_URL,
   selectFromAlignDropdown,
   selectFromColorPicker,
   selectFromFormatDropdown,
@@ -229,7 +229,7 @@ test.describe.parallel('Nested List', () => {
     await focusEditor(page);
     await toggleBulletList(page);
 
-    await insertSampleImage(page);
+    await insertDateTime(page);
     await page.keyboard.type('x');
     await moveLeft(page, 1);
 
@@ -244,18 +244,7 @@ test.describe.parallel('Nested List', () => {
             value="1">
             <ul class="PlaygroundEditorTheme__ul">
               <li class="PlaygroundEditorTheme__listItem" value="1">
-                <span
-                  class="editor-image"
-                  contenteditable="false"
-                  data-lexical-decorator="true">
-                  <div draggable="false">
-                    <img
-                      alt="Yellow flower in tilt shift lens"
-                      draggable="false"
-                      src="${SAMPLE_IMAGE_URL}"
-                      style="height: inherit; max-width: 500px; width: inherit" />
-                  </div>
-                </span>
+                ${getExpectedDateTimeHtml()}
                 <span data-lexical-text="true">x</span>
               </li>
             </ul>

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

@@ -23,6 +23,7 @@ import {
   getHTML,
   html,
   initialize,
+  IS_COLLAB_V2,
   LEGACY_EVENTS,
   pasteFromClipboard,
   pressToggleBold,
@@ -906,6 +907,9 @@ test.describe.parallel('Markdown', () => {
   });
 
   test('can import single decorator node (#2604)', async ({page}) => {
+    // TODO(collab-v2): nested editors are not supported yet
+    test.skip(IS_COLLAB_V2);
+
     await focusEditor(page);
     await page.keyboard.type(
       '```markdown ![Yellow flower in tilt shift lens](' +
@@ -939,6 +943,9 @@ test.describe.parallel('Markdown', () => {
   test('can import several text match transformers in a same line (#5385)', async ({
     page,
   }) => {
+    // TODO(collab-v2): nested editors are not supported yet
+    test.skip(IS_COLLAB_V2);
+
     await focusEditor(page);
     await page.keyboard.type(
       '```markdown [link](https://lexical.dev)[link](https://lexical.dev)![Yellow flower in tilt shift lens](' +
@@ -1053,7 +1060,7 @@ test.describe.parallel('Markdown', () => {
 
 const TYPED_MARKDOWN = `# Markdown Shortcuts
 This is *italic*, _italic_, **bold**, __bold__, ~~strikethrough~~ text
-This is *__~~bold italic strikethrough~~__* text, ___~~this one too~~___
+This is ~~*__bold italic strikethrough__*~~ text, ___~~this one too~~___
 It ~~___works [with links](https://lexical.io) too___~~
 *Nested **stars tags** are handled too*
 # Title
@@ -1101,7 +1108,7 @@ const TYPED_MARKDOWN_HTML = html`
   <p class="PlaygroundEditorTheme__paragraph" dir="auto">
     <span data-lexical-text="true">This is</span>
     <strong
-      class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textStrikethrough PlaygroundEditorTheme__textItalic"
+      class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textStrikethrough"
       data-lexical-text="true">
       bold italic strikethrough
     </strong>

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

@@ -42,6 +42,7 @@ import {
   insertSampleImage,
   insertTable,
   insertYouTubeEmbed,
+  IS_COLLAB_V2,
   IS_LINUX,
   IS_MAC,
   IS_WINDOWS,
@@ -86,7 +87,8 @@ test.describe.parallel('Selection', () => {
     isPlainText,
     browserName,
   }) => {
-    test.skip(isPlainText);
+    // TODO(collab-v2): nested editors are not supported yet
+    test.skip(isPlainText || IS_COLLAB_V2);
     const hasSelection = async (parentSelector) =>
       await evaluate(
         page,

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

@@ -29,12 +29,13 @@ import {
   dragMouse,
   expect,
   focusEditor,
+  getExpectedDateTimeHtml,
   getPageOrFrame,
   html,
   initialize,
   insertCollapsible,
+  insertDateTime,
   insertHorizontalRule,
-  insertSampleImage,
   insertTable,
   insertTableColumnBefore,
   insertTableRowAbove,
@@ -46,7 +47,6 @@ import {
   LEGACY_EVENTS,
   mergeTableCells,
   pasteFromClipboard,
-  SAMPLE_IMAGE_URL,
   selectCellFromTableCoord,
   selectCellsFromTableCords,
   selectFromAdditionalStylesDropdown,
@@ -1356,7 +1356,7 @@ test.describe.parallel('Tables', () => {
     await focusEditor(page);
     await page.keyboard.type('Text before');
     await page.keyboard.press('Enter');
-    await insertSampleImage(page);
+    await insertDateTime(page);
     await page.keyboard.press('Enter');
     await page.keyboard.type('Text after');
     await insertTable(page, 2, 3);
@@ -1448,7 +1448,7 @@ test.describe.parallel('Tables', () => {
   });
 
   test(
-    'Table selection: can select multiple cells and insert an image',
+    'Table selection: can select multiple cells and insert a decorator',
     {
       tag: '@flaky',
     },
@@ -1468,11 +1468,9 @@ test.describe.parallel('Tables', () => {
       await page.keyboard.press('ArrowDown');
       await page.keyboard.up('Shift');
 
-      await insertSampleImage(page);
+      await insertDateTime(page);
       await page.keyboard.type(' <- it works!');
 
-      await waitForSelector(page, '.editor-image img');
-
       await assertHTML(
         page,
         html`
@@ -1501,18 +1499,7 @@ test.describe.parallel('Tables', () => {
               </th>
               <td class="PlaygroundEditorTheme__tableCell">
                 <p class="PlaygroundEditorTheme__paragraph">
-                  <span
-                    class="editor-image"
-                    contenteditable="false"
-                    data-lexical-decorator="true">
-                    <div draggable="false">
-                      <img
-                        alt="Yellow flower in tilt shift lens"
-                        draggable="false"
-                        src="${SAMPLE_IMAGE_URL}"
-                        style="height: inherit; max-width: 500px; width: inherit" />
-                    </div>
-                  </span>
+                  ${getExpectedDateTimeHtml()}
                   <span data-lexical-text="true">&lt;- it works!</span>
                 </p>
               </td>
@@ -6703,6 +6690,8 @@ test.describe.parallel('Tables', () => {
     // undo is used so we need to wait for history
     await sleep(1050);
 
+    await sleep(1050);
+
     await withExclusiveClipboardAccess(async () => {
       const clipboard = await copyToClipboard(page);