Drag & Drop
Allows movement of blocks, such as paragraph or tables, within the editor.
'use client';
import React from 'react';
import { Plate } from '@udecode/plate-common/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';
import { DEMO_VALUES } from './values/demo-values';
export default function Demo({ id }: { id: string }) {
const editor = useCreateEditor({
plugins: [...editorPlugins],
value: DEMO_VALUES[id],
});
return (
<Plate editor={editor}>
<EditorContainer variant="demo">
<Editor />
</EditorContainer>
</Plate>
);
}
Installation
npm install @udecode/plate-dnd @udecode/plate-node-id react-dnd react-dnd-html5-backendUsage
import { DndPlugin } from '@udecode/plate-dnd';
import { NodeIdPlugin } from '@udecode/plate-node-id';
const plugins = [
// ...otherPlugins,
NodeIdPlugin,
DndPlugin,
];Then, wrap your plugin components with Draggable.
Plugins
DndPlugin
Options
Enables the scroller feature.
Props for the Scroller component.
API
focusBlockStartById
Selects the start of a block by ID and focuses the editor.
Parameters
The editor instance.
The ID of the block to be focused.
getBlocksWithId
Returns an array of blocks that have an ID.
Parameters
The editor instance.
The options for getting node entries.
Returns
An array of blocks that have an ID.
selectBlockById
Parameters
The editor instance.
The ID of the block to select.
API Plugins
withDraggable
Enhances a component with draggable behavior.
Parameters
The draggable component to be rendered.
The component to be enhanced with draggable behavior.
API Components
DraggableProvider
A new component that provides context for managing draggable state.
Props
The child components to be wrapped with the draggable context.
DndScroller
A wrapper component for the Scroller component that is conditionally rendered based on the dragging state.
State
A flag indicating whether the scroll area is enabled. If set to false, the scroll functionality is disabled.
The height of the scrollable area, specified in pixels.
The stack order of the scrollable area. An element with a higher z-index is drawn in front of an element with a lower one.
The minimum strength (speed) of the scrolling action. Higher values will make the scroll action more sensitive.
A multiplier that increases the scroll speed. Higher values will result in faster scrolling.
A reference to the DOM element of the scrollable container.
Additional props that can be spread onto the scroll area div element.
useDndBlock
A custom hook that wraps the useDndNode hook and configures it for dragging block items.
Parameters
Options for the useDndNode hook, with the type property set to
DRAG_ITEM_BLOCK.
useDndNode
A custom hook that combines the useDragNode and useDropNode hooks to enable dragging and dropping of a node from the editor. It provides a default preview for the dragged node, which can be customized or disabled.
Parameters
Returns
Indicates whether the node is currently being dragged.
Indicates whether the dragged node is currently over a drop target.
The direction of the drop line, indicating the position where the node can be dropped.
The drag reference that should be assigned to the draggable element.
useDragBlock
A custom hook that enables dragging of a block node from the editor. It internally uses the useDragNode hook.
Parameters
The editor instance.
The unique ID of the block node to be dragged.
useDragNode
A custom hook that enables dragging of a node from the editor using the useDrag hook from react-dnd.
Parameters
The editor instance.
The options for the drag behavior, including the unique ID of the node to be dragged.
useDraggable
A custom hook that provides the necessary properties and event handlers for making an element draggable.
State
Indicates whether the node is currently being dragged.
The ref of the node to be dragged.
The drag reference that should be assigned to the draggable element.
Returns
A reference to the HTML div element that serves as the preview during drag.
A reference to the drag source connector provided by react-dnd.
useDropBlock
A custom hook that enables dropping a block into the editor. It internally uses the useDropNode hook to handle the drop behavior.
Parameters
The editor instance.
Options for the drop behavior.
useDropNode
A custom hook that enables dropping a node on the editor. It uses the useDrop hook from react-dnd to handle the drop behavior.
Parameters
The editor instance.
Options for the drop behavior.
useDraggableGutter
Returns props for the draggable gutter.
Returns
Props to be spread on the gutter element.
useDropLine
Returns the current drop line state and props.
Returns
The current direction of the drop line.
Props to be spread on the drop line element.
useDraggableStore
Draggable store.
State
The current direction of the drop line.