Respect canDrop option of react-dnd

[delijah]

Checklist

• yarn typecheck
• yarn lint:fix
• yarn test
• yarn brl
• yarn changeset
• ui changelog

This PR enables the dnd plugin, to support the react-dnd native canDrop option.

It's already possible to pass a canDrop function to the useDraggable hook like this:

import { useDraggable } from '@platejs/dnd';

const { isAboutToDrag, isDragging } = useDraggable({
    drop: {
        canDrop(item, monitor) {
            // Only allow drop if this drop target is directly hovered.
            if (!monitor.isOver({ shallow: true })) {
                return false;
            }

            return true;
        },
    },
    ...
});

But unfortunately it's not respected by the dnd plugin yet (namely the getDropPath function).

There is also a canDropNode option, but this is only valid for dnd operations on plate nodes (not for file system files for example).

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

🦋 Changeset detected

Latest commit: 1ddc1f2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@platejs/dnd	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
plate	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2025 11:36pm

[zbeyens]

Thanks! Test is failing