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!');
}
Each block is a React component in which you can manage the state:
    Create a "banana language" translation plugin
    Create a "detect sarcasm" plugin (good luck with that)
    Create an AI auto-complete plugin

🔗 Link

Add hyperlinks within your text to reference external sources or provide additional information using the Link plugin.
Effortlessly create hyperlinks using the toolbar or by pasting a URL while selecting the desired text.

🌱 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 { 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

Collapse all

    Enables the scroller feature.

    Props for the Scroller component.

API

focusBlockStartById

Selects the start of a block by ID and focuses the editor.

Parameters

Collapse all

    The editor instance.

    The ID of the block to be focused.

getBlocksWithId

Returns an array of blocks that have an ID.

Parameters

Collapse all

    The editor instance.

    The options for getting node entries.

Returns

Collapse all

    An array of blocks that have an ID.

selectBlockById

Parameters

Collapse all

    The editor instance.

    The ID of the block to select.

API Plugins

withDraggable

Enhances a component with draggable behavior.

Parameters

Collapse all

    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

Collapse all

    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

Collapse all

    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

Collapse all

    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

Collapse all

Returns

Collapse all

    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

Collapse all

    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

Collapse all

    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

Collapse all

    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

Collapse all

    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

Collapse all

    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

Collapse all

    The editor instance.

    Options for the drop behavior.

useDraggableGutter

Returns props for the draggable gutter.

Returns

Collapse all

    Props to be spread on the gutter element.

useDropLine

Returns the current drop line state and props.

Returns

Collapse all

    The current direction of the drop line.

    Props to be spread on the drop line element.

useDraggableStore

Draggable store.

State

Collapse all

    The current direction of the drop line.

DateEmoji