Опишете задачата
Към всички skills

plate-handler

aiskillstore · Документация

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

Оригинален текст · няма потвърден превод на български
Платформи: ClaudeНиво: НачалноВ индекса: 04.03.2026 г.Обновен в GitHub: 04.03.2026 г.

Първо прочетете инструкцията.

Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.

Оригинален SKILL.md
GitHub хранилище
Звезди на репото
428
Лиценз
Не е посочен. Проверете в репозитория.
Последна проверка на записа
Няма посочена дата

Добавете в своя инструмент.

Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.

npx skills add aiskillstore/marketplace

Страницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.

Откъс от SKILL.md

Началото на файла на автора, без превод.

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.

Целият SKILL.md в GitHub