Skip to content

Commit

Permalink
[PR 2] 5276 PointSelection instead of Grid/RangeSelections (#5281)
Browse files Browse the repository at this point in the history 
Co-authored-by: icrosil <[email protected]>
  • Loading branch information
@icrosil
icrosil and icrosil authored Dec 5, 2023
1 parent 7753924 commit d78d89c
Show file tree
Hide file tree
Showing 15 changed files with 172 additions and 149 deletions.
7 changes: 4 additions & 3 deletions packages/lexical-clipboard/flow/LexicalClipboard.js.flow
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@

import type {
BaseSelection,
GridSelection,
LexicalEditor,
INTERNAL_PointSelection,
GridSelection,
RangeSelection,
LexicalNode,
} from 'lexical';
Expand All @@ -21,7 +22,7 @@ import type {

declare export function $insertDataTransferForRichText(
dataTransfer: DataTransfer,
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
editor: LexicalEditor,
): void;

Expand All @@ -33,7 +34,7 @@ declare export function $getLexicalContent(
declare export function $insertGeneratedNodes(
editor: LexicalEditor,
nodes: Array<LexicalNode>,
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
): void;
/*
* Plain Text
Expand Down
17 changes: 10 additions & 7 deletions packages/lexical-clipboard/src/clipboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export function $getLexicalContent(editor: LexicalEditor): null | string {
*/
export function $insertDataTransferForPlainText(
dataTransfer: DataTransfer,
selection: RangeSelection | GridSelection,
selection: BaseSelection,
): void {
const text =
dataTransfer.getData('text/plain') || dataTransfer.getData('text/uri-list');
Expand All @@ -131,7 +131,7 @@ export function $insertDataTransferForPlainText(
*/
export function $insertDataTransferForRichText(
dataTransfer: DataTransfer,
selection: RangeSelection | GridSelection,
selection: BaseSelection,
editor: LexicalEditor,
): void {
const lexicalString = dataTransfer.getData('application/x-lexical-editor');
Expand Down Expand Up @@ -203,13 +203,16 @@ export function $insertDataTransferForRichText(
export function $insertGeneratedNodes(
editor: LexicalEditor,
nodes: Array<LexicalNode>,
selection: RangeSelection | GridSelection,
selection: BaseSelection,
): void {
const isGridSelection = DEPRECATED_$isGridSelection(selection);
const isRangeSelection = $isRangeSelection(selection);
const isSelectionInsideOfGrid =
DEPRECATED_$isGridSelection(selection) ||
($findMatchingParent(selection.anchor.getNode(), (n) =>
DEPRECATED_$isGridCellNode(n),
) !== null &&
isGridSelection ||
(isRangeSelection &&
$findMatchingParent(selection.anchor.getNode(), (n) =>
DEPRECATED_$isGridCellNode(n),
) !== null &&
$findMatchingParent(selection.focus.getNode(), (n) =>
DEPRECATED_$isGridCellNode(n),
) !== null);
Expand Down
7 changes: 2 additions & 5 deletions packages/lexical-list/src/formatList.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import {$getNearestNodeOfType} from '@lexical/utils';
import {
$createParagraphNode,
$getSelection,
$INTERNAL_isPointSelection,
$isElementNode,
$isLeafNode,
$isParagraphNode,
$isRangeSelection,
$isRootOrShadowRoot,
DEPRECATED_$isGridSelection,
ElementNode,
LexicalEditor,
LexicalNode,
Expand Down Expand Up @@ -94,10 +94,7 @@ export function insertList(editor: LexicalEditor, listType: ListType): void {
editor.update(() => {
const selection = $getSelection();

if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
const nodes = selection.getNodes();
const anchor = selection.anchor;
const anchorNode = anchor.getNode();
Expand Down
32 changes: 7 additions & 25 deletions packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import {
$getNodeByKey,
$getRoot,
$getSelection,
$INTERNAL_isPointSelection,
$isElementNode,
$isRangeSelection,
$isRootOrShadowRoot,
Expand All @@ -59,7 +60,6 @@ import {
CAN_UNDO_COMMAND,
COMMAND_PRIORITY_CRITICAL,
COMMAND_PRIORITY_NORMAL,
DEPRECATED_$isGridSelection,
ElementFormatType,
FORMAT_ELEMENT_COMMAND,
FORMAT_TEXT_COMMAND,
Expand Down Expand Up @@ -213,10 +213,7 @@ function BlockFormatDropDown({
const formatParagraph = () => {
editor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
$setBlocksType(selection, () => $createParagraphNode());
}
});
Expand All @@ -226,10 +223,7 @@ function BlockFormatDropDown({
if (blockType !== headingSize) {
editor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
$setBlocksType(selection, () => $createHeadingNode(headingSize));
}
});
Expand Down Expand Up @@ -264,10 +258,7 @@ function BlockFormatDropDown({
if (blockType !== 'quote') {
editor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
$setBlocksType(selection, () => $createQuoteNode());
}
});
Expand All @@ -279,10 +270,7 @@ function BlockFormatDropDown({
editor.update(() => {
let selection = $getSelection();

if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
if (selection.isCollapsed()) {
$setBlocksType(selection, () => $createCodeNode());
} else {
Expand Down Expand Up @@ -382,10 +370,7 @@ function FontDropDown({
(option: string) => {
editor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
$patchStyleText(selection, {
[style]: option,
});
Expand Down Expand Up @@ -742,10 +727,7 @@ export default function ToolbarPlugin({
(styles: Record<string, string>) => {
activeEditor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
$patchStyleText(selection, styles);
}
});
Expand Down
3 changes: 2 additions & 1 deletion packages/lexical-react/src/LexicalTreeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import type {
EditorState,
ElementNode,
GridSelection,
INTERNAL_PointSelection,
LexicalEditor,
LexicalNode,
RangeSelection,
Expand Down Expand Up @@ -723,7 +724,7 @@ function prettifyHTML(node: Element, level: number) {

function $getSelectionStartEnd(
node: LexicalNode,
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
): [number, number] {
const anchor = selection.anchor;
const focus = selection.focus;
Expand Down
21 changes: 5 additions & 16 deletions packages/lexical-rich-text/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import {
$getRoot,
$getSelection,
$insertNodes,
$INTERNAL_isPointSelection,
$isDecoratorNode,
$isElementNode,
$isNodeSelection,
Expand All @@ -70,7 +71,6 @@ import {
DELETE_CHARACTER_COMMAND,
DELETE_LINE_COMMAND,
DELETE_WORD_COMMAND,
DEPRECATED_$isGridSelection,
DRAGOVER_COMMAND,
DRAGSTART_COMMAND,
DROP_COMMAND,
Expand Down Expand Up @@ -439,10 +439,7 @@ function onPasteForRichText(
event instanceof InputEvent || event instanceof KeyboardEvent
? null
: event.clipboardData;
if (
clipboardData != null &&
($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection))
) {
if (clipboardData != null && $INTERNAL_isPointSelection(selection)) {
$insertDataTransferForRichText(clipboardData, selection, editor);
}
},
Expand Down Expand Up @@ -585,16 +582,11 @@ export function registerRichText(editor: LexicalEditor): () => void {
const selection = $getSelection();

if (typeof eventOrText === 'string') {
if ($isRangeSelection(selection)) {
if ($INTERNAL_isPointSelection(selection)) {
selection.insertText(eventOrText);
} else if (DEPRECATED_$isGridSelection(selection)) {
// TODO: Insert into the first cell & clear selection.
}
} else {
if (
!$isRangeSelection(selection) &&
!DEPRECATED_$isGridSelection(selection)
) {
if (!$INTERNAL_isPointSelection(selection)) {
return false;
}

Expand Down Expand Up @@ -1041,10 +1033,7 @@ export function registerRichText(editor: LexicalEditor): () => void {
}

const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
if ($INTERNAL_isPointSelection(selection)) {
onPasteForRichText(event, editor);
return true;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/lexical-selection/flow/LexicalSelection.js.flow
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@
*/
import type {
ElementNode,
GridSelection,
LexicalEditor,
LexicalNode,
NodeKey,
NodeSelection,
Point,
INTERNAL_PointSelection,
RangeSelection,
} from 'lexical';
declare export function $cloneWithProperties<T: LexicalNode>(node: T): T;
declare export function getStyleObjectFromCSS(css: string): {
[string]: string,
};
declare export function $patchStyleText(
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
patch: {
[string]: string | null,
},
Expand All @@ -45,7 +45,7 @@ declare export function $moveCharacter(
): void;
declare export function $selectAll(selection: RangeSelection): void;
declare export function $wrapNodes(
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
createElement: () => ElementNode,
wrappingElement?: ElementNode,
): void;
Expand Down
9 changes: 5 additions & 4 deletions packages/lexical-selection/src/lexical-node.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
$createTextNode,
$getNodeByKey,
$getPreviousSelection,
$INTERNAL_isPointSelection,
$isElementNode,
$isRangeSelection,
$isRootNode,
Expand All @@ -20,7 +21,7 @@ import {
DEPRECATED_$isGridCellNode,
DEPRECATED_$isGridSelection,
ElementNode,
GridSelection,
INTERNAL_PointSelection,
LexicalEditor,
LexicalNode,
Point,
Expand Down Expand Up @@ -98,7 +99,7 @@ export function $sliceSelectedTextNodeContent(
textNode.isSelected() &&
!textNode.isSegmented() &&
!textNode.isToken() &&
($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection))
$INTERNAL_isPointSelection(selection)
) {
const anchorNode = selection.anchor.getNode();
const focusNode = selection.focus.getNode();
Expand Down Expand Up @@ -315,7 +316,7 @@ function $patchStyle(
* @param patch - The patch to apply, which can include multiple styles. { CSSProperty: value }
*/
export function $patchStyleText(
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
patch: Record<string, string | null>,
): void {
const selectedNodes = selection.getNodes();
Expand Down Expand Up @@ -348,7 +349,7 @@ export function $patchStyleText(
let firstNode = selectedNodes[0];
let lastNode = selectedNodes[lastIndex];

if (selection.isCollapsed()) {
if (selection.isCollapsed() && $isRangeSelection(selection)) {
$patchStyle(selection, patch);
return;
}
Expand Down
8 changes: 4 additions & 4 deletions packages/lexical-selection/src/range-selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import type {
DecoratorNode,
ElementNode,
GridSelection,
INTERNAL_PointSelection,
LexicalNode,
NodeKey,
Point,
Expand Down Expand Up @@ -41,7 +41,7 @@ import {getStyleObjectFromCSS} from './utils';
* @param createElement - The function that creates the node. eg. $createParagraphNode.
*/
export function $setBlocksType(
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
createElement: () => ElementNode,
): void {
if (selection.anchor.key === 'root') {
Expand Down Expand Up @@ -108,7 +108,7 @@ function $removeParentEmptyElements(startingNode: ElementNode): void {
* @param wrappingElement - An element to append the wrapped selection and its children to.
*/
export function $wrapNodes(
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
createElement: () => ElementNode,
wrappingElement: null | ElementNode = null,
): void {
Expand Down Expand Up @@ -194,7 +194,7 @@ export function $wrapNodes(
* @returns
*/
export function $wrapNodesImpl(
selection: RangeSelection | GridSelection,
selection: INTERNAL_PointSelection,
nodes: LexicalNode[],
nodesLength: number,
createElement: () => ElementNode,
Expand Down
Loading

2 comments on commit d78d89c

@vercel
Copy link

@vercel vercel bot commented on d78d89c Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lexical – ./packages/lexical-website

lexical-git-main-fbopensource.vercel.app
lexical-fbopensource.vercel.app
lexical.dev
www.lexical.dev
lexicaljs.org
lexicaljs.com

@vercel
Copy link

@vercel vercel bot commented on d78d89c Dec 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lexical-playground – ./packages/lexical-playground

lexical-playground.vercel.app
lexical-playground-git-main-fbopensource.vercel.app
lexical-playground-fbopensource.vercel.app
playground.lexical.dev

Please sign in to comment.