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} 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