Drag & Drop

DraggableDnd Plugin
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/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>
  );
}

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.

    The current drop target state containing both the target element id and drop line direction.

API

focusBlockStartById

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

Parameters

Collapse all

    The ID of the block to be focused.

getBlocksWithId

Returns an array of blocks that have an ID.

OptionsEditorNodesOptions

    The options for getting node entries.

ReturnsNodeEntry[]

    Array of blocks that have an ID.

selectBlockById

Parameters

Collapse all

    The ID of the block to select.

Components

withDraggable

Parameters

Collapse all

    The draggable component to be rendered.

    The component to be enhanced with draggable behavior.

    Options for draggable behavior.

OptionsWithDraggableOptions

Collapse all

    The level of the draggable component.

    Function that returns whether the component should be draggable.

    Whether the component should be draggable in read-only mode.

    Props to be passed to the draggable component.

DndScroller

A wrapper component for the Scroller component that is conditionally rendered based on the dragging state.

State

Collapse all

    Whether the scroll area is enabled.

    Height of the scrollable area in pixels.

    Stack order of the scrollable area.

    Minimum strength (speed) of scrolling.

    Multiplier for scroll speed.

    Reference to the scrollable container DOM element.

    Additional props for the scroll area div element.

Hooks

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.

OptionsUseDndNodeOptions

Collapse all

    The node to be dragged.

    The type of drag item.

    • Default: 'block'

    The ref of the node to be dragged.

    The orientation of drag and drop.

    • Default: 'vertical'

    Callback to determine if a node can be dropped.

    The preview options for the dragged node.

    The drag options for the dragged node.

    The drop options for the dragged node.

    Handler called when the node is dropped.

Returnsobject

Collapse all

    Whether the node is currently being dragged.

    Whether the dragged node is over a drop target.

    Drag reference for the draggable element.

useDragNode

A custom hook that enables dragging of a node from the editor using the useDrag hook from react-dnd.

OptionsUseDragNodeOptions

Collapse all

    Unique ID of the node to be dragged.

    Drag object or factory function that returns it.

useDraggable

A custom hook that enables draggable behavior for a given element. It provides a preview for the element, which can be customized or disabled.

Optionsobject

Collapse all

    The element to make draggable.

    Orientation of drag and drop.

    • Default: 'vertical'

    Type of drag item.

    • Default: 'block'

    Handler called when element is dropped.

Returnsobject

Collapse all

    Drag source connector function.

    Whether element is being dragged.

    Reference to 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.

OptionsUseDropNodeOptions

Collapse all

    Reference to the node being dragged.

    ID of the node.

    Current value of the drop line.

    Callback when drop line changes.

    Callback that intercepts drop handling.

    • Returns true to prevent default behavior
    • Returns false to run default behavior after

useDropLine

Optionsobject

Collapse all

    Element ID to show drop line for.

    • Default: Current element ID

    Filter drop lines by orientation.

    • Default: 'vertical'

Returnsobject

Collapse all

    Current drop line direction.