Fix assert (#1505)

* fix assertHTML

* remove unused

* lint

* fix history

* add back retries

package.json

@@ -123,6 +123,7 @@
     "gzip-size": "^6.0.0",
     "husky": "^7.0.1",
     "jest": "26.6.0",
+    "jsdom": "^19.0.0",
     "lint-staged": "^11.1.0",
     "minimist": "^1.2.5",
     "playwright": "1.16.0-next-alpha-trueadm-fork",

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

@@ -7,287 +7,344 @@
  */
 
 import {redo, toggleBold, undo} from '../keyboardShortcuts/index.mjs';
-import { assertHTML,
+import {
+  assertHTML,
   assertSelection,
   focusEditor,
-initialize ,
+  initialize,
   repeat,
   sleep,
-  test} from '../utils/index.mjs';
+  test,
+} from '../utils/index.mjs';
 
 test.describe('History', () => {
-  test.beforeEach(({isCollab, page }) => initialize({ isCollab, page }));
+  test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
-    test(
+  test(`Can type two paragraphs of text and correctly undo and redo`, async ({
-      `Can type two paragraphs of text and correctly undo and redo`,
+    isRichText,
-      async ({isRichText, page, isCollab}) => {
+    page,
-        test.skip(isCollab);
+    isCollab,
-        await page.focus('div[contenteditable="true"]');
+  }) => {
-        await page.keyboard.type('hello');
+    test.skip(isCollab);
-        await sleep(1050); // default merge interval is 1000, add 50ms as overhead due to CI latency.
+    await page.focus('div[contenteditable="true"]');
-        await page.keyboard.type(' world');
+    await page.keyboard.type('hello');
-        await page.keyboard.press('Enter');
+    await sleep(1050); // default merge interval is 1000, add 50ms as overhead due to CI latency.
-        await page.keyboard.type('hello world again');
+    await page.keyboard.type(' world');
-        await repeat(6, async () => {
+    await page.keyboard.press('Enter');
-          await page.keyboard.press('ArrowLeft');
+    await page.keyboard.type('hello world again');
-        });
+    await repeat(6, async () => {
-        await page.keyboard.type(', again and');
+      await page.keyboard.press('ArrowLeft');
+    });
+    await page.keyboard.type(', again and');
 
-        if (isRichText) {
+    if (isRichText) {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`);
+      await assertHTML(
-          await assertSelection(page, {
+        page,
-            anchorOffset: 22,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
-            anchorPath: [1, 0, 0],
+      );
-            focusOffset: 22,
+      await assertSelection(page, {
-            focusPath: [1, 0, 0],
+        anchorOffset: 22,
-          });
+        anchorPath: [1, 0, 0],
-        } else {
+        focusOffset: 22,
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`);
+        focusPath: [1, 0, 0],
-          await assertSelection(page, {
+      });
-            anchorOffset: 22,
+    } else {
-            anchorPath: [0, 2, 0],
+      await assertHTML(
-            focusOffset: 22,
+        page,
-            focusPath: [0, 2, 0],
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
-          });
+      );
-        }
+      await assertSelection(page, {
+        anchorOffset: 22,
+        anchorPath: [0, 2, 0],
+        focusOffset: 22,
+        focusPath: [0, 2, 0],
+      });
+    }
 
-        await undo(page);
+    await undo(page);
 
-        if (isRichText) {
+    if (isRichText) {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world again</span></p>`);
+      await assertHTML(
-          await assertSelection(page, {
+        page,
-            anchorOffset: 11,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
-            anchorPath: [1, 0, 0],
+      );
-            focusOffset: 11,
+      await assertSelection(page, {
-            focusPath: [1, 0, 0],
+        anchorOffset: 11,
-          });
+        anchorPath: [1, 0, 0],
-        } else {
+        focusOffset: 11,
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world again</span></p>`);
+        focusPath: [1, 0, 0],
-          await assertSelection(page, {
+      });
-            anchorOffset: 11,
+    } else {
-            anchorPath: [0, 2, 0],
+      await assertHTML(
-            focusOffset: 11,
+        page,
-            focusPath: [0, 2, 0],
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world again</span></p>`,
-          });
+      );
-        }
+      await assertSelection(page, {
+        anchorOffset: 11,
+        anchorPath: [0, 2, 0],
+        focusOffset: 11,
+        focusPath: [0, 2, 0],
+      });
+    }
 
-        await undo(page);
+    await undo(page);
 
-        if (isRichText) {
+    if (isRichText) {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><br /></p>
+      await assertHTML(
-`);
+        page,
-          await assertSelection(page, {
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><br /></p>`,
-            anchorOffset: 0,
+      );
-            anchorPath: [1],
+      await assertSelection(page, {
-            focusOffset: 0,
+        anchorOffset: 0,
-            focusPath: [1],
+        anchorPath: [1],
-          });
+        focusOffset: 0,
-        } else {
+        focusPath: [1],
-          assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><br/></p>`);
+      });
-          await assertSelection(page, {
+    } else {
-            anchorOffset: 2,
+      assertHTML(
-            anchorPath: [0],
+        page,
-            focusOffset: 2,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><br/></p>`,
-            focusPath: [0],
+      );
-          });
+      await assertSelection(page, {
-        }
+        anchorOffset: 2,
+        anchorPath: [0],
+        focusOffset: 2,
+        focusPath: [0],
+      });
+    }
 
-        await undo(page);
+    await undo(page);
 
-        await assertHTML(page,
+    await assertHTML(
-          `<p dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
+      page,
-        );
+      `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
-        await assertSelection(page, {
-          anchorOffset: 11,
-          anchorPath: [0, 0, 0],
-          focusOffset: 11,
-          focusPath: [0, 0, 0],
-        });
-
-        await undo(page);
-
-        await assertHTML(page,
-          `<p dir="ltr"><span data-lexical-text="true">hello</span></p>`,
-        );
-        await assertSelection(page, {
-          anchorOffset: 5,
-          anchorPath: [0, 0, 0],
-          focusOffset: 5,
-          focusPath: [0, 0, 0],
-        });
-
-        await undo(page);
-
-        await assertHTML(page, `<p><br /></p>`);
-        await assertSelection(page, {
-          anchorOffset: 0,
-          anchorPath: [0],
-          focusOffset: 0,
-          focusPath: [0],
-        });
-
-        await redo(page);
-
-        await assertHTML(page,
-          `<p dir="ltr"><span data-lexical-text="true">hello</span></p>`,
-        );
-        await assertSelection(page, {
-          anchorOffset: 5,
-          anchorPath: [0, 0, 0],
-          focusOffset: 5,
-          focusPath: [0, 0, 0],
-        });
-
-        await redo(page);
-
-        await assertHTML(page,
-          `<p dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
-        );
-        await assertSelection(page, {
-          anchorOffset: 11,
-          anchorPath: [0, 0, 0],
-          focusOffset: 11,
-          focusPath: [0, 0, 0],
-        });
-
-        await redo(page);
-
-        if (isRichText) {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p><br /></p>`);
-          await assertSelection(page, {
-            anchorOffset: 0,
-            anchorPath: [1],
-            focusOffset: 0,
-            focusPath: [1],
-          });
-        } else {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><br /></p>`);
-          await assertSelection(page, {
-            anchorOffset: 2,
-            anchorPath: [0],
-            focusOffset: 2,
-            focusPath: [0],
-          });
-        }
-
-        await redo(page);
-
-        if (isRichText) {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world again</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 17,
-            anchorPath: [1, 0, 0],
-            focusOffset: 17,
-            focusPath: [1, 0, 0],
-          });
-        } else {
-          assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><spandata-lexical-text="true">helloworldagain</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 17,
-            anchorPath: [0, 2, 0],
-            focusOffset: 17,
-            focusPath: [0, 2, 0],
-          });
-        }
-
-        await redo(page);
-
-        if (isRichText) {
-          assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span></p><pdir="ltr"><spandata-lexical-text="true">helloworld,againandagain</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 22,
-            anchorPath: [1, 0, 0],
-            focusOffset: 22,
-            focusPath: [1, 0, 0],
-          });
-        } else {
-          assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><spandata-lexical-text="true">helloworld,againandagain</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 22,
-            anchorPath: [0, 2, 0],
-            focusOffset: 22,
-            focusPath: [0, 2, 0],
-          });
-        }
-
-        await repeat(4, async () => {
-          await page.keyboard.press('Backspace');
-        });
-
-        if (isRichText) {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again again</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 18,
-            anchorPath: [1, 0, 0],
-            focusOffset: 18,
-            focusPath: [1, 0, 0],
-          });
-        } else {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again again</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 18,
-            anchorPath: [0, 2, 0],
-            focusOffset: 18,
-            focusPath: [0, 2, 0],
-          });
-        }
-
-        await undo(page);
-
-        if (isRichText) {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 22,
-            anchorPath: [1, 0, 0],
-            focusOffset: 22,
-            focusPath: [1, 0, 0],
-          });
-        } else {
-          await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`);
-          await assertSelection(page, {
-            anchorOffset: 22,
-            anchorPath: [0, 2, 0],
-            focusOffset: 22,
-            focusPath: [0, 2, 0],
-          });
-        }
-      },
     );
+    await assertSelection(page, {
+      anchorOffset: 11,
+      anchorPath: [0, 0, 0],
+      focusOffset: 11,
+      focusPath: [0, 0, 0],
+    });
 
-    test(
+    await undo(page);
-      'Can coalesce when switching inline styles (#1151)',
-      async ({page, isCollab, isPlainText}) => {
-        test.skip(isCollab || isPlainText)
 
-        await focusEditor(page);
+    await assertHTML(
-        await toggleBold(page);
+      page,
-        await page.keyboard.type('foo');
+      `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
-        await toggleBold(page);
-        await page.keyboard.type('bar');
-        await toggleBold(page);
-        await page.keyboard.type('baz');
-
-        const step1HTML =
-          '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">baz</strong></p>';
-        const step2HTML =
-          '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span></p>';
-        const step3HTML =
-          '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong></p>';
-        const step4HTML =
-          '<p class="PlaygroundEditorTheme__paragraph"><br /></p>';
-
-        await assertHTML(page, step1HTML);
-        await undo(page);
-        await assertHTML(page, step2HTML);
-        await undo(page);
-        await assertHTML(page, step3HTML);
-        await undo(page);
-        await assertHTML(page, step4HTML);
-        await redo(page);
-        await assertHTML(page, step3HTML);
-        await redo(page);
-        await assertHTML(page, step2HTML);
-        await redo(page);
-        await assertHTML(page, step1HTML);
-      },
     );
