Skip to content

fix(drag-n-drop): support PDF block drag & drop (BLO-893) #2714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nperez0111 merged 1 commit into from
May 6, 2026
Merged

fix(drag-n-drop): support PDF block drag & drop (BLO-893) #2714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions packages/core/src/extensions/SideMenu/dragging.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,16 +101,13 @@ function setDragImage(view: EditorView, from: number, to = from) {

// Browsers may have CORS policies which prevents iframes from being
// manipulated, so better to stay on the safe side and remove them from the
// drag preview. The drag preview doesn't work with iframes anyway.
const iframes = dragImageElement.getElementsByTagName("iframe");
for (let i = 0; i < iframes.length; i++) {
const iframe = iframes[i];
const parent = iframe.parentElement;

if (parent) {
parent.removeChild(iframe);
}
}
// drag preview. The drag preview doesn't work with embedded documents
// (iframe/embed/object) anyway, and including an <embed> (e.g. a PDF)
// can prevent the drag from initiating at all.
const embeddedDocs = dragImageElement.querySelectorAll(
"iframe, embed, object",
);
embeddedDocs.forEach((el) => el.parentElement?.removeChild(el));

// TODO: This is hacky, need a better way of assigning classes to the editor so that they can also be applied to the
// drag preview.
Expand Down
26 changes: 22 additions & 4 deletions tests/src/end-to-end/dragdrop/dragdrop.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
H_TWO_BLOCK_SELECTOR,
IMAGE_SELECTOR,
PARAGRAPH_SELECTOR,
PDF_FILE_BLOCK_URL,
PDF_SELECTOR,
} from "../../utils/const.js";
import { insertHeading, insertParagraph } from "../../utils/copypaste.js";
import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js";
Expand All @@ -15,10 +17,6 @@ import { executeSlashCommand } from "../../utils/slashmenu.js";

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

test.beforeEach(async ({ page }) => {
await page.goto(BASE_URL, { waitUntil: "networkidle" });
});

