Drag & Drop

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

import React from 'react';

import { Plate } from '@udecode/plate-common/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. Internal state.

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

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.

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 drag reference that should be assigned to the draggable element.

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 manages the draggable state for a node.

Parameters

Collapse all

Returns

Collapse all

    The drag source connector function.

    Whether the element is currently being dragged.

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

Parameters

Collapse all

    The editor instance.

    Options for the drop behavior.

useDropLine

Returns the current drop line state for an element.

Parameters

Collapse all

Returns

Collapse all

    The current drop line direction.