[Bug]: Can't reorder columns using dnd

[lscheibel]

Bug type

Behavior bug (incorrect output/state without crash)

Browser surface

Yes

Summary

Using the top drag handles from columns, no valid drop target is ever visible.

Public reproduction URL

https://platejs.org/docs/column

Steps to reproduce

1. Open columns documentation
2. Start dragging a column using the top drag handle.

Expected behavior

I can reorder the columns based by dragging them.

OR

No drag handle is visible that suggests this is possible.

Actual behavior

The dragged column can not be dropped anywhere.

Acceptance criteria

• Reordering columns in a column list works as expected.

Plate / Slate / React versions

NOT_ENOUGH_INFO

Operating system

macOS 26.4 (25E246)

Install method

No response

Framework / app setup

NOT_ENOUGH_INFO

Affected packages or entry points

@plate/column-kit

Minimal code or config excerpt

NOT_ENOUGH_INFO

Logs, screenshots, and evidence

Impact and severity

Affected: users
Severity: annoying
Frequency: always
Consequence: dnd is broken

Additional information

Screen.Recording.2026-06-09.at.09.17.09.mov

[dosubot]

I can confirm this bug. After looking at the implementation, the root cause appears to be a ref conflict between the column's own useDraggable and how nodeRef is used as the drop target.

In column-node.tsx, the ColumnElement uses useDraggable which internally creates a nodeRef and registers it as the drop target via drop(nodeRef) [1]. However, the component never attaches this nodeRef to any DOM element — it only uses previewRef (on the PlateElement) and handleRef (on the drag handle):

const { isDragging, previewRef, handleRef } = useDraggable({...});

The nodeRef is created in useDraggable [2] and passed to useDndNode where React DnD's drop() connector is called on it [3]. But since nodeRef is never attached to a DOM node in the component JSX, the drop target is effectively pointing to null — meaning columns never register as valid drop targets for other columns.

Fix: The nodeRef needs to be attached to the column's DOM element. The component should destructure nodeRef from useDraggable and compose it with the element ref:

const { isDragging, previewRef, handleRef, nodeRef } = useDraggable({
  element: props.element,
  orientation: 'horizontal',
  type: 'column',
  canDropNode: ({ dragEntry, dropEntry }) =>
    PathApi.equals(
      PathApi.parent(dragEntry[1]),
      PathApi.parent(dropEntry[1])
    ),
});

// ...
<PlateElement
  {...props}
  ref={useComposedRef(props.ref, previewRef, nodeRef)}
  // ...
>

This is similar to how BlockDraggable attaches nodeRef to its wrapper div [4].

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.