fix: Drag preview blocking drops when overlapping the editor (BLO-996)

[matthewlipski]

Summary

When dragging & dropping a block, an invisible HTML element is added to the DOM to set as the drag preview image.

Depending on the size of the dragged block and the position of the editor, this element may overlap with the editor HTML element, blocking the user from dropping the block anywhere covered by the preview element.

This PR fixes that by adding pointer-events: none; to the preview element CSS.

Closes #2369

Rationale

This is a bug, and it's especially unclear to the user why they cannot drop blocks in certain places.

Changes

See above.

Impact

N/A

Testing

N/A

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

• Style
  • Updated drag preview styling to ensure drag and drop interactions pass through to the underlying editor UI while maintaining visual transparency. This improves interaction handling during drag operations.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	Apr 22, 2026 2:04pm
blocknote-website	Ready	Preview	Apr 22, 2026 2:04pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The CSS styling for the .bn-drag-preview class is updated to include pointer-events: none, enabling drag-drop interactions to pass through the preview element while maintaining its existing near-transparent visibility approach.

Changes

Cohort / File(s)	Summary
Drag Preview Styling packages/core/src/editor/editor.css	Added pointer-events: none to .bn-drag-preview CSS rule to prevent the drag preview from intercepting pointer events, allowing interactions to pass through to underlying editor UI.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• YousefED
• nperez0111

Poem

🐰✨ A preview that floats without a care,
Now pointer-events float through the air!
Transparency meets interactivity's art,
Drag and drop magic plays its part,
Through invisible layers, the editor flows free! 🎨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers all required template sections with sufficient detail: Summary clearly explains the issue, Rationale justifies the fix, Changes are specified, and the checklist is completed with all items marked as done.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title accurately describes the main change: adding pointer-events: none to fix drag preview blocking drops when overlapping the editor, matching the changeset content perfectly.

_{✏️ 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 drag-preview-overlap-fix

---

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@2670

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: b068e5d

[nperez0111]

I would double check safari & firefox for this just to be sure it doesn't mess anything up

[matthewlipski]

Looks like drag previews in Safari and Firefox are not working either way (on main also), so I'll make a separate issue for this.