+    await assertSelection(page, {
+      anchorOffset: 5,
+      anchorPath: [0, 0, 0],
+      focusOffset: 5,
+      focusPath: [0, 0, 0],
+    });
+
+    await undo(page);
+
+    await assertHTML(
+      page,
+      `<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
+    );
+    await assertSelection(page, {
+      anchorOffset: 0,
+      anchorPath: [0],
+      focusOffset: 0,
+      focusPath: [0],
+    });
+
+    await redo(page);
+
+    await assertHTML(
+      page,
+      `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
+    );
+    await assertSelection(page, {
+      anchorOffset: 5,
+      anchorPath: [0, 0, 0],
+      focusOffset: 5,
+      focusPath: [0, 0, 0],
+    });
+
+    await redo(page);
+
+    await assertHTML(
+      page,
+      `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
+    );
+    await assertSelection(page, {
+      anchorOffset: 11,
+      anchorPath: [0, 0, 0],
+      focusOffset: 11,
+      focusPath: [0, 0, 0],
+    });
+
+    await redo(page);
+
+    if (isRichText) {
+      await assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 0,
+        anchorPath: [1],
+        focusOffset: 0,
+        focusPath: [1],
+      });
+    } else {
+      await assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><br /></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 2,
+        anchorPath: [0],
+        focusOffset: 2,
+        focusPath: [0],
+      });
+    }
+
+    await redo(page);
+
+    if (isRichText) {
+      await assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 17,
+        anchorPath: [1, 0, 0],
+        focusOffset: 17,
+        focusPath: [1, 0, 0],
+      });
+    } else {
+      assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 17,
+        anchorPath: [0, 2, 0],
+        focusOffset: 17,
+        focusPath: [0, 2, 0],
+      });
+    }
+
+    await redo(page);
+
+    if (isRichText) {
+      assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 22,
+        anchorPath: [1, 0, 0],
+        focusOffset: 22,
+        focusPath: [1, 0, 0],
+      });
+    } else {
+      assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world, again and again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 22,
+        anchorPath: [0, 2, 0],
+        focusOffset: 22,
+        focusPath: [0, 2, 0],
+      });
+    }
+
+    await repeat(4, async () => {
+      await page.keyboard.press('Backspace');
+    });
+
+    if (isRichText) {
+      await assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 18,
+        anchorPath: [1, 0, 0],
+        focusOffset: 18,
+        focusPath: [1, 0, 0],
+      });
+    } else {
+      await assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 18,
+        anchorPath: [0, 2, 0],
+        focusOffset: 18,
+        focusPath: [0, 2, 0],
+      });
+    }
+
+    await undo(page);
+
+    if (isRichText) {
+      await assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 22,
+        anchorPath: [1, 0, 0],
+        focusOffset: 22,
+        focusPath: [1, 0, 0],
+      });
+    } else {
+      await assertHTML(
+        page,
+        `<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
+      );
+      await assertSelection(page, {
+        anchorOffset: 22,
+        anchorPath: [0, 2, 0],
+        focusOffset: 22,
+        focusPath: [0, 2, 0],
+      });
+    }
+  });
+
+  test('Can coalesce when switching inline styles (#1151)', async ({
+    page,
+    isCollab,
+    isPlainText,
+  }) => {
+    test.skip(isCollab || isPlainText);
+
+    await focusEditor(page);
+    await toggleBold(page);
+    await page.keyboard.type('foo');
+    await toggleBold(page);
+    await page.keyboard.type('bar');
+    await toggleBold(page);
+    await page.keyboard.type('baz');
+
+    const step1HTML =
+      '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">baz</strong></p>';
+    const step2HTML =
+      '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span></p>';
+    const step3HTML =
+      '<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong></p>';
+    const step4HTML = '<p class="PlaygroundEditorTheme__paragraph"><br /></p>';
+
+    await assertHTML(page, step1HTML);
+    await undo(page);
+    await assertHTML(page, step2HTML);
+    await undo(page);
+    await assertHTML(page, step3HTML);
+    await undo(page);
+    await assertHTML(page, step4HTML);
+    await redo(page);
+    await assertHTML(page, step3HTML);
+    await redo(page);
+    await assertHTML(page, step2HTML);
+    await redo(page);
+    await assertHTML(page, step1HTML);
+  });
 });

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

