Drag & Drop
Includes drag & drop feature using a drag handle on the left side of each block.
#
Installation- npm
- Yarn
#
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 requiresid
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>