Docs
Drag & Drop

Drag & Drop

Allows movement of blocks, such as paragraph or tables, within the editor.

Draggable

🌳 Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}

🌱 Marks

Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.
Make text bold, italic, underlined, or apply a combination of these styles for a visually striking effect.
Add strikethrough to indicate deleted or outdated content.
Write code snippets with inline code formatting for easy readability.

Features

  • Drag & drop of blocks for content movement and insertion within the editor.

Installation

npm install @udecode/plate-dnd @udecode/plate-node-id react-dnd react-dnd-html5-backend

Usage

import { createDndPlugin } from '@udecode/plate-dnd';
import { createNodeIdPlugin } from '@udecode/plate-node-id';
 
const plugins = [
  // ...otherPlugins,
  createNodeIdPlugin(),
  createDndPlugin(),
];

Then, wrap your plugin components with Draggable.

API

createDndPlugin

Attributes

Collapse all

    Enables the scroller feature.

    Props for the Scroller component.

focusBlockStartById

getBlocksWithId

selectBlockById

API Plugins

withDraggable

API Components

DndScroller

dndStore

useDndBlock

useDndNode

useDragBlock

useDragNode

useDraggable

useDraggableState

useDropBlock

useDropNode

CommentsEmoji