Drag Handle React extension
Have you ever wanted to drag nodes around your react-based editor? Well, we did too—so here’s an extension for that.
The DragHandleReact
component allows you to easily handle dragging nodes around in the editor. You can define custom render functions, placement, and more.
It essentially wraps the DragHandle extension in a React component that will automatically register/unregister the extension with the editor.
Install
npm install @tiptap/extension-drag-handle-react @tiptap/extension-drag-handle @tiptap/extension-node-range @tiptap/extension-collaboration @tiptap/y-tiptap yjs y-protocols
Props
All props follow the same structure as the DragHandle extension.
children
The content that should be displayed inside of the drag handle.
<DragHandle>
<div>Drag Me!</div>
</DragHandle>
computePositionConfig
Configuration for position computation of the drag handle using the floating-ui/dom package. You can pass any options that are available in the floating-ui documentation.
Default: { placement: 'left-start', strategy: 'absolute' }
<DragHandle
computePositionConfig={{
placement: 'left',
strategy: 'fixed',
}}
>
<div>Drag Me!</div>
</DragHandle>
onNodeChange
Returns a node or null when a node is hovered over. This can be used to highlight the node that is currently hovered over.
Default: undefined
function Component() {
const [selectedNode, setSelectedNode] = useState(null)
return (
<DragHandle
onNodeChange={({ node, editor, pos }) => {
setSelectedNode(node)
// do something with the node
}}
>
<div>Drag Me!</div>
</DragHandle>
)
}
getReferencedVirtualElement
A function that returns the virtual element for the drag handle. This is useful when the menu needs to be positioned relative to a specific DOM element.
Default: undefined
<DragHandle
getReferencedVirtualElement={() => {
// Return a virtual element for custom positioning
return null
}}
>
<div>Drag Me!</div>
</DragHandle>
locked
Locks the draghandle in place and visibility. If the drag handle was visible, it will remain visible until unlocked. If it was hidden, it will remain hidden until unlocked.
Default: false
<DragHandle locked={true}>
<div>Drag Me!</div>
</DragHandle>
pluginKey
The key that should be used to store the plugin in the editor. This is useful if you have multiple drag handles in the same editor.
Default: undefined
<DragHandle pluginKey="myCustomDragHandle">
<div>Drag Me!</div>
</DragHandle>
onElementDragStart
A function that is called when the element starts to be dragged. This can be used to add custom logic when dragging starts.
<DragHandle
onElementDragStart={(e: DragEvent) => {
// do something when dragging starts
}}
>
<div>Drag Me!</div>
</DragHandle>
onElementDragEnd
A function that is called when the element stops being dragged. This can be used to add custom logic when dragging ends.
<DragHandle
onElementDragEnd={(e: DragEvent) => {
// do something when dragging ends
}}
>
<div>Drag Me!</div>
</DragHandle>
Commands
See the DragHandle extension for available editor commands.