From c1cd8500b392f368fee104ac9ef4534aab7ba69a Mon Sep 17 00:00:00 2001 From: Bob Ippolito Date: Tue, 18 Feb 2025 08:53:18 -0800 Subject: [PATCH] Remove special case for collapsible forward deletion --- .../__tests__/e2e/Selection.spec.mjs | 111 +++++++++++++++++- .../src/plugins/CollapsiblePlugin/index.ts | 97 --------------- 2 files changed, 106 insertions(+), 102 deletions(-) diff --git a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs index 52a90419253..f65dba8e4ee 100644 --- a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs @@ -380,7 +380,7 @@ test.describe.parallel('Selection', () => { ); }); - test('Can delete forward a Collapsible', async ({page, isPlainText}) => { + test(`Can't delete forward a Collapsible`, async ({page, isPlainText}) => { test.skip(isPlainText); if (!IS_MAC) { // Do Windows/Linux have equivalent shortcuts? @@ -389,6 +389,7 @@ test.describe.parallel('Selection', () => { await focusEditor(page); await page.keyboard.type('abc'); await insertCollapsible(page); + await page.keyboard.type('title'); await moveToEditorBeginning(page); await moveRight(page, 3); await deleteForward(page); @@ -401,15 +402,68 @@ test.describe.parallel('Selection', () => { dir="ltr"> abc

+
+ +

+ title +

+ +
+


+
+


-


`, ); }); - // TODO I don't think this test is correct but at least this test will prevent it from regressing - // even further - test('Can delete forward a Table', async ({page, isPlainText}) => { + test(`Can't delete backward a Collapsible`, async ({page, isPlainText}) => { + test.skip(isPlainText); + if (!IS_MAC) { + // Do Windows/Linux have equivalent shortcuts? + return; + } + await focusEditor(page); + await page.keyboard.type('abc'); + await insertCollapsible(page); + await page.keyboard.type('title'); + await moveRight(page, 2); + await page.keyboard.type('after'); + await moveLeft(page, 'after'.length); + await deleteBackward(page); + + await assertHTML( + page, + html` +

+ abc +

+
+ +

+ title +

+ +
+


+
+
+

+ after +

+ `, + ); + }); + + test(`Can't delete forward a Table`, async ({page, isPlainText}) => { test.skip(isPlainText); if (!IS_MAC) { // Do Windows/Linux have equivalent shortcuts? @@ -451,6 +505,53 @@ test.describe.parallel('Selection', () => { ); }); + test(`Can't delete backward a Table`, async ({page, isPlainText}) => { + test.skip(isPlainText); + if (!IS_MAC) { + // Do Windows/Linux have equivalent shortcuts? + return; + } + await focusEditor(page); + await page.keyboard.type('abc'); + await insertTable(page, 1, 2); + await moveToEditorEnd(page); + await page.keyboard.type('after'); + await moveLeft(page, 'after'.length); + await deleteBackward(page); + + await assertHTML( + page, + html` +

+ abc +

+ + + + + + + + + +
+


+ 		+


+
+

+ after +

+ `, + ); + }); + test('Can delete block elements', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts index 13c600532b9..3836e1b5ed4 100644 --- a/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts +++ b/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts @@ -15,22 +15,12 @@ import { mergeRegister, } from '@lexical/utils'; import { - $caretFromPoint, $createParagraphNode, - $extendCaretToRange, - $getCaretRange, $getSelection, - $isChildCaret, - $isElementNode, $isRangeSelection, - $isSiblingCaret, - $setSelectionFromCaretRange, COMMAND_PRIORITY_LOW, createCommand, - DELETE_CHARACTER_COMMAND, - ElementNode, INSERT_PARAGRAPH_COMMAND, - INTERNAL_$isBlock, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, @@ -170,93 +160,6 @@ export default function CollapsiblePlugin(): null { } }), - // This handles the case when container is collapsed and we delete its previous sibling - // into it, it would cause collapsed content deleted (since it's display: none, and selection - // swallows it when deletes single char). Instead we expand container, which is although - // not perfect, but avoids bigger problem - editor.registerCommand( - DELETE_CHARACTER_COMMAND, - (isBackward) => { - const selection = $getSelection(); - if (!$isRangeSelection(selection) || !selection.isCollapsed()) { - return false; - } - if (!isBackward) { - // inherit strange forward delete behavior per e2e election test - // 'Can delete forward a Collapsible' - const forwardRange = $extendCaretToRange( - $caretFromPoint(selection.anchor, 'next'), - ); - let lastBlock: ElementNode | undefined; - for (const caret of forwardRange.iterNodeCarets('shadowRoot')) { - if ($isSiblingCaret(caret) && $isElementNode(caret.origin)) { - if (INTERNAL_$isBlock(caret.origin)) { - lastBlock = caret.origin; - } - continue; - } else if ( - lastBlock && - $isChildCaret(caret) && - $isCollapsibleContainerNode(caret.origin) - ) { - // Unwrap the collapsible, emulating the previous behavior - // where the forward deletion opened the title's shadow root, - // but skip the step where we let the transforms unwrap the nodes - const children = caret.origin.getChildren().flatMap((child) => { - if ($isCollapsibleTitleNode(child)) { - const nestedChildren = child.getChildren(); - const [firstChild] = nestedChildren; - // unnest the first paragraph of the title - if ( - $isElementNode(firstChild) && - INTERNAL_$isBlock(firstChild) - ) { - nestedChildren.splice(0, 1, ...firstChild.getChildren()); - } - return nestedChildren; - } else if ($isCollapsibleContentNode(child)) { - return child.getChildren(); - } else { - return [child]; - } - }); - const collapsedRange = $getCaretRange( - forwardRange.anchor, - forwardRange.anchor, - ); - // insert the children, - $setSelectionFromCaretRange(collapsedRange).insertNodes( - children, - ); - caret.origin.remove(); - $setSelectionFromCaretRange(collapsedRange); - return true; - } - break; - } - } - - if (selection.anchor.offset !== 0) { - return false; - } - - const anchorNode = selection.anchor.getNode(); - const topLevelElement = anchorNode.getTopLevelElement(); - if (topLevelElement === null) { - return false; - } - - const container = topLevelElement.getPreviousSibling(); - if (!$isCollapsibleContainerNode(container) || container.getOpen()) { - return false; - } - - container.setOpen(true); - return true; - }, - COMMAND_PRIORITY_LOW, - ), - // When collapsible is the last child pressing down/right arrow will insert paragraph // below it to allow adding more content. It's similar what $insertBlockNode // (mainly for decorators), except it'll always be possible to continue adding