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

Parameters

Collapse all

    The editor instance.

    The ID of the block to be focused.

getBlocksWithId

Parameters

Collapse all

    The editor instance.

    The options for getting node entries.

ReturnsNodeEntry[]

    Array of blocks that have an ID.

selectBlockById

Parameters

Collapse all

    The editor instance.

    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

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

Parameters

Collapse all

    Options for drag and drop behavior.

OptionsUseDndNodeOptions

Collapse all

    The ID of 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

Parameters

Collapse all

    The editor instance.

    Options for drag behavior.

OptionsUseDragNodeOptions

Collapse all

    Unique ID of the node to be dragged.

    Drag object or factory function that returns it.

useDraggable

Parameters

Collapse all

    Options for draggable behavior.

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

Parameters

Collapse all

    The editor instance.

    Options for 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

Parameters

Collapse all

    Options for drop line behavior.

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.