@@ -94,13 +94,16 @@ test.describe('Tables', () => {
     test.skip(isPlainText);
     await focusEditor(page);
 
-    await assertHTML(page, `<p><br /></p>`);
+    await assertHTML(
+      page,
+      `<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
+    );
 
     await insertTable(page);
 
     await assertHTML(
       page,
-      `<p><br/></p><table><tr><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
+      `<p class="PlaygroundEditorTheme__paragraph"><br/></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br/></p>`,
     );
   });
 
@@ -114,7 +117,7 @@ test.describe('Tables', () => {
 
     await assertHTML(
       page,
-      `<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">abc</span></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
+      `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
     );
   });
 
@@ -128,7 +131,7 @@ test.describe('Tables', () => {
 
     await assertHTML(
       page,
-      `<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><td><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
+      `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
     );
   });
 
@@ -146,14 +149,14 @@ test.describe('Tables', () => {
 
     await assertHTML(
       page,
-      `<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
+      `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
       true,
     );
 
     // Check that the highlight styles are applied.
     await assertHTML(
       page,
-      `<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><td><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
+      `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
     );
   });
 
@@ -189,7 +192,7 @@ test.describe('Tables', () => {
 
     await assertHTML(
       page,
-      '<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>',
+      `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
       true,
     );
   });
@@ -213,7 +216,7 @@ test.describe('Tables', () => {
     // Check that the character styles are applied.
     await assertHTML(
       page,
-      `<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">a</strong></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">bb</strong></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">d</strong></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">e</strong></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
+      `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">a</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">bb</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">d</strong></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">e</strong></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
       true,
     );
   });
@@ -232,7 +235,7 @@ test.describe('Tables', () => {
     // Check that the text was cleared.
     await assertHTML(
       page,
-      `<p><br/></p><table><tr><th><p><br/></p></th><th><p><br/></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
+      `<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
       true,
     );
   });

packages/lexical-playground/__tests__/regression/1384-insert-nodes.spec.mjs

@@ -13,29 +13,33 @@ import {
   focusEditor,
   initialize,
   pasteFromClipboard,
-  test
+  test,
 } from '../utils/index.mjs';
 
 test.describe('Regression test #1384', () => {
-  test.beforeEach(({isCollab, page }) => initialize({ isCollab, page }));
+  test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
-    test(
+  test(`Properly pastes in code blocks`, async ({
-      `Properly pastes in code blocks`,
+    page,
-      async ({ page, isPlainText, isCollab }) => {
+    isPlainText,
-        test.skip(isPlainText || isCollab);
+    isCollab,
-        await focusEditor(page);
+  }) => {
-        await page.keyboard.type('``` alert(1);');
+    test.skip(isPlainText || isCollab);
-        await page.keyboard.press('Enter');
+    await focusEditor(page);
-        await page.keyboard.type('alert(2);');
+    await page.keyboard.type('``` alert(1);');
-        await page.keyboard.press('Enter');
+    await page.keyboard.press('Enter');
-        await page.keyboard.type('alert(3);');
+    await page.keyboard.type('alert(2);');
-        await page.keyboard.press('ArrowUp');
+    await page.keyboard.press('Enter');
-        await page.keyboard.press('ArrowUp');
+    await page.keyboard.type('alert(3);');
-        await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('ArrowUp');
-        await selectCharacters(page, 'left', 8);
+    await page.keyboard.press('ArrowUp');
-        const clipboard = await copyToClipboard(page);
+    await page.keyboard.press('ArrowLeft');
-        await page.keyboard.press('ArrowLeft');
+    await selectCharacters(page, 'left', 8);
-        await pasteFromClipboard(page, clipboard);
+    const clipboard = await copyToClipboard(page);
-        await assertHTML(page, `<codespellcheck="false"dir="ltr"><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">1</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">1</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span><br/><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">2</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span><br/><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">3</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span></code>`);
+    await page.keyboard.press('ArrowLeft');
-      },
+    await pasteFromClipboard(page, clipboard);
+    await assertHTML(
+      page,
+      `<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">2</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">3</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span></code>`,
     );
+  });
 });

