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.
The current drop target state containing both the target element id and drop line direction. Internal state.
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
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.
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 drag reference that should be assigned to the draggable element.
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 manages the draggable state for a node.
Parameters
Returns
The drag source connector function.
Whether the element is currently being dragged.
Reference to the draggable element.
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.
useDropLine
Returns the current drop line state for an element.
Parameters
Returns
The current drop line direction.