test.describe("Check Block Dragging Functionality", () => {
test("Should be able to drag & drop non-nested blocks", async ({
page,
Expand All @@ -28,6 +26,7 @@ test.describe("Check Block Dragging Functionality", () => {
browserName === "firefox",
"Playwright doesn't correctly simulate drag events in Firefox.",
);
await page.goto(BASE_URL, { waitUntil: "networkidle" });
await focusOnEditor(page);

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

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

Expand All @@ -110,6 +111,7 @@ test.describe("Check Block Dragging Functionality", () => {
browserName === "firefox",
"Playwright doesn't correctly simulate drag events in Firefox.",
);
await page.goto(BASE_URL, { waitUntil: "networkidle" });
await focusOnEditor(page);
await executeSlashCommand(page, "image");
await insertHeading(page, 1);
Expand All @@ -121,4 +123,20 @@ test.describe("Check Block Dragging Functionality", () => {
const toolbar = page.locator(".bn-formatting-toolbar");
await expect(toolbar).not.toBeVisible();
});

test("Should be able to drag PDF block", async ({ page, browserName }) => {
test.skip(
browserName === "firefox",
"Playwright doesn't correctly simulate drag events in Firefox.",
);
await page.goto(PDF_FILE_BLOCK_URL, { waitUntil: "networkidle" });
await focusOnEditor(page);
await page.waitForSelector(PDF_SELECTOR);

const dragTarget = page.locator(PDF_SELECTOR);
const dropTarget = page.locator(PARAGRAPH_SELECTOR).first();
await dragAndDropBlock(page, dragTarget, dropTarget, false);

await compareDocToSnapshot(page, "dragPdf");
});
});
87 changes: 87 additions & 0 deletions tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragPdf-chromium-linux.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
{
"type": "doc",
"content": [
{
"type": "blockGroup",
"content": [
{
"type": "blockContainer",
"attrs": {
"id": "0"
},
"content": [
{
"type": "paragraph",
"attrs": {
"backgroundColor": "default",
"textColor": "default",
"textAlignment": "left"
},
"content": [
{
"type": "text",
"text": "Welcome to this demo!"
}
]
}
]
},
{
"type": "blockContainer",
"attrs": {
"id": "1"
},
"content": [
{
"type": "pdf",
"attrs": {
"name": "",
"url": "https://pdfobject.com/pdf/sample.pdf",
"caption": "",
"showPreview": true
}
}
]
},
{
"type": "blockContainer",
"attrs": {
"id": "2"
},
"content": [
{
"type": "paragraph",
"attrs": {
"backgroundColor": "default",
"textColor": "default",
"textAlignment": "left"
},
"content": [
{
"type": "text",
"text": "Press the '/' key to open the Slash Menu and add another PDF"
}
]
}
]
},
{
"type": "blockContainer",
"attrs": {
"id": "3"
},
"content": [
{
"type": "paragraph",
"attrs": {
"backgroundColor": "default",
"textColor": "default",
"textAlignment": "left"
}
}
]
}
]
}
]
}
87 changes: 87 additions & 0 deletions tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragPdf-webkit-linux.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
{
"type": "doc",
"content": [
{
"type": "blockGroup",
"content": [
{
"type": "blockContainer",
"attrs": {
"id": "0"
},
"content": [
{
"type": "paragraph",
"attrs": {
"backgroundColor": "default",
"textColor": "default",
"textAlignment": "left"
},
"content": [
{
"type": "text",
"text": "Welcome to this demo!"
}
]
}
]
},
{
"type": "blockContainer",
"attrs": {
"id": "1"
},
"content": [
{
"type": "pdf",
"attrs": {
"name": "",
"url": "https://pdfobject.com/pdf/sample.pdf",
"caption": "",
"showPreview": true
}
}
]
},
{
"type": "blockContainer",
"attrs": {
"id": "2"
},
"content": [
{
"type": "paragraph",
"attrs": {
"backgroundColor": "default",
"textColor": "default",
"textAlignment": "left"
},
"content": [
{
"type": "text",
"text": "Press the '/' key to open the Slash Menu and add another PDF"
}
]
}
]
},
{
"type": "blockContainer",
"attrs": {
"id": "3"
},
"content": [
{
"type": "paragraph",
"attrs": {
"backgroundColor": "default",
"textColor": "default",
"textAlignment": "left"
}
}
]
}
]
}
]
}
5 changes: 5 additions & 0 deletions tests/src/utils/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ export const NON_EDITABLE_BLOCK_URL = !process.env.RUN_IN_DOCKER
? `http://localhost:${PORT}/custom-schema/non-editable-block?hideMenu`
: `http://host.docker.internal:${PORT}/custom-schema/non-editable-block?hideMenu`;

export const PDF_FILE_BLOCK_URL = !process.env.RUN_IN_DOCKER
? `http://localhost:${PORT}/custom-schema/pdf-file-block?hideMenu`
: `http://host.docker.internal:${PORT}/custom-schema/pdf-file-block?hideMenu`;

export const COMMENTS_URL = !process.env.RUN_IN_DOCKER
? `http://localhost:${PORT}/collaboration/comments-testing?hideMenu`
: `http://host.docker.internal:${PORT}/collaboration/comments-testing?hideMenu`;
Expand All @@ -64,6 +68,7 @@ export const NUMBERED_LIST_SELECTOR = `[data-content-type="numberedListItem"]`;
export const BULLET_LIST_SELECTOR = `[data-content-type="bulletListItem"]`;
export const PARAGRAPH_SELECTOR = `[data-content-type="paragraph"]`;
export const IMAGE_SELECTOR = `[data-content-type="image"]`;
export const PDF_SELECTOR = `[data-content-type="pdf"]`;
export const TABLE_SELECTOR = `[data-content-type="table"]`;

export const DRAG_HANDLE_SELECTOR = `[data-test="dragHandle"]`;
Expand Down
Loading