diff --git a/packages/lexical-playground/__tests__/e2e/Collaboration.spec.mjs b/packages/lexical-playground/__tests__/e2e/Collaboration.spec.mjs
index b47b3c04f6a..296d9ac21a0 100644
--- a/packages/lexical-playground/__tests__/e2e/Collaboration.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Collaboration.spec.mjs
@@ -322,17 +322,43 @@ test.describe('Collaboration', () => {
     // Left collaborator types two pieces of text in the same paragraph, but with different styling.
     await focusEditor(page);
     await page.keyboard.type('normal');
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">normal</span>
+        </p>
+      `,
+    );
     await sleep(1050);
     await toggleBold(page);
     await page.keyboard.type('bold');
 
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">normal</span>
+          <strong
+            class="PlaygroundEditorTheme__textBold"
+            data-lexical-text="true">
+            bold
+          </strong>
+        </p>
+      `,
+    );
+    const boldSleep = sleep(1050);
+
     // Right collaborator types at the end of the paragraph.
-    await sleep(50);
     await page
       .frameLocator('iframe[name="right"]')
       .locator('[data-lexical-editor="true"]')
       .focus();
-    await page.keyboard.press('ArrowDown'); // Move caret to end of paragraph
+    await page.keyboard.press('ArrowDown', {delay: 50}); // Move caret to end of paragraph
     await page.keyboard.type('BOLD');
 
     await assertHTML(
@@ -352,7 +378,7 @@ test.describe('Collaboration', () => {
     );
 
     // Left collaborator undoes their bold text.
-    await sleep(50);
+    await boldSleep;
     await page.frameLocator('iframe[name="left"]').getByLabel('Undo').click();
 
     // The undo also removed bold the text node from YJS.
diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
index 520b08552c5..8ac28284f78 100644
--- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
@@ -17,7 +17,9 @@ import {
 } from '../../../utils/index.mjs';
 
 test.describe('HTML Tables CopyAndPaste', () => {
-  test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
+  test.beforeEach(({isCollab, page}) =>
+    initialize({isCollab, page, tableHorizontalScroll: false}),
+  );
 
   test('Copy + paste (Table - Google Docs)', async ({
     page,
diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs
index 108cd0f0617..db9aba8103b 100644
--- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs
@@ -32,9 +32,7 @@ test.describe('ContextMenuCopyAndPaste', () => {
     await page.keyboard.type('hello');
     await click(page, '.lock');
 
-    await page.pause();
     await doubleClick(page, 'div[contenteditable="false"] span');
-    await page.pause();
     await withExclusiveClipboardAccess(async () => {
       await click(page, 'div[contenteditable="false"] span', {button: 'right'});
       await click(page, '#typeahead-menu [role="option"] :text("Copy")');
@@ -72,7 +70,6 @@ test.describe('ContextMenuCopyAndPaste', () => {
       await click(page, '.font-increment');
       await focusEditor(page);
       await page.keyboard.type('MLH Fellowship');
-      //await page.pause();
       await moveToLineEnd(page);
       await page.keyboard.press('Enter');
       await page.keyboard.type('Fall 2024');
diff --git a/packages/lexical-playground/__tests__/e2e/Indentation.spec.mjs b/packages/lexical-playground/__tests__/e2e/Indentation.spec.mjs
index 3a856bd19f3..58a0b41af91 100644
--- a/packages/lexical-playground/__tests__/e2e/Indentation.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Indentation.spec.mjs
@@ -18,7 +18,9 @@ import {
 } from '../utils/index.mjs';
 
 test.describe('Identation', () => {
-  test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
+  test.beforeEach(({isCollab, page}) =>
+    initialize({isCollab, page, tableHorizontalScroll: false}),
+  );
 
   test(`Can create content and indent and outdent it all`, async ({
     page,
diff --git a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
index 026cd94d92d..71bba6fa5da 100644
--- a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
@@ -53,7 +53,9 @@ import {
 } from '../utils/index.mjs';
 
 test.describe.parallel('Selection', () => {
-  test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
+  test.beforeEach(({isCollab, page}) =>
+    initialize({isCollab, page, tableHorizontalScroll: false}),
+  );
   test('does not focus the editor on load', async ({page}) => {
     const editorHasFocus = async () =>
       await evaluate(page, () => {
diff --git a/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs b/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
index adbfbc73be2..d9362c28aed 100644
--- a/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
@@ -18,7 +18,7 @@ import {
   selectCharacters,
 } from '../keyboardShortcuts/index.mjs';
 import {
-  assertHTML,
+  assertHTML as rawAssertHTML,
   assertSelection,
   click,
   clickSelectors,
@@ -37,6 +37,7 @@ import {
   insertTableRowBelow,
   IS_COLLAB,
   IS_LINUX,
+  IS_TABLE_HORIZONTAL_SCROLL,
   IS_WINDOWS,
   LEGACY_EVENTS,
   mergeTableCells,
@@ -52,6 +53,7 @@ import {
   unmergeTableCell,
   waitForSelector,
   withExclusiveClipboardAccess,
+  wrapTableHtml,
 } from '../utils/index.mjs';
 
 async function fillTablePartiallyWithText(page) {
@@ -75,6 +77,28 @@ async function fillTablePartiallyWithText(page) {
   await page.keyboard.press('c');
 }
 
+async function assertHTML(
+  page,
+  expectedHtml,
+  expectedHtmlFrameRight = undefined,
+  options = undefined,
+  ...args
+) {
+  return await rawAssertHTML(
+    page,
+    IS_TABLE_HORIZONTAL_SCROLL
+      ? wrapTableHtml(expectedHtml, options)
+      : expectedHtml,
+    IS_TABLE_HORIZONTAL_SCROLL && expectedHtmlFrameRight !== undefined
+      ? wrapTableHtml(expectedHtmlFrameRight, options)
+      : expectedHtmlFrameRight,
+    options,
+    ...args,
+  );
+}
+
+const WRAPPER = IS_TABLE_HORIZONTAL_SCROLL ? [0] : [];
+
 test.describe.parallel('Tables', () => {
   test(`Can a table be inserted from the toolbar`, async ({
     page,
@@ -181,12 +205,13 @@ test.describe.parallel('Tables', () => {
 
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0],
       });
 
       await moveLeft(page, 1);
+
       await assertSelection(page, {
         anchorOffset: 0,
         anchorPath: [0],
@@ -196,19 +221,20 @@ test.describe.parallel('Tables', () => {
 
       await moveRight(page, 1);
       await page.keyboard.type('ab');
+
       await assertSelection(page, {
         anchorOffset: 2,
-        anchorPath: [1, 1, 0, 0, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0, 0, 0],
         focusOffset: 2,
-        focusPath: [1, 1, 0, 0, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0, 0, 0],
       });
 
       await moveRight(page, 3);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 2, 1, 0],
+        anchorPath: [1, ...WRAPPER, 2, 1, 0],
         focusOffset: 0,
-        focusPath: [1, 2, 1, 0],
+        focusPath: [1, ...WRAPPER, 2, 1, 0],
       });
     });
 
@@ -226,9 +252,9 @@ test.describe.parallel('Tables', () => {
       await moveRight(page, 3);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 2, 1, 0],
+        anchorPath: [1, ...WRAPPER, 2, 1, 0],
         focusOffset: 0,
-        focusPath: [1, 2, 1, 0],
+        focusPath: [1, ...WRAPPER, 2, 1, 0],
       });
 
       await moveRight(page, 1);
@@ -243,9 +269,9 @@ test.describe.parallel('Tables', () => {
       await page.keyboard.type('ab');
       await assertSelection(page, {
         anchorOffset: 2,
-        anchorPath: [1, 2, 1, 0, 0, 0],
+        anchorPath: [1, ...WRAPPER, 2, 1, 0, 0, 0],
         focusOffset: 2,
-        focusPath: [1, 2, 1, 0, 0, 0],
+        focusPath: [1, ...WRAPPER, 2, 1, 0, 0, 0],
       });
 
       await moveRight(page, 3);
@@ -271,17 +297,17 @@ test.describe.parallel('Tables', () => {
 
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 1, 1, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 1, ...WRAPPER, 1, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 1, 1, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 1, ...WRAPPER, 1, 0, 0],
       });
 
       await moveLeft(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0],
       });
     });
 
@@ -300,17 +326,17 @@ test.describe.parallel('Tables', () => {
       await moveRight(page, 3);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 1, 2, 1, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 1, ...WRAPPER, 2, 1, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 1, 2, 1, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 1, ...WRAPPER, 2, 1, 0],
       });
 
       await moveRight(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 2],
+        anchorPath: [1, ...WRAPPER, 1, 0, 2],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 2],
+        focusPath: [1, ...WRAPPER, 1, 0, 2],
       });
     });
   });
@@ -345,9 +371,9 @@ test.describe.parallel('Tables', () => {
     await deleteBackward(page);
     await assertSelection(page, {
       anchorOffset: 0,
-      anchorPath: [1, 2, 1, 0],
+      anchorPath: [1, ...WRAPPER, 2, 1, 0],
       focusOffset: 0,
-      focusPath: [1, 2, 1, 0],
+      focusPath: [1, ...WRAPPER, 2, 1, 0],
     });
     await assertHTML(
       page,
@@ -381,14 +407,24 @@ test.describe.parallel('Tables', () => {
     );
 
     await moveRight(page, 1);
-    // The native window selection should be on the root, whereas
-    // the editor selection should be on the last cell of the table.
-    await assertSelection(page, {
-      anchorOffset: 2,
-      anchorPath: [],
-      focusOffset: 2,
-      focusPath: [],
-    });
+    if (WRAPPER.length === 0) {
+      // The native window selection should be on the root, whereas
+      // the editor selection should be on the last cell of the table.
+      await assertSelection(page, {
+        anchorOffset: 2,
+        anchorPath: [],
+        focusOffset: 2,
+        focusPath: [],
+      });
+    } else {
+      // The native window selection is in the wrapper after the table
+      await assertSelection(page, {
+        anchorOffset: WRAPPER[0] + 1,
+        anchorPath: [1],
+        focusOffset: WRAPPER[0] + 1,
+        focusPath: [1],
+      });
+    }
 
     await page.keyboard.press('Enter');
     await assertSelection(page, {
@@ -514,9 +550,9 @@ test.describe.parallel('Tables', () => {
     await moveLeft(page, 1);
     await assertSelection(page, {
       anchorOffset: 0,
-      anchorPath: [1, 2, 1, 0],
+      anchorPath: [1, ...WRAPPER, 2, 1, 0],
       focusOffset: 0,
-      focusPath: [1, 2, 1, 0],
+      focusPath: [1, ...WRAPPER, 2, 1, 0],
     });
   });
 
@@ -566,57 +602,57 @@ test.describe.parallel('Tables', () => {
 
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0],
       });
 
       await moveRight(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 1, 0],
+        anchorPath: [1, ...WRAPPER, 1, 1, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 1, 0],
+        focusPath: [1, ...WRAPPER, 1, 1, 0],
       });
 
       await moveRight(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 2, 0, 0],
+        anchorPath: [1, ...WRAPPER, 2, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 2, 0, 0],
+        focusPath: [1, ...WRAPPER, 2, 0, 0],
       });
 
       await moveRight(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 2, 1, 0],
+        anchorPath: [1, ...WRAPPER, 2, 1, 0],
         focusOffset: 0,
-        focusPath: [1, 2, 1, 0],
+        focusPath: [1, ...WRAPPER, 2, 1, 0],
       });
 
       await moveLeft(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 2, 0, 0],
+        anchorPath: [1, ...WRAPPER, 2, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 2, 0, 0],
+        focusPath: [1, ...WRAPPER, 2, 0, 0],
       });
 
       await moveLeft(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 1, 0],
+        anchorPath: [1, ...WRAPPER, 1, 1, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 1, 0],
+        focusPath: [1, ...WRAPPER, 1, 1, 0],
       });
 
       await moveLeft(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0],
       });
     });
 
@@ -633,25 +669,25 @@ test.describe.parallel('Tables', () => {
 
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0],
       });
 
       await moveDown(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 2, 0, 0],
+        anchorPath: [1, ...WRAPPER, 2, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 2, 0, 0],
+        focusPath: [1, ...WRAPPER, 2, 0, 0],
       });
 
       await moveUp(page, 1);
       await assertSelection(page, {
         anchorOffset: 0,
-        anchorPath: [1, 1, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0],
         focusOffset: 0,
-        focusPath: [1, 1, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0],
       });
     });
 
@@ -669,9 +705,9 @@ test.describe.parallel('Tables', () => {
       await page.keyboard.type('@A');
       await assertSelection(page, {
         anchorOffset: 2,
-        anchorPath: [1, 1, 0, 0, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0, 0, 0],
         focusOffset: 2,
-        focusPath: [1, 1, 0, 0, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0, 0, 0],
       });
 
       await waitForSelector(page, `#typeahead-menu ul li:first-child.selected`);
@@ -679,9 +715,9 @@ test.describe.parallel('Tables', () => {
       await moveDown(page, 1);
       await assertSelection(page, {
         anchorOffset: 2,
-        anchorPath: [1, 1, 0, 0, 0, 0],
+        anchorPath: [1, ...WRAPPER, 1, 0, 0, 0, 0],
         focusOffset: 2,
-        focusPath: [1, 1, 0, 0, 0, 0],
+        focusPath: [1, ...WRAPPER, 1, 0, 0, 0, 0],
       });
 
       await waitForSelector(
diff --git a/packages/lexical-playground/__tests__/e2e/TextEntry.spec.mjs b/packages/lexical-playground/__tests__/e2e/TextEntry.spec.mjs
index 6a88dd49de3..c2c60760526 100644
--- a/packages/lexical-playground/__tests__/e2e/TextEntry.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/TextEntry.spec.mjs
@@ -641,7 +641,6 @@ test.describe('TextEntry', () => {
           <p class="PlaygroundEditorTheme__paragraph"><br /></p>
         `,
       );
-      await page.pause();
       await assertSelection(page, {
         anchorOffset: 0,
         anchorPath: [1],
diff --git a/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs b/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs
index 12cec473d34..232dfa8dd68 100644
--- a/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Toolbar.spec.mjs
@@ -31,7 +31,12 @@ import {
 
 test.describe('Toolbar', () => {
   test.beforeEach(({isCollab, page}) =>
-    initialize({isCollab, page, showNestedEditorTreeView: false}),
+    initialize({
+      isCollab,
+      page,
+      showNestedEditorTreeView: false,
+      tableHorizontalScroll: false,
+    }),
   );
 
   test(
diff --git a/packages/lexical-playground/__tests__/regression/4661-insert-column-selection.spec.mjs b/packages/lexical-playground/__tests__/regression/4661-insert-column-selection.spec.mjs
index abcd0492817..d2f29d9aade 100644
--- a/packages/lexical-playground/__tests__/regression/4661-insert-column-selection.spec.mjs
+++ b/packages/lexical-playground/__tests__/regression/4661-insert-column-selection.spec.mjs
@@ -20,7 +20,9 @@ import {
 } from '../utils/index.mjs';
 
 test.describe('Regression test #4661', () => {
-  test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
+  test.beforeEach(({isCollab, page}) =>
+    initialize({isCollab, page, tableHorizontalScroll: false}),
+  );
   test('inserting 2 columns before inserts before selection', async ({
     page,
     isPlainText,
diff --git a/packages/lexical-playground/__tests__/utils/index.mjs b/packages/lexical-playground/__tests__/utils/index.mjs
index 2b461f5fb05..9f43f61e5fd 100644
--- a/packages/lexical-playground/__tests__/utils/index.mjs
+++ b/packages/lexical-playground/__tests__/utils/index.mjs
@@ -34,6 +34,8 @@ export const IS_COLLAB =
 const IS_RICH_TEXT = process.env.E2E_EDITOR_MODE !== 'plain-text';
 const IS_PLAIN_TEXT = process.env.E2E_EDITOR_MODE === 'plain-text';
 export const LEGACY_EVENTS = process.env.E2E_EVENTS_MODE === 'legacy-events';
+export const IS_TABLE_HORIZONTAL_SCROLL =
+  process.env.E2E_TABLE_MODE !== 'legacy';
 export const SAMPLE_IMAGE_URL =
   E2E_PORT === 3000
     ? '/src/images/yellow-flower.jpg'
@@ -52,6 +54,21 @@ function wrapAndSlowDown(method, delay) {
   };
 }
 
+export function wrapTableHtml(expected, {ignoreClasses = false} = {}) {
+  return html`
+    ${expected
+      .replace(
+        /<table/g,
+        `<div${
+          ignoreClasses
+            ? ''
+            : ' class="PlaygroundEditorTheme__tableScrollableWrapper"'
+        }><table`,
+      )
+      .replace(/<\/table>/g, '</table></div>')}
+  `;
+}
+
 export async function initialize({
   page,
   isCollab,
@@ -64,6 +81,7 @@ export async function initialize({
   tableCellMerge,
   tableCellBackgroundColor,
   shouldUseLexicalContextMenu,
+  tableHorizontalScroll,
 }) {
   // Tests with legacy events often fail to register keypress, so
   // slowing it down to reduce flakiness
@@ -76,6 +94,8 @@ export async function initialize({
   appSettings.isRichText = IS_RICH_TEXT;
   appSettings.emptyEditor = true;
   appSettings.disableBeforeInput = LEGACY_EVENTS;
+  appSettings.tableHorizontalScroll =
+    tableHorizontalScroll ?? IS_TABLE_HORIZONTAL_SCROLL;
   if (isCollab) {
     appSettings.isCollab = isCollab;
     appSettings.collabId = randomUUID();
@@ -175,6 +195,16 @@ export async function clickSelectors(page, selectors) {
     await click(page, selectors[i]);
   }
 }
+
+function removeSafariLinebreakImgHack(actualHtml) {
+  return E2E_BROWSER === 'webkit'
+    ? actualHtml.replaceAll(
+        /<img (?:[^>]+ )?data-lexical-linebreak="true"(?: [^>]+)?>/g,
+        '',
+      )
+    : actualHtml;
+}
+
 /**
  * @param {import('@playwright/test').Page | import('@playwright/test').Frame} pageOrFrame
  */
@@ -191,10 +221,12 @@ async function assertHTMLOnPageOrFrame(
     ignoreInlineStyles,
   });
   return await expect(async () => {
-    const actualHtml = await pageOrFrame
-      .locator('div[contenteditable="true"]')
-      .first()
-      .innerHTML();
+    const actualHtml = removeSafariLinebreakImgHack(
+      await pageOrFrame
+        .locator('div[contenteditable="true"]')
+        .first()
+        .innerHTML(),
+    );
     let actual = prettifyHTML(actualHtml.replace(/\n/gm, ''), {
       ignoreClasses,
       ignoreInlineStyles,
@@ -338,13 +370,30 @@ async function assertSelectionOnPageOrFrame(page, expected) {
       return path.reverse();
     };
 
+    const fixOffset = (node, offset) => {
+      // If the selection offset is at the br of a webkit img+br linebreak
+      // then move the offset to the img so the tests are consistent across
+      // browsers
+      if (node && node.nodeType === Node.ELEMENT_NODE && offset > 0) {
+        const child = node.children[offset - 1];
+        if (
+          child &&
+          child.nodeType === Node.ELEMENT_NODE &&
+          child.getAttribute('data-lexical-linebreak') === 'true'
+        ) {
+          return offset - 1;
+        }
+      }
+      return offset;
+    };
+
     const {anchorNode, anchorOffset, focusNode, focusOffset} =
       window.getSelection();
 
     return {
-      anchorOffset,
+      anchorOffset: fixOffset(anchorNode, anchorOffset),
       anchorPath: getPathFromNode(anchorNode),
-      focusOffset,
+      focusOffset: fixOffset(focusNode, focusOffset),
       focusPath: getPathFromNode(focusNode),
     };
   }, expected);
diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
index 2c4f0419575..3fd409b5774 100644
--- a/packages/lexical-playground/src/Editor.tsx
+++ b/packages/lexical-playground/src/Editor.tsx
@@ -94,6 +94,7 @@ export default function Editor(): JSX.Element {
       shouldPreserveNewLinesInMarkdown,
       tableCellMerge,
       tableCellBackgroundColor,
+      tableHorizontalScroll,
     },
   } = useSettings();
   const isEditable = useLexicalEditable();
@@ -199,6 +200,7 @@ export default function Editor(): JSX.Element {
             <TablePlugin
               hasCellMerge={tableCellMerge}
               hasCellBackgroundColor={tableCellBackgroundColor}
+              hasHorizontalScroll={tableHorizontalScroll}
             />
             <TableCellResizer />
             <ImagesPlugin />
diff --git a/packages/lexical-playground/src/Settings.tsx b/packages/lexical-playground/src/Settings.tsx
index b015f570d9d..2a126f8d0db 100644
--- a/packages/lexical-playground/src/Settings.tsx
+++ b/packages/lexical-playground/src/Settings.tsx
@@ -28,10 +28,11 @@ export default function Settings(): JSX.Element {
       isAutocomplete,
       showTreeView,
       showNestedEditorTreeView,
-      disableBeforeInput,
+      // disableBeforeInput,
       showTableOfContents,
       shouldUseLexicalContextMenu,
       shouldPreserveNewLinesInMarkdown,
+      // tableHorizontalScroll,
     },
   } = useSettings();
   useEffect(() => {
@@ -132,14 +133,14 @@ export default function Settings(): JSX.Element {
             checked={isAutocomplete}
             text="Autocomplete"
           />
-          <Switch
+          {/* <Switch
             onClick={() => {
               setOption('disableBeforeInput', !disableBeforeInput);
               setTimeout(() => window.location.reload(), 500);
             }}
             checked={disableBeforeInput}
             text="Legacy Events"
-          />
+          /> */}
           <Switch
             onClick={() => {
               setOption('showTableOfContents', !showTableOfContents);
@@ -167,6 +168,13 @@ export default function Settings(): JSX.Element {
             checked={shouldPreserveNewLinesInMarkdown}
             text="Preserve newlines in Markdown"
           />
+          {/* <Switch
+            onClick={() => {
+              setOption('tableHorizontalScroll', !tableHorizontalScroll);
+            }}
+            checked={tableHorizontalScroll}
+            text="Tables have horizontal scroll"
+          /> */}
         </div>
       ) : null}
     </>
diff --git a/packages/lexical-playground/src/appSettings.ts b/packages/lexical-playground/src/appSettings.ts
index d698af382c2..ab489c3e668 100644
--- a/packages/lexical-playground/src/appSettings.ts
+++ b/packages/lexical-playground/src/appSettings.ts
@@ -29,6 +29,7 @@ export const DEFAULT_SETTINGS = {
   showTreeView: true,
   tableCellBackgroundColor: true,
   tableCellMerge: true,
+  tableHorizontalScroll: true,
 } as const;
 
 // These are mutated in setupEnv
diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css
index e5362290c69..31718a446af 100644
--- a/packages/lexical-playground/src/index.css
+++ b/packages/lexical-playground/src/index.css
@@ -74,17 +74,18 @@ header h1 {
 
 .editor-scroller {
   min-height: 150px;
+  max-width: 100%;
   border: 0;
   display: flex;
   position: relative;
   outline: 0;
   z-index: 0;
-  overflow: auto;
   resize: vertical;
 }
 
 .editor {
   flex: auto;
+  max-width: 100%;
   position: relative;
   resize: vertical;
   z-index: -1;
diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
index 60a09ab8a09..43f1f8aa5d2 100644
--- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
@@ -24,8 +24,8 @@ import {
   $isTableRowNode,
   $isTableSelection,
   $unmergeCell,
+  getTableElement,
   getTableObserverFromTableElement,
-  HTMLTableElementWithWithTableSelectionState,
   TableCellHeaderStates,
   TableCellNode,
   TableRowNode,
@@ -43,6 +43,7 @@ import {
 import * as React from 'react';
 import {ReactPortal, useCallback, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
+import invariant from 'shared/invariant';
 
 import useModal from '../../hooks/useModal';
 import ColorPicker from '../../ui/ColorPicker';
@@ -229,13 +230,15 @@ function TableActionMenu({
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-        const tableElement = editor.getElementByKey(
-          tableNode.getKey(),
-        ) as HTMLTableElementWithWithTableSelectionState;
+        const tableElement = getTableElement(
+          tableNode,
+          editor.getElementByKey(tableNode.getKey()),
+        );
 
-        if (!tableElement) {
-          throw new Error('Expected to find tableElement in DOM');
-        }
+        invariant(
+          tableElement !== null,
+          'TableActionMenu: Expected to find tableElement in DOM',
+        );
 
         const tableObserver = getTableObserverFromTableElement(tableElement);
         if (tableObserver !== null) {
diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
index f0446ee6b1f..7f586262645 100644
--- a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
@@ -19,6 +19,7 @@ import {
   $isTableCellNode,
   $isTableRowNode,
   getDOMCellFromTarget,
+  getTableElement,
   TableNode,
 } from '@lexical/table';
 import {calculateZoomLevel} from '@lexical/utils';
@@ -115,7 +116,10 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
 
               const tableNode =
                 $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-              const tableElement = editor.getElementByKey(tableNode.getKey());
+              const tableElement = getTableElement(
+                tableNode,
+                editor.getElementByKey(tableNode.getKey()),
+              );
 
               if (!tableElement) {
                 throw new Error('TableCellResizer: Table element not found.');
diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
index 44fc3368a02..92a26ff0015 100644
--- a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -9,12 +9,14 @@
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {
+  $getTableAndElementByKey,
   $getTableColumnIndexFromTableCellNode,
   $getTableRowIndexFromTableCellNode,
   $insertTableColumn__EXPERIMENTAL,
   $insertTableRow__EXPERIMENTAL,
   $isTableCellNode,
   $isTableNode,
+  getTableElement,
   TableCellNode,
   TableNode,
   TableRowNode,
@@ -75,7 +77,10 @@ function TableHoverActionsContainer({
             return;
           }
 
-          tableDOMElement = editor.getElementByKey(table?.getKey());
+          tableDOMElement = getTableElement(
+            table,
+            editor.getElementByKey(table.getKey()),
+          );
 
           if (tableDOMElement) {
             const rowCount = table.getChildrenSize();
@@ -163,36 +168,37 @@ function TableHoverActionsContainer({
       editor.registerMutationListener(
         TableNode,
         (mutations) => {
-          editor.getEditorState().read(() => {
-            for (const [key, type] of mutations) {
-              const tableDOMElement = editor.getElementByKey(key);
-              switch (type) {
-                case 'created':
-                  tableSetRef.current.add(key);
-                  setShouldListenMouseMove(tableSetRef.current.size > 0);
-                  if (tableDOMElement) {
-                    tableResizeObserver.observe(tableDOMElement);
+          editor.getEditorState().read(
+            () => {
+              let resetObserver = false;
+              for (const [key, type] of mutations) {
+                switch (type) {
+                  case 'created': {
+                    tableSetRef.current.add(key);
+                    resetObserver = true;
+                    break;
+                  }
+                  case 'destroyed': {
+                    tableSetRef.current.delete(key);
+                    resetObserver = true;
+                    break;
                   }
-                  break;
-
-                case 'destroyed':
-                  tableSetRef.current.delete(key);
-                  setShouldListenMouseMove(tableSetRef.current.size > 0);
-                  // Reset resize observers
-                  tableResizeObserver.disconnect();
-                  tableSetRef.current.forEach((tableKey: NodeKey) => {
-                    const tableElement = editor.getElementByKey(tableKey);
-                    if (tableElement) {
-                      tableResizeObserver.observe(tableElement);
-                    }
-                  });
-                  break;
-
-                default:
-                  break;
+                  default:
+                    break;
+                }
               }
-            }
-          });
+              if (resetObserver) {
+                // Reset resize observers
+                tableResizeObserver.disconnect();
+                for (const tableKey of tableSetRef.current) {
+                  const {tableElement} = $getTableAndElementByKey(tableKey);
+                  tableResizeObserver.observe(tableElement);
+                }
+                setShouldListenMouseMove(tableSetRef.current.size > 0);
+              }
+            },
+            {editor},
+          );
         },
         {skipInitialization: false},
       ),
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index 22d27e4145e..cbed93864d1 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -116,6 +116,14 @@
   text-align: right;
   min-width: 25px;
 }
+.PlaygroundEditorTheme__tableScrollableWrapper {
+  overflow-x: auto;
+  margin: 0px 25px 30px 0px;
+}
+.PlaygroundEditorTheme__tableScrollableWrapper > .PlaygroundEditorTheme__table {
+  /* Remove the table's margin and put it on the wrapper */
+  margin: 0;
+}
 .PlaygroundEditorTheme__table {
   border-collapse: collapse;
   border-spacing: 0;
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
index c29d9d1434d..e1c87638895 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
@@ -103,6 +103,7 @@ const theme: EditorThemeClasses = {
   tableCellSortedIndicator: 'PlaygroundEditorTheme__tableCellSortedIndicator',
   tableResizeRuler: 'PlaygroundEditorTheme__tableCellResizeRuler',
   tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
+  tableScrollableWrapper: 'PlaygroundEditorTheme__tableScrollableWrapper',
   tableSelected: 'PlaygroundEditorTheme__tableSelected',
   tableSelection: 'PlaygroundEditorTheme__tableSelection',
   text: {
diff --git a/packages/lexical-react/src/LexicalTablePlugin.ts b/packages/lexical-react/src/LexicalTablePlugin.ts
index e8b512eb790..a5c43d17c65 100644
--- a/packages/lexical-react/src/LexicalTablePlugin.ts
+++ b/packages/lexical-react/src/LexicalTablePlugin.ts
@@ -20,11 +20,13 @@ import {
   $createTableCellNode,
   $createTableNodeWithDimensions,
   $getNodeTriplet,
+  $getTableAndElementByKey,
   $isTableCellNode,
-  $isTableNode,
   $isTableRowNode,
   applyTableHandlers,
+  getTableElement,
   INSERT_TABLE_COMMAND,
+  setScrollableTablesActive,
   TableCellNode,
   TableNode,
   TableRowNode,
@@ -36,24 +38,50 @@ import {
 } from '@lexical/utils';
 import {
   $createParagraphNode,
-  $getNodeByKey,
   $isTextNode,
   COMMAND_PRIORITY_EDITOR,
 } from 'lexical';
 import {useEffect} from 'react';
 import invariant from 'shared/invariant';
 
+export interface TablePluginProps {
+  /**
+   * When `false` (default `true`), merged cell support (colspan and rowspan) will be disabled and all
+   * tables will be forced into a regular grid with 1x1 table cells.
+   */
+  hasCellMerge?: boolean;
+  /**
+   * When `false` (default `true`), the background color of TableCellNode will always be removed.
+   */
+  hasCellBackgroundColor?: boolean;
+  /**
+   * When `true` (default `true`), the tab key can be used to navigate table cells.
+   */
+  hasTabHandler?: boolean;
+  /**
+   * When `true` (default `false`), tables will be wrapped in a `<div>` to enable horizontal scrolling
+   */
+  hasHorizontalScroll?: boolean;
+}
+
+/**
+ * A plugin to enable all of the features of Lexical's TableNode.
+ *
+ * @param props - See type for documentation
+ * @returns An element to render in your LexicalComposer
+ */
 export function TablePlugin({
   hasCellMerge = true,
   hasCellBackgroundColor = true,
   hasTabHandler = true,
-}: {
-  hasCellMerge?: boolean;
-  hasCellBackgroundColor?: boolean;
-  hasTabHandler?: boolean;
-}): JSX.Element | null {
+  hasHorizontalScroll = false,
+}: TablePluginProps): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
 
+  useEffect(() => {
+    setScrollableTablesActive(editor, hasHorizontalScroll);
+  }, [editor, hasHorizontalScroll]);
+
   useEffect(() => {
     if (!editor.hasNodes([TableNode, TableCellNode, TableRowNode])) {
       invariant(
@@ -122,7 +150,7 @@ export function TablePlugin({
       nodeKey: NodeKey,
       dom: HTMLElement,
     ) => {
-      const tableElement = dom as HTMLTableElementWithWithTableSelectionState;
+      const tableElement = getTableElement(tableNode, dom);
       const tableSelection = applyTableHandlers(
         tableNode,
         tableElement,
@@ -135,34 +163,31 @@ export function TablePlugin({
     const unregisterMutationListener = editor.registerMutationListener(
       TableNode,
       (nodeMutations) => {
-        for (const [nodeKey, mutation] of nodeMutations) {
-          if (mutation === 'created' || mutation === 'updated') {
-            const tableSelection = tableSelections.get(nodeKey);
-            const dom = editor.getElementByKey(nodeKey);
-            if (!(tableSelection && dom === tableSelection[1])) {
-              // The update created a new DOM node, destroy the existing TableObserver
-              if (tableSelection) {
-                tableSelection[0].removeListeners();
-                tableSelections.delete(nodeKey);
-              }
-              if (dom !== null) {
-                // Create a new TableObserver
-                editor.getEditorState().read(() => {
-                  const tableNode = $getNodeByKey<TableNode>(nodeKey);
-                  if ($isTableNode(tableNode)) {
-                    initializeTableNode(tableNode, nodeKey, dom);
-                  }
-                });
+        editor.getEditorState().read(
+          () => {
+            for (const [nodeKey, mutation] of nodeMutations) {
+              const tableSelection = tableSelections.get(nodeKey);
+              if (mutation === 'created' || mutation === 'updated') {
+                const {tableNode, tableElement} =
+                  $getTableAndElementByKey(nodeKey);
+                if (tableSelection === undefined) {
+                  initializeTableNode(tableNode, nodeKey, tableElement);
+                } else if (tableElement !== tableSelection[1]) {
+                  // The update created a new DOM node, destroy the existing TableObserver
+                  tableSelection[0].removeListeners();
+                  tableSelections.delete(nodeKey);
+                  initializeTableNode(tableNode, nodeKey, tableElement);
+                }
+              } else if (mutation === 'destroyed') {
+                if (tableSelection !== undefined) {
+                  tableSelection[0].removeListeners();
+                  tableSelections.delete(nodeKey);
+                }
               }
             }
-          } else if (mutation === 'destroyed') {
-            const tableSelection = tableSelections.get(nodeKey);
-            if (tableSelection !== undefined) {
-              tableSelection[0].removeListeners();
-              tableSelections.delete(nodeKey);
-            }
-          }
-        }
+          },
+          {editor},
+        );
       },
       {skipInitialization: false},
     );
diff --git a/packages/lexical-table/flow/LexicalTable.js.flow b/packages/lexical-table/flow/LexicalTable.js.flow
index 8ec1b813b10..19014ebd897 100644
--- a/packages/lexical-table/flow/LexicalTable.js.flow
+++ b/packages/lexical-table/flow/LexicalTable.js.flow
@@ -162,6 +162,7 @@ declare export function applyTableHandlers(
   tableNode: TableNode,
   tableElement: HTMLElement,
   editor: LexicalEditor,
+  hasTabHandler: boolean,
 ): TableObserver;
 
 declare export function $getElementForTableNode(
diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
index be988c5af96..838758e2e83 100644
--- a/packages/lexical-table/src/LexicalTableNode.ts
+++ b/packages/lexical-table/src/LexicalTableNode.ts
@@ -6,18 +6,6 @@
  *
  */
 
-import type {
-  DOMConversionMap,
-  DOMConversionOutput,
-  DOMExportOutput,
-  EditorConfig,
-  LexicalEditor,
-  LexicalNode,
-  NodeKey,
-  SerializedElementNode,
-  Spread,
-} from 'lexical';
-
 import {
   addClassNamesToElement,
   isHTMLElement,
@@ -25,9 +13,22 @@ import {
 } from '@lexical/utils';
 import {
   $applyNodeReplacement,
+  $getEditor,
   $getNearestNodeFromDOMNode,
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementDOMSlot,
   ElementNode,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  SerializedElementNode,
+  setDOMUnmanaged,
+  Spread,
 } from 'lexical';
+import invariant from 'shared/invariant';
 
 import {PIXEL_VALUE_REG_EXP} from './constants';
 import {$isTableCellNode, TableCellNode} from './LexicalTableCellNode';
@@ -79,6 +80,30 @@ function setRowStriping(
   }
 }
 
+const scrollableEditors = new WeakSet<LexicalEditor>();
+
+export function $isScrollableTablesActive(
+  editor: LexicalEditor = $getEditor(),
+): boolean {
+  return scrollableEditors.has(editor);
+}
+
+export function setScrollableTablesActive(
+  editor: LexicalEditor,
+  active: boolean,
+) {
+  if (active) {
+    if (__DEV__ && !editor._config.theme.tableScrollableWrapper) {
+      console.warn(
+        'TableNode: hasHorizontalScroll is active but theme.tableScrollableWrapper is not defined.',
+      );
+    }
+    scrollableEditors.add(editor);
+  } else {
+    scrollableEditors.delete(editor);
+  }
+}
+
 /** @noInheritDoc */
 export class TableNode extends ElementNode {
   /** @internal */
@@ -142,6 +167,19 @@ export class TableNode extends ElementNode {
     };
   }
 
+  getDOMSlot(element: HTMLElement): ElementDOMSlot {
+    const tableElement =
+      (element.nodeName !== 'TABLE' && element.querySelector('table')) ||
+      element;
+    invariant(
+      tableElement.nodeName === 'TABLE',
+      'TableNode.getDOMSlot: createDOM() did not return a table',
+    );
+    return super
+      .getDOMSlot(tableElement)
+      .withAfter(tableElement.querySelector('colgroup'));
+  }
+
   createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
     const tableElement = document.createElement('table');
     const colGroup = document.createElement('colgroup');
@@ -152,11 +190,23 @@ export class TableNode extends ElementNode {
       this.getColumnCount(),
       this.getColWidths(),
     );
+    setDOMUnmanaged(colGroup);
 
     addClassNamesToElement(tableElement, config.theme.table);
     if (this.__rowStriping) {
       setRowStriping(tableElement, config, true);
     }
+    if ($isScrollableTablesActive(editor)) {
+      const wrapperElement = document.createElement('div');
+      const classes = config.theme.tableScrollableWrapper;
+      if (classes) {
+        addClassNamesToElement(wrapperElement, classes);
+      } else {
+        wrapperElement.style.cssText = 'overflow-x: auto;';
+      }
+      wrapperElement.appendChild(tableElement);
+      return wrapperElement;
+    }
 
     return tableElement;
   }
@@ -177,21 +227,24 @@ export class TableNode extends ElementNode {
     return {
       ...super.exportDOM(editor),
       after: (tableElement) => {
-        if (tableElement) {
-          const newElement = tableElement.cloneNode() as ParentNode;
-          const colGroup = document.createElement('colgroup');
+        if (
+          tableElement &&
+          isHTMLElement(tableElement) &&
+          tableElement.nodeName !== 'TABLE'
+        ) {
+          tableElement = tableElement.querySelector('table');
+        }
+        if (!tableElement || !isHTMLElement(tableElement)) {
+          return null;
+        }
+        // Wrap direct descendant rows in a tbody for export
+        const rows = tableElement.querySelectorAll(':scope > tr');
+        if (rows.length > 0) {
           const tBody = document.createElement('tbody');
-          if (isHTMLElement(tableElement)) {
-            const cols = tableElement.querySelectorAll('col');
-            colGroup.append(...cols);
-            const rows = tableElement.querySelectorAll('tr');
-            tBody.append(...rows);
-          }
-
-          newElement.replaceChildren(colGroup, tBody);
-
-          return newElement as HTMLElement;
+          tBody.append(...rows);
+          tableElement.append(tBody);
         }
+        return tableElement;
       },
     };
   }
@@ -344,12 +397,11 @@ export function $getElementForTableNode(
   tableNode: TableNode,
 ): TableDOMTable {
   const tableElement = editor.getElementByKey(tableNode.getKey());
-
-  if (tableElement == null) {
-    throw new Error('Table Element Not Found');
-  }
-
-  return getTable(tableElement);
+  invariant(
+    tableElement !== null,
+    '$getElementForTableNode: Table Element Not Found',
+  );
+  return getTable(tableNode, tableElement);
 }
 
 export function $convertTableElement(
diff --git a/packages/lexical-table/src/LexicalTableObserver.ts b/packages/lexical-table/src/LexicalTableObserver.ts
index 03030509a52..9d3ffbbc690 100644
--- a/packages/lexical-table/src/LexicalTableObserver.ts
+++ b/packages/lexical-table/src/LexicalTableObserver.ts
@@ -16,6 +16,7 @@ import {
   $createParagraphNode,
   $createRangeSelection,
   $createTextNode,
+  $getEditor,
   $getNearestNodeFromDOMNode,
   $getNodeByKey,
   $getRoot,
@@ -28,7 +29,7 @@ import {
 import invariant from 'shared/invariant';
 
 import {$isTableCellNode, TableCellNode} from './LexicalTableCellNode';
-import {$isTableNode} from './LexicalTableNode';
+import {$isTableNode, TableNode} from './LexicalTableNode';
 import {
   $createTableSelection,
   $isTableSelection,
@@ -39,6 +40,8 @@ import {
   $updateDOMForSelection,
   getDOMSelection,
   getTable,
+  getTableElement,
+  HTMLTableElementWithWithTableSelectionState,
 } from './LexicalTableSelectionHelpers';
 
 export type TableDOMCell = {
@@ -57,6 +60,31 @@ export type TableDOMTable = {
   rows: number;
 };
 
+export function $getTableAndElementByKey(
+  tableNodeKey: NodeKey,
+  editor: LexicalEditor = $getEditor(),
+): {
+  tableNode: TableNode;
+  tableElement: HTMLTableElementWithWithTableSelectionState;
+} {
+  const tableNode = $getNodeByKey(tableNodeKey);
+  invariant(
+    $isTableNode(tableNode),
+    'TableObserver: Expected tableNodeKey %s to be a TableNode',
+    tableNodeKey,
+  );
+  const tableElement = getTableElement(
+    tableNode,
+    editor.getElementByKey(tableNodeKey),
+  );
+  invariant(
+    tableElement !== null,
+    'TableObserver: Expected to find TableElement in DOM for key %s',
+    tableNodeKey,
+  );
+  return {tableElement, tableNode};
+}
+
 export class TableObserver {
   focusX: number;
   focusY: number;
@@ -74,6 +102,7 @@ export class TableObserver {
   tableSelection: TableSelection | null;
   hasHijackedSelectionStyles: boolean;
   isSelecting: boolean;
+  shouldCheckSelection: boolean;
   abortController: AbortController;
   listenerOptions: {signal: AbortSignal};
 
@@ -97,10 +126,11 @@ export class TableObserver {
     this.anchorCell = null;
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
-    this.trackTable();
     this.isSelecting = false;
+    this.shouldCheckSelection = false;
     this.abortController = new AbortController();
     this.listenerOptions = {signal: this.abortController.signal};
+    this.trackTable();
   }
 
   getTable(): TableDOMTable {
@@ -115,54 +145,57 @@ export class TableObserver {
     this.listenersToRemove.clear();
   }
 
+  $lookup(): {
+    tableNode: TableNode;
+    tableElement: HTMLTableElementWithWithTableSelectionState;
+  } {
+    return $getTableAndElementByKey(this.tableNodeKey, this.editor);
+  }
+
   trackTable() {
     const observer = new MutationObserver((records) => {
-      this.editor.update(() => {
-        let gridNeedsRedraw = false;
-
-        for (let i = 0; i < records.length; i++) {
-          const record = records[i];
-          const target = record.target;
-          const nodeName = target.nodeName;
-
-          if (
-            nodeName === 'TABLE' ||
-            nodeName === 'TBODY' ||
-            nodeName === 'THEAD' ||
-            nodeName === 'TR'
-          ) {
-            gridNeedsRedraw = true;
-            break;
+      this.editor.getEditorState().read(
+        () => {
+          let gridNeedsRedraw = false;
+
+          for (let i = 0; i < records.length; i++) {
+            const record = records[i];
+            const target = record.target;
+            const nodeName = target.nodeName;
+
+            if (
+              nodeName === 'TABLE' ||
+              nodeName === 'TBODY' ||
+              nodeName === 'THEAD' ||
+              nodeName === 'TR'
+            ) {
+              gridNeedsRedraw = true;
+              break;
+            }
           }
-        }
-
-        if (!gridNeedsRedraw) {
-          return;
-        }
-
-        const tableElement = this.editor.getElementByKey(this.tableNodeKey);
-
-        if (!tableElement) {
-          throw new Error('Expected to find TableElement in DOM');
-        }
-
-        this.table = getTable(tableElement);
-      });
-    });
-    this.editor.update(() => {
-      const tableElement = this.editor.getElementByKey(this.tableNodeKey);
 
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
+          if (!gridNeedsRedraw) {
+            return;
+          }
 
-      this.table = getTable(tableElement);
-      observer.observe(tableElement, {
-        attributes: true,
-        childList: true,
-        subtree: true,
-      });
+          const {tableNode, tableElement} = this.$lookup();
+          this.table = getTable(tableNode, tableElement);
+        },
+        {editor: this.editor},
+      );
     });
+    this.editor.getEditorState().read(
+      () => {
+        const {tableNode, tableElement} = this.$lookup();
+        this.table = getTable(tableNode, tableElement);
+        observer.observe(tableElement, {
+          attributes: true,
+          childList: true,
+          subtree: true,
+        });
+      },
+      {editor: this.editor},
+    );
   }
 
   clearHighlight() {
@@ -182,19 +215,8 @@ export class TableObserver {
     this.enableHighlightStyle();
 
     editor.update(() => {
-      const tableNode = $getNodeByKey(this.tableNodeKey);
-
-      if (!$isTableNode(tableNode)) {
-        throw new Error('Expected TableNode.');
-      }
-
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
-
-      const grid = getTable(tableElement);
+      const {tableNode, tableElement} = this.$lookup();
+      const grid = getTable(tableNode, tableElement);
       $updateDOMForSelection(editor, grid, null);
       $setSelection(null);
       editor.dispatchCommand(SELECTION_CHANGE_COMMAND, undefined);
@@ -203,34 +225,34 @@ export class TableObserver {
 
   enableHighlightStyle() {
     const editor = this.editor;
-    editor.update(() => {
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
-
-      removeClassNamesFromElement(
-        tableElement,
-        editor._config.theme.tableSelection,
-      );
-      tableElement.classList.remove('disable-selection');
-      this.hasHijackedSelectionStyles = false;
-    });
+    editor.getEditorState().read(
+      () => {
+        const {tableElement} = this.$lookup();
+
+        removeClassNamesFromElement(
+          tableElement,
+          editor._config.theme.tableSelection,
+        );
+        tableElement.classList.remove('disable-selection');
+        this.hasHijackedSelectionStyles = false;
+      },
+      {editor},
+    );
   }
 
   disableHighlightStyle() {
     const editor = this.editor;
-    editor.update(() => {
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
-
-      addClassNamesToElement(tableElement, editor._config.theme.tableSelection);
-      this.hasHijackedSelectionStyles = true;
-    });
+    editor.getEditorState().read(
+      () => {
+        const {tableElement} = this.$lookup();
+        addClassNamesToElement(
+          tableElement,
+          editor._config.theme.tableSelection,
+        );
+        this.hasHijackedSelectionStyles = true;
+      },
+      {editor},
+    );
   }
 
   updateTableTableSelection(selection: TableSelection | null): void {
@@ -248,20 +270,32 @@ export class TableObserver {
     }
   }
 
+  /**
+   * @internal
+   * Firefox has a strange behavior where pressing the down arrow key from
+   * above the table will move the caret after the table and then lexical
+   * will select the last cell instead of the first.
+   * We do still want to let the browser handle caret movement but we will
+   * use this property to "tag" the update so that we can recheck the
+   * selection after the event is processed.
+   */
+  setShouldCheckSelection(): void {
+    this.shouldCheckSelection = true;
+  }
+  /**
+   * @internal
+   */
+  getAndClearShouldCheckSelection(): boolean {
+    if (this.shouldCheckSelection) {
+      this.shouldCheckSelection = false;
+      return true;
+    }
+    return false;
+  }
   setFocusCellForSelection(cell: TableDOMCell, ignoreStart = false) {
     const editor = this.editor;
     editor.update(() => {
-      const tableNode = $getNodeByKey(this.tableNodeKey);
-
-      if (!$isTableNode(tableNode)) {
-        throw new Error('Expected TableNode.');
-      }
-
-      const tableElement = editor.getElementByKey(this.tableNodeKey);
-
-      if (!tableElement) {
-        throw new Error('Expected to find TableElement in DOM');
-      }
+      const {tableNode} = this.$lookup();
 
       const cellX = cell.x;
       const cellY = cell.y;
diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
index f85709749b4..f629d1feb0d 100644
--- a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
+++ b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -7,7 +7,6 @@
  */
 
 import type {TableCellNode} from './LexicalTableCellNode';
-import type {TableNode} from './LexicalTableNode';
 import type {TableDOMCell, TableDOMRows} from './LexicalTableObserver';
 import type {
   TableMapType,
@@ -68,7 +67,11 @@ import {CAN_USE_DOM} from 'shared/canUseDOM';
 import invariant from 'shared/invariant';
 
 import {$isTableCellNode} from './LexicalTableCellNode';
-import {$isTableNode} from './LexicalTableNode';
+import {
+  $isScrollableTablesActive,
+  $isTableNode,
+  TableNode,
+} from './LexicalTableNode';
 import {TableDOMTable, TableObserver} from './LexicalTableObserver';
 import {$isTableRowNode} from './LexicalTableRowNode';
 import {$isTableSelection} from './LexicalTableSelection';
@@ -85,9 +88,27 @@ const isMouseDownOnEvent = (event: MouseEvent) => {
   return (event.buttons & 1) === 1;
 };
 
+export function getTableElement<T extends HTMLElement | null>(
+  tableNode: TableNode,
+  dom: T,
+): HTMLTableElementWithWithTableSelectionState | (T & null) {
+  if (!dom) {
+    return dom as T & null;
+  }
+  const element = (
+    dom.nodeName === 'TABLE' ? dom : tableNode.getDOMSlot(dom).element
+  ) as HTMLTableElementWithWithTableSelectionState;
+  invariant(
+    element.nodeName === 'TABLE',
+    'getTableElement: Expecting table in as DOM node for TableNode, not %s',
+    dom.nodeName,
+  );
+  return element;
+}
+
 export function applyTableHandlers(
   tableNode: TableNode,
-  tableElement: HTMLTableElementWithWithTableSelectionState,
+  element: HTMLElement,
   editor: LexicalEditor,
   hasTabHandler: boolean,
 ): TableObserver {
@@ -100,9 +121,10 @@ export function applyTableHandlers(
   const tableObserver = new TableObserver(editor, tableNode.getKey());
   const editorWindow = editor._window || window;
 
+  const tableElement = getTableElement(tableNode, element);
   attachTableObserverToTableElement(tableElement, tableObserver);
   tableObserver.listenersToRemove.add(() =>
-    deatatchTableObserverFromTableElement(tableElement, tableObserver),
+    detatchTableObserverFromTableElement(tableElement, tableObserver),
   );
 
   const createMouseHandlers = () => {
@@ -744,6 +766,29 @@ export function applyTableHandlers(
       () => {
         const selection = $getSelection();
         const prevSelection = $getPreviousSelection();
+        // If they pressed the down arrow with the selection outside of the
+        // table, and then the selection ends up in the table but not in the
+        // first cell, then move the selection to the first cell.
+        if (
+          tableObserver.getAndClearShouldCheckSelection() &&
+          $isRangeSelection(prevSelection) &&
+          $isRangeSelection(selection) &&
+          selection.isCollapsed()
+        ) {
+          const anchor = selection.anchor.getNode();
+          const firstRow = tableNode.getFirstChild();
+          const anchorCell = $findCellNode(anchor);
+          if (anchorCell !== null && $isTableRowNode(firstRow)) {
+            const firstCell = firstRow.getFirstChild();
+            if (
+              $isTableCellNode(firstCell) &&
+              !$findMatchingParent(anchorCell, (node) => node.is(firstCell))
+            ) {
+              firstCell.selectStart();
+              return true;
+            }
+          }
+        }
 
         if ($isRangeSelection(selection)) {
           const {anchor, focus} = selection;
@@ -944,7 +989,7 @@ export type HTMLTableElementWithWithTableSelectionState = HTMLTableElement & {
   [LEXICAL_ELEMENT_KEY]?: TableObserver | undefined;
 };
 
-export function deatatchTableObserverFromTableElement(
+export function detatchTableObserverFromTableElement(
   tableElement: HTMLTableElementWithWithTableSelectionState,
   tableObserver: TableObserver,
 ) {
@@ -1006,7 +1051,11 @@ export function doesTargetContainText(node: Node): boolean {
   return false;
 }
 
-export function getTable(tableElement: HTMLElement): TableDOMTable {
+export function getTable(
+  tableNode: TableNode,
+  dom: HTMLElement,
+): TableDOMTable {
+  const tableElement = getTableElement(tableNode, dom);
   const domRows: TableDOMRows = [];
   const grid = {
     columns: 0,
@@ -1538,6 +1587,10 @@ function $handleArrowKey(
         }
       }
     }
+    if (direction === 'down' && $isScrollableTablesActive(editor)) {
+      // Enable Firefox workaround
+      tableObserver.setShouldCheckSelection();
+    }
     return false;
   }
 
@@ -1559,11 +1612,12 @@ function $handleArrowKey(
     }
     const anchorCellTable = $findTableNode(anchorCellNode);
     if (anchorCellTable !== tableNode && anchorCellTable != null) {
-      const anchorCellTableElement = editor.getElementByKey(
-        anchorCellTable.getKey(),
+      const anchorCellTableElement = getTableElement(
+        anchorCellTable,
+        editor.getElementByKey(anchorCellTable.getKey()),
       );
       if (anchorCellTableElement != null) {
-        tableObserver.table = getTable(anchorCellTableElement);
+        tableObserver.table = getTable(anchorCellTable, anchorCellTableElement);
         return $handleArrowKey(
           editor,
           event,
@@ -1675,8 +1729,13 @@ function $handleArrowKey(
     );
 
     const [tableNodeFromSelection] = selection.getNodes();
-    const tableElement = editor.getElementByKey(
-      tableNodeFromSelection.getKey(),
+    invariant(
+      $isTableNode(tableNodeFromSelection),
+      '$handleArrowKey: TableSelection.getNodes()[0] expected to be TableNode',
+    );
+    const tableElement = getTableElement(
+      tableNodeFromSelection,
+      editor.getElementByKey(tableNodeFromSelection.getKey()),
     );
     if (
       !$isTableCellNode(anchorCellNode) ||
@@ -1688,7 +1747,7 @@ function $handleArrowKey(
     }
     tableObserver.updateTableTableSelection(selection);
 
-    const grid = getTable(tableElement);
+    const grid = getTable(tableNodeFromSelection, tableElement);
     const cordsAnchor = tableNode.getCordsFromCellNode(anchorCellNode, grid);
     const anchorCell = tableNode.getDOMCellFromCordsOrThrow(
       cordsAnchor.x,
@@ -1882,14 +1941,29 @@ function $getTableEdgeCursorPosition(
     return undefined;
   }
 
-  const tableNodeParentDOM = editor.getElementByKey(tableNodeParent.getKey());
-  if (!tableNodeParentDOM) {
-    return undefined;
-  }
-
   // TODO: Add support for nested tables
   const domSelection = window.getSelection();
-  if (!domSelection || domSelection.anchorNode !== tableNodeParentDOM) {
+  if (!domSelection) {
+    return undefined;
+  }
+  const domAnchorNode = domSelection.anchorNode;
+  const tableNodeParentDOM = editor.getElementByKey(tableNodeParent.getKey());
+  const tableElement = getTableElement(
+    tableNode,
+    editor.getElementByKey(tableNode.getKey()),
+  );
+  // We are only interested in the scenario where the
+  // native selection anchor is:
+  // - at or inside the table's parent DOM
+  // - and NOT at or inside the table DOM
+  // It may be adjacent to the table DOM (e.g. in a wrapper)
+  if (
+    !domAnchorNode ||
+    !tableNodeParentDOM ||
+    !tableElement ||
+    !tableNodeParentDOM.contains(domAnchorNode) ||
+    tableElement.contains(domAnchorNode)
+  ) {
     return undefined;
   }
 
diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
index 570ac0e9ed2..df23bdcf843 100644
--- a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
+++ b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
@@ -27,8 +27,11 @@ import {
 } from 'lexical';
 import {
   DataTransferMock,
+  expectHtmlToBeEqual,
+  html,
   initializeUnitTest,
   invariant,
+  polyfillContentEditable,
 } from 'lexical/src/__tests__/utils';
 
 import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';
@@ -68,386 +71,612 @@ const editorConfig = Object.freeze({
   theme: {
     table: 'test-table-class',
     tableRowStriping: 'test-table-row-striping-class',
+    tableScrollableWrapper: 'table-scrollable-wrapper',
   },
 });
 
-describe('LexicalTableNode tests', () => {
-  initializeUnitTest(
-    (testEnv) => {
-      beforeEach(async () => {
-        const {editor} = testEnv;
-        await editor.update(() => {
-          const root = $getRoot();
-          const paragraph = $createParagraphNode();
-          root.append(paragraph);
-          paragraph.select();
-        });
-      });
-
-      test('TableNode.constructor', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const tableNode = $createTableNode();
-
-          expect(tableNode).not.toBe(null);
-        });
-
-        expect(() => $createTableNode()).toThrow();
-      });
-
-      test('TableNode.createDOM()', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const tableNode = $createTableNode();
-
-          expect(tableNode.createDOM(editorConfig).outerHTML).toBe(
-            `<table class="${editorConfig.theme.table}"><colgroup></colgroup></table>`,
-          );
-        });
-      });
-
-      test('Copy table from an external source', async () => {
-        const {editor} = testEnv;
-
-        const dataTransfer = new DataTransferMock();
-        dataTransfer.setData(
-          'text/html',
-          '<html><body><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-16a69100-7fff-6cb9-b829-cb1def16a58d"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;table-layout:fixed"><colgroup><col style="width:100px"/><col style="width:200px"/></colgroup><tbody><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello there</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">General Kenobi!</span></p></td></tr><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lexical is nice</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><br /></td></tr></tbody></table></div></b><!--EndFragment--></body></html>',
-        );
-        await editor.update(() => {
-          const selection = $getSelection();
-          invariant(
-            $isRangeSelection(selection),
-            'isRangeSelection(selection)',
-          );
-          $insertDataTransferForRichText(dataTransfer, selection, editor);
-        });
-        // Make sure paragraph is inserted inside empty cells
-        const emptyCell = '<td><p><br></p></td>';
-        expect(testEnv.innerHTML).toBe(
-          `<table><colgroup><col style="width: 100px;"><col style="width: 200px;"></colgroup><tr><td><p dir="ltr"><span data-lexical-text="true">Hello there</span></p></td><td><p dir="ltr"><span data-lexical-text="true">General Kenobi!</span></p></td></tr><tr><td><p dir="ltr"><span data-lexical-text="true">Lexical is nice</span></p></td>${emptyCell}</tr></table>`,
-        );
-      });
+function wrapTableHtml(expected: string): string {
+  return expected
+    .replace(/<table/g, `<div class="table-scrollable-wrapper"><table`)
+    .replace(/<\/table>/g, '</table></div>');
+}
 
-      test('Copy table from an external source like gdoc with formatting', async () => {
-        const {editor} = testEnv;
+polyfillContentEditable();
 
-        const dataTransfer = new DataTransferMock();
-        dataTransfer.setData(
-          'text/html',
-          '<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none" data-sheets-root="1"><colgroup><col width="100"/><col width="189"/><col width="171"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-weight:bold;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Surface&quot;}">Surface</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-style:italic;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;MWP_WORK_LS_COMPOSER&quot;}">MWP_WORK_LS_COMPOSER</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:underline;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:77349}">77349</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Lexical&quot;}">Lexical</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:line-through;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;XDS_RICH_TEXT_AREA&quot;}">XDS_RICH_TEXT_AREA</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;sdvd sdfvsfs&quot;}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:5,&quot;2&quot;:{&quot;5&quot;:1}}"><span style="font-size:10pt;font-family:Arial;font-style:normal;">sdvd </span><span style="font-size:10pt;font-family:Arial;font-weight:bold;font-style:normal;">sdfvsfs</span></td></tr></tbody></table>',
-        );
-        await editor.update(() => {
-          const selection = $getSelection();
-          invariant(
-            $isRangeSelection(selection),
-            'isRangeSelection(selection)',
-          );
-          $insertDataTransferForRichText(dataTransfer, selection, editor);
-        });
-        expect(testEnv.innerHTML).toBe(
-          `<table><colgroup><col><col><col></colgroup><tr style="height: 21px;"><td><p dir="ltr"><strong data-lexical-text="true">Surface</strong></p></td><td><p dir="ltr"><em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em></p></td><td><p style="text-align: right;"><span data-lexical-text="true">77349</span></p></td></tr><tr style="height: 21px;"><td><p dir="ltr"><span data-lexical-text="true">Lexical</span></p></td><td><p dir="ltr"><span data-lexical-text="true">XDS_RICH_TEXT_AREA</span></p></td><td><p dir="ltr"><span data-lexical-text="true">sdvd </span><strong data-lexical-text="true">sdfvsfs</strong></p></td></tr></table>`,
+describe('LexicalTableNode tests', () => {
+  [false, true].forEach((hasHorizontalScroll) => {
+    describe(`hasHorizontalScroll={${hasHorizontalScroll}}`, () => {
+      function expectTableHtmlToBeEqual(
+        actual: string,
+        expected: string,
+      ): void {
+        return expectHtmlToBeEqual(
+          actual,
+          hasHorizontalScroll ? wrapTableHtml(expected) : expected,
         );
-      });
-
-      test('Cut table in the middle of a range selection', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const paragraph = root.getFirstChild<ParagraphNode>();
-          const beforeText = $createTextNode('text before the table');
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          const afterText = $createTextNode('text after the table');
-
-          paragraph?.append(beforeText);
-          paragraph?.append(table);
-          paragraph?.append(afterText);
-        });
-        await editor.update(() => {
-          editor.focus();
-          $selectAll();
-        });
-        await editor.update(() => {
-          editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut table as last node in range selection ', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const paragraph = root.getFirstChild<ParagraphNode>();
-          const beforeText = $createTextNode('text before the table');
-          const table = $createTableNodeWithDimensions(4, 4, true);
-
-          paragraph?.append(beforeText);
-          paragraph?.append(table);
-        });
-        await editor.update(() => {
-          editor.focus();
-          $selectAll();
-        });
-        await editor.update(() => {
-          editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut table as first node in range selection ', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const paragraph = root.getFirstChild<ParagraphNode>();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          const afterText = $createTextNode('text after the table');
-
-          paragraph?.append(table);
-          paragraph?.append(afterText);
-        });
-        await editor.update(() => {
-          editor.focus();
-          $selectAll();
-        });
-        await editor.update(() => {
-          editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut table is whole selection, should remove it', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          root.append(table);
-        });
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            const DOMTable = $getElementForTableNode(editor, table);
-            if (DOMTable) {
-              table
-                ?.getCellNodeFromCords(0, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('some text'));
-              const selection = $createTableSelection();
-              selection.set(
-                table.__key,
-                table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-                table?.getCellNodeFromCords(3, 3, DOMTable)?.__key || '',
+      }
+      initializeUnitTest(
+        (testEnv) => {
+          beforeEach(async () => {
+            const {editor} = testEnv;
+            await editor.update(() => {
+              const root = $getRoot();
+              const paragraph = $createParagraphNode();
+              root.append(paragraph);
+              paragraph.select();
+            });
+          });
+
+          test('TableNode.constructor', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const tableNode = $createTableNode();
+
+              expect(tableNode).not.toBe(null);
+            });
+
+            expect(() => $createTableNode()).toThrow();
+          });
+
+          test('TableNode.createDOM()', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const tableNode = $createTableNode();
+
+              expectTableHtmlToBeEqual(
+                tableNode.createDOM(editorConfig).outerHTML,
+                html`
+                  <table class="${editorConfig.theme.table}">
+                    <colgroup></colgroup>
+                  </table>
+                `,
               );
-              $setSelection(selection);
-              editor.dispatchCommand(CUT_COMMAND, {
-                preventDefault: () => {},
-                stopPropagation: () => {},
-              } as ClipboardEvent);
-            }
-          }
-        });
-
-        expect(testEnv.innerHTML).toBe(`<p><br></p>`);
-      });
-
-      test('Cut subsection of table cells, should just clear contents', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          root.append(table);
-        });
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            const DOMTable = $getElementForTableNode(editor, table);
-            if (DOMTable) {
-              table
-                ?.getCellNodeFromCords(0, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('some text'));
+            });
+          });
+
+          test('Copy table from an external source', async () => {
+            const {editor} = testEnv;
+
+            const dataTransfer = new DataTransferMock();
+            dataTransfer.setData(
+              'text/html',
+              '<html><body><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-16a69100-7fff-6cb9-b829-cb1def16a58d"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;table-layout:fixed"><colgroup><col style="width:100px"/><col style="width:200px"/></colgroup><tbody><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Hello there</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">General Kenobi!</span></p></td></tr><tr style="height:22.015pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Lexical is nice</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><br /></td></tr></tbody></table></div></b><!--EndFragment--></body></html>',
+            );
+            await editor.update(() => {
+              const selection = $getSelection();
+              invariant(
+                $isRangeSelection(selection),
+                'isRangeSelection(selection)',
+              );
+              $insertDataTransferForRichText(dataTransfer, selection, editor);
+            });
+            // Make sure paragraph is inserted inside empty cells
+            const emptyCell = '<td><p><br></p></td>';
+            expectTableHtmlToBeEqual(
+              testEnv.innerHTML,
+              html`
+                <table class="test-table-class">
+                  <colgroup>
+                    <col style="width: 100px;" />
+                    <col style="width: 200px;" />
+                  </colgroup>
+                  <tr>
+                    <td>
+                      <p dir="ltr">
+                        <span data-lexical-text="true">Hello there</span>
+                      </p>
+                    </td>
+                    <td>
+                      <p dir="ltr">
+                        <span data-lexical-text="true">General Kenobi!</span>
+                      </p>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p dir="ltr">
+                        <span data-lexical-text="true">Lexical is nice</span>
+                      </p>
+                    </td>
+                    ${emptyCell}
+                  </tr>
+                </table>
+              `,
+            );
+          });
+
+          test('Copy table from an external source like gdoc with formatting', async () => {
+            const {editor} = testEnv;
+
+            const dataTransfer = new DataTransferMock();
+            dataTransfer.setData(
+              'text/html',
+              '<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none" data-sheets-root="1"><colgroup><col width="100"/><col width="189"/><col width="171"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-weight:bold;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Surface&quot;}">Surface</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-style:italic;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;MWP_WORK_LS_COMPOSER&quot;}">MWP_WORK_LS_COMPOSER</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:underline;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:77349}">77349</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Lexical&quot;}">Lexical</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-decoration:line-through;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;XDS_RICH_TEXT_AREA&quot;}">XDS_RICH_TEXT_AREA</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;sdvd sdfvsfs&quot;}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:5,&quot;2&quot;:{&quot;5&quot;:1}}"><span style="font-size:10pt;font-family:Arial;font-style:normal;">sdvd </span><span style="font-size:10pt;font-family:Arial;font-weight:bold;font-style:normal;">sdfvsfs</span></td></tr></tbody></table>',
+            );
+            await editor.update(() => {
+              const selection = $getSelection();
+              invariant(
+                $isRangeSelection(selection),
+                'isRangeSelection(selection)',
+              );
+              $insertDataTransferForRichText(dataTransfer, selection, editor);
+            });
+            expectTableHtmlToBeEqual(
+              testEnv.innerHTML,
+              html`
+                <table class="test-table-class">
+                  <colgroup>
+                    <col />
+                    <col />
+                    <col />
+                  </colgroup>
+                  <tr style="height: 21px;">
+                    <td>
+                      <p dir="ltr">
+                        <strong data-lexical-text="true">Surface</strong>
+                      </p>
+                    </td>
+                    <td>
+                      <p dir="ltr">
+                        <em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em>
+                      </p>
+                    </td>
+                    <td>
+                      <p style="text-align: right;">
+                        <span data-lexical-text="true">77349</span>
+                      </p>
+                    </td>
+                  </tr>
+                  <tr style="height: 21px;">
+                    <td>
+                      <p dir="ltr">
+                        <span data-lexical-text="true">Lexical</span>
+                      </p>
+                    </td>
+                    <td>
+                      <p dir="ltr">
+                        <span data-lexical-text="true">XDS_RICH_TEXT_AREA</span>
+                      </p>
+                    </td>
+                    <td>
+                      <p dir="ltr">
+                        <span data-lexical-text="true">sdvd</span>
+                        <strong data-lexical-text="true">sdfvsfs</strong>
+                      </p>
+                    </td>
+                  </tr>
+                </table>
+              `,
+            );
+          });
+
+          test('Cut table in the middle of a range selection', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const paragraph = root.getFirstChild<ParagraphNode>();
+              const beforeText = $createTextNode('text before the table');
+              const table = $createTableNodeWithDimensions(4, 4, true);
+              const afterText = $createTextNode('text after the table');
+
+              paragraph?.append(beforeText);
+              paragraph?.append(table);
+              paragraph?.append(afterText);
+            });
+            await editor.update(() => {
+              editor.focus();
+              $selectAll();
+            });
+            await editor.update(() => {
+              editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
+            });
+
+            expectHtmlToBeEqual(
+              testEnv.innerHTML,
+              html`
+                <p><br /></p>
+              `,
+            );
+          });
+
+          test('Cut table as last node in range selection ', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const paragraph = root.getFirstChild<ParagraphNode>();
+              const beforeText = $createTextNode('text before the table');
+              const table = $createTableNodeWithDimensions(4, 4, true);
+
+              paragraph?.append(beforeText);
+              paragraph?.append(table);
+            });
+            await editor.update(() => {
+              editor.focus();
+              $selectAll();
+            });
+            await editor.update(() => {
+              editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
+            });
+
+            expectHtmlToBeEqual(
+              testEnv.innerHTML,
+              html`
+                <p><br /></p>
+              `,
+            );
+          });
+
+          test('Cut table as first node in range selection ', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const paragraph = root.getFirstChild<ParagraphNode>();
+              const table = $createTableNodeWithDimensions(4, 4, true);
+              const afterText = $createTextNode('text after the table');
+
+              paragraph?.append(table);
+              paragraph?.append(afterText);
+            });
+            await editor.update(() => {
+              editor.focus();
+              $selectAll();
+            });
+            await editor.update(() => {
+              editor.dispatchCommand(CUT_COMMAND, {} as ClipboardEvent);
+            });
+
+            expectHtmlToBeEqual(
+              testEnv.innerHTML,
+              html`
+                <p><br /></p>
+              `,
+            );
+          });
+
+          test('Cut table is whole selection, should remove it', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = $createTableNodeWithDimensions(4, 4, true);
+              root.append(table);
+            });
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              if (table) {
+                const DOMTable = $getElementForTableNode(editor, table);
+                if (DOMTable) {
+                  table
+                    ?.getCellNodeFromCords(0, 0, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode('some text'));
+                  const selection = $createTableSelection();
+                  selection.set(
+                    table.__key,
+                    table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
+                    table?.getCellNodeFromCords(3, 3, DOMTable)?.__key || '',
+                  );
+                  $setSelection(selection);
+                  editor.dispatchCommand(CUT_COMMAND, {
+                    preventDefault: () => {},
+                    stopPropagation: () => {},
+                  } as ClipboardEvent);
+                }
+              }
+            });
+
+            expectHtmlToBeEqual(
+              testEnv.innerHTML,
+              html`
+                <p><br /></p>
+              `,
+            );
+          });
+
+          test('Cut subsection of table cells, should just clear contents', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = $createTableNodeWithDimensions(4, 4, true);
+              root.append(table);
+            });
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              if (table) {
+                const DOMTable = $getElementForTableNode(editor, table);
+                if (DOMTable) {
+                  table
+                    ?.getCellNodeFromCords(0, 0, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode('some text'));
+                  const selection = $createTableSelection();
+                  selection.set(
+                    table.__key,
+                    table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
+                    table?.getCellNodeFromCords(2, 2, DOMTable)?.__key || '',
+                  );
+                  $setSelection(selection);
+                  editor.dispatchCommand(CUT_COMMAND, {
+                    preventDefault: () => {},
+                    stopPropagation: () => {},
+                  } as ClipboardEvent);
+                }
+              }
+            });
+
+            expectTableHtmlToBeEqual(
+              testEnv.innerHTML,
+              html`
+                <p><br /></p>
+                <table class="test-table-class">
+                  <colgroup>
+                    <col />
+                    <col />
+                    <col />
+                    <col />
+                  </colgroup>
+                  <tr>
+                    <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>
+                  </tr>
+                  <tr>
+                    <th>
+                      <p><br /></p>
+                    </th>
+                    <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>
+                  </tr>
+                </table>
+              `,
+            );
+          });
+
+          test('Table plain text output validation', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = $createTableNodeWithDimensions(4, 4, true);
+              root.append(table);
+            });
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              if (table) {
+                const DOMTable = $getElementForTableNode(editor, table);
+                if (DOMTable) {
+                  table
+                    ?.getCellNodeFromCords(0, 0, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode('1'));
+                  table
+                    ?.getCellNodeFromCords(1, 0, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode(''));
+                  table
+                    ?.getCellNodeFromCords(2, 0, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode('2'));
+                  table
+                    ?.getCellNodeFromCords(0, 1, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode('3'));
+                  table
+                    ?.getCellNodeFromCords(1, 1, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode('4'));
+                  table
+                    ?.getCellNodeFromCords(2, 1, DOMTable)
+                    ?.getLastChild<ParagraphNode>()
+                    ?.append($createTextNode(''));
+                  const selection = $createTableSelection();
+                  selection.set(
+                    table.__key,
+                    table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
+                    table?.getCellNodeFromCords(2, 1, DOMTable)?.__key || '',
+                  );
+                  expect(selection.getTextContent()).toBe(`1\t\t2\n3\t4\t\n`);
+                }
+              }
+            });
+          });
+
+          test('Toggle row striping ON/OFF', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = $createTableNodeWithDimensions(4, 4, true);
+              root.append(table);
+            });
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              if (table) {
+                table.setRowStriping(true);
+              }
+            });
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              expectTableHtmlToBeEqual(
+                table!.createDOM(editorConfig).outerHTML,
+                html`
+                  <table
+                    class="${editorConfig.theme.table} ${editorConfig.theme
+                      .tableRowStriping}"
+                    data-lexical-row-striping="true">
+                    <colgroup>
+                      <col />
+                      <col />
+                      <col />
+                      <col />
+                    </colgroup>
+                  </table>
+                `,
+              );
+            });
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              if (table) {
+                table.setRowStriping(false);
+              }
+            });
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              expectTableHtmlToBeEqual(
+                table!.createDOM(editorConfig).outerHTML,
+                html`
+                  <table class="${editorConfig.theme.table}">
+                    <colgroup>
+                      <col />
+                      <col />
+                      <col />
+                      <col />
+                    </colgroup>
+                  </table>
+                `,
+              );
+            });
+          });
+
+          test('Update column widths', async () => {
+            const {editor} = testEnv;
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = $createTableNodeWithDimensions(4, 2, true);
+              root.append(table);
+            });
+
+            // Set widths
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              table!.setColWidths([50, 50]);
+            });
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              expectTableHtmlToBeEqual(
+                table!.createDOM(editorConfig).outerHTML,
+                html`
+                  <table class="${editorConfig.theme.table}">
+                    <colgroup>
+                      <col style="width: 50px;" />
+                      <col style="width: 50px;" />
+                    </colgroup>
+                  </table>
+                `,
+              );
+              const colWidths = table!.getColWidths();
+
+              // colwidths should be immutable in DEV
+              expect(() => {
+                (colWidths as number[]).push(100);
+              }).toThrow();
+              expect(table!.getColWidths()).toStrictEqual([50, 50]);
+              expect(table!.getColumnCount()).toBe(2);
+            });
+
+            // Add a column
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              const DOMTable = $getElementForTableNode(editor, table!);
               const selection = $createTableSelection();
               selection.set(
-                table.__key,
-                table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-                table?.getCellNodeFromCords(2, 2, DOMTable)?.__key || '',
+                table!.__key,
+                table!.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
+                table!.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
               );
               $setSelection(selection);
-              editor.dispatchCommand(CUT_COMMAND, {
-                preventDefault: () => {},
-                stopPropagation: () => {},
-              } as ClipboardEvent);
-            }
-          }
-        });
-
-        expect(testEnv.innerHTML).toBe(
-          `<p><br></p><table><colgroup><col><col><col><col></colgroup><tr><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></tr><tr><th><p><br></p></th><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></tr></table>`,
-        );
-      });
-
-      test('Table plain text output validation', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          root.append(table);
-        });
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            const DOMTable = $getElementForTableNode(editor, table);
-            if (DOMTable) {
-              table
-                ?.getCellNodeFromCords(0, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('1'));
-              table
-                ?.getCellNodeFromCords(1, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode(''));
-              table
-                ?.getCellNodeFromCords(2, 0, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('2'));
-              table
-                ?.getCellNodeFromCords(0, 1, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('3'));
-              table
-                ?.getCellNodeFromCords(1, 1, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode('4'));
-              table
-                ?.getCellNodeFromCords(2, 1, DOMTable)
-                ?.getLastChild<ParagraphNode>()
-                ?.append($createTextNode(''));
-              const selection = $createTableSelection();
-              selection.set(
-                table.__key,
-                table?.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-                table?.getCellNodeFromCords(2, 1, DOMTable)?.__key || '',
+              $insertTableColumn__EXPERIMENTAL();
+              table!.setColWidths([50, 50, 100]);
+            });
+
+            await editor.update(() => {
+              const root = $getRoot();
+              const table = root.getLastChild<TableNode>();
+              expectTableHtmlToBeEqual(
+                table!.createDOM(editorConfig).outerHTML,
+                html`
+                  <table class="${editorConfig.theme.table}">
+                    <colgroup>
+                      <col style="width: 50px;" />
+                      <col style="width: 50px;" />
+                      <col style="width: 100px;" />
+                    </colgroup>
+                  </table>
+                `,
               );
-              expect(selection.getTextContent()).toBe(`1\t\t2\n3\t4\t\n`);
-            }
-          }
-        });
-      });
-
-      test('Toggle row striping ON/OFF', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 4, true);
-          root.append(table);
-        });
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            table.setRowStriping(true);
-          }
-        });
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          expect(table!.createDOM(editorConfig).outerHTML).toBe(
-            `<table class="${editorConfig.theme.table} ${editorConfig.theme.tableRowStriping}" data-lexical-row-striping="true"><colgroup><col><col><col><col></colgroup></table>`,
-          );
-        });
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          if (table) {
-            table.setRowStriping(false);
-          }
-        });
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          expect(table!.createDOM(editorConfig).outerHTML).toBe(
-            `<table class="${editorConfig.theme.table}"><colgroup><col><col><col><col></colgroup></table>`,
-          );
-        });
-      });
-
-      test('Update column widths', async () => {
-        const {editor} = testEnv;
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = $createTableNodeWithDimensions(4, 2, true);
-          root.append(table);
-        });
-
-        // Set widths
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          table!.setColWidths([50, 50]);
-        });
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          expect(table!.createDOM(editorConfig).outerHTML).toBe(
-            `<table class="${editorConfig.theme.table}"><colgroup><col style="width: 50px;"><col style="width: 50px;"></colgroup></table>`,
-          );
-          const colWidths = table!.getColWidths();
-
-          // colwidths should be immutable in DEV
-          expect(() => {
-            (colWidths as number[]).push(100);
-          }).toThrow();
-          expect(table!.getColWidths()).toStrictEqual([50, 50]);
-          expect(table!.getColumnCount()).toBe(2);
-        });
-
-        // Add a column
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          const DOMTable = $getElementForTableNode(editor, table!);
-          const selection = $createTableSelection();
-          selection.set(
-            table!.__key,
-            table!.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-            table!.getCellNodeFromCords(0, 0, DOMTable)?.__key || '',
-          );
-          $setSelection(selection);
-          $insertTableColumn__EXPERIMENTAL();
-          table!.setColWidths([50, 50, 100]);
-        });
-
-        await editor.update(() => {
-          const root = $getRoot();
-          const table = root.getLastChild<TableNode>();
-          expect(table!.createDOM(editorConfig).outerHTML).toBe(
-            `<table class="${editorConfig.theme.table}"><colgroup><col style="width: 50px;"><col style="width: 50px;"><col style="width: 100px;"></colgroup></table>`,
-          );
-          expect(table!.getColWidths()).toStrictEqual([50, 50, 100]);
-          expect(table!.getColumnCount()).toBe(3);
-        });
-      });
-    },
-    undefined,
-    <TablePlugin />,
-  );
+              expect(table!.getColWidths()).toStrictEqual([50, 50, 100]);
+              expect(table!.getColumnCount()).toBe(3);
+            });
+          });
+        },
+        {theme: editorConfig.theme},
+        <TablePlugin hasHorizontalScroll={hasHorizontalScroll} />,
+      );
+    });
+  });
 });
diff --git a/packages/lexical-table/src/index.ts b/packages/lexical-table/src/index.ts
index 2429eb608a9..be452681b98 100644
--- a/packages/lexical-table/src/index.ts
+++ b/packages/lexical-table/src/index.ts
@@ -22,11 +22,13 @@ export type {SerializedTableNode} from './LexicalTableNode';
 export {
   $createTableNode,
   $getElementForTableNode,
+  $isScrollableTablesActive,
   $isTableNode,
+  setScrollableTablesActive,
   TableNode,
 } from './LexicalTableNode';
 export type {TableDOMCell} from './LexicalTableObserver';
-export {TableObserver} from './LexicalTableObserver';
+export {$getTableAndElementByKey, TableObserver} from './LexicalTableObserver';
 export type {SerializedTableRowNode} from './LexicalTableRowNode';
 export {
   $createTableRowNode,
@@ -49,6 +51,7 @@ export {
   $findTableNode,
   applyTableHandlers,
   getDOMCellFromTarget,
+  getTableElement,
   getTableObserverFromTableElement,
 } from './LexicalTableSelectionHelpers';
 export {
diff --git a/packages/lexical-website/docs/react/plugins.md b/packages/lexical-website/docs/react/plugins.md
index d2dcb206afb..1e7f60c0294 100644
--- a/packages/lexical-website/docs/react/plugins.md
+++ b/packages/lexical-website/docs/react/plugins.md
@@ -109,6 +109,8 @@ React wrapper for `@lexical/list` that adds support for check lists. Note that i
 
 ### `LexicalTablePlugin`
 
+[![See API Documentation](/img/see-api-documentation.svg)](/docs/api/modules/lexical_react_LexicalTablePlugin)
+
 React wrapper for `@lexical/table` that adds support for tables
 
 ```jsx
diff --git a/packages/lexical/flow/Lexical.js.flow b/packages/lexical/flow/Lexical.js.flow
index bc32e05bff6..dccc5987079 100644
--- a/packages/lexical/flow/Lexical.js.flow
+++ b/packages/lexical/flow/Lexical.js.flow
@@ -433,6 +433,7 @@ declare export class LexicalNode {
   selectPrevious(anchorOffset?: number, focusOffset?: number): RangeSelection;
   selectNext(anchorOffset?: number, focusOffset?: number): RangeSelection;
   markDirty(): void;
+  reconcileObservedMutation(dom: HTMLElement, editor: LexicalEditor): void;
 }
 export type NodeMap = Map<NodeKey, LexicalNode>;
 
@@ -790,11 +791,38 @@ declare export class ElementNode extends LexicalNode {
     nodesToInsert: Array<LexicalNode>,
   ): this;
   exportJSON(): SerializedElementNode;
+  getDOMSlot(dom: HTMLElement): ElementDOMSlot;
 }
 declare export function $isElementNode(
   node: ?LexicalNode,
 ): node is ElementNode;
 
+/**
+ * ElementDOMSlot
+ */
+declare export class ElementDOMSlot {
+  element: HTMLElement;
+  before: Node | null;
+  after: Node | null;
+  constructor(element: HTMLElement, before?: Node | null | void, after?: Node | null | void): void;
+  withBefore(before: Node | null | void): ElementDOMSlot;
+  withAfter(after: Node | null | void): ElementDOMSlot;
+  withElement(element: HTMLElement): ElementDOMSlot;
+  insertChild(dom: Node): this;
+  removeChild(dom: Node): this;
+  replaceChild(dom: Node, prevDom: Node): this;
+  getFirstChild(): Node | null;
+  //
+  getManagedLineBreak(): HTMLElement | null;
+  removeManagedLineBreak(): void;
+  insertManagedLineBreak(webkitHack: boolean): void;
+  getFirstChildOffset(): number;
+  resolveChildIndex(element: ElementNode, elementDOM: HTMLElement, initialDOM: Node, initialOffset: number): [node: ElementNode, idx: number];
+}
+
+declare export function setDOMUnmanaged(elementDOM: HTMLElement): void;
+declare export function isDOMUnmanaged(elementDOM: HTMLElement): boolean;
+
 /**
  * LexicalDecoratorNode
  */
diff --git a/packages/lexical/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts
index 6016ae84956..174b18cb62c 100644
--- a/packages/lexical/src/LexicalEditor.ts
+++ b/packages/lexical/src/LexicalEditor.ts
@@ -144,7 +144,9 @@ export type EditorThemeClasses = {
   tableCellSortedIndicator?: EditorThemeClassName;
   tableResizeRuler?: EditorThemeClassName;
   tableRow?: EditorThemeClassName;
+  tableScrollableWrapper?: EditorThemeClassName;
   tableSelected?: EditorThemeClassName;
+  tableSelection?: EditorThemeClassName;
   text?: TextNodeThemeClasses;
   embedBlock?: {
     base?: EditorThemeClassName;
diff --git a/packages/lexical/src/LexicalMutations.ts b/packages/lexical/src/LexicalMutations.ts
index 15e4e510d39..fa58ebde193 100644
--- a/packages/lexical/src/LexicalMutations.ts
+++ b/packages/lexical/src/LexicalMutations.ts
@@ -6,8 +6,10 @@
  *
  */
 
-import type {TextNode} from '.';
+import type {LexicalNode, TextNode} from '.';
 import type {LexicalEditor} from './LexicalEditor';
+import type {EditorState} from './LexicalEditorState';
+import type {LexicalPrivateDOM} from './LexicalNode';
 import type {BaseSelection} from './LexicalSelection';
 
 import {IS_FIREFOX} from 'shared/environment';
@@ -15,7 +17,6 @@ import {IS_FIREFOX} from 'shared/environment';
 import {
   $getSelection,
   $isDecoratorNode,
-  $isElementNode,
   $isRangeSelection,
   $isTextNode,
   $setSelection,
@@ -23,12 +24,15 @@ import {
 import {DOM_TEXT_TYPE} from './LexicalConstants';
 import {updateEditor} from './LexicalUpdates';
 import {
-  $getNearestNodeFromDOMNode,
+  $getNodeByKey,
   $getNodeFromDOMNode,
   $updateTextNodeFromDOMContent,
   getDOMSelection,
+  getNodeKeyFromDOMNode,
+  getParentElement,
   getWindow,
   internalGetRoot,
+  isDOMUnmanaged,
   isFirefoxClipboardEvents,
 } from './LexicalUtils';
 // The time between a text entry event and the mutation observer firing.
@@ -53,14 +57,16 @@ function initTextEntryListener(editor: LexicalEditor): void {
 
 function isManagedLineBreak(
   dom: Node,
-  target: Node,
+  target: Node & LexicalPrivateDOM,
   editor: LexicalEditor,
 ): boolean {
+  const isBR = dom.nodeName === 'BR';
+  const lexicalLineBreak = target.__lexicalLineBreak;
   return (
-    // @ts-expect-error: internal field
-    target.__lexicalLineBreak === dom ||
-    // @ts-ignore We intentionally add this to the Node.
-    dom[`__lexicalKey_${editor._key}`] !== undefined
+    (lexicalLineBreak &&
+      (dom === lexicalLineBreak ||
+        (isBR && dom.previousSibling === lexicalLineBreak))) ||
+    (isBR && getNodeKeyFromDOMNode(dom, editor) !== undefined)
   );
 }
 
@@ -108,6 +114,30 @@ function shouldUpdateTextNodeFromMutation(
   return targetDOM.nodeType === DOM_TEXT_TYPE && targetNode.isAttached();
 }
 
+function $getNearestManagedNodePairFromDOMNode(
+  startingDOM: Node,
+  editor: LexicalEditor,
+  editorState: EditorState,
+  rootElement: HTMLElement | null,
+): [HTMLElement, LexicalNode] | undefined {
+  for (
+    let dom: Node | null = startingDOM;
+    dom && !isDOMUnmanaged(dom);
+    dom = getParentElement(dom)
+  ) {
+    const key = getNodeKeyFromDOMNode(dom, editor);
+    if (key !== undefined) {
+      const node = $getNodeByKey(key, editorState);
+      if (node) {
+        // All decorator nodes are unmanaged
+        return $isDecoratorNode(node) ? undefined : [dom as HTMLElement, node];
+      }
+    } else if (dom === rootElement) {
+      return [rootElement, internalGetRoot(editorState)];
+    }
+  }
+}
+
 export function $flushMutations(
   editor: LexicalEditor,
   mutations: Array<MutationRecord>,
@@ -120,7 +150,7 @@ export function $flushMutations(
   try {
     updateEditor(editor, () => {
       const selection = $getSelection() || getLastSelection(editor);
-      const badDOMTargets = new Map();
+      const badDOMTargets = new Map<HTMLElement, LexicalNode>();
       const rootElement = editor.getRootElement();
       // We use the current editor state, as that reflects what is
       // actually "on screen".
@@ -133,17 +163,16 @@ export function $flushMutations(
         const mutation = mutations[i];
         const type = mutation.type;
         const targetDOM = mutation.target;
-        let targetNode = $getNearestNodeFromDOMNode(
+        const pair = $getNearestManagedNodePairFromDOMNode(
           targetDOM,
+          editor,
           currentEditorState,
+          rootElement,
         );
-
-        if (
-          (targetNode === null && targetDOM !== rootElement) ||
-          $isDecoratorNode(targetNode)
-        ) {
+        if (!pair) {
           continue;
         }
+        const [nodeDOM, targetNode] = pair;
 
         if (type === 'characterData') {
           // Text mutations are deferred and passed to mutation listeners to be
@@ -176,8 +205,7 @@ export function $flushMutations(
               parentDOM != null &&
               addedDOM !== blockCursorElement &&
               node === null &&
-              (addedDOM.nodeName !== 'BR' ||
-                !isManagedLineBreak(addedDOM, parentDOM, editor))
+              !isManagedLineBreak(addedDOM, parentDOM, editor)
             ) {
               if (IS_FIREFOX) {
                 const possibleText =
@@ -202,8 +230,7 @@ export function $flushMutations(
               const removedDOM = removedDOMs[s];
 
               if (
-                (removedDOM.nodeName === 'BR' &&
-                  isManagedLineBreak(removedDOM, targetDOM, editor)) ||
+                isManagedLineBreak(removedDOM, targetDOM, editor) ||
                 blockCursorElement === removedDOM
               ) {
                 targetDOM.appendChild(removedDOM);
@@ -212,11 +239,7 @@ export function $flushMutations(
             }
 
             if (removedDOMsLength !== unremovedBRs) {
-              if (targetDOM === rootElement) {
-                targetNode = internalGetRoot(currentEditorState);
-              }
-
-              badDOMTargets.set(targetDOM, targetNode);
+              badDOMTargets.set(nodeDOM, targetNode);
             }
           }
         }
@@ -227,31 +250,8 @@ export function $flushMutations(
       // is Lexical's "current" editor state. This is basically like
       // an internal revert on the DOM.
       if (badDOMTargets.size > 0) {
-        for (const [targetDOM, targetNode] of badDOMTargets) {
-          if ($isElementNode(targetNode)) {
-            const childKeys = targetNode.getChildrenKeys();
-            let currentDOM = targetDOM.firstChild;
-
-            for (let s = 0; s < childKeys.length; s++) {
-              const key = childKeys[s];
-              const correctDOM = editor.getElementByKey(key);
-
-              if (correctDOM === null) {
-                continue;
-              }
-
-              if (currentDOM == null) {
-                targetDOM.appendChild(correctDOM);
-                currentDOM = correctDOM;
-              } else if (currentDOM !== correctDOM) {
-                targetDOM.replaceChild(correctDOM, currentDOM);
-              }
-
-              currentDOM = currentDOM.nextSibling;
-            }
-          } else if ($isTextNode(targetNode)) {
-            targetNode.markDirty();
-          }
+        for (const [nodeDOM, targetNode] of badDOMTargets) {
+          targetNode.reconcileObservedMutation(nodeDOM, editor);
         }
       }
 
diff --git a/packages/lexical/src/LexicalNode.ts b/packages/lexical/src/LexicalNode.ts
index 564989cdc2e..0aa1d1ca487 100644
--- a/packages/lexical/src/LexicalNode.ts
+++ b/packages/lexical/src/LexicalNode.ts
@@ -56,6 +56,15 @@ export type SerializedLexicalNode = {
   version: number;
 };
 
+/** @internal */
+export interface LexicalPrivateDOM {
+  __lexicalTextContent?: string | undefined | null;
+  __lexicalLineBreak?: HTMLBRElement | HTMLImageElement | undefined | null;
+  __lexicalDirTextContent?: string | undefined | null;
+  __lexicalDir?: 'ltr' | 'rtl' | null | undefined;
+  __lexicalUnmanaged?: boolean | undefined;
+}
+
 export function $removeNode(
   nodeToRemove: LexicalNode,
   restoreSelection: boolean,
@@ -1160,6 +1169,16 @@ export class LexicalNode {
   markDirty(): void {
     this.getWritable();
   }
+
+  /**
+   * @internal
+   *
+   * When the reconciler detects that a node was mutated, this method
+   * may be called to restore the node to a known good state.
+   */
+  reconcileObservedMutation(dom: HTMLElement, editor: LexicalEditor): void {
+    this.markDirty();
+  }
 }
 
 function errorOnTypeKlassMismatch(
diff --git a/packages/lexical/src/LexicalReconciler.ts b/packages/lexical/src/LexicalReconciler.ts
index 0ad9cf2c911..6fa946f61d6 100644
--- a/packages/lexical/src/LexicalReconciler.ts
+++ b/packages/lexical/src/LexicalReconciler.ts
@@ -13,8 +13,8 @@ import type {
   MutationListeners,
   RegisteredNodes,
 } from './LexicalEditor';
-import type {NodeKey, NodeMap} from './LexicalNode';
-import type {ElementNode} from './nodes/LexicalElementNode';
+import type {LexicalPrivateDOM, NodeKey, NodeMap} from './LexicalNode';
+import type {ElementDOMSlot, ElementNode} from './nodes/LexicalElementNode';
 
 import invariant from 'shared/invariant';
 import normalizeClassNames from 'shared/normalizeClassNames';
@@ -44,6 +44,7 @@ import {
   getElementByKeyOrThrow,
   getTextDirection,
   setMutatedNode,
+  setNodeKeyOnDOMNode,
 } from './LexicalUtils';
 
 type IntentionallyMarkedAsDirtyElement = boolean;
@@ -165,11 +166,7 @@ function setElementFormat(dom: HTMLElement, format: number): void {
   }
 }
 
-function $createNode(
-  key: NodeKey,
-  parentDOM: null | HTMLElement,
-  insertDOM: null | Node,
-): HTMLElement {
+function $createNode(key: NodeKey, slot: ElementDOMSlot | null): HTMLElement {
   const node = activeNextNodeMap.get(key);
 
   if (node === undefined) {
@@ -231,19 +228,8 @@ function $createNode(
     editorTextContent += text;
   }
 
-  if (parentDOM !== null) {
-    if (insertDOM != null) {
-      parentDOM.insertBefore(dom, insertDOM);
-    } else {
-      // @ts-expect-error: internal field
-      const possibleLineBreak = parentDOM.__lexicalLineBreak;
-
-      if (possibleLineBreak != null) {
-        parentDOM.insertBefore(dom, possibleLineBreak);
-      } else {
-        parentDOM.appendChild(dom);
-      }
-    }
+  if (slot !== null) {
+    slot.insertChild(dom);
   }
 
   if (__DEV__) {
@@ -269,25 +255,24 @@ function $createChildrenWithDirection(
 ): void {
   const previousSubTreeDirectionedTextContent = subTreeDirectionedTextContent;
   subTreeDirectionedTextContent = '';
-  $createChildren(children, element, 0, endIndex, dom, null);
+  $createChildren(children, element, 0, endIndex, element.getDOMSlot(dom));
   reconcileBlockDirection(element, dom);
   subTreeDirectionedTextContent = previousSubTreeDirectionedTextContent;
 }
 
 function $createChildren(
   children: Array<NodeKey>,
-  element: ElementNode,
+  element: ElementNode & LexicalPrivateDOM,
   _startIndex: number,
   endIndex: number,
-  dom: null | HTMLElement,
-  insertDOM: null | HTMLElement,
+  slot: ElementDOMSlot,
 ): void {
   const previousSubTreeTextContent = subTreeTextContent;
   subTreeTextContent = '';
   let startIndex = _startIndex;
 
   for (; startIndex <= endIndex; ++startIndex) {
-    $createNode(children[startIndex], dom, insertDOM);
+    $createNode(children[startIndex], slot);
     const node = activeNextNodeMap.get(children[startIndex]);
     if (node !== null && $isTextNode(node)) {
       if (subTreeTextFormat === null) {
@@ -301,67 +286,49 @@ function $createChildren(
   if ($textContentRequiresDoubleLinebreakAtEnd(element)) {
     subTreeTextContent += DOUBLE_LINE_BREAK;
   }
-  // @ts-expect-error: internal field
+  const dom: HTMLElement & LexicalPrivateDOM = slot.element;
   dom.__lexicalTextContent = subTreeTextContent;
   subTreeTextContent = previousSubTreeTextContent + subTreeTextContent;
 }
 
+type LastChildState = 'line-break' | 'decorator' | 'empty';
 function isLastChildLineBreakOrDecorator(
-  childKey: NodeKey,
+  element: null | ElementNode,
   nodeMap: NodeMap,
-): boolean {
-  const node = nodeMap.get(childKey);
-  return $isLineBreakNode(node) || ($isDecoratorNode(node) && node.isInline());
+): null | LastChildState {
+  if (element) {
+    const lastKey = element.__last;
+    if (lastKey) {
+      const node = nodeMap.get(lastKey);
+      if (node) {
+        return $isLineBreakNode(node)
+          ? 'line-break'
+          : $isDecoratorNode(node) && node.isInline()
+          ? 'decorator'
+          : null;
+      }
+    }
+    return 'empty';
+  }
+  return null;
 }
 
 // If we end an element with a LineBreakNode, then we need to add an additional <br>
 function reconcileElementTerminatingLineBreak(
   prevElement: null | ElementNode,
   nextElement: ElementNode,
-  dom: HTMLElement,
+  dom: HTMLElement & LexicalPrivateDOM,
 ): void {
-  const prevLineBreak =
-    prevElement !== null &&
-    (prevElement.__size === 0 ||
-      isLastChildLineBreakOrDecorator(
-        prevElement.__last as NodeKey,
-        activePrevNodeMap,
-      ));
-  const nextLineBreak =
-    nextElement.__size === 0 ||
-    isLastChildLineBreakOrDecorator(
-      nextElement.__last as NodeKey,
-      activeNextNodeMap,
-    );
-
-  if (prevLineBreak) {
-    if (!nextLineBreak) {
-      // @ts-expect-error: internal field
-      const element = dom.__lexicalLineBreak;
-
-      if (element != null) {
-        try {
-          dom.removeChild(element);
-        } catch (error) {
-          if (typeof error === 'object' && error != null) {
-            const msg = `${error.toString()} Parent: ${dom.tagName}, child: ${
-              element.tagName
-            }.`;
-            throw new Error(msg);
-          } else {
-            throw error;
-          }
-        }
-      }
-
-      // @ts-expect-error: internal field
-      dom.__lexicalLineBreak = null;
-    }
-  } else if (nextLineBreak) {
-    const element = document.createElement('br');
-    // @ts-expect-error: internal field
-    dom.__lexicalLineBreak = element;
-    dom.appendChild(element);
+  const prevLineBreak = isLastChildLineBreakOrDecorator(
+    prevElement,
+    activePrevNodeMap,
+  );
+  const nextLineBreak = isLastChildLineBreakOrDecorator(
+    nextElement,
+    activeNextNodeMap,
+  );
+  if (prevLineBreak !== nextLineBreak) {
+    nextElement.getDOMSlot(dom).setManagedLineBreak(nextLineBreak);
   }
 }
 
@@ -388,12 +355,13 @@ function reconcileParagraphStyle(element: ElementNode): void {
   }
 }
 
-function reconcileBlockDirection(element: ElementNode, dom: HTMLElement): void {
+function reconcileBlockDirection(
+  element: ElementNode,
+  dom: HTMLElement & LexicalPrivateDOM,
+): void {
   const previousSubTreeDirectionTextContent: string =
-    // @ts-expect-error: internal field
-    dom.__lexicalDirTextContent;
-  // @ts-expect-error: internal field
-  const previousDirection: string = dom.__lexicalDir;
+    dom.__lexicalDirTextContent || '';
+  const previousDirection: string = dom.__lexicalDir || '';
 
   if (
     previousSubTreeDirectionTextContent !== subTreeDirectionedTextContent ||
@@ -454,9 +422,7 @@ function reconcileBlockDirection(element: ElementNode, dom: HTMLElement): void {
     }
 
     activeTextDirection = direction;
-    // @ts-expect-error: internal field
     dom.__lexicalDirTextContent = subTreeDirectionedTextContent;
-    // @ts-expect-error: internal field
     dom.__lexicalDir = direction;
   }
 }
@@ -470,7 +436,7 @@ function $reconcileChildrenWithDirection(
   subTreeDirectionedTextContent = '';
   subTreeTextFormat = null;
   subTreeTextStyle = '';
-  $reconcileChildren(prevElement, nextElement, dom);
+  $reconcileChildren(prevElement, nextElement, nextElement.getDOMSlot(dom));
   reconcileBlockDirection(nextElement, dom);
   reconcileParagraphFormat(nextElement);
   reconcileParagraphStyle(nextElement);
@@ -497,21 +463,22 @@ function createChildrenArray(
 function $reconcileChildren(
   prevElement: ElementNode,
   nextElement: ElementNode,
-  dom: HTMLElement,
+  slot: ElementDOMSlot,
 ): void {
   const previousSubTreeTextContent = subTreeTextContent;
   const prevChildrenSize = prevElement.__size;
   const nextChildrenSize = nextElement.__size;
   subTreeTextContent = '';
+  const dom: HTMLElement & LexicalPrivateDOM = slot.element;
 
   if (prevChildrenSize === 1 && nextChildrenSize === 1) {
-    const prevFirstChildKey = prevElement.__first as NodeKey;
-    const nextFrstChildKey = nextElement.__first as NodeKey;
-    if (prevFirstChildKey === nextFrstChildKey) {
+    const prevFirstChildKey: NodeKey = prevElement.__first!;
+    const nextFirstChildKey: NodeKey = nextElement.__first!;
+    if (prevFirstChildKey === nextFirstChildKey) {
       $reconcileNode(prevFirstChildKey, dom);
     } else {
       const lastDOM = getPrevElementByKeyOrThrow(prevFirstChildKey);
-      const replacementDOM = $createNode(nextFrstChildKey, null, null);
+      const replacementDOM = $createNode(nextFirstChildKey, null);
       try {
         dom.replaceChild(replacementDOM, lastDOM);
       } catch (error) {
@@ -520,7 +487,7 @@ function $reconcileChildren(
             dom.tagName
           }, new child: {tag: ${
             replacementDOM.tagName
-          } key: ${nextFrstChildKey}}, old child: {tag: ${
+          } key: ${nextFirstChildKey}}, old child: {tag: ${
             lastDOM.tagName
           }, key: ${prevFirstChildKey}}.`;
           throw new Error(msg);
@@ -530,7 +497,7 @@ function $reconcileChildren(
       }
       destroyNode(prevFirstChildKey, null);
     }
-    const nextChildNode = activeNextNodeMap.get(nextFrstChildKey);
+    const nextChildNode = activeNextNodeMap.get(nextFirstChildKey);
     if ($isTextNode(nextChildNode)) {
       if (subTreeTextFormat === null) {
         subTreeTextFormat = nextChildNode.getFormat();
@@ -542,6 +509,14 @@ function $reconcileChildren(
   } else {
     const prevChildren = createChildrenArray(prevElement, activePrevNodeMap);
     const nextChildren = createChildrenArray(nextElement, activeNextNodeMap);
+    invariant(
+      prevChildren.length === prevChildrenSize,
+      '$reconcileChildren: prevChildren.length !== prevChildrenSize',
+    );
+    invariant(
+      nextChildren.length === nextChildrenSize,
+      '$reconcileChildren: nextChildren.length !== nextChildrenSize',
+    );
 
     if (prevChildrenSize === 0) {
       if (nextChildrenSize !== 0) {
@@ -550,15 +525,16 @@ function $reconcileChildren(
           nextElement,
           0,
           nextChildrenSize - 1,
-          dom,
-          null,
+          slot,
         );
       }
     } else if (nextChildrenSize === 0) {
       if (prevChildrenSize !== 0) {
-        // @ts-expect-error: internal field
-        const lexicalLineBreak = dom.__lexicalLineBreak;
-        const canUseFastPath = lexicalLineBreak == null;
+        const canUseFastPath =
+          slot.after == null &&
+          slot.before == null &&
+          (slot.element as HTMLElement & LexicalPrivateDOM)
+            .__lexicalLineBreak == null;
         destroyChildren(
           prevChildren,
           0,
@@ -578,7 +554,7 @@ function $reconcileChildren(
         nextChildren,
         prevChildrenSize,
         nextChildrenSize,
-        dom,
+        slot,
       );
     }
   }
@@ -587,7 +563,6 @@ function $reconcileChildren(
     subTreeTextContent += DOUBLE_LINE_BREAK;
   }
 
-  // @ts-expect-error: internal field
   dom.__lexicalTextContent = subTreeTextContent;
   subTreeTextContent = previousSubTreeTextContent + subTreeTextContent;
 }
@@ -610,14 +585,16 @@ function $reconcileNode(
     treatAllNodesAsDirty ||
     activeDirtyLeaves.has(key) ||
     activeDirtyElements.has(key);
-  const dom = getElementByKeyOrThrow(activeEditor, key);
+  const dom: HTMLElement & LexicalPrivateDOM = getElementByKeyOrThrow(
+    activeEditor,
+    key,
+  );
 
   // If the node key points to the same instance in both states
   // and isn't dirty, we just update the text content cache
   // and return the existing DOM Node.
   if (prevNode === nextNode && !isDirty) {
     if ($isElementNode(prevNode)) {
-      // @ts-expect-error: internal field
       const previousSubTreeTextContent = dom.__lexicalTextContent;
 
       if (previousSubTreeTextContent !== undefined) {
@@ -625,7 +602,6 @@ function $reconcileNode(
         editorTextContent += previousSubTreeTextContent;
       }
 
-      // @ts-expect-error: internal field
       const previousSubTreeDirectionTextContent = dom.__lexicalDirTextContent;
 
       if (previousSubTreeDirectionTextContent !== undefined) {
@@ -658,7 +634,7 @@ function $reconcileNode(
 
   // Update node. If it returns true, we need to unmount and re-create the node
   if (nextNode.updateDOM(prevNode, dom, activeEditorConfig)) {
-    const replacementDOM = $createNode(key, null, null);
+    const replacementDOM = $createNode(key, null);
 
     if (parentDOM === null) {
       invariant(false, 'reconcileNode: parentDOM is null');
@@ -745,10 +721,6 @@ function reconcileDecorator(key: NodeKey, decorator: unknown): void {
   pendingDecorators[key] = decorator;
 }
 
-function getFirstChild(element: HTMLElement): Node | null {
-  return element.firstChild;
-}
-
 function getNextSibling(element: HTMLElement): Node | null {
   let nextSibling = element.nextSibling;
   if (
@@ -766,13 +738,13 @@ function $reconcileNodeChildren(
   nextChildren: Array<NodeKey>,
   prevChildrenLength: number,
   nextChildrenLength: number,
-  dom: HTMLElement,
+  slot: ElementDOMSlot,
 ): void {
   const prevEndIndex = prevChildrenLength - 1;
   const nextEndIndex = nextChildrenLength - 1;
   let prevChildrenSet: Set<NodeKey> | undefined;
   let nextChildrenSet: Set<NodeKey> | undefined;
-  let siblingDOM: null | Node = getFirstChild(dom);
+  let siblingDOM: null | Node = slot.getFirstChild();
   let prevIndex = 0;
   let nextIndex = 0;
 
@@ -781,7 +753,7 @@ function $reconcileNodeChildren(
     const nextKey = nextChildren[nextIndex];
 
     if (prevKey === nextKey) {
-      siblingDOM = getNextSibling($reconcileNode(nextKey, dom));
+      siblingDOM = getNextSibling($reconcileNode(nextKey, slot.element));
       prevIndex++;
       nextIndex++;
     } else {
@@ -799,26 +771,21 @@ function $reconcileNodeChildren(
       if (!nextHasPrevKey) {
         // Remove prev
         siblingDOM = getNextSibling(getPrevElementByKeyOrThrow(prevKey));
-        destroyNode(prevKey, dom);
+        destroyNode(prevKey, slot.element);
         prevIndex++;
       } else if (!prevHasNextKey) {
         // Create next
-        $createNode(nextKey, dom, siblingDOM);
+        $createNode(nextKey, slot.withBefore(siblingDOM));
         nextIndex++;
       } else {
         // Move next
         const childDOM = getElementByKeyOrThrow(activeEditor, nextKey);
 
         if (childDOM === siblingDOM) {
-          siblingDOM = getNextSibling($reconcileNode(nextKey, dom));
+          siblingDOM = getNextSibling($reconcileNode(nextKey, slot.element));
         } else {
-          if (siblingDOM != null) {
-            dom.insertBefore(childDOM, siblingDOM);
-          } else {
-            dom.appendChild(childDOM);
-          }
-
-          $reconcileNode(nextKey, dom);
+          slot.withBefore(siblingDOM).insertChild(childDOM);
+          $reconcileNode(nextKey, slot.element);
         }
 
         prevIndex++;
@@ -851,11 +818,10 @@ function $reconcileNodeChildren(
       nextElement,
       nextIndex,
       nextEndIndex,
-      dom,
-      insertDOM,
+      slot.withBefore(insertDOM),
     );
   } else if (removeOldChildren && !appendNewChildren) {
-    destroyChildren(prevChildren, prevIndex, prevEndIndex, dom);
+    destroyChildren(prevChildren, prevIndex, prevEndIndex, slot.element);
   }
 }
 
@@ -923,8 +889,7 @@ export function storeDOMWithKey(
   editor: LexicalEditor,
 ): void {
   const keyToDOMMap = editor._keyToDOMMap;
-  // @ts-ignore We intentionally add this to the Node.
-  dom['__lexicalKey_' + editor._key] = key;
+  setNodeKeyOnDOMNode(dom, editor, key);
   keyToDOMMap.set(key, dom);
 }
 
diff --git a/packages/lexical/src/LexicalSelection.ts b/packages/lexical/src/LexicalSelection.ts
index 3af4b30d0db..fb7a62dbea0 100644
--- a/packages/lexical/src/LexicalSelection.ts
+++ b/packages/lexical/src/LexicalSelection.ts
@@ -2109,10 +2109,29 @@ function $internalResolveSelectionPoint(
         return null;
       }
       if ($isElementNode(resolvedElement)) {
-        resolvedOffset = Math.min(
-          resolvedElement.getChildrenSize(),
-          resolvedOffset,
+        const elementDOM = editor.getElementByKey(resolvedElement.getKey());
+        invariant(
+          elementDOM !== null,
+          '$internalResolveSelectionPoint: node in DOM but not keyToDOMMap',
         );
+        const slot = resolvedElement.getDOMSlot(elementDOM);
+        [resolvedElement, resolvedOffset] = slot.resolveChildIndex(
+          resolvedElement,
+          elementDOM,
+          dom,
+          offset,
+        );
+        // This is just a typescript workaround, it is true but lost due to mutability
+        invariant(
+          $isElementNode(resolvedElement),
+          '$internalResolveSelectionPoint: resolvedElement is not an ElementNode',
+        );
+        if (
+          moveSelectionToEnd &&
+          resolvedOffset >= resolvedElement.getChildrenSize()
+        ) {
+          resolvedOffset = Math.max(0, resolvedElement.getChildrenSize() - 1);
+        }
         let child = resolvedElement.getChildAtIndex(resolvedOffset);
         if (
           $isElementNode(child) &&
@@ -2140,7 +2159,11 @@ function $internalResolveSelectionPoint(
           moveSelectionToEnd &&
           !hasBlockCursor
         ) {
-          resolvedOffset++;
+          invariant($isElementNode(resolvedElement), 'invariant');
+          resolvedOffset = Math.min(
+            resolvedElement.getChildrenSize(),
+            resolvedOffset + 1,
+          );
         }
       } else {
         const index = resolvedElement.getIndexWithinParent();
@@ -2297,6 +2320,9 @@ function $internalResolveSelectionPoints(
   if (resolvedAnchorPoint === null) {
     return null;
   }
+  if (__DEV__) {
+    $validatePoint(editor, 'anchor', resolvedAnchorPoint);
+  }
   const resolvedFocusPoint = $internalResolveSelectionPoint(
     focusDOM,
     focusOffset,
@@ -2306,6 +2332,9 @@ function $internalResolveSelectionPoints(
   if (resolvedFocusPoint === null) {
     return null;
   }
+  if (__DEV__) {
+    $validatePoint(editor, 'focus', resolvedAnchorPoint);
+  }
   if (
     resolvedAnchorPoint.type === 'element' &&
     resolvedFocusPoint.type === 'element'
@@ -2475,6 +2504,51 @@ export function $internalCreateRangeSelection(
   );
 }
 
+function $validatePoint(
+  editor: LexicalEditor,
+  name: 'anchor' | 'focus',
+  point: PointType,
+): void {
+  const node = $getNodeByKey(point.key);
+  invariant(
+    node !== undefined,
+    '$validatePoint: %s key %s not found in current editorState',
+    name,
+    point.key,
+  );
+  if (point.type === 'text') {
+    invariant(
+      $isTextNode(node),
+      '$validatePoint: %s key %s is not a TextNode',
+      name,
+      point.key,
+    );
+    const size = node.getTextContentSize();
+    invariant(
+      point.offset <= size,
+      '$validatePoint: %s point.offset > node.getTextContentSize() (%s > %s)',
+      name,
+      String(point.offset),
+      String(size),
+    );
+  } else {
+    invariant(
+      $isElementNode(node),
+      '$validatePoint: %s key %s is not an ElementNode',
+      name,
+      point.key,
+    );
+    const size = node.getChildrenSize();
+    invariant(
+      point.offset <= size,
+      '$validatePoint: %s point.offset > node.getChildrenSize() (%s > %s)',
+      name,
+      String(point.offset),
+      String(size),
+    );
+  }
+}
+
 export function $getSelection(): null | BaseSelection {
   const editorState = getActiveEditorState();
   return editorState._selection;
diff --git a/packages/lexical/src/LexicalUtils.ts b/packages/lexical/src/LexicalUtils.ts
index b1a409a9f36..a4a3af63118 100644
--- a/packages/lexical/src/LexicalUtils.ts
+++ b/packages/lexical/src/LexicalUtils.ts
@@ -20,7 +20,12 @@ import type {
   Spread,
 } from './LexicalEditor';
 import type {EditorState} from './LexicalEditorState';
-import type {LexicalNode, NodeKey, NodeMap} from './LexicalNode';
+import type {
+  LexicalNode,
+  LexicalPrivateDOM,
+  NodeKey,
+  NodeMap,
+} from './LexicalNode';
 import type {
   BaseSelection,
   PointType,
@@ -441,14 +446,30 @@ export function $getNodeFromDOMNode(
   editorState?: EditorState,
 ): LexicalNode | null {
   const editor = getActiveEditor();
-  // @ts-ignore We intentionally add this to the Node.
-  const key = dom[`__lexicalKey_${editor._key}`];
+  const key = getNodeKeyFromDOMNode(dom, editor);
   if (key !== undefined) {
     return $getNodeByKey(key, editorState);
   }
   return null;
 }
 
+export function setNodeKeyOnDOMNode(
+  dom: Node,
+  editor: LexicalEditor,
+  key: NodeKey,
+) {
+  const prop = `__lexicalKey_${editor._key}`;
+  (dom as Node & Record<typeof prop, NodeKey | undefined>)[prop] = key;
+}
+
+export function getNodeKeyFromDOMNode(
+  dom: Node,
+  editor: LexicalEditor,
+): NodeKey | undefined {
+  const prop = `__lexicalKey_${editor._key}`;
+  return (dom as Node & Record<typeof prop, NodeKey | undefined>)[prop];
+}
+
 export function $getNearestNodeFromDOMNode(
   startingDOM: Node,
   editorState?: EditorState,
@@ -537,7 +558,7 @@ export function $flushMutations(): void {
 
 export function $getNodeFromDOM(dom: Node): null | LexicalNode {
   const editor = getActiveEditor();
-  const nodeKey = getNodeKeyFromDOM(dom, editor);
+  const nodeKey = getNodeKeyFromDOMTree(dom, editor);
   if (nodeKey === null) {
     const rootElement = editor.getRootElement();
     if (dom === rootElement) {
@@ -555,15 +576,14 @@ export function getTextNodeOffset(
   return moveSelectionToEnd ? node.getTextContentSize() : 0;
 }
 
-function getNodeKeyFromDOM(
+function getNodeKeyFromDOMTree(
   // Note that node here refers to a DOM Node, not an Lexical Node
   dom: Node,
   editor: LexicalEditor,
 ): NodeKey | null {
   let node: Node | null = dom;
   while (node != null) {
-    // @ts-ignore We intentionally add this to the Node.
-    const key: NodeKey = node[`__lexicalKey_${editor._key}`];
+    const key = getNodeKeyFromDOMNode(node, editor);
     if (key !== undefined) {
       return key;
     }
@@ -1562,13 +1582,11 @@ export function updateDOMBlockCursorElement(
       }
     } else {
       const child = elementNode.getChildAtIndex(offset);
-      if (needsBlockCursor(child)) {
-        const sibling = (child as LexicalNode).getPreviousSibling();
+      if (child !== null && needsBlockCursor(child)) {
+        const sibling = child.getPreviousSibling();
         if (sibling === null || needsBlockCursor(sibling)) {
           isBlockCursor = true;
-          insertBeforeElement = editor.getElementByKey(
-            (child as LexicalNode).__key,
-          );
+          insertBeforeElement = editor.getElementByKey(child.__key);
         }
       }
     }
@@ -1842,3 +1860,24 @@ export function setNodeIndentFromDOM(
   const indent = indentSize / 40;
   elementNode.setIndent(indent);
 }
+
+/**
+ * @internal
+ *
+ * Mark this node as unmanaged by lexical's mutation observer like
+ * decorator nodes
+ */
+export function setDOMUnmanaged(elementDom: HTMLElement): void {
+  const el: HTMLElement & LexicalPrivateDOM = elementDom;
+  el.__lexicalUnmanaged = true;
+}
+
+/**
+ * @internal
+ *
+ * True if this DOM node was marked with {@link setDOMUnmanaged}
+ */
+export function isDOMUnmanaged(elementDom: Node): boolean {
+  const el: Node & LexicalPrivateDOM = elementDom;
+  return el.__lexicalUnmanaged === true;
+}
diff --git a/packages/lexical/src/__tests__/utils/index.tsx b/packages/lexical/src/__tests__/utils/index.tsx
index 5292fdd5a5f..dff3b2adaee 100644
--- a/packages/lexical/src/__tests__/utils/index.tsx
+++ b/packages/lexical/src/__tests__/utils/index.tsx
@@ -796,8 +796,25 @@ export function html(
   return output;
 }
 
-export function expectHtmlToBeEqual(expected: string, actual: string): void {
-  expect(prettifyHtml(expected)).toBe(prettifyHtml(actual));
+export function polyfillContentEditable() {
+  const div = document.createElement('div');
+  div.contentEditable = 'true';
+  if (/contenteditable/.test(div.outerHTML)) {
+    return;
+  }
+  Object.defineProperty(HTMLElement.prototype, 'contentEditable', {
+    get() {
+      return this.getAttribute('contenteditable');
+    },
+
+    set(value) {
+      this.setAttribute('contenteditable', value);
+    },
+  });
+}
+
+export function expectHtmlToBeEqual(actual: string, expected: string): void {
+  expect(prettifyHtml(actual)).toBe(prettifyHtml(expected));
 }
 
 export function prettifyHtml(s: string): string {
diff --git a/packages/lexical/src/index.ts b/packages/lexical/src/index.ts
index d5c94e23453..2898a73a9b7 100644
--- a/packages/lexical/src/index.ts
+++ b/packages/lexical/src/index.ts
@@ -58,6 +58,7 @@ export type {
   TextPointType as TextPoint,
 } from './LexicalSelection';
 export type {
+  ElementDOMSlot,
   ElementFormatType,
   SerializedElementNode,
 } from './nodes/LexicalElementNode';
@@ -182,6 +183,7 @@ export {
   getNearestEditorFromDOMNode,
   isBlockDomNode,
   isDocumentFragment,
+  isDOMUnmanaged,
   isHTMLAnchorElement,
   isHTMLElement,
   isInlineDomNode,
@@ -189,6 +191,7 @@ export {
   isSelectionCapturedInDecoratorInput,
   isSelectionWithinEditor,
   resetRandomKey,
+  setDOMUnmanaged,
   setNodeIndentFromDOM,
 } from './LexicalUtils';
 export {ArtificialNode__DO_NOT_USE} from './nodes/ArtificialNode';
diff --git a/packages/lexical/src/nodes/LexicalElementNode.ts b/packages/lexical/src/nodes/LexicalElementNode.ts
index 65bc77aec5a..285a546545a 100644
--- a/packages/lexical/src/nodes/LexicalElementNode.ts
+++ b/packages/lexical/src/nodes/LexicalElementNode.ts
@@ -8,6 +8,7 @@
 
 import type {
   DOMExportOutput,
+  LexicalPrivateDOM,
   NodeKey,
   SerializedLexicalNode,
 } from '../LexicalNode';
@@ -18,6 +19,7 @@ import type {
 } from '../LexicalSelection';
 import type {KlassConstructor, LexicalEditor, Spread} from 'lexical';
 
+import {IS_IOS, IS_SAFARI} from 'shared/environment';
 import invariant from 'shared/invariant';
 
 import {$isTextNode, TextNode} from '../index';
@@ -68,6 +70,225 @@ export interface ElementNode {
   getTopLevelElementOrThrow(): ElementNode;
 }
 
+/**
+ * A utility class for managing the DOM children of an ElementNode
+ */
+export class ElementDOMSlot {
+  element: HTMLElement;
+  before: Node | null;
+  after: Node | null;
+  constructor(
+    /** The element returned by createDOM */
+    element: HTMLElement,
+    /** All managed children will be inserted before this node, if defined */
+    before?: Node | undefined | null,
+    /** All managed children will be inserted after this node, if defined */
+    after?: Node | undefined | null,
+  ) {
+    this.element = element;
+    this.before = before || null;
+    this.after = after || null;
+  }
+  /**
+   * Return a new ElementDOMSlot where all managed children will be inserted before this node
+   */
+  withBefore(before: Node | undefined | null): ElementDOMSlot {
+    return new ElementDOMSlot(this.element, before, this.after);
+  }
+  /**
+   * Return a new ElementDOMSlot where all managed children will be inserted after this node
+   */
+  withAfter(after: Node | undefined | null): ElementDOMSlot {
+    return new ElementDOMSlot(this.element, this.before, after);
+  }
+  /**
+   * Return a new ElementDOMSlot with an updated root element
+   */
+  withElement(element: HTMLElement): ElementDOMSlot {
+    return new ElementDOMSlot(element, this.before, this.after);
+  }
+  /**
+   * Insert the given child before this.before and any reconciler managed line break node,
+   * or append it if this.before is not defined
+   */
+  insertChild(dom: Node): this {
+    const before = this.before || this.getManagedLineBreak();
+    invariant(
+      before === null || before.parentElement === this.element,
+      'ElementDOMSlot.insertChild: before is not in element',
+    );
+    this.element.insertBefore(dom, before);
+    return this;
+  }
+  /**
+   * Remove the managed child from this container, will throw if it was not already there
+   */
+  removeChild(dom: Node): this {
+    invariant(
+      dom.parentElement === this.element,
+      'ElementDOMSlot.removeChild: dom is not in element',
+    );
+    this.element.removeChild(dom);
+    return this;
+  }
+  /**
+   * Replace managed child prevDom with dom. Will throw if prevDom is not a child
+   *
+   * @param dom The new node to replace prevDom
+   * @param prevDom the node that will be replaced
+   */
+  replaceChild(dom: Node, prevDom: Node): this {
+    invariant(
+      prevDom.parentElement === this.element,
+      'ElementDOMSlot.replaceChild: prevDom is not in element',
+    );
+    this.element.replaceChild(dom, prevDom);
+    return this;
+  }
+  /**
+   * Returns the first managed child of this node,
+   * which will either be this.after.nextSibling or this.element.firstChild,
+   * and will never be this.before if it is defined.
+   */
+  getFirstChild(): ChildNode | null {
+    const firstChild = this.after
+      ? this.after.nextSibling
+      : this.element.firstChild;
+    return firstChild === this.before ||
+      firstChild === this.getManagedLineBreak()
+      ? null
+      : firstChild;
+  }
+  /**
+   * @internal
+   */
+  getManagedLineBreak(): Exclude<
+    LexicalPrivateDOM['__lexicalLineBreak'],
+    undefined
+  > {
+    const element: HTMLElement & LexicalPrivateDOM = this.element;
+    return element.__lexicalLineBreak || null;
+  }
+  /** @internal */
+  setManagedLineBreak(
+    lineBreakType: null | 'empty' | 'line-break' | 'decorator',
+  ): void {
+    if (lineBreakType === null) {
+      this.removeManagedLineBreak();
+    } else {
+      const webkitHack = lineBreakType === 'decorator' && (IS_IOS || IS_SAFARI);
+      this.insertManagedLineBreak(webkitHack);
+    }
+  }
+
+  /** @internal */
+  removeManagedLineBreak(): void {
+    const br = this.getManagedLineBreak();
+    if (br) {
+      const element: HTMLElement & LexicalPrivateDOM = this.element;
+      const sibling = br.nodeName === 'IMG' ? br.nextSibling : null;
+      if (sibling) {
+        element.removeChild(sibling);
+      }
+      element.removeChild(br);
+      element.__lexicalLineBreak = undefined;
+    }
+  }
+  /** @internal */
+  insertManagedLineBreak(webkitHack: boolean): void {
+    const prevBreak = this.getManagedLineBreak();
+    if (prevBreak) {
+      if (webkitHack === (prevBreak.nodeName === 'IMG')) {
+        return;
+      }
+      this.removeManagedLineBreak();
+    }
+    const element: HTMLElement & LexicalPrivateDOM = this.element;
+    const before = this.before;
+    const br = document.createElement('br');
+    element.insertBefore(br, before);
+    if (webkitHack) {
+      const img = document.createElement('img');
+      img.setAttribute('data-lexical-linebreak', 'true');
+      img.style.cssText =
+        'display: inline !important; border: 0px !important; margin: 0px !important;';
+      img.alt = '';
+      element.insertBefore(img, br);
+      element.__lexicalLineBreak = img;
+    } else {
+      element.__lexicalLineBreak = br;
+    }
+  }
+
+  /**
+   * @internal
+   *
+   * Returns the offset of the first child
+   */
+  getFirstChildOffset(): number {
+    let i = 0;
+    for (let node = this.after; node !== null; node = node.previousSibling) {
+      i++;
+    }
+    return i;
+  }
+
+  /**
+   * @internal
+   */
+  resolveChildIndex(
+    element: ElementNode,
+    elementDOM: HTMLElement,
+    initialDOM: Node,
+    initialOffset: number,
+  ): [node: ElementNode, idx: number] {
+    if (initialDOM === this.element) {
+      const firstChildOffset = this.getFirstChildOffset();
+      return [
+        element,
+        Math.min(
+          firstChildOffset + element.getChildrenSize(),
+          Math.max(firstChildOffset, initialOffset),
+        ),
+      ];
+    }
+    // The resolved offset must be before or after the children
+    const initialPath = indexPath(elementDOM, initialDOM);
+    initialPath.push(initialOffset);
+    const elementPath = indexPath(elementDOM, this.element);
+    let offset = element.getIndexWithinParent();
+    for (let i = 0; i < elementPath.length; i++) {
+      const target = initialPath[i];
+      const source = elementPath[i];
+      if (target === undefined || target < source) {
+        break;
+      } else if (target > source) {
+        offset += 1;
+        break;
+      }
+    }
+    return [element.getParentOrThrow(), offset];
+  }
+}
+
+function indexPath(root: HTMLElement, child: Node): number[] {
+  const path: number[] = [];
+  let node: Node | null = child;
+  for (; node !== root && node !== null; node = child.parentNode) {
+    let i = 0;
+    for (
+      let sibling = node.previousSibling;
+      sibling !== null;
+      sibling = node.previousSibling
+    ) {
+      i++;
+    }
+    path.push(i);
+  }
+  invariant(node === root, 'indexPath: root is not a parent of child');
+  return path.reverse();
+}
+
 /** @noInheritDoc */
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class ElementNode extends LexicalNode {
@@ -406,6 +627,13 @@ export class ElementNode extends LexicalNode {
     const nodesToInsertLength = nodesToInsert.length;
     const oldSize = this.getChildrenSize();
     const writableSelf = this.getWritable();
+    invariant(
+      start + deleteCount <= oldSize,
+      'ElementNode.splice: start + deleteCount > oldSize (%s + %s > %s)',
+      String(start),
+      String(deleteCount),
+      String(oldSize),
+    );
     const writableSelfKey = writableSelf.__key;
     const nodesToInsertKeys = [];
     const nodesToRemoveKeys = [];
@@ -528,6 +756,17 @@ export class ElementNode extends LexicalNode {
 
     return writableSelf;
   }
+  /**
+   * @internal
+   *
+   * An experimental API that an ElementNode can override to control where its
+   * children are inserted into the DOM, this is useful to add a wrapping node
+   * or accessory nodes before or after the children. The root of the node returned
+   * by createDOM must still be exactly one HTMLElement.
+   */
+  getDOMSlot(element: HTMLElement): ElementDOMSlot {
+    return new ElementDOMSlot(element);
+  }
   exportDOM(editor: LexicalEditor): DOMExportOutput {
     const {element} = super.exportDOM(editor);
     if (element && isHTMLElement(element)) {
@@ -633,6 +872,32 @@ export class ElementNode extends LexicalNode {
   canMergeWhenEmpty(): boolean {
     return false;
   }
+
+  /** @internal */
+  reconcileObservedMutation(dom: HTMLElement, editor: LexicalEditor): void {
+    const slot = this.getDOMSlot(dom);
+    let currentDOM = slot.getFirstChild();
+    for (
+      let currentNode = this.getFirstChild();
+      currentNode;
+      currentNode = currentNode.getNextSibling()
+    ) {
+      const correctDOM = editor.getElementByKey(currentNode.getKey());
+
+      if (correctDOM === null) {
+        continue;
+      }
+
+      if (currentDOM == null) {
+        slot.insertChild(correctDOM);
+        currentDOM = correctDOM;
+      } else if (currentDOM !== correctDOM) {
+        slot.replaceChild(correctDOM, currentDOM);
+      }
+
+      currentDOM = currentDOM.nextSibling;
+    }
+  }
 }
 
 export function $isElementNode(
diff --git a/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx b/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx
index 21e9ed3c899..6736ce72edc 100644
--- a/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx
+++ b/packages/lexical/src/nodes/__tests__/unit/LexicalElementNode.test.tsx
@@ -7,10 +7,13 @@
  */
 
 import {
+  $applyNodeReplacement,
   $createTextNode,
   $getRoot,
   $getSelection,
   $isRangeSelection,
+  createEditor,
+  ElementDOMSlot,
   ElementNode,
   LexicalEditor,
   LexicalNode,
@@ -25,6 +28,7 @@ import {
   $createTestElementNode,
   createTestEditor,
 } from '../../../__tests__/utils';
+import {SerializedElementNode} from '../../LexicalElementNode';
 
 describe('LexicalElementNode tests', () => {
   let container: HTMLElement;
@@ -633,3 +637,87 @@ describe('LexicalElementNode tests', () => {
     });
   });
 });
+
+describe('getDOMSlot tests', () => {
+  let container: HTMLElement;
+  let editor: LexicalEditor;
+
+  beforeEach(async () => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    editor = createEditor({
+      nodes: [WrapperElementNode],
+      onError: (error) => {
+        throw error;
+      },
+    });
+    editor.setRootElement(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    // @ts-ignore
+    container = null;
+  });
+
+  class WrapperElementNode extends ElementNode {
+    static getType() {
+      return 'wrapper';
+    }
+    static clone(node: WrapperElementNode): WrapperElementNode {
+      return new WrapperElementNode(node.__key);
+    }
+    createDOM() {
+      const el = document.createElement('main');
+      el.appendChild(document.createElement('section'));
+      return el;
+    }
+    updateDOM() {
+      return false;
+    }
+    getDOMSlot(dom: HTMLElement): ElementDOMSlot {
+      return super.getDOMSlot(dom).withElement(dom.querySelector('section')!);
+    }
+    exportJSON(): SerializedElementNode {
+      throw new Error('Not implemented');
+    }
+    static importJSON(): WrapperElementNode {
+      throw new Error('Not implemented');
+    }
+  }
+  function $createWrapperElementNode(): WrapperElementNode {
+    return $applyNodeReplacement(new WrapperElementNode());
+  }
+
+  test('can create wrapper', () => {
+    let wrapper: WrapperElementNode;
+    editor.update(
+      () => {
+        wrapper = $createWrapperElementNode().append(
+          $createTextNode('test text').setMode('token'),
+        );
+        $getRoot().clear().append(wrapper);
+      },
+      {discrete: true},
+    );
+    expect(container.innerHTML).toBe(
+      `<main dir="ltr"><section><span data-lexical-text="true">test text</span></section></main>`,
+    );
+    editor.update(
+      () => {
+        wrapper.append($createTextNode('more text').setMode('token'));
+      },
+      {discrete: true},
+    );
+    expect(container.innerHTML).toBe(
+      `<main dir="ltr"><section><span data-lexical-text="true">test text</span><span data-lexical-text="true">more text</span></section></main>`,
+    );
+    editor.update(
+      () => {
+        wrapper.clear();
+      },
+      {discrete: true},
+    );
+    expect(container.innerHTML).toBe(`<main><section><br></section></main>`);
+  });
+});