Skip to main content

Drag & Drop

Includes drag & drop feature using a drag handle on the left side of each block.

Installation#

npm install @udecode/plate-dnd react-dnd react-dnd-html5-backend
# with Plate UI
npm install @udecode/plate-ui-dnd

Usage#

  • Wrap your editor with <DndProvider backend={HTML5Backend}> provider
  • Override your components with components = withStyledDraggables(components), these will wrap your block components with a draggable handle.
  • Use createNodeIdPlugin() plugin as it requires id property on your blocks.
import React from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import {
  createBasicElementsPlugin,
  createNodeIdPlugin,
  Plate,
} from '@udecode/plate';
import { createDndPlugin } from '@udecode/plate-dnd';
import { basicElementsValue } from './basic-elements/basicElementsValue';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { withStyledDraggables } from './dnd/withStyledDraggables';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

// set drag handle next to each block
const components = withStyledDraggables(plateUI);

// set id to each block
const initialValue = basicElementsValue;

const plugins = createMyPlugins(
  [
    createBasicElementsPlugin(),
    createNodeIdPlugin(),
    createDndPlugin({ options: { enableScroller: true } }),
  ],
  {
    components,
  }
);

export default () => (
  <DndProvider backend={HTML5Backend}>
    <Plate<MyValue>
      editableProps={editableProps}
      plugins={plugins}
      initialValue={initialValue}
    />
  </DndProvider>
Edit this page