plate-handler

Plate.js Editor Handler

Instructions

1. Installation & Setup

Use the shadcn CLI to install Plate components.

1. Core Installation: pnpm dlx shadcn@latest add @plate/​editor
2. Basic Nodes: pnpm dlx shadcn@latest add @plate/​basic-nodes-kit @plate/​fixed-toolbar @plate/​mark-toolbar-button
3. 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

1. Scaffold Components: Ensure the base UI components (Editor, EditorContainer, Toolbar) are installed in @/​components/​ui.
2. Create Editor Component: Create the wrapper component using usePlateEditor and <Plate>.
3. Configure Plugins: Import and add plugins to the plugins array.
4. Bind UI: Add FixedToolbar and buttons (MarkToolbarButton, ToolbarButton) inside the <Plate> provider.
5. 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.