From 55cc980aabe44f4cb70452bf5ea739d6b3acd925 Mon Sep 17 00:00:00 2001 From: Bob Ippolito Date: Tue, 2 Jul 2024 11:35:27 -0700 Subject: [PATCH] [lexical][lexical-table] Chore: Replace references to old GridSelection with TableSelection (#6366) --- .../src/serializeEditorState.ts | 4 ++-- .../lexical-table/src/LexicalTableUtils.ts | 10 +++++----- .../lexical-website/docs/concepts/selection.md | 18 ++++++++++-------- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/lexical-devtools/src/serializeEditorState.ts b/packages/lexical-devtools/src/serializeEditorState.ts index 1a7a28dc307..85ebfd03100 100644 --- a/packages/lexical-devtools/src/serializeEditorState.ts +++ b/packages/lexical-devtools/src/serializeEditorState.ts @@ -66,7 +66,7 @@ export function serializeEditorState( typeof selection.anchor === 'object' && selection.anchor != null ) { - // remove _selection.anchor._selection property if present in RangeSelection or GridSelection + // remove _selection.anchor._selection property if present in RangeSelection or TableSelection // otherwise, the recursive structure makes the selection object unserializable selection.anchor = serializePoint(selection.anchor); } @@ -76,7 +76,7 @@ export function serializeEditorState( typeof selection.focus === 'object' && selection.focus != null ) { - // remove _selection.anchor._selection property if present in RangeSelection or GridSelection + // remove _selection.anchor._selection property if present in RangeSelection or TableSelection // otherwise, the recursive structure makes the selection object unserializable selection.focus = serializePoint(selection.focus); } diff --git a/packages/lexical-table/src/LexicalTableUtils.ts b/packages/lexical-table/src/LexicalTableUtils.ts index 572b59647c5..0633384ad1f 100644 --- a/packages/lexical-table/src/LexicalTableUtils.ts +++ b/packages/lexical-table/src/LexicalTableUtils.ts @@ -249,7 +249,7 @@ export function $insertTableRow__EXPERIMENTAL(insertAfter = true): void { const selection = $getSelection(); invariant( $isRangeSelection(selection) || $isTableSelection(selection), - 'Expected a RangeSelection or GridSelection', + 'Expected a RangeSelection or TableSelection', ); const focus = selection.focus.getNode(); const [focusCell, , grid] = $getNodeTriplet(focus); @@ -377,7 +377,7 @@ export function $insertTableColumn__EXPERIMENTAL(insertAfter = true): void { const selection = $getSelection(); invariant( $isRangeSelection(selection) || $isTableSelection(selection), - 'Expected a RangeSelection or GridSelection', + 'Expected a RangeSelection or TableSelection', ); const anchor = selection.anchor.getNode(); const focus = selection.focus.getNode(); @@ -500,7 +500,7 @@ export function $deleteTableRow__EXPERIMENTAL(): void { const selection = $getSelection(); invariant( $isRangeSelection(selection) || $isTableSelection(selection), - 'Expected a RangeSelection or GridSelection', + 'Expected a RangeSelection or TableSelection', ); const anchor = selection.anchor.getNode(); const focus = selection.focus.getNode(); @@ -576,7 +576,7 @@ export function $deleteTableColumn__EXPERIMENTAL(): void { const selection = $getSelection(); invariant( $isRangeSelection(selection) || $isTableSelection(selection), - 'Expected a RangeSelection or GridSelection', + 'Expected a RangeSelection or TableSelection', ); const anchor = selection.anchor.getNode(); const focus = selection.focus.getNode(); @@ -667,7 +667,7 @@ export function $unmergeCell(): void { const selection = $getSelection(); invariant( $isRangeSelection(selection) || $isTableSelection(selection), - 'Expected a RangeSelection or GridSelection', + 'Expected a RangeSelection or TableSelection', ); const anchor = selection.anchor.getNode(); const [cell, row, grid] = $getNodeTriplet(anchor); diff --git a/packages/lexical-website/docs/concepts/selection.md b/packages/lexical-website/docs/concepts/selection.md index 19dd4062156..e1c1a152fd9 100644 --- a/packages/lexical-website/docs/concepts/selection.md +++ b/packages/lexical-website/docs/concepts/selection.md @@ -11,9 +11,11 @@ In Lexical, there are four types of selection possible: - `RangeSelection` - `NodeSelection` -- `GridSelection` +- `TableSelection` (implemented in `@lexical/table`) - `null` +It is possible, but not generally recommended, to implement your own selection types that implement `BaseSelection`. + ### `RangeSelection` This is the most common type of selection, and is a normalization of the browser's DOM Selection and Range APIs. @@ -35,17 +37,17 @@ NodeSelection represents a selection of multiple arbitrary nodes. For example, t - `getNodes()` returns an array containing the selected LexicalNodes -### `GridSelection` +### `TableSelection` -GridSelection represents a grid-like selection like tables. It stores the key of the parent node where the selection takes place and the start and end points. -`GridSelection` consists of three main properties: +TableSelection represents a grid-like selection like tables. It stores the key of the parent node where the selection takes place and the start and end points. +`TableSelection` consists of three main properties: -- `gridKey` representing the parent node key where the selection takes place -- `anchor` representing a `GridSelection` point -- `focus` reprensenting a `GridSelection` point +- `tableKey` representing the parent node key where the selection takes place +- `anchor` representing a `TableSelection` point +- `focus` reprensenting a `TableSelection` point For example, a table where you select row = 1 col = 1 to row 2 col = 2 could be stored as follows: -- `gridKey = 2` table key +- `tableKey = 2` table key - `anchor = 4` table cell (key may vary) - `focus = 10` table cell (key may vary)