Table selection keyboard controls

packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs

@@ -264,7 +264,8 @@ test.describe('HTML Tables CopyAndPaste', () => {
       page,
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <table class="PlaygroundEditorTheme__table disable-selection">
+        <table
+          class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
           <tr>
             <th
               class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"

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

@@ -103,7 +103,8 @@ test.describe('Identation', () => {
           <span data-lexical-text="true">code</span>
         </code>
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <table class="PlaygroundEditorTheme__table disable-selection">
+        <table
+          class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
           <tr>
             <th
               class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
@@ -183,7 +184,8 @@ test.describe('Identation', () => {
           style="padding-inline-start: calc(40px)">
           <br />
         </p>
-        <table class="PlaygroundEditorTheme__table disable-selection">
+        <table
+          class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
           <tr>
             <th
               class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
@@ -274,7 +276,8 @@ test.describe('Identation', () => {
           style="padding-inline-start: calc(80px)">
           <br />
         </p>
-        <table class="PlaygroundEditorTheme__table disable-selection">
+        <table
+          class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
           <tr>
             <th
               class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
@@ -359,7 +362,8 @@ test.describe('Identation', () => {
           style="padding-inline-start: calc(40px)">
           <br />
         </p>
-        <table class="PlaygroundEditorTheme__table disable-selection">
+        <table
+          class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
           <tr>
             <th
               class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
@@ -434,7 +438,8 @@ test.describe('Identation', () => {
           <span data-lexical-text="true">code</span>
         </code>
         <p class="PlaygroundEditorTheme__paragraph" style=""><br /></p>
-        <table class="PlaygroundEditorTheme__table disable-selection">
+        <table
+          class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
           <tr>
             <th
               class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"

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

@@ -283,6 +283,7 @@ test.describe('Tables', () => {
     page,
     isPlainText,
     isCollab,
+    browserName,
   }) => {
     await initialize({isCollab, page});
     test.skip(isPlainText);
@@ -308,6 +309,10 @@ test.describe('Tables', () => {
 
     await page.keyboard.down('Shift');
     await page.keyboard.press('ArrowRight');
+    // Firefox range selection spans across cells after two arrow key press
+    if (browserName === 'firefox') {
+      await page.keyboard.press('ArrowRight');
+    }
     await page.keyboard.press('ArrowDown');
     await page.keyboard.up('Shift');
 
@@ -801,6 +806,7 @@ test.describe('Tables', () => {
     page,
     isPlainText,
     isCollab,
+    browserName,
   }) => {
     await initialize({isCollab, page});
     test.skip(isPlainText);
@@ -814,6 +820,10 @@ test.describe('Tables', () => {
 
     await page.keyboard.down('Shift');
     await page.keyboard.press('ArrowRight');
+    // Firefox range selection spans across cells after two arrow key press
+    if (browserName === 'firefox') {
+      await page.keyboard.press('ArrowRight');
+    }
     await page.keyboard.press('ArrowDown');
     await page.keyboard.up('Shift');
 
@@ -1301,7 +1311,8 @@ test.describe('Tables', () => {
       page,
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <table class="PlaygroundEditorTheme__table disable-selection">
+        <table
+          class="PlaygroundEditorTheme__table PlaygroundEditorTheme__tableSelection">
           <tr>
             <th
               class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"

packages/lexical-playground/__tests__/regression/4697-repeated-table-selection.spec.mjs

@@ -8,7 +8,6 @@
 
 import {
   assertGridSelectionCoordinates,
-  assertIsGridSelection,
   click,
   focusEditor,
   initialize,
@@ -47,8 +46,6 @@ test.describe('Regression test #4697', () => {
       false,
     );
 
-    await assertIsGridSelection(page);
-
     await assertGridSelectionCoordinates(page, {
       anchor: {x: 2, y: 1},
       focus: {x: 2, y: 2},

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

@@ -90,7 +90,7 @@ async function exposeLexicalEditor(page) {
   await leftFrame.waitForSelector('.tree-view-output pre');
   await leftFrame.evaluate(() => {
     window.lexicalEditor = document.querySelector(
-      '.tree-view-output pre',
+      '[data-lexical-editor="true"]',
     ).__lexicalEditor;
   });
 }
@@ -202,22 +202,16 @@ async function retryAsync(page, fn, attempts) {
   }
 }
 
-export async function assertIsGridSelection(page, coordinates) {
-  const gridKey = await page.evaluate(() => {
-    const editor = window.lexicalEditor;
-    const editorState = editor.getEditorState();
-    const selection = editorState._selection;
-    return selection.gridKey;
-  });
-
-  expect(gridKey).not.toBeUndefined();
-}
-
 export async function assertGridSelectionCoordinates(page, coordinates) {
-  const {_anchor, _focus} = await page.evaluate(() => {
+  const pageOrFrame = IS_COLLAB ? await page.frame('left') : page;
+
+  const {_anchor, _focus} = await pageOrFrame.evaluate(() => {
     const editor = window.lexicalEditor;
     const editorState = editor.getEditorState();
     const selection = editorState._selection;
+    if (!selection.gridKey) {
+      throw new Error('Expected grid selection');
+    }
     const anchorElement = editor.getElementByKey(selection.anchor.key);
     const focusElement = editor.getElementByKey(selection.focus.key);
     return {
@@ -826,11 +820,7 @@ export async function selectCellsFromTableCords(
   );
 
   // Focus on inside the iFrame or the boundingBox() below returns null.
-  await firstRowFirstColumnCell.click(
-    // This is a test runner quirk. Chrome seems to need two clicks to focus on the
-    // content editable cell before dragging, but Firefox treats it as a double click event.
-    E2E_BROWSER === 'chromium' ? {clickCount: 2} : {},
-  );
+  await firstRowFirstColumnCell.click();
 
   await dragMouse(
     page,

packages/lexical-playground/src/index.css

@@ -1246,23 +1246,6 @@ i.prettier-error {
   background-image: url(images/icons/plug-fill.svg);
 }
 
-table.disable-selection {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-table.disable-selection span::selection {
-  background-color: transparent;
-}
-
-table.disable-selection br::selection {
-  background-color: transparent;
-}
-
 .table-cell-action-button-container {
   position: absolute;
   top: 0;

packages/lexical-playground/src/themes/PlaygroundEditorTheme.css

@@ -125,6 +125,9 @@
   width: calc(100% - 25px);
   margin: 30px 0;
 }
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
 .PlaygroundEditorTheme__tableSelected {
   outline: 2px solid rgb(60, 132, 244);
 }
@@ -135,7 +138,6 @@
   text-align: start;
   padding: 6px 8px;
   position: relative;
-  cursor: default;
   outline: none;
 }
 .PlaygroundEditorTheme__tableCellSortedIndicator {

packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts

@@ -100,6 +100,7 @@ const theme: EditorThemeClasses = {
   tableCellSortedIndicator: 'PlaygroundEditorTheme__tableCellSortedIndicator',
   tableResizeRuler: 'PlaygroundEditorTheme__tableCellResizeRuler',
   tableSelected: 'PlaygroundEditorTheme__tableSelected',
+  tableSelection: 'PlaygroundEditorTheme__tableSelection',
   text: {
     bold: 'PlaygroundEditorTheme__textBold',
     code: 'PlaygroundEditorTheme__textCode',

packages/lexical-react/src/LexicalTablePlugin.ts

@@ -55,9 +55,11 @@ function $insertFirst(parent: ElementNode, node: LexicalNode): void {
 export function TablePlugin({
   hasCellMerge = true,
   hasCellBackgroundColor = true,
+  hasTabHandler = true,
 }: {
   hasCellMerge?: boolean;
   hasCellBackgroundColor?: boolean;
+  hasTabHandler?: boolean;
 }): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
 
@@ -103,6 +105,7 @@ export function TablePlugin({
           tableNode,
           tableElement,
           editor,
+          hasTabHandler,
         );
         tableSelections.set(nodeKey, tableSelection);
       }
@@ -150,7 +153,7 @@ export function TablePlugin({
         tableSelection.removeListeners();
       }
     };
-  }, [editor]);
+  }, [editor, hasTabHandler]);
 
   // Unmerge cells when the feature isn't enabled
   useEffect(() => {

packages/lexical-table/src/LexicalTableSelection.ts

@@ -13,6 +13,10 @@ import type {
   TextFormatType,
 } from 'lexical';
 
+import {
+  addClassNamesToElement,
+  removeClassNamesFromElement,
+} from '@lexical/utils';
 import {
   $createParagraphNode,
   $createRangeSelection,
@@ -37,8 +41,6 @@ import {
   getTableGrid,
 } from './LexicalTableSelectionHelpers';
 
-export const BACKGROUND_COLOR = 'background-color';
-export const BACKGROUND_IMAGE = 'background-image';
 export type Cell = {
   elem: HTMLElement;
   highlighted: boolean;
@@ -197,6 +199,10 @@ export class TableSelection {
         throw new Error('Expected to find TableElement in DOM');
       }
 
+      removeClassNamesFromElement(
+        tableElement,
+        editor._config.theme.tableSelection,
+      );
       tableElement.classList.remove('disable-selection');
       this.hasHijackedSelectionStyles = false;
     });
@@ -211,7 +217,7 @@ export class TableSelection {
         throw new Error('Expected to find TableElement in DOM');
       }
 
-      tableElement.classList.add('disable-selection');
+      addClassNamesToElement(tableElement, editor._config.theme.tableSelection);
       this.hasHijackedSelectionStyles = true;
     });
   }