Skip to content

Commit 15b7dea

Browse files
matthewlipskimatthewlipski
authored
feat: Drag hendle menu delete button removes all other blocks in selection (BLO-1007) (#2683)
* Made side menu delete button delete other blocks spanned by selection * Added e2e tests * Reverted `package.json`
1 parent e23f858 commit 15b7dea

8 files changed

Lines changed: 577 additions & 1 deletion

‎packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,14 @@ export const RemoveBlockItem = (props: { children: ReactNode }) => {
2222
return (
2323
<Components.Generic.Menu.Item
2424
className={"bn-menu-item"}
25-
onClick={() => editor.removeBlocks([block])}
25+
onClick={() => {
26+
const selectedBlocks = editor.getSelection()?.blocks;
27+
const blocksToRemove =
28+
selectedBlocks && selectedBlocks.some((b) => b.id === block.id)
29+
? selectedBlocks
30+
: [block];
31+
editor.removeBlocks(blocksToRemove);
32+
}}
2633
>
2734
{props.children}
2835
</Components.Generic.Menu.Item>

‎tests/src/end-to-end/draghandle/draghandle.test.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { expect, Page } from "@playwright/test";
22
import { test } from "../../setup/setupScript.js";
33
import {
44
BASE_URL,
5+
BULLET_LIST_SELECTOR,
56
DRAG_HANDLE_ADD_SELECTOR,
67
DRAG_HANDLE_MENU_SELECTOR,
78
DRAG_HANDLE_SELECTOR,
@@ -158,6 +159,64 @@ test.describe("Check Draghandle functionality", () => {
158159
await compareDocToSnapshot(page, "dragHandleDocStructure");
159160
});
160161

162+
test("Delete button should delete all blocks in multi-block selection when hovered block is in selection", async () => {
163+
await executeSlashCommand(page, "h1");
164+
await page.keyboard.type("Heading 1");
165+
await page.keyboard.press("Enter", { delay: 10 });
166+
await executeSlashCommand(page, "h2");
167+
await page.keyboard.type("Heading 2");
168+
await page.keyboard.press("Enter", { delay: 10 });
169+
await executeSlashCommand(page, "h3");
170+
await page.keyboard.type("Heading 3");
171+
await page.keyboard.press("Enter", { delay: 10 });
172+
await executeSlashCommand(page, "bullet");
173+
await page.keyboard.type("Bullet List");
174+
175+
await page.keyboard.down("Shift");
176+
await page.keyboard.press("ArrowUp");
177+
await page.keyboard.press("ControlOrMeta+ArrowLeft");
178+
await page.keyboard.up("Shift");
179+
180+
await page.hover(H_THREE_BLOCK_SELECTOR);
181+
await page.click(DRAG_HANDLE_SELECTOR);
182+
await page.click("text=Delete");
183+
await page.waitForSelector(H_ONE_BLOCK_SELECTOR);
184+
await page.waitForSelector(H_TWO_BLOCK_SELECTOR);
185+
await page.waitForSelector(H_THREE_BLOCK_SELECTOR, { state: "detached" });
186+
await page.waitForSelector(BULLET_LIST_SELECTOR, { state: "detached" });
187+
188+
await compareDocToSnapshot(page, "draghandledeletemultiselection");
189+
});
190+
191+
test("Delete button should delete only hovered block when it is outside multi-block selection", async () => {
192+
await executeSlashCommand(page, "h1");
193+
await page.keyboard.type("Heading 1");
194+
await page.keyboard.press("Enter", { delay: 10 });
195+
await executeSlashCommand(page, "h2");
196+
await page.keyboard.type("Heading 2");
197+
await page.keyboard.press("Enter", { delay: 10 });
198+
await executeSlashCommand(page, "h3");
199+
await page.keyboard.type("Heading 3");
200+
await page.keyboard.press("Enter", { delay: 10 });
201+
await executeSlashCommand(page, "bullet");
202+
await page.keyboard.type("Bullet List");
203+
204+
await page.keyboard.down("Shift");
205+
await page.keyboard.press("ArrowUp");
206+
await page.keyboard.press("ControlOrMeta+ArrowLeft");
207+
await page.keyboard.up("Shift");
208+
209+
await page.hover(H_ONE_BLOCK_SELECTOR);
210+
await page.click(DRAG_HANDLE_SELECTOR);
211+
await page.click("text=Delete");
212+
await page.waitForSelector(H_ONE_BLOCK_SELECTOR, { state: "detached" });
213+
await page.waitForSelector(H_TWO_BLOCK_SELECTOR);
214+
await page.waitForSelector(H_THREE_BLOCK_SELECTOR);
215+
await page.waitForSelector(BULLET_LIST_SELECTOR);
216+
217+
await compareDocToSnapshot(page, "draghandledeletehoveroutsideselection");
218+
});
219+
161220
test("Deleting block with children should delete all children", async () => {
162221
await page.goto(BASE_URL, { waitUntil: "networkidle" });
163222
await focusOnEditor(page);

‎tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-chromium-linux.json‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "2"
11+
},
12+
"content": [
13+
{
14+
"type": "heading",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left",
19+
"level": 2,
20+
"isToggleable": false
21+
},
22+
"content": [
23+
{
24+
"type": "text",
25+
"text": "Heading 2"
26+
}
27+
]
28+
}
29+
]
30+
},
31+
{
32+
"type": "blockContainer",
33+
"attrs": {
34+
"id": "3"
35+
},
36+
"content": [
37+
{
38+
"type": "heading",
39+
"attrs": {
40+
"backgroundColor": "default",
41+
"textColor": "default",
42+
"textAlignment": "left",
43+
"level": 3,
44+
"isToggleable": false
45+
},
46+
"content": [
47+
{
48+
"type": "text",
49+
"text": "Heading 3"
50+
}
51+
]
52+
}
53+
]
54+
},
55+
{
56+
"type": "blockContainer",
57+
"attrs": {
58+
"id": "4"
59+
},
60+
"content": [
61+
{
62+
"type": "bulletListItem",
63+
"attrs": {
64+
"backgroundColor": "default",
65+
"textColor": "default",
66+
"textAlignment": "left"
67+
},
68+
"content": [
69+
{
70+
"type": "text",
71+
"text": "Bullet List"
72+
}
73+
]
74+
}
75+
]
76+
},
77+
{
78+
"type": "blockContainer",
79+
"attrs": {
80+
"id": "1"
81+
},
82+
"content": [
83+
{
84+
"type": "paragraph",
85+
"attrs": {
86+
"backgroundColor": "default",
87+
"textColor": "default",
88+
"textAlignment": "left"
89+
}
90+
}
91+
]
92+
}
93+
]
94+
}
95+
]
96+
}

