Draggable
A drag handle for moving editor blocks.
Installation
npx shadcx@latest add plate/draggableUsage
import { DndPlugin } from '@udecode/plate-dnd';
import { NodeIdPlugin } from '@udecode/plate-node-id';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { withDraggables } from './withDraggables';export function MyEditor() {
const editor = usePlateEditor({
plugins: [
// ...otherPlugins,
NodeIdPlugin,
DndPlugin.configure({ options: { enableScroller: true } }),
],
override: {
components: withDraggables({
// ...components
}),
}
});
return (
<DndProvider backend={HTML5Backend}>
<Plate editor={editor}>
<PlateContent />
</Plate>
</DndProvider>
);
}Examples
Drag & Drop
Loading...
Plate Plus
- "+" button on the left gutter to insert blocks
- Click on the drag handle to open the block menu
- Beautifully crafted UI