BlockNote takes over my drag and drop

[sb8244]

Describe the bug
My app's drag and drop stopped working. I traced it back to when within 250px of a BlockNote editor, my app's drop handlers will not execute (React-dnd)

To Reproduce
Use React-Dnd within 250px of an editor instance. I think this is a bit cumbersome to actually setup a reproduction for.

Misc

In SideMenuPlugin/onDragOver, if I comment out this.dispatchSyntheticEvent(event);, then the issue doesn't happen. The onDragOver callback is being processed even if not relevant to the drag event.

I recorded a quick video of the issue happening: https://www.loom.com/share/5e83087f54fa4d07a4718bb6466b1a9d

I am on the latest BlockNote release.

• Node version:
• Package manager:
• Browser:
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[sb8244]

If anyone runs into this, I found that disableExtension: ["sideMenu"] removes the issue.

For me, I disable DnD when edit mode is enabled (already ran into issues in past), so removing the sideMenu when NOT in edit mode fixes the issue for me.

[nperez0111]

Yea, this is intentional behavior to allow the user to drag items near the editor, but not quite within it's bounds & have it still count as an editor drop.

I'm not totally sure what the best solution is here. Maybe that the distance we use to determine this is configurable (so that you can set it to 0 in your case)? Or we can give you the event in a callback, but it can be hard to determine what should be our event vs yours.

We default to the simplest & most expected behavior for the user

[sb8244]

Yea, this is a confusing problem for me. I am wondering why I didn't see this particular issue in the past (before the dnd changes). The odd thing is that this issue doesn't happen if I drop into BlockNote, it's something specifically about dropping outside of it after onDragOver fires.

To be honest, I don't understand enough about dnd to understand why the event being processed by Prosemirror causes react-dnd to not work.

The best solution may be "this works as expected" and to disable sideMenu extension like I'm doing now.

[nperez0111]

The drag over handler is listening on the page as a whole. So if your library is not capturing the event (i.e. letting it bubble to the document without a evt.stopPropagationthen it will fall into our handler see event bubbling if you aren't familiar with it)

So there are three solutions here:

1. We can be more specific about the sort of event we are looking for: A) by allowing the radius to be configurable B) by allowing a callback to cancel the event as invalid somehow
2. We can stop the event handler from running at all (your sideMenu fix is some form of this)
3. Or in your app, you can stop the event from bubbling up into the document which should make the event not be captured in the first place