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

[matthewlipski]

Summary

In the PDF block example, dragging and dropping the PDF block using the drag handle is currently broken. This is because like iframe elements, embed elements are also subject to CORS policies, which cause issues when trying to set the drag preview.

Currently, we only account for iframe elements though, and as the PDF block uses an embed element, attempting to set the drag preview causes the whole drag to fail.

This PR fixes that by omitting embed and object elements from the drag prevew as well as iframe elements.

Closes #1205

Rationale

This issue affects not only PDF blocks, but any custom blocks using the aforementioned element types.

Changes

See above.

Impact

N/A

Testing

Added e2e test.

Screenshots/Video

N/A

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

• Bug Fixes

  • Improved drag-and-drop handling for blocks with embedded content, such as PDFs and other embedded documents.

• Tests

  • Added end-to-end tests for PDF block drag-and-drop functionality across multiple browsers to ensure reliability.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	May 6, 2026 8:32am
blocknote-website	Ready	Preview	May 6, 2026 8:32am

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR fixes PDF block drag-and-drop functionality by broadening the drag image cleanup logic in SideMenu/dragging.ts to remove all embedded documents (iframes, embeds, objects) instead of just iframes. End-to-end tests verify the fix with PDF block drag scenarios and snapshots.

Changes

PDF Drag-and-Drop Fix

Layer / File(s)	Summary
Core Implementation packages/core/src/extensions/SideMenu/dragging.ts	Drag image cleanup now removes iframe, embed, and object elements (embedded documents) using querySelectorAll, replacing the previous iframe-only removal.
Test Infrastructure tests/src/utils/const.ts	Added PDF_FILE_BLOCK_URL and PDF_SELECTOR constants with RUN_IN_DOCKER conditionals to support PDF drag-and-drop test scenarios.
End-to-End Tests tests/src/end-to-end/dragdrop/dragdrop.test.ts	Migrated global beforeEach navigation to explicit test-level page.goto() calls; added new test "Should be able to drag PDF block" that navigates to PDF URL, waits for PDF element, and verifies drag behavior via snapshot comparison.
Test Snapshots tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragPdf-chromium-linux.json, dragPdf-webkit-linux.json	Added browser-specific snapshots capturing the expected UI state of PDF block drag-and-drop on Chromium and WebKit, including PDF block structure and accompanying text blocks.

Suggested reviewers

• nperez0111

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🐇 A PDF once stuck, refused to glide,
But now embedded docs step aside!
Drag and drop flows smooth as a dream,
Our rabbit-tested snapshot regime! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers all critical sections: summary explains the problem, rationale provided, changes listed, testing confirmed via e2e test, and checklist completed.
Linked Issues check	✅ Passed	Changes fully address issue #1205 by fixing drag-drop for PDF blocks and embed/object elements, matching the requirement to make PDF blocks movable.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the PDF block drag-drop issue: dragging logic update, e2e test, test constants, and snapshots.
Title check	✅ Passed	The PR title accurately describes the main fix: PDF block drag & drop support. It is concise, specific, and directly corresponds to the primary change across the modified files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch pdf-drag-drop

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2714

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2714

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2714

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2714

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2714

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2714

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2714

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2714

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2714

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2714

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2714

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2714

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2714

commit: 12b8779

[nperez0111]

Good catch @matthewlipski