Drag & Drop
Allows movement of blocks, such as paragraph or tables, within the editor.
🌳 Blocks
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippetsfunction greet() { console.info('Hello World!');}
- Create a "banana language" translation plugin
- Create a "detect sarcasm" plugin (good luck with that)
- Create an AI auto-complete plugin
🔗 Link
🌱 Marks
code
formatting for easy readability.Installation
npm install @udecode/plate-dnd @udecode/plate-node-id react-dnd react-dnd-html5-backend
Usage
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
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
The direction of the drop line, indicating the position where the node can be dropped.
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
.
Additional props to be applied to the dropline element.
Additional props to be applied to the left gutter element.
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.
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.