agentsclimarketplace
Sign in

Plate handler

Skill aiskillstore/marketplace/skills/aayushbaniya2006/plate-handler

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

Install
npx -y skills add aiskillstore/marketplace --skill plate-handler

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

2.0 KB, 464 tokens by cl100k_base, as published. Nobody here has run it

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.

What ships with it: 2 files

26.7 KB alongside SKILL.md

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.