Plate

Components

Draggable

A drag handle for moving editor blocks.

Installation

npx shadcx@latest add plate/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';

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

Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.

Create blockquotes to emphasize important information or highlight quotes from external sources.

// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}

Marks

Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.

Make text bold, italic, underlined, or apply a combination of these styles for a visually striking effect.

Add ~~strikethrough~~ to indicate deleted or outdated content.

Write code snippets with inline code formatting for easy readability.

Plate Plus

"+" button on the left gutter to insert blocks
Click on the drag handle to open the block menu
Beautifully crafted UI

Get the code ->