Toolbar BUG occur after media dragging

[Zum-Gluck]

Drag.mp4

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[hensuninnovation]

@Zum-Gluck I noticed the same issue. Do you have solution for this bug?

[hensuninnovation]

@Zum-Gluck After digging into the source code, I found that the toolbar was blocked by ScrollArea (zIndex 10000) from dnd plugin: https://github.com/udecode/plate/blob/main/packages/dnd/src/components/Scroller/ScrollArea.tsx#L24 You can disable it https://platejs.org/docs/dnd#enableScroller

[zbeyens]

Or call dndStore.set.isDragging(false) when that happens

[hensuninnovation]

Thank you @zbeyens! Any plan to fix this issue? It only happens when user drag and drop the selected content within visible area for example drag and drop text within the same line, then both top and low scroll areas are automatically removed.

[zbeyens]

No ETA but PR's welcome

[nklhtv]

The area of the page is not clickable becayse DnD renders the top and bottom scrollers with fixed position. I am temporarily disabling the scroller of DnD plugin.

createDndPlugin({
  options: { enableScroller: false },
})

---

The issue is caused by the DnD plugin handlers onDragStart and onDrop handlers are called when you drag & drop text, but onDragEnd is not.

The way this is handled in dragOverCursor is by reseting the store state in all 3 onDragLeave, onDragEnd & onDrop. Should that be adopted in DnD?
@zbeyens