Plate.js Editor Handler
Instructions
1. Installation & Setup
Use the shadcn CLI to install Plate components.
- Core Installation:
pnpm dlx shadcn@latest add @plate/editor
- Basic Nodes:
pnpm dlx shadcn@latest add @plate/basic-nodes-kit @plate/fixed-toolbar @plate/mark-toolbar-button
- Preset (Optional): For a quick comprehensive setup, use
pnpm dlx shadcn@latest add @plate/editor-basic.
2. Choosing an Editor Type
Decide based on the user's requirement:
A. Small Editor (Comments, Chat, Bio)
- Goal: Minimal distraction, basic formatting.
- Plugins: Bold, Italic, Underline, maybe Link.
- UI: Simple
FixedToolbar or no toolbar (shortcuts only).
- Location:
src/components/plate-editor/simple-editor.tsx
B. Detailed Editor (Blog, Documents, CMS)
- Goal: Full content creation capabilities.
- Plugins: Headings (H1-H3), Blockquote, Lists, Images, Media, Tables.
- UI: Full
FixedToolbar with multiple groups, Floating Toolbar.
- Location:
src/components/plate-editor/detailed-editor.tsx
3. Implementation Steps
- Scaffold Components: Ensure the base UI components (
Editor, EditorContainer, Toolbar) are installed in @/components/ui.
- Create Editor Component: Create the wrapper component using
usePlateEditor and <Plate>.
- Configure Plugins: Import and add plugins to the
plugins array.
- Bind UI: Add
FixedToolbar and buttons (MarkToolbarButton, ToolbarButton) inside the <Plate> provider.
- State Management: Use
value and onChange props on <Plate> to handle content. Sync with localStorage or form state as needed.
4. Reference & Docs
See reference.md for code snippets, CLI commands, and configuration details.
