Draggable
Installation
npx shadcn@canary add https://platejs.org/r/draggable
Usage
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';
export function MyEditor() {
const editor = usePlateEditor({
plugins: [
// ...otherPlugins,
NodeIdPlugin,
DndPlugin.configure({ options: { enableScroller: true } }),
],
components: {
// ...components
},
});
return (
<DndProvider backend={HTML5Backend}>
<Plate editor={editor}>
<PlateContent />
</Plate>
</DndProvider>
);
}
Examples
components/demo.tsx
'use client';
import * as React from 'react';
import { Plate } from '@udecode/plate/react';
import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/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>
);
}
Plate Plus
- "+" button on the left gutter to insert blocks
- Click on the drag handle to open the block menu
- Beautifully crafted UI