Move Grid to @lexical/table

packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx

@@ -6,28 +6,27 @@
  *
  */
 
-import type {
-  DEPRECATED_GridCellNode,
-  ElementNode,
-  LexicalEditor,
-} from 'lexical';
+import type {ElementNode, LexicalEditor} from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import useLexicalEditable from '@lexical/react/useLexicalEditable';
 import {
   $deleteTableColumn__EXPERIMENTAL,
   $deleteTableRow__EXPERIMENTAL,
+  $getNodeTriplet,
   $getTableCellNodeFromLexicalNode,
   $getTableColumnIndexFromTableCellNode,
   $getTableNodeFromLexicalNodeOrThrow,
   $getTableRowIndexFromTableCellNode,
   $insertTableColumn__EXPERIMENTAL,
   $insertTableRow__EXPERIMENTAL,
+  $isGridCellNode,
   $isGridSelection,
   $isTableCellNode,
   $isTableRowNode,
   $unmergeCell,
   getTableSelectionFromTableElement,
+  GridCellNode,
   GridSelection,
   HTMLTableElementWithWithTableSelectionState,
   TableCellHeaderStates,
@@ -42,8 +41,6 @@ import {
   $isParagraphNode,
   $isRangeSelection,
   $isTextNode,
-  DEPRECATED_$getNodeTriplet,
-  DEPRECATED_$isGridCellNode,
 } from 'lexical';
 import * as React from 'react';
 import {ReactPortal, useCallback, useEffect, useRef, useState} from 'react';
@@ -115,11 +112,11 @@ function $canUnmerge(): boolean {
   ) {
     return false;
   }
-  const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
+  const [cell] = $getNodeTriplet(selection.anchor);
   return cell.__colSpan > 1 || cell.__rowSpan > 1;
 }
 
