Plate Editor

A rich text editor component library built with Plate and React.

Installation

npm install @your-org/plate-editor
# or
pnpm add @your-org/plate-editor
# or
yarn add @your-org/plate-editor

Peer Dependencies

This package requires the following peer dependencies:

npm install react@^19.0.0 react-dom@^19.0.0

Usage

Basic Usage

import { PlateEditor } from '@your-org/plate-editor';
import '@your-org/plate-editor/styles.css';

function App() {
  return <PlateEditor />;
}

Advanced Usage with Custom Editor

import { useCreateEditor, Editor, EditorContainer } from '@your-org/plate-editor';
import { Plate } from '@udecode/plate/react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

function CustomEditor() {
  const editor = useCreateEditor();

  return (
    <DndProvider backend={HTML5Backend}>
      <Plate editor={editor}>
        <EditorContainer>
          <Editor variant="demo" />
        </EditorContainer>
      </Plate>
    </DndProvider>
  );
}

Features

This editor includes support for:

• Rich text formatting: Bold, italic, underline, strikethrough, code
• Block elements: Headings, paragraphs, blockquotes, code blocks
• Lists: Ordered and unordered lists with indentation
• Media: Images, videos (YouTube), audio
• Tables: Full-featured table support
• Links: Inline links with editing capabilities
• Comments: Collaborative commenting
• AI features: AI-powered text completion and commands
• Drag and drop: Reorder blocks with drag and drop
• Equations: Math equations with KaTeX
• Mentions: @-mentions support
• Emojis: Emoji picker
• Date picker: Insert dates
• And much more!

Development

Build

pnpm build

Development Mode

pnpm dev

Type Checking

pnpm typecheck

License

MIT