From d4049bee17e30a835eb2be2edc9bae7f6952e001 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 28 Apr 2026 13:24:51 +0200 Subject: [PATCH 1/3] Made side menu delete button delete other blocks spanned by selection --- .../DragHandleMenu/DefaultItems/RemoveBlockItem.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx index ddcf027534..12ade8b4ae 100644 --- a/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx +++ b/packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx @@ -22,7 +22,14 @@ export const RemoveBlockItem = (props: { children: ReactNode }) => { return ( editor.removeBlocks([block])} + onClick={() => { + const selectedBlocks = editor.getSelection()?.blocks; + const blocksToRemove = + selectedBlocks && selectedBlocks.some((b) => b.id === block.id) + ? selectedBlocks + : [block]; + editor.removeBlocks(blocksToRemove); + }} > {props.children} From 030a50dba196cb28bb0cfa14a1a49335a972fde0 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 28 Apr 2026 14:10:21 +0200 Subject: [PATCH 2/3] Added e2e tests --- tests/package.json | 4 +- .../end-to-end/draghandle/draghandle.test.ts | 59 ++++++++++++ ...ehoveroutsideselection-chromium-linux.json | 96 +++++++++++++++++++ ...tehoveroutsideselection-firefox-linux.json | 96 +++++++++++++++++++ ...etehoveroutsideselection-webkit-linux.json | 96 +++++++++++++++++++ ...ledeletemultiselection-chromium-linux.json | 74 ++++++++++++++ ...dledeletemultiselection-firefox-linux.json | 74 ++++++++++++++ ...ndledeletemultiselection-webkit-linux.json | 74 ++++++++++++++ 8 files changed, 571 insertions(+), 2 deletions(-) create mode 100644 tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-chromium-linux.json create mode 100644 tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-firefox-linux.json create mode 100644 tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-webkit-linux.json create mode 100644 tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-chromium-linux.json create mode 100644 tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-firefox-linux.json create mode 100644 tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-webkit-linux.json diff --git a/tests/package.json b/tests/package.json index ea7da9e138..2e7d3af398 100644 --- a/tests/package.json +++ b/tests/package.json @@ -5,9 +5,9 @@ "scripts": { "build": "tsc", "lint": "eslint src --max-warnings 0", - "playwright": "playwright test", + "playwright": "playwright test --ui", "test": "vitest --run", - "test:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.51.1-noble npx playwright test -u", + "test:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.51.1-noble npx playwright test draghandle -u", "test-ct": "playwright test -c playwright-ct.config.ts --headed", "test-ct:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.51.1-noble npx playwright test -c playwright-ct.config.ts -u", "clean": "rimraf dist" diff --git a/tests/src/end-to-end/draghandle/draghandle.test.ts b/tests/src/end-to-end/draghandle/draghandle.test.ts index f77c414d2b..c2e9c3c211 100644 --- a/tests/src/end-to-end/draghandle/draghandle.test.ts +++ b/tests/src/end-to-end/draghandle/draghandle.test.ts @@ -2,6 +2,7 @@ import { expect, Page } from "@playwright/test"; import { test } from "../../setup/setupScript.js"; import { BASE_URL, + BULLET_LIST_SELECTOR, DRAG_HANDLE_ADD_SELECTOR, DRAG_HANDLE_MENU_SELECTOR, DRAG_HANDLE_SELECTOR, @@ -158,6 +159,64 @@ test.describe("Check Draghandle functionality", () => { await compareDocToSnapshot(page, "dragHandleDocStructure"); }); + test("Delete button should delete all blocks in multi-block selection when hovered block is in selection", async () => { + await executeSlashCommand(page, "h1"); + await page.keyboard.type("Heading 1"); + await page.keyboard.press("Enter", { delay: 10 }); + await executeSlashCommand(page, "h2"); + await page.keyboard.type("Heading 2"); + await page.keyboard.press("Enter", { delay: 10 }); + await executeSlashCommand(page, "h3"); + await page.keyboard.type("Heading 3"); + await page.keyboard.press("Enter", { delay: 10 }); + await executeSlashCommand(page, "bullet"); + await page.keyboard.type("Bullet List"); + + await page.keyboard.down("Shift"); + await page.keyboard.press("ArrowUp"); + await page.keyboard.press("ControlOrMeta+ArrowLeft"); + await page.keyboard.up("Shift"); + + await page.hover(H_THREE_BLOCK_SELECTOR); + await page.click(DRAG_HANDLE_SELECTOR); + await page.click("text=Delete"); + await page.waitForSelector(H_ONE_BLOCK_SELECTOR); + await page.waitForSelector(H_TWO_BLOCK_SELECTOR); + await page.waitForSelector(H_THREE_BLOCK_SELECTOR, { state: "detached" }); + await page.waitForSelector(BULLET_LIST_SELECTOR, { state: "detached" }); + + await compareDocToSnapshot(page, "draghandledeletemultiselection"); + }); + + test("Delete button should delete only hovered block when it is outside multi-block selection", async () => { + await executeSlashCommand(page, "h1"); + await page.keyboard.type("Heading 1"); + await page.keyboard.press("Enter", { delay: 10 }); + await executeSlashCommand(page, "h2"); + await page.keyboard.type("Heading 2"); + await page.keyboard.press("Enter", { delay: 10 }); + await executeSlashCommand(page, "h3"); + await page.keyboard.type("Heading 3"); + await page.keyboard.press("Enter", { delay: 10 }); + await executeSlashCommand(page, "bullet"); + await page.keyboard.type("Bullet List"); + + await page.keyboard.down("Shift"); + await page.keyboard.press("ArrowUp"); + await page.keyboard.press("ControlOrMeta+ArrowLeft"); + await page.keyboard.up("Shift"); + + await page.hover(H_ONE_BLOCK_SELECTOR); + await page.click(DRAG_HANDLE_SELECTOR); + await page.click("text=Delete"); + await page.waitForSelector(H_ONE_BLOCK_SELECTOR, { state: "detached" }); + await page.waitForSelector(H_TWO_BLOCK_SELECTOR); + await page.waitForSelector(H_THREE_BLOCK_SELECTOR); + await page.waitForSelector(BULLET_LIST_SELECTOR); + + await compareDocToSnapshot(page, "draghandledeletehoveroutsideselection"); + }); + test("Deleting block with children should delete all children", async () => { await page.goto(BASE_URL, { waitUntil: "networkidle" }); await focusOnEditor(page); diff --git a/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-chromium-linux.json b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-chromium-linux.json new file mode 100644 index 0000000000..4a3ca359e4 --- /dev/null +++ b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-chromium-linux.json @@ -0,0 +1,96 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "blockContainer", + "attrs": { + "id": "2" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 2, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 2" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "3" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 3, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 3" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "4" + }, + "content": [ + { + "type": "bulletListItem", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + }, + "content": [ + { + "type": "text", + "text": "Bullet List" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "1" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + } + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-firefox-linux.json b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-firefox-linux.json new file mode 100644 index 0000000000..4a3ca359e4 --- /dev/null +++ b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-firefox-linux.json @@ -0,0 +1,96 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "blockContainer", + "attrs": { + "id": "2" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 2, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 2" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "3" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 3, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 3" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "4" + }, + "content": [ + { + "type": "bulletListItem", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + }, + "content": [ + { + "type": "text", + "text": "Bullet List" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "1" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + } + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-webkit-linux.json b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-webkit-linux.json new file mode 100644 index 0000000000..4a3ca359e4 --- /dev/null +++ b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-webkit-linux.json @@ -0,0 +1,96 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "blockContainer", + "attrs": { + "id": "2" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 2, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 2" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "3" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 3, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 3" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "4" + }, + "content": [ + { + "type": "bulletListItem", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + }, + "content": [ + { + "type": "text", + "text": "Bullet List" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "1" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + } + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-chromium-linux.json b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-chromium-linux.json new file mode 100644 index 0000000000..f95bb590b9 --- /dev/null +++ b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-chromium-linux.json @@ -0,0 +1,74 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "blockContainer", + "attrs": { + "id": "0" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 1, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 1" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "2" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 2, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 2" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "1" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + } + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-firefox-linux.json b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-firefox-linux.json new file mode 100644 index 0000000000..f95bb590b9 --- /dev/null +++ b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-firefox-linux.json @@ -0,0 +1,74 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "blockContainer", + "attrs": { + "id": "0" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 1, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 1" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "2" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 2, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 2" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "1" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + } + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-webkit-linux.json b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-webkit-linux.json new file mode 100644 index 0000000000..f95bb590b9 --- /dev/null +++ b/tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-webkit-linux.json @@ -0,0 +1,74 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "blockContainer", + "attrs": { + "id": "0" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 1, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 1" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "2" + }, + "content": [ + { + "type": "heading", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left", + "level": 2, + "isToggleable": false + }, + "content": [ + { + "type": "text", + "text": "Heading 2" + } + ] + } + ] + }, + { + "type": "blockContainer", + "attrs": { + "id": "1" + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "backgroundColor": "default", + "textColor": "default", + "textAlignment": "left" + } + } + ] + } + ] + } + ] +} \ No newline at end of file From 31718b8a59d6c4350bf34fbec77821f1e2b93715 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 28 Apr 2026 15:45:27 +0200 Subject: [PATCH 3/3] Reverted `package.json` --- tests/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/package.json b/tests/package.json index 2e7d3af398..ea7da9e138 100644 --- a/tests/package.json +++ b/tests/package.json @@ -5,9 +5,9 @@ "scripts": { "build": "tsc", "lint": "eslint src --max-warnings 0", - "playwright": "playwright test --ui", + "playwright": "playwright test", "test": "vitest --run", - "test:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.51.1-noble npx playwright test draghandle -u", + "test:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.51.1-noble npx playwright test -u", "test-ct": "playwright test -c playwright-ct.config.ts --headed", "test-ct:updateSnaps": "docker run --rm -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.51.1-noble npx playwright test -c playwright-ct.config.ts -u", "clean": "rimraf dist"