packages/lexical-playground/__tests__/utils/index.mjs

@@ -7,8 +7,9 @@
  * @flow strict
  */
 
-import { expect,test as base } from '@playwright/test';
+import {expect, test as base} from '@playwright/test';
 import jestSnapshot from 'jest-snapshot';
+import {JSDOM} from 'jsdom';
 import prettier from 'prettier';
 import {URLSearchParams} from 'url';
 import {v4 as uuidv4} from 'uuid';
@@ -22,14 +23,17 @@ export const E2E_BROWSER = process.env.E2E_BROWSER;
 export const IS_MAC = process.platform === 'darwin';
 export const IS_WINDOWS = process.platform === 'win32';
 export const IS_LINUX = !IS_MAC && !IS_WINDOWS;
-export const IS_COLLAB = process.env.E2E_EDITOR_MODE === 'rich-text-with-collab';
+export const IS_COLLAB =
+  process.env.E2E_EDITOR_MODE === 'rich-text-with-collab';
 const IS_RICH_TEXT = process.env.E2E_EDITOR_MODE !== 'plain-text';
 const IS_PLAIN_TEXT = process.env.E2E_EDITOR_MODE === 'plain-text';
 
-export async function initialize({ page, isCollab, isCharLimit, isCharLimitUtf8 }) {
+export async function initialize({
-  page.exposeFunction('expectToBeEqual', (actual, expected) => {
+  page,
-    return expect(actual).toEqual(expected);
+  isCollab,
-  });
+  isCharLimit,
+  isCharLimitUtf8,
+}) {
   const appSettings = {};
   appSettings.isRichText = IS_RICH_TEXT;
   appSettings.disableBeforeInput =
@@ -56,10 +60,10 @@ export const test = base.extend({
   isCharLimitUtf8: false,
   isCollab: IS_COLLAB,
   isPlainText: IS_PLAIN_TEXT,
-  isRichText: IS_RICH_TEXT
+  isRichText: IS_RICH_TEXT,
 });
 
-export { expect } from '@playwright/test';
+export {expect} from '@playwright/test';
 
 function appSettingsToURLParams(appSettings) {
   const params = new URLSearchParams();
@@ -84,24 +88,12 @@ export async function clickSelectors(page, selectors) {
 
 async function assertHTMLOnPageOrFrame(page, pageOrFrame, expectedHtml) {
   const actualHtml = await pageOrFrame.innerHTML('div[contenteditable="true"]');
-  await page.evaluate(async (args) => {
+  const {document} = new JSDOM().window;
-    const actualHtmlString = args.actualHtml;
+  const actual = document.createElement('div');
-    const expectedHtmlString = args.expectedHtml;
+  actual.innerHTML = actualHtml;
-    // Assert HTML of the editor matches the given html
+  const expected = document.createElement('div');
-    if (expectedHtmlString === '') {
+  expected.innerHTML = expectedHtml;
-      // eslint-disable-next-line no-console
+  expect(actual).toEqual(expected);
-      console.log('Output HTML:\n\n' + actualHtml);
-      throw new Error('Empty HTML assertion!');
-    }
-    // HTML might differ between browsers, so we use attach
-    // outputs to an element using JSDOM to normalize and prettify
-    // the output.
-    const actual = document.createElement('div');
-    actual.innerHTML = actualHtmlString;
-    const expected = document.createElement('div');
-    expected.innerHTML = expectedHtmlString;
-    await window.expectToBeEqual(actual, expected);
-  }, {actualHtml, expectedHtml});
 }
 
 export async function assertHTML(page, expectedHtml, ignoreSecondFrame) {
@@ -326,7 +318,7 @@ export async function sleep(delay) {
 export async function focusEditor(page, parentSelector = '.editor-shell') {
   const selector = `${parentSelector} div[contenteditable="true"]`;
   if (IS_COLLAB) {
-    await page.waitForSelector('iframe[name="left"]')
+    await page.waitForSelector('iframe[name="left"]');
     const leftFrame = page.frame('left');
     if ((await leftFrame.$$('.loading').length) !== 0) {
       await leftFrame.waitForSelector('.loading', {

playwright.config.js

@@ -20,7 +20,7 @@ const config = {
       use: {...devices['Desktop Safari']},
     },
   ],
-  retries: 5,
+  retries: process.env.CI ? 5 : 1,
   timeout: 60000,
   use: {
     // this causes issues in the CI on on current version.