‎tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-firefox-linux.json‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "2"
11+
},
12+
"content": [
13+
{
14+
"type": "heading",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left",
19+
"level": 2,
20+
"isToggleable": false
21+
},
22+
"content": [
23+
{
24+
"type": "text",
25+
"text": "Heading 2"
26+
}
27+
]
28+
}
29+
]
30+
},
31+
{
32+
"type": "blockContainer",
33+
"attrs": {
34+
"id": "3"
35+
},
36+
"content": [
37+
{
38+
"type": "heading",
39+
"attrs": {
40+
"backgroundColor": "default",
41+
"textColor": "default",
42+
"textAlignment": "left",
43+
"level": 3,
44+
"isToggleable": false
45+
},
46+
"content": [
47+
{
48+
"type": "text",
49+
"text": "Heading 3"
50+
}
51+
]
52+
}
53+
]
54+
},
55+
{
56+
"type": "blockContainer",
57+
"attrs": {
58+
"id": "4"
59+
},
60+
"content": [
61+
{
62+
"type": "bulletListItem",
63+
"attrs": {
64+
"backgroundColor": "default",
65+
"textColor": "default",
66+
"textAlignment": "left"
67+
},
68+
"content": [
69+
{
70+
"type": "text",
71+
"text": "Bullet List"
72+
}
73+
]
74+
}
75+
]
76+
},
77+
{
78+
"type": "blockContainer",
79+
"attrs": {
80+
"id": "1"
81+
},
82+
"content": [
83+
{
84+
"type": "paragraph",
85+
"attrs": {
86+
"backgroundColor": "default",
87+
"textColor": "default",
88+
"textAlignment": "left"
89+
}
90+
}
91+
]
92+
}
93+
]
94+
}
95+
]
96+
}

‎tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-webkit-linux.json‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "2"
11+
},
12+
"content": [
13+
{
14+
"type": "heading",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left",
19+
"level": 2,
20+
"isToggleable": false
21+
},
22+
"content": [
23+
{
24+
"type": "text",
25+
"text": "Heading 2"
26+
}
27+
]
28+
}
29+
]
30+
},
31+
{
32+
"type": "blockContainer",
33+
"attrs": {
34+
"id": "3"
35+
},
36+
"content": [
37+
{
38+
"type": "heading",
39+
"attrs": {
40+
"backgroundColor": "default",
41+
"textColor": "default",
42+
"textAlignment": "left",
43+
"level": 3,
44+
"isToggleable": false
45+
},
46+
"content": [
47+
{
48+
"type": "text",
49+
"text": "Heading 3"
50+
}
51+
]
52+
}
53+
]
54+
},
55+
{
56+
"type": "blockContainer",
57+
"attrs": {
58+
"id": "4"
59+
},
60+
"content": [
61+
{
62+
"type": "bulletListItem",
63+
"attrs": {
64+
"backgroundColor": "default",
65+
"textColor": "default",
66+
"textAlignment": "left"
67+
},
68+
"content": [
69+
{
70+
"type": "text",
71+
"text": "Bullet List"
72+
}
73+
]
74+
}
75+
]
76+
},
77+
{
78+
"type": "blockContainer",
79+
"attrs": {
80+
"id": "1"
81+
},
82+
"content": [
83+
{
84+
"type": "paragraph",
85+
"attrs": {
86+
"backgroundColor": "default",
87+
"textColor": "default",
88+
"textAlignment": "left"
89+
}
90+
}
91+
]
92+
}
93+
]
94+
}
95+
]
96+
}

0 commit comments

Comments
 (0)