Rename GridSelection to TableSelection

facebook · Jan 23, 2024 · e65e7ae · e65e7ae
1 parent 4ea189e
commit e65e7ae
Show file tree

Hide file tree

Showing 12 changed files with 242 additions and 199 deletions.
diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
@@ -20,16 +20,16 @@ import {
   $getTableRowIndexFromTableCellNode,
   $insertTableColumn__EXPERIMENTAL,
   $insertTableRow__EXPERIMENTAL,
-  $isGridSelection,
   $isTableCellNode,
   $isTableRowNode,
+  $isTableSelection,
   $unmergeCell,
   getTableObserverFromTableElement,
-  GridSelection,
   HTMLTableElementWithWithTableSelectionState,
   TableCellHeaderStates,
   TableCellNode,
   TableRowNode,
+  TableSelection,
 } from '@lexical/table';
 import {
   $createParagraphNode,
@@ -48,7 +48,7 @@ import invariant from 'shared/invariant';
 import useModal from '../../hooks/useModal';
 import ColorPicker from '../../ui/ColorPicker';
 
-function computeSelectionCount(selection: GridSelection): {
+function computeSelectionCount(selection: TableSelection): {
   columns: number;
   rows: number;
 } {
@@ -61,7 +61,7 @@ function computeSelectionCount(selection: GridSelection): {
 
 // This is important when merging cells as there is no good way to re-merge weird shapes (a result
 // of selecting merged cells and non-merged)
-function isGridSelectionRectangular(selection: GridSelection): boolean {
+function isTableSelectionRectangular(selection: TableSelection): boolean {
   const nodes = selection.getNodes();
   const currentRows: Array<number> = [];
   let currentRow = null;
@@ -105,8 +105,8 @@ function $canUnmerge(): boolean {
   const selection = $getSelection();
   if (
     ($isRangeSelection(selection) && !selection.isCollapsed()) ||
-    ($isGridSelection(selection) && !selection.anchor.is(selection.focus)) ||
-    (!$isRangeSelection(selection) && !$isGridSelection(selection))
+    ($isTableSelection(selection) && !selection.anchor.is(selection.focus)) ||
+    (!$isRangeSelection(selection) && !$isTableSelection(selection))
   ) {
     return false;
   }
@@ -139,7 +139,7 @@ function $selectLastDescendant(node: ElementNode): void {
 function currentCellBackgroundColor(editor: LexicalEditor): null | string {
   return editor.getEditorState().read(() => {
     const selection = $getSelection();
-    if ($isRangeSelection(selection) || $isGridSelection(selection)) {
+    if ($isRangeSelection(selection) || $isTableSelection(selection)) {
       const [cell] = $getNodeTriplet(selection.anchor);
       if ($isTableCellNode(cell)) {
         return cell.getBackgroundColor();
@@ -200,11 +200,11 @@ function TableActionMenu({
     editor.getEditorState().read(() => {
       const selection = $getSelection();
       // Merge cells
-      if ($isGridSelection(selection)) {
+      if ($isTableSelection(selection)) {
         const currentSelectionCounts = computeSelectionCount(selection);
         updateSelectionCounts(computeSelectionCount(selection));
         setCanMergeCells(
-          isGridSelectionRectangular(selection) &&
+          isTableSelectionRectangular(selection) &&
             (currentSelectionCounts.columns > 1 ||
               currentSelectionCounts.rows > 1),
         );
@@ -295,7 +295,7 @@ function TableActionMenu({
   const mergeTableCellsAtSelection = () => {
     editor.update(() => {
       const selection = $getSelection();
-      if ($isGridSelection(selection)) {
+      if ($isTableSelection(selection)) {
         const {columns, rows} = computeSelectionCount(selection);
         const nodes = selection.getNodes();
         let firstCell: null | TableCellNode = null;
@@ -463,13 +463,13 @@ function TableActionMenu({
     (value: string) => {
       editor.update(() => {
         const selection = $getSelection();
-        if ($isRangeSelection(selection) || $isGridSelection(selection)) {
+        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
           const [cell] = $getNodeTriplet(selection.anchor);
           if ($isTableCellNode(cell)) {
             cell.setBackgroundColor(value);
           }
 
-          if ($isGridSelection(selection)) {
+          if ($isTableSelection(selection)) {
             const nodes = selection.getNodes();
 
             for (let i = 0; i < nodes.length; i++) {

diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
@@ -16,9 +16,9 @@ import {
   $getTableColumnIndexFromTableCellNode,
   $getTableNodeFromLexicalNodeOrThrow,
   $getTableRowIndexFromTableCellNode,
-  $isGridSelection,
   $isTableCellNode,
   $isTableRowNode,
+  $isTableSelection,
   getCellFromTarget,
   TableCellNode,
 } from '@lexical/table';
@@ -69,10 +69,10 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
       SELECTION_CHANGE_COMMAND,
       (payload) => {
         const selection = $getSelection();
-        const isGridSelection = $isGridSelection(selection);
+        const isTableSelection = $isTableSelection(selection);
 
-        if (isSelectingGrid !== isGridSelection) {
-          updateIsSelectingGrid(isGridSelection);
+        if (isSelectingGrid !== isTableSelection) {
+          updateIsSelectingGrid(isTableSelection);
         }
 
         return false;

diff --git a/packages/lexical-react/src/LexicalTablePlugin.ts b/packages/lexical-react/src/LexicalTablePlugin.ts
@@ -15,7 +15,7 @@ import type {NodeKey} from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {
-  $computeGridMap,
+  $computeTableMap,
   $createTableCellNode,
   $createTableNodeWithDimensions,
   $getNodeTriplet,
@@ -151,7 +151,7 @@ export function TablePlugin({
         // When we have rowSpan we have to map the entire Table to understand where the new Cells
         // fit best; let's analyze all Cells at once to save us from further transform iterations
         const [, , gridNode] = $getNodeTriplet(node);
-        const [gridMap] = $computeGridMap(gridNode, node, node);
+        const [gridMap] = $computeTableMap(gridNode, node, node);
         // TODO this function expects Tables to be normalized. Look into this once it exists
         const rowsCount = gridMap.length;
         const columnsCount = gridMap[0].length;

diff --git a/packages/lexical-react/src/LexicalTreeView.tsx b/packages/lexical-react/src/LexicalTreeView.tsx
@@ -19,7 +19,7 @@ import type {
 import {$generateHtmlFromNodes} from '@lexical/html';
 import {$isLinkNode, LinkNode} from '@lexical/link';
 import {$isMarkNode} from '@lexical/mark';
-import {$isGridSelection, GridSelection} from '@lexical/table';
+import {$isTableSelection, TableSelection} from '@lexical/table';
 import {mergeRegister} from '@lexical/utils';
 import {
   $getRoot,
@@ -373,8 +373,8 @@ function printNodeSelection(selection: BaseSelection): string {
   return `: node\n  └ [${Array.from(selection._nodes).join(', ')}]`;
 }
 
-function printGridSelection(selection: GridSelection): string {
-  return `: grid\n  └ { grid: ${selection.gridKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
+function printTableSelection(selection: TableSelection): string {
+  return `: table\n  └ { table: ${selection.tableKey}, anchorCell: ${selection.anchor.key}, focusCell: ${selection.focus.key} }`;
 }
 
 function generateContent(
@@ -427,8 +427,8 @@ function generateContent(
       ? ': null'
       : $isRangeSelection(selection)
       ? printRangeSelection(selection)
-      : $isGridSelection(selection)
-      ? printGridSelection(selection)
+      : $isTableSelection(selection)
+      ? printTableSelection(selection)
       : printNodeSelection(selection);
   });