flow fixes

facebook · Jan 24, 2024 · 2bf607a · 2bf607a
1 parent 3c102dc
commit 2bf607a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 87 deletions.
diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
@@ -19,7 +19,7 @@ import {
   $isTableCellNode,
   $isTableRowNode,
   $isTableSelection,
-  getCellFromTarget,
+  getDOMCellFromTarget,
   TableCellNode,
 } from '@lexical/table';
 import {
@@ -108,7 +108,7 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
 
         if (targetRef.current !== target) {
           targetRef.current = target as HTMLElement;
-          const cell = getCellFromTarget(target as HTMLElement);
+          const cell = getDOMCellFromTarget(target as HTMLElement);
 
           if (cell && activeCell !== cell) {
             editor.update(() => {

diff --git a/packages/lexical-table/flow/LexicalTable.js.flow b/packages/lexical-table/flow/LexicalTable.js.flow
@@ -81,6 +81,13 @@ declare export function $isTableCellNode(
  * LexicalTableNode
  */
 
+export type TableMapValueType = {
+  cell: TableCellNode,
+  startRow: number,
+  startColumn: number,
+};
+export type TableMapType = Array<Array<TableMapValueType>>;
+
 declare export class TableNode extends TableNode {
   static getType(): string;
   static clone(node: TableNode): TableNode;
@@ -93,8 +100,8 @@ declare export class TableNode extends TableNode {
     tableCellNode: TableCellNode,
     table: TableDOMTable,
   ): {x: number, y: number};
-  getCellFromCords(x: number, y: number, table: TableDOMTable): ?Cell;
-  getCellFromCordsOrThrow(x: number, y: number, table: TableDOMTable): Cell;
+  getDOMCellFromCords(x: number, y: number, table: TableDOMTable): ?TableDOMCell;
+  getDOMCellFromCordsOrThrow(x: number, y: number, table: TableDOMTable): TableDOMCell;
   getCellNodeFromCords(x: number, y: number, table: TableDOMTable): ?TableCellNode;
   getCellNodeFromCordsOrThrow(x: number, y: number, table: TableDOMTable): TableCellNode;
   canSelectBefore(): true;
@@ -140,7 +147,7 @@ export type TableDOMCell = {
 export type TableDOMRows = Array<Array<TableDOMCell>>;
 
 export type TableDOMTable = {
-  cells: Cells,
+  cells: TableDOMRows,
   columns: number,
   rows: number,
 };
@@ -160,7 +167,7 @@ declare export function getTableObserverFromTableElement(
   tableElement: HTMLElement,
 ): null | TableObserver;
 
-declare export function getCellFromTarget(node: Node): Cell | null;
+declare export function getDOMCellFromTarget(node: Node): null | TableDOMCell;
 
 /**
  * LexicalTableUtils
@@ -268,8 +275,8 @@ declare export class TableObserver {
   removeListeners(): void;
   trackTable(): void;
   clearHighlight(): void;
-  setFocusCellForSelection(cell: Cell): void;
-  setAnchorCellForSelection(cell: Cell): void;
+  setFocusCellForSelection(cell: TableDOMCell): void;
+  setAnchorCellForSelection(cell: TableDOMCell): void;
   formatCells(type: TextFormatType): void;
   clearText(): void;
 }
@@ -314,52 +321,6 @@ declare export function $isTableSelection(
 
 declare export function $createTableSelection(): TableSelection;
 
-/**
- * TableNode
- */
-
-export type TableMapValueType = {
-  cell: TableCellNode,
-  startRow: number,
-  startColumn: number,
-};
-export type TableMapType = Array<Array<TableMapValueType>>;
-
-declare export class TableNode extends ElementNode {}
-
-declare export function $isTableNode(
-  node: ?LexicalNode,
-): node is TableNode;
-
-/**
- * TableRowNode
- */
-
-declare export class TableRowNode extends ElementNode {}
-
-declare export function $isTableRowNode(
-  node: ?LexicalNode,
-): node is TableRowNode;
-
-/**
- * TableCellNode
- */
-
-declare export class TableCellNode 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 $isTableCellNode(
-  node: ?LexicalNode,
-): node is TableCellNode;
-
 /**
  * LexicalTableCommands
  */

diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
@@ -128,10 +128,10 @@ export class TableNode extends ElementNode {
     tableCellNode: TableCellNode,
     table: TableDOMTable,
   ): {x: number; y: number} {
-    const {rows, cells} = table;
+    const {rows, domRows} = table;
 
     for (let y = 0; y < rows; y++) {
-      const row = cells[y];
+      const row = domRows[y];
 
       if (row == null) {
         continue;
@@ -152,14 +152,14 @@ export class TableNode extends ElementNode {
     throw new Error('Cell not found in table.');
   }
 
-  getCellFromCords(
+  getDOMCellFromCords(
     x: number,
     y: number,
     table: TableDOMTable,
-  ): TableDOMCell | null {
-    const {cells} = table;
+  ): null | TableDOMCell {
+    const {domRows} = table;
 
-    const row = cells[y];
+    const row = domRows[y];
 
     if (row == null) {
       return null;
@@ -174,12 +174,12 @@ export class TableNode extends ElementNode {
     return cell;
   }
 
-  getCellFromCordsOrThrow(
+  getDOMCellFromCordsOrThrow(
     x: number,
     y: number,
     table: TableDOMTable,
   ): TableDOMCell {
-    const cell = this.getCellFromCords(x, y, table);
+    const cell = this.getDOMCellFromCords(x, y, table);
 
     if (!cell) {
       throw new Error('Cell not found at cords.');
@@ -192,8 +192,8 @@ export class TableNode extends ElementNode {
     x: number,
     y: number,
     table: TableDOMTable,
-  ): TableCellNode | null {
-    const cell = this.getCellFromCords(x, y, table);
+  ): null | TableCellNode {
+    const cell = this.getDOMCellFromCords(x, y, table);
 
     if (cell == null) {
       return null;

diff --git a/packages/lexical-table/src/LexicalTableObserver.ts b/packages/lexical-table/src/LexicalTableObserver.ts
@@ -47,7 +47,7 @@ export type TableDOMCell = {
 export type TableDOMRows = Array<Array<TableDOMCell | undefined> | undefined>;
 
 export type TableDOMTable = {
-  cells: TableDOMRows;
+  domRows: TableDOMRows;
   columns: number;
   rows: number;
 };
@@ -82,8 +82,8 @@ export class TableObserver {
     this.tableNodeKey = tableNodeKey;
     this.editor = editor;
     this.table = {
-      cells: [],
       columns: 0,
+      domRows: [],
       rows: 0,
     };
     this.tableSelection = null;

diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -88,7 +88,7 @@ export function applyTableHandlers(
         return;
       }
 
-      const anchorCell = getCellFromTarget(event.target as Node);
+      const anchorCell = getDOMCellFromTarget(event.target as Node);
       if (anchorCell !== null) {
         stopEvent(event);
         tableObserver.setAnchorCellForSelection(anchorCell);
@@ -100,7 +100,7 @@ export function applyTableHandlers(
       };
 
       const onMouseMove = (moveEvent: MouseEvent) => {
-        const focusCell = getCellFromTarget(moveEvent.target as Node);
+        const focusCell = getDOMCellFromTarget(moveEvent.target as Node);
         if (
           focusCell !== null &&
           (tableObserver.anchorX !== focusCell.x ||
@@ -456,7 +456,7 @@ export function applyTableHandlers(
       tableCellNode,
       tableObserver.table,
     );
-    return tableNode.getCellFromCordsOrThrow(
+    return tableNode.getDOMCellFromCordsOrThrow(
       currentCords.x,
       currentCords.y,
       tableObserver.table,
@@ -707,7 +707,7 @@ export function getTableObserverFromTableElement(
   return tableElement[LEXICAL_ELEMENT_KEY];
 }
 
-export function getCellFromTarget(node: Node): TableDOMCell | null {
+export function getDOMCellFromTarget(node: Node): TableDOMCell | null {
   let currentNode: ParentNode | Node | null = node;
 
   while (currentNode != null) {
@@ -744,16 +744,16 @@ export function doesTargetContainText(node: Node): boolean {
 }
 
 export function getTable(tableElement: HTMLElement): TableDOMTable {
-  const cells: TableDOMRows = [];
+  const domRows: TableDOMRows = [];
   const grid = {
-    cells,
     columns: 0,
+    domRows,
     rows: 0,
   };
   let currentNode = tableElement.firstChild;
   let x = 0;
   let y = 0;
-  cells.length = 0;
+  domRows.length = 0;
 
   while (currentNode != null) {
     const nodeMame = currentNode.nodeName;
@@ -771,9 +771,9 @@ export function getTable(tableElement: HTMLElement): TableDOMTable {
       // @ts-expect-error: internal field
       currentNode._cell = cell;
 
-      let row = cells[y];
+      let row = domRows[y];
       if (row === undefined) {
-        row = cells[y] = [];
+        row = domRows[y] = [];
       }
 
       row[x] = cell;
@@ -848,10 +848,10 @@ export function $forEachTableCell(
     },
   ) => void,
 ) {
-  const {cells} = grid;
+  const {domRows} = grid;
 
-  for (let y = 0; y < cells.length; y++) {
-    const row = cells[y];
+  for (let y = 0; y < domRows.length; y++) {
+    const row = domRows[y];
     if (!row) {
       continue;
     }
@@ -984,7 +984,7 @@ const adjustFocusNodeInDirection = (
     case 'forward':
       if (x !== (isForward ? tableObserver.table.columns - 1 : 0)) {
         tableObserver.setFocusCellForSelection(
-          tableNode.getCellFromCordsOrThrow(
+          tableNode.getDOMCellFromCordsOrThrow(
             x + (isForward ? 1 : -1),
             y,
             tableObserver.table,
@@ -996,7 +996,7 @@ const adjustFocusNodeInDirection = (
     case 'up':
       if (y !== 0) {
         tableObserver.setFocusCellForSelection(
-          tableNode.getCellFromCordsOrThrow(x, y - 1, tableObserver.table),
+          tableNode.getDOMCellFromCordsOrThrow(x, y - 1, tableObserver.table),
         );
 
         return true;
@@ -1006,7 +1006,7 @@ const adjustFocusNodeInDirection = (
     case 'down':
       if (y !== tableObserver.table.rows - 1) {
         tableObserver.setFocusCellForSelection(
-          tableNode.getCellFromCordsOrThrow(x, y + 1, tableObserver.table),
+          tableNode.getDOMCellFromCordsOrThrow(x, y + 1, tableObserver.table),
         );
 
         return true;
@@ -1188,7 +1188,7 @@ function $handleArrowKey(
       );
 
       if (event.shiftKey) {
-        const cell = tableNode.getCellFromCordsOrThrow(
+        const cell = tableNode.getDOMCellFromCordsOrThrow(
           cords.x,
           cords.y,
           tableObserver.table,
@@ -1234,7 +1234,7 @@ function $handleArrowKey(
 
     const grid = getTable(tableElement);
     const cordsAnchor = tableNode.getCordsFromCellNode(anchorCellNode, grid);
-    const anchorCell = tableNode.getCellFromCordsOrThrow(
+    const anchorCell = tableNode.getDOMCellFromCordsOrThrow(
       cordsAnchor.x,
       cordsAnchor.y,
       grid,

diff --git a/...ests__/unit/LexicalGridSelection.test.tsx → ...sts__/unit/LexicalTableSelection.test.tsx b/...ests__/unit/LexicalGridSelection.test.tsx → ...sts__/unit/LexicalTableSelection.test.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import {$createGridSelection} from '@lexical/table';
+import {$createTableSelection} from '@lexical/table';
 import {
   type LexicalEditor,
   $createParagraphNode,
@@ -20,7 +20,7 @@ import {createRef, useEffect, useMemo} from 'react';
 import {createRoot} from 'react-dom/client';
 import * as ReactTestUtils from 'react-dom/test-utils';
 
-describe('grid selection', () => {
+describe('table selection', () => {
   let originalText;
   let parsedParagraph;
   let parsedRoot;
@@ -90,7 +90,7 @@ describe('grid selection', () => {
     await update(() => {
       const paragraph = $createParagraphNode();
       originalText = $createTextNode('Hello world');
-      const selection = $createGridSelection();
+      const selection = $createTableSelection();
       selection.set(
         originalText.getKey(),
         originalText.getKey(),

diff --git a/packages/lexical-table/src/index.ts b/packages/lexical-table/src/index.ts
@@ -45,7 +45,7 @@ export {
 export type {HTMLTableElementWithWithTableSelectionState} from './LexicalTableSelectionHelpers';
 export {
   applyTableHandlers,
-  getCellFromTarget,
+  getDOMCellFromTarget,
   getTableObserverFromTableElement,
 } from './LexicalTableSelectionHelpers';
 export {