Drag and Drop Kit

Features

• Drag and drop blocks for content movement and insertion within the editor.
• Automatic scrolling when dragging blocks near viewport edges.
• File drop support for inserting media blocks.
• Visual drop indicators and drag handles.

Usage

Installation

The fastest way to add drag and drop functionality is with the DndKit, which includes the pre-configured DndPlugin along with React DnD setup and the BlockDraggable UI component.

• BlockDraggable: Renders drag handles and drop indicators for blocks.

Add Kit

import { createPlateEditor } from "platejs/react";
import { DndKit } from "@/components/editor/plugins/dnd-kit";

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...DndKit,
  ],
});