plate-handlerlisted

# 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 (`MarkToolbarBut