-function $cellContainsEmptyParagraph(cell: DEPRECATED_GridCellNode): boolean {
+function $cellContainsEmptyParagraph(cell: GridCellNode): boolean {
   if (cell.getChildrenSize() !== 1) {
     return false;
   }
@@ -145,7 +142,7 @@ function currentCellBackgroundColor(editor: LexicalEditor): null | string {
   return editor.getEditorState().read(() => {
     const selection = $getSelection();
     if ($isRangeSelection(selection) || $isGridSelection(selection)) {
-      const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
+      const [cell] = $getNodeTriplet(selection.anchor);
       if ($isTableCellNode(cell)) {
         return cell.getBackgroundColor();
       }
@@ -303,10 +300,10 @@ function TableActionMenu({
       if ($isGridSelection(selection)) {
         const {columns, rows} = computeSelectionCount(selection);
         const nodes = selection.getNodes();
-        let firstCell: null | DEPRECATED_GridCellNode = null;
+        let firstCell: null | GridCellNode = null;
         for (let i = 0; i < nodes.length; i++) {
           const node = nodes[i];
-          if (DEPRECATED_$isGridCellNode(node)) {
+          if ($isGridCellNode(node)) {
             if (firstCell === null) {
               node.setColSpan(columns).setRowSpan(rows);
               firstCell = node;
@@ -318,7 +315,7 @@ function TableActionMenu({
               ) {
                 firstChild.remove();
               }
-            } else if (DEPRECATED_$isGridCellNode(firstCell)) {
+            } else if ($isGridCellNode(firstCell)) {
               const isEmpty = $cellContainsEmptyParagraph(node);
               if (!isEmpty) {
                 firstCell.append(...node.getChildren());
@@ -469,7 +466,7 @@ function TableActionMenu({
       editor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection) || $isGridSelection(selection)) {
-          const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
+          const [cell] = $getNodeTriplet(selection.anchor);
           if ($isTableCellNode(cell)) {
             cell.setBackgroundColor(value);
           }

packages/lexical-react/src/LexicalTablePlugin.ts

@@ -7,16 +7,20 @@
  */
 
 import type {
+  GridCellNode,
   HTMLTableElementWithWithTableSelectionState,
   InsertTableCommandPayload,
   TableSelection,
 } from '@lexical/table';
-import type {DEPRECATED_GridCellNode, NodeKey} from 'lexical';
+import type {NodeKey} from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {
+  $computeGridMap,
   $createTableCellNode,
   $createTableNodeWithDimensions,
+  $getNodeTriplet,
+  $isGridRowNode,
   $isTableCellNode,
   $isTableNode,
   applyTableHandlers,
@@ -31,9 +35,6 @@ import {
   $isTextNode,
   $nodesOfType,
   COMMAND_PRIORITY_EDITOR,
-  DEPRECATED_$computeGridMap,
-  DEPRECATED_$getNodeTriplet,
-  DEPRECATED_$isGridRowNode,
 } from 'lexical';
 import {useEffect} from 'react';
 import invariant from 'shared/invariant';
@@ -150,26 +151,26 @@ export function TablePlugin({
       if (node.getColSpan() > 1 || node.getRowSpan() > 1) {
         // 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] = DEPRECATED_$getNodeTriplet(node);
-        const [gridMap] = DEPRECATED_$computeGridMap(gridNode, node, node);
+        const [, , gridNode] = $getNodeTriplet(node);
+        const [gridMap] = $computeGridMap(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;
         let row = gridNode.getFirstChild();
         invariant(
-          DEPRECATED_$isGridRowNode(row),
+          $isGridRowNode(row),
           'Expected TableNode first child to be a RowNode',
         );
         const unmerged = [];
         for (let i = 0; i < rowsCount; i++) {
           if (i !== 0) {
             row = row.getNextSibling();
             invariant(
-              DEPRECATED_$isGridRowNode(row),
+              $isGridRowNode(row),
               'Expected TableNode first child to be a RowNode',
             );
           }
-          let lastRowCell: null | DEPRECATED_GridCellNode = null;
+          let lastRowCell: null | GridCellNode = null;
           for (let j = 0; j < columnsCount; j++) {
             const cellMap = gridMap[i][j];
             const cell = cellMap.cell;

packages/lexical-table/flow/LexicalTable.js.flow

@@ -22,9 +22,6 @@ import type {
 
 import {
   ElementNode,
-  deprecated_GridCellNode,
-  deprecated_GridRowNode,
-  deprecated_GridNode,
 } from 'lexical';
 
 /**
@@ -40,7 +37,7 @@ export const TableCellHeaderStates = {
 
 export type TableCellHeaderState = $Values<typeof TableCellHeaderStates>;
 
-declare export class TableCellNode extends deprecated_GridCellNode {
+declare export class TableCellNode extends GridCellNode {
   __headerState: TableCellHeaderState;
   __width?: number;
   __backgroundColor: null | string;
@@ -84,7 +81,7 @@ declare export function $isTableCellNode(
  * LexicalTableNode
  */
 
-declare export class TableNode extends deprecated_GridNode {
+declare export class TableNode extends GridNode {
   static getType(): string;
   static clone(node: TableNode): TableNode;
   constructor(grid: ?Grid, key?: NodeKey): void;
@@ -113,7 +110,7 @@ declare export function $isTableNode(
  * LexicalTableRowNode
  */
 
-declare export class TableRowNode extends deprecated_GridRowNode {
+declare export class TableRowNode extends GridRowNode {
   static getType(): string;
   static clone(node: TableRowNode): TableRowNode;
   constructor(height?: ?number, key?: NodeKey): void;
@@ -226,13 +223,34 @@ declare export function $deleteTableColumn(
 declare export function $insertTableRow__EXPERIMENTAL(
   insertAfter: boolean,
 ): void;
+
 declare export function $insertTableColumn__EXPERIMENTAL(
   insertAfter: boolean,
 ): void;
+
 declare export function $deleteTableRow__EXPERIMENTAL(): void;
+
 declare export function $deleteTableColumn__EXPERIMENTAL(): void;
+
 declare export function $unmergeCell(): void;
 
+declare export function $computeGridMap(
+  grid: GridNode,
+  cellA: GridCellNode,
+  cellB: GridCellNode,
+): [GridMapType, GridMapValueType, GridMapValueType];
+
+declare export function $getNodeTriplet(
+  source: PointType | LexicalNode | GridCellNode,
+): [GridCellNode, GridRowNode, GridNode];
+
+declare export function $getGridCellNodeRect(gridCellNode: GridCellNode): {
+  rowIndex: number;
+  columnIndex: number;
+  rowSpan: number;
+  colSpan: number;
+} | null;
+
 /**
  * LexicalTableSelection.js
  */
@@ -303,3 +321,41 @@ declare export function $isGridSelection(
 ): x is GridSelection;
 
 declare export function $createGridSelection(): GridSelection;
+
+/**
+ * Grid
+ */
+
+export type GridMapValueType = {
+  cell: GridCellNode,
+  startRow: number,
+  startColumn: number,
+};
+export type GridMapType = Array<Array<GridMapValueType>>;
+
+declare export class GridNode extends ElementNode {}
+
+declare export function $isGridNode(
+  node: ?LexicalNode,
+): node is GridNode;
+
+declare export class GridRowNode extends ElementNode {}
+
+declare export function $isGridRowNode(
+  node: ?LexicalNode,
+): node is GridRowNode;
+
+declare export class GridCellNode extends ElementNode {
+  __colSpan: number;
+  __rowSpan: number;
+
+  constructor(colSpan: number, key?: NodeKey): void;
+  getColSpan(): number;
+  setColSpan(colSpan: number): this;
+  getRowSpan(): number;
+  setRowSpan(rowSpan: number): this;
+}
+
+declare export function $isGridCellNode(
+  node: ?LexicalNode,
+): node is GridCellNode;

packages/lexical/src/nodes/LexicalGridCellNode.ts → packages/lexical-table/src/LexicalGridCellNode.ts

@@ -13,7 +13,7 @@ import type {
   Spread,
 } from 'lexical';
 
-import {ElementNode} from './LexicalElementNode';
+import {ElementNode} from 'lexical';
 
 export type SerializedGridCellNode = Spread<
   {
@@ -24,7 +24,7 @@ export type SerializedGridCellNode = Spread<
 >;
 
 /** @noInheritDoc */
-export class DEPRECATED_GridCellNode extends ElementNode {
+export class GridCellNode extends ElementNode {
   /** @internal */
   __colSpan: number;
   __rowSpan: number;
@@ -62,8 +62,8 @@ export class DEPRECATED_GridCellNode extends ElementNode {
   }
 }
 
-export function DEPRECATED_$isGridCellNode(
-  node: DEPRECATED_GridCellNode | LexicalNode | null | undefined,
-): node is DEPRECATED_GridCellNode {
-  return node instanceof DEPRECATED_GridCellNode;
+export function $isGridCellNode(
+  node: GridCellNode | LexicalNode | null | undefined,
+): node is GridCellNode {
+  return node instanceof GridCellNode;
 }

packages/lexical-table/src/LexicalGridNode.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalNode} from 'lexical';
+
+import {ElementNode} from 'lexical';
+
+export class GridNode extends ElementNode {}
+
+export function $isGridNode(
+  node: LexicalNode | null | undefined,
+): node is GridNode {
+  return node instanceof GridNode;
+}

packages/lexical-table/src/LexicalGridRowNode.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalNode} from 'lexical';
+
+import {ElementNode} from 'lexical';
+
+export class GridRowNode extends ElementNode {}
+
+export function $isGridRowNode(
+  node: LexicalNode | null | undefined,
+): node is GridRowNode {
+  return node instanceof GridRowNode;
+}