Marketplace plate-handler

Implement rich text editors using Plate.js. Supports creating both simple (comment/chat) and detailed (document/blog) editors.

install

source · Clone the upstream repo

git clone https://github.com/aiskillstore/marketplace

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/aayushbaniya2006/plate-handler" ~/.claude/skills/aiskillstore-marketplace-plate-handler && rm -rf "$T"

manifest: skills/aayushbaniya2006/plate-handler/SKILL.md

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.