From 4a7749dc1f4549eca03a2f1ec504a90adc8f04f1 Mon Sep 17 00:00:00 2001 From: Daniel Teo Date: Thu, 3 Apr 2025 01:25:05 +0800 Subject: [PATCH] [lexical-table] Refactor: Rename and deprecate some table utils (#7415) --- .../plugins/TableActionMenuPlugin/index.tsx | 16 ++++---- .../plugins/TableHoverActionsPlugin/index.tsx | 8 ++-- .../lexical-table/flow/LexicalTable.js.flow | 30 +++++++++++++++ .../lexical-table/src/LexicalTableUtils.ts | 37 +++++++++++++++++-- .../__tests__/unit/LexicalTableNode.test.tsx | 4 +- packages/lexical-table/src/index.ts | 4 ++ 6 files changed, 81 insertions(+), 18 deletions(-) diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx index bba01b6b3..fcd10a41e 100644 --- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx +++ b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx @@ -13,15 +13,15 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; import {useLexicalEditable} from '@lexical/react/useLexicalEditable'; import { $computeTableMapSkipCellCheck, - $deleteTableColumn__EXPERIMENTAL, - $deleteTableRow__EXPERIMENTAL, + $deleteTableColumnAtSelection, + $deleteTableRowAtSelection, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, - $insertTableColumn__EXPERIMENTAL, - $insertTableRow__EXPERIMENTAL, + $insertTableColumnAtSelection, + $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, @@ -276,7 +276,7 @@ function TableActionMenu({ (shouldInsertAfter: boolean) => { editor.update(() => { for (let i = 0; i < selectionCounts.rows; i++) { - $insertTableRow__EXPERIMENTAL(shouldInsertAfter); + $insertTableRowAtSelection(shouldInsertAfter); } onClose(); }); @@ -288,7 +288,7 @@ function TableActionMenu({ (shouldInsertAfter: boolean) => { editor.update(() => { for (let i = 0; i < selectionCounts.columns; i++) { - $insertTableColumn__EXPERIMENTAL(shouldInsertAfter); + $insertTableColumnAtSelection(shouldInsertAfter); } onClose(); }); @@ -298,7 +298,7 @@ function TableActionMenu({ const deleteTableRowAtSelection = useCallback(() => { editor.update(() => { - $deleteTableRow__EXPERIMENTAL(); + $deleteTableRowAtSelection(); onClose(); }); }, [editor, onClose]); @@ -315,7 +315,7 @@ function TableActionMenu({ const deleteTableColumnAtSelection = useCallback(() => { editor.update(() => { - $deleteTableColumn__EXPERIMENTAL(); + $deleteTableColumnAtSelection(); onClose(); }); }, [editor, onClose]); diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx index 745dcfc09..3f840127c 100644 --- a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx +++ b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx @@ -14,8 +14,8 @@ import { $getTableAndElementByKey, $getTableColumnIndexFromTableCellNode, $getTableRowIndexFromTableCellNode, - $insertTableColumn__EXPERIMENTAL, - $insertTableRow__EXPERIMENTAL, + $insertTableColumnAtSelection, + $insertTableRowAtSelection, $isTableCellNode, $isTableNode, getTableElement, @@ -244,10 +244,10 @@ function TableHoverActionsContainer({ ); maybeTableNode?.selectEnd(); if (insertRow) { - $insertTableRow__EXPERIMENTAL(); + $insertTableRowAtSelection(); setShownRow(false); } else { - $insertTableColumn__EXPERIMENTAL(); + $insertTableColumnAtSelection(); setShownColumn(false); } } diff --git a/packages/lexical-table/flow/LexicalTable.js.flow b/packages/lexical-table/flow/LexicalTable.js.flow index e1dfb6838..e2edf2b92 100644 --- a/packages/lexical-table/flow/LexicalTable.js.flow +++ b/packages/lexical-table/flow/LexicalTable.js.flow @@ -239,6 +239,7 @@ declare export function $removeTableRowAtIndex( indexToDelete: number, ): TableNode; +/** @deprecated This function does not support merged cells. Use {@link $insertTableRowAtSelection} or {@link $insertTableRowAtNode} instead. */ declare export function $insertTableRow( tableNode: TableNode, targetIndex: number, @@ -247,6 +248,7 @@ declare export function $insertTableRow( table: TableDOMTable, ): TableNode; +/** @deprecated This function does not support merged cells. Use {@link $insertTableColumnAtSelection} or {@link $insertTableColumnAtNode} instead. */ declare export function $insertTableColumn( tableNode: TableNode, targetIndex: number, @@ -255,21 +257,49 @@ declare export function $insertTableColumn( table: TableDOMTable, ): TableNode; +/** @deprecated This function does not support merged cells. Use {@link $deleteTableColumnAtSelection} instead. */ declare export function $deleteTableColumn( tableNode: TableNode, targetIndex: number, ): TableNode; +declare export function $insertTableRowAtSelection( + insertAfter?: boolean, +): TableRowNode | null; + +declare export function $insertTableRowAtNode( + cellNode: TableCellNode, + insertAfter?: boolean, +): TableRowNode | null; + +declare export function $insertTableColumnAtSelection( + insertAfter?: boolean, +): TableCellNode | null; + +declare export function $insertTableColumnAtNode( + cellNode: TableCellNode, + insertAfter?: boolean, + shouldSetSelection?: boolean, +): TableCellNode | null + +declare export function $deleteTableRowAtSelection(): void; + +declare export function $deleteTableColumnAtSelection(): void; + +/** @deprecated renamed to {@link $insertTableRowAtSelection} */ declare export function $insertTableRow__EXPERIMENTAL( insertAfter: boolean, ): TableRowNode | null; +/** @deprecated renamed to {@link $insertTableColumnAtSelection} */ declare export function $insertTableColumn__EXPERIMENTAL( insertAfter: boolean, ): TableCellNode | null; +/** @deprecated renamed to {@link $deleteTableRowAtSelection} */ declare export function $deleteTableRow__EXPERIMENTAL(): void; +/** @deprecated renamed to {@link $deleteTableColumnAtSelection} */ declare export function $deleteTableColumn__EXPERIMENTAL(): void; declare export function $unmergeCell(): void; diff --git a/packages/lexical-table/src/LexicalTableUtils.ts b/packages/lexical-table/src/LexicalTableUtils.ts index 21a9a8174..7b09fb087 100644 --- a/packages/lexical-table/src/LexicalTableUtils.ts +++ b/packages/lexical-table/src/LexicalTableUtils.ts @@ -166,6 +166,9 @@ export function $removeTableRowAtIndex( return tableNode; } +/** + * @deprecated This function does not support merged cells. Use {@link $insertTableRowAtSelection} or {@link $insertTableRowAtNode} instead. + */ export function $insertTableRow( tableNode: TableNode, targetIndex: number, @@ -251,7 +254,7 @@ const getHeaderState = ( * taking into account any spans. If successful, returns the * inserted table row node. */ -export function $insertTableRow__EXPERIMENTAL( +export function $insertTableRowAtSelection( insertAfter = true, ): TableRowNode | null { const selection = $getSelection(); @@ -286,6 +289,11 @@ export function $insertTableRow__EXPERIMENTAL( } } +/** + * @deprecated renamed to {@link $insertTableRowAtSelection} + */ +export const $insertTableRow__EXPERIMENTAL = $insertTableRowAtSelection; + /** * Inserts a table row before or after the given cell node, * taking into account any spans. If successful, returns the @@ -362,6 +370,9 @@ export function $insertTableRowAtNode( return insertedRow; } +/** + * @deprecated This function does not support merged cells. Use {@link $insertTableColumnAtSelection} or {@link $insertTableColumnAtNode} instead. + */ export function $insertTableColumn( tableNode: TableNode, targetIndex: number, @@ -426,7 +437,7 @@ export function $insertTableColumn( * taking into account any spans. If successful, returns the * first inserted cell node. */ -export function $insertTableColumn__EXPERIMENTAL( +export function $insertTableColumnAtSelection( insertAfter = true, ): TableCellNode | null { const selection = $getSelection(); @@ -461,6 +472,11 @@ export function $insertTableColumn__EXPERIMENTAL( } } +/** + * @deprecated renamed to {@link $insertTableColumnAtSelection} + */ +export const $insertTableColumn__EXPERIMENTAL = $insertTableColumnAtSelection; + /** * Inserts a column before or after the given cell node, * taking into account any spans. If successful, returns the @@ -565,6 +581,9 @@ export function $insertTableColumnAtNode( return firstInsertedCell; } +/** + * @deprecated This function does not support merged cells. Use {@link $deleteTableColumnAtSelection} instead. + */ export function $deleteTableColumn( tableNode: TableNode, targetIndex: number, @@ -588,7 +607,7 @@ export function $deleteTableColumn( return tableNode; } -export function $deleteTableRow__EXPERIMENTAL(): void { +export function $deleteTableRowAtSelection(): void { const selection = $getSelection(); invariant( $isRangeSelection(selection) || $isTableSelection(selection), @@ -681,7 +700,12 @@ export function $deleteTableRow__EXPERIMENTAL(): void { } } -export function $deleteTableColumn__EXPERIMENTAL(): void { +/** + * @deprecated renamed to {@link $deleteTableRowAtSelection} + */ +export const $deleteTableRow__EXPERIMENTAL = $deleteTableRowAtSelection; + +export function $deleteTableColumnAtSelection(): void { const selection = $getSelection(); invariant( $isRangeSelection(selection) || $isTableSelection(selection), @@ -760,6 +784,11 @@ export function $deleteTableColumn__EXPERIMENTAL(): void { } } +/** + * @deprecated renamed to {@link $deleteTableColumnAtSelection} + */ +export const $deleteTableColumn__EXPERIMENTAL = $deleteTableColumnAtSelection; + function $moveSelectionToCell(cell: TableCellNode): void { const firstDescendant = cell.getFirstDescendant(); if (firstDescendant == null) { diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx index 13569875b..4de966f35 100644 --- a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx +++ b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx @@ -16,7 +16,7 @@ import { $createTableRowNode, $createTableSelection, $getElementForTableNode, - $insertTableColumn__EXPERIMENTAL, + $insertTableColumnAtSelection, $isTableCellNode, $isTableNode, TableNode, @@ -1788,7 +1788,7 @@ describe('LexicalTableNode tests', () => { table!.getCellNodeFromCords(0, 0, DOMTable)?.__key || '', ); $setSelection(selection); - $insertTableColumn__EXPERIMENTAL(); + $insertTableColumnAtSelection(); table!.setColWidths([50, 50, 100]); }); diff --git a/packages/lexical-table/src/index.ts b/packages/lexical-table/src/index.ts index 2a7c4648c..da321b777 100644 --- a/packages/lexical-table/src/index.ts +++ b/packages/lexical-table/src/index.ts @@ -66,7 +66,9 @@ export { $createTableNodeWithDimensions, $deleteTableColumn, $deleteTableColumn__EXPERIMENTAL, + $deleteTableColumnAtSelection, $deleteTableRow__EXPERIMENTAL, + $deleteTableRowAtSelection, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, @@ -76,8 +78,10 @@ export { $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumn__EXPERIMENTAL, + $insertTableColumnAtSelection, $insertTableRow, $insertTableRow__EXPERIMENTAL, + $insertTableRowAtSelection, $mergeCells, $removeTableRowAtIndex, $unmergeCell,