Skip to content

Commit 5edef6a

Browse files
matthewlipskimatthewlipski
authored
fix(drag-n-drop): support PDF block drag & drop (BLO-893) (#2714)
1 parent bca6680 commit 5edef6a

5 files changed

Lines changed: 208 additions & 14 deletions

File tree

‎packages/core/src/extensions/SideMenu/dragging.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,13 @@ function setDragImage(view: EditorView, from: number, to = from) {
101101

102102
// Browsers may have CORS policies which prevents iframes from being
103103
// manipulated, so better to stay on the safe side and remove them from the
104-
// drag preview. The drag preview doesn't work with iframes anyway.
105-
const iframes = dragImageElement.getElementsByTagName("iframe");
106-
for (let i = 0; i < iframes.length; i++) {
107-
const iframe = iframes[i];
108-
const parent = iframe.parentElement;
109-
110-
if (parent) {
111-
parent.removeChild(iframe);
112-
}
113-
}
104+
// drag preview. The drag preview doesn't work with embedded documents
105+
// (iframe/embed/object) anyway, and including an <embed> (e.g. a PDF)
106+
// can prevent the drag from initiating at all.
107+
const embeddedDocs = dragImageElement.querySelectorAll(
108+
"iframe, embed, object",
109+
);
110+
embeddedDocs.forEach((el) => el.parentElement?.removeChild(el));
114111

115112
// TODO: This is hacky, need a better way of assigning classes to the editor so that they can also be applied to the
116113
// drag preview.

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
H_TWO_BLOCK_SELECTOR,
88
IMAGE_SELECTOR,
99
PARAGRAPH_SELECTOR,
10+
PDF_FILE_BLOCK_URL,
11+
PDF_SELECTOR,
1012
} from "../../utils/const.js";
1113
import { insertHeading, insertParagraph } from "../../utils/copypaste.js";
1214
import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js";
@@ -15,10 +17,6 @@ import { executeSlashCommand } from "../../utils/slashmenu.js";
1517

1618
test.describe.configure({ mode: "serial" });
1719

18-
test.beforeEach(async ({ page }) => {
19-
await page.goto(BASE_URL, { waitUntil: "networkidle" });
20-
});
21-
2220
test.describe("Check Block Dragging Functionality", () => {
2321
test("Should be able to drag & drop non-nested blocks", async ({
2422
page,
@@ -28,6 +26,7 @@ test.describe("Check Block Dragging Functionality", () => {
2826
browserName === "firefox",
2927
"Playwright doesn't correctly simulate drag events in Firefox.",
3028
);
29+
await page.goto(BASE_URL, { waitUntil: "networkidle" });
3130
await focusOnEditor(page);
3231

3332
await insertHeading(page, 1);
@@ -52,6 +51,7 @@ test.describe("Check Block Dragging Functionality", () => {
5251
browserName === "firefox",
5352
"Playwright doesn't correctly simulate drag events in Firefox.",
5453
);
54+
await page.goto(BASE_URL, { waitUntil: "networkidle" });
5555
await focusOnEditor(page);
5656

5757
await insertHeading(page, 1);
@@ -89,6 +89,7 @@ test.describe("Check Block Dragging Functionality", () => {
8989
browserName === "firefox",
9090
"Playwright doesn't correctly simulate drag events in Firefox.",
9191
);
92+
await page.goto(BASE_URL, { waitUntil: "networkidle" });
9293
await focusOnEditor(page);
9394
await executeSlashCommand(page, "image");
9495

@@ -110,6 +111,7 @@ test.describe("Check Block Dragging Functionality", () => {
110111
browserName === "firefox",
111112
"Playwright doesn't correctly simulate drag events in Firefox.",
112113
);
114+
await page.goto(BASE_URL, { waitUntil: "networkidle" });
113115
await focusOnEditor(page);
114116
await executeSlashCommand(page, "image");
115117
await insertHeading(page, 1);
@@ -121,4 +123,20 @@ test.describe("Check Block Dragging Functionality", () => {
121123
const toolbar = page.locator(".bn-formatting-toolbar");
122124
await expect(toolbar).not.toBeVisible();
123125
});
126+
127+
test("Should be able to drag PDF block", async ({ page, browserName }) => {
128+
test.skip(
129+
browserName === "firefox",
130+
"Playwright doesn't correctly simulate drag events in Firefox.",
131+
);
132+
await page.goto(PDF_FILE_BLOCK_URL, { waitUntil: "networkidle" });
133+
await focusOnEditor(page);
134+
await page.waitForSelector(PDF_SELECTOR);
135+
136+
const dragTarget = page.locator(PDF_SELECTOR);
137+
const dropTarget = page.locator(PARAGRAPH_SELECTOR).first();
138+
await dragAndDropBlock(page, dragTarget, dropTarget, false);
139+
140+
await compareDocToSnapshot(page, "dragPdf");
141+
});
124142
});

‎tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragPdf-chromium-linux.json‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "0"
11+
},
12+
"content": [
13+
{
14+
"type": "paragraph",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left"
19+
},
20+
"content": [
21+
{
22+
"type": "text",
23+
"text": "Welcome to this demo!"
24+
}
25+
]
26+
}
27+
]
28+
},
29+
{
30+
"type": "blockContainer",
31+
"attrs": {
32+
"id": "1"
33+
},
34+
"content": [
35+
{
36+
"type": "pdf",
37+
"attrs": {
38+
"name": "",
39+
"url": "https://pdfobject.com/pdf/sample.pdf",
40+
"caption": "",
41+
"showPreview": true
42+
}
43+
}
44+
]
45+
},
46+
{
47+
"type": "blockContainer",
48+
"attrs": {
49+
"id": "2"
50+
},
51+
"content": [
52+
{
53+
"type": "paragraph",
54+
"attrs": {
55+
"backgroundColor": "default",
56+
"textColor": "default",
57+
"textAlignment": "left"
58+
},
59+
"content": [
60+
{
61+
"type": "text",
62+
"text": "Press the '/' key to open the Slash Menu and add another PDF"
63+
}
64+
]
65+
}
66+
]
67+
},
68+
{
69+
"type": "blockContainer",
70+
"attrs": {
71+
"id": "3"
72+
},
73+
"content": [
74+
{
75+
"type": "paragraph",
76+
"attrs": {
77+
"backgroundColor": "default",
78+
"textColor": "default",
79+
"textAlignment": "left"
80+
}
81+
}
82+
]
83+
}
84+
]
85+
}
86+
]
87+
}

‎tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragPdf-webkit-linux.json‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
{
2+
"type": "doc",
3+
"content": [
4+
{
5+
"type": "blockGroup",
6+
"content": [
7+
{
8+
"type": "blockContainer",
9+
"attrs": {
10+
"id": "0"
11+
},
12+
"content": [
13+
{
14+
"type": "paragraph",
15+
"attrs": {
16+
"backgroundColor": "default",
17+
"textColor": "default",
18+
"textAlignment": "left"
19+
},
20+
"content": [
21+
{
22+
"type": "text",
23+
"text": "Welcome to this demo!"
24+
}
25+
]
26+
}
27+
]
28+
},
29+
{
30+
"type": "blockContainer",
31+
"attrs": {
32+
"id": "1"
33+
},
34+
"content": [
35+
{
36+
"type": "pdf",
37+
"attrs": {
38+
"name": "",
39+
"url": "https://pdfobject.com/pdf/sample.pdf",
40+
"caption": "",
41+
"showPreview": true
42+
}
43+
}
44+
]
45+
},
46+
{
47+
"type": "blockContainer",
48+
"attrs": {
49+
"id": "2"
50+
},
51+
"content": [
52+
{
53+
"type": "paragraph",
54+
"attrs": {
55+
"backgroundColor": "default",
56+
"textColor": "default",
57+
"textAlignment": "left"
58+
},
59+
"content": [
60+
{
61+
"type": "text",
62+
"text": "Press the '/' key to open the Slash Menu and add another PDF"
63+
}
64+
]
65+
}
66+
]
67+
},
68+
{
69+
"type": "blockContainer",
70+
"attrs": {
71+
"id": "3"
72+
},
73+
"content": [
74+
{
75+
"type": "paragraph",
76+
"attrs": {
77+
"backgroundColor": "default",
78+
"textColor": "default",
79+
"textAlignment": "left"
80+
}
81+
}
82+
]
83+
}
84+
]
85+
}
86+
]
87+
}

‎tests/src/utils/const.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ export const NON_EDITABLE_BLOCK_URL = !process.env.RUN_IN_DOCKER
4747
? `http://localhost:${PORT}/custom-schema/non-editable-block?hideMenu`
4848
: `http://host.docker.internal:${PORT}/custom-schema/non-editable-block?hideMenu`;
4949

50+
export const PDF_FILE_BLOCK_URL = !process.env.RUN_IN_DOCKER
51+
? `http://localhost:${PORT}/custom-schema/pdf-file-block?hideMenu`
52+
: `http://host.docker.internal:${PORT}/custom-schema/pdf-file-block?hideMenu`;
53+
5054
export const COMMENTS_URL = !process.env.RUN_IN_DOCKER
5155
? `http://localhost:${PORT}/collaboration/comments-testing?hideMenu`
5256
: `http://host.docker.internal:${PORT}/collaboration/comments-testing?hideMenu`;
@@ -64,6 +68,7 @@ export const NUMBERED_LIST_SELECTOR = `[data-content-type="numberedListItem"]`;
6468
export const BULLET_LIST_SELECTOR = `[data-content-type="bulletListItem"]`;
6569
export const PARAGRAPH_SELECTOR = `[data-content-type="paragraph"]`;
6670
export const IMAGE_SELECTOR = `[data-content-type="image"]`;
71+
export const PDF_SELECTOR = `[data-content-type="pdf"]`;
6772
export const TABLE_SELECTOR = `[data-content-type="table"]`;
6873

6974
export const DRAG_HANDLE_SELECTOR = `[data-test="dragHandle"]`;

0 commit comments

Comments
 (0)