fix: Firefox invisible text cursor after dropping blocks

[matthewlipski]

Summary

This PR blurs the editor after blocks are dragged and dropped. This is mainly to fix an issue in Firefox that causes the text cursor to become invisible after drag & drop. However, it's also generally better for UX, as having the editor keep focus makes the formatting toolbar show up. Notion also doesn't show the toolbar after blocks are dropped.

R.e. the Firefox invisible cursor issue, this was a bit of a rabbithole.

First off, this also happens with TipTap's drag handle implementions (vanilla JS, React, and Vue):

Vanilla JS Drag Handle

React Drag Handle

Vue Drag Handle

Then I found that TinyMCE also had this issue ages ago, but was since fixed:

TinyMCE #2823

TinyMCE #1497

Unfortunately, despite searching for it, I couldn't find the PR with the fix for these issues.

There's also a ProseMirror bug report that's been open for years regarding what seems to be the same issue:

ProseMirror #593

So overall, looks like this is just a bug with Firefox, and the best we can do is work around it. Blurring the editor and refocusing it works. This PR just blurs it (as this more closely matches Notion's UX), but could be changed to refocus it after too.

Closes #2036

Rationale

The caret disappearing in Firefox is a major annoyance, and users have to click somewhere outside the editor, then back on it, to make it reappear.

Changes

Made editor DOM element get blurred at the end of blockDragEnd.

Impact

N/A

Testing

Is there even a way to test for this? Even with e2e test screenshots, the text cursor blinks so they seem like they'd be flaky at best.

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

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
blocknote	Ready	Preview	Oct 27, 2025 11:13am
blocknote-website	Ready	Preview	Oct 27, 2025 11:13am

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@2128

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@2128

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@2128

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@2128

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@2128

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@2128

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@2128

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@2128

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@2128

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@2128

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@2128

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@2128

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@2128

commit: 7c04957

[nperez0111]

Good sleuthing @matthewlipski, I've been annoyed by this for a while myself using firefox daily.

Only question is why we'd blur the domElement, instead of doing editor.blur() (editor is BlockNoteEditor here). Does it not work for that? I've just not seen this API really used & it could be unclear.

In either case, we should definitely leave ourselves a comment linking to this PR since you've captured a lot of info here

[matthewlipski]

So there actually is no editor.blur atm, only editor.focus. Even under the PM view there is no blur. I'll add it to the editor API, but we still have to use editor.prosemirrorView.dom.blur.