S Skillteca
Receber por email
Explorar Categorias Coleções Newsletter
← Voltar para o catálogo

plate-handler

Segurança Autor: aiskillstore

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

367estrelas
Atualizado há 4 meses
Ver no GitHub ↗

Como adicionar

/plugin marketplace add aiskillstore/marketplace

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/plate-handler/svg)](https://www.skillteca.com.br/skills/plate-handler)
#ai

Skills relacionadas

Ver todas de Segurança →

security-research

63k

Habilidade de pesquisa de segurança em Modo Equipe que orquestra 3 caçadores de vulnerabilidades e 2 engenheiros de PoC para auditar um código, provar explorabilidade, classificar causas raiz e calibrar a severidade. É utilizada para revisão de segurança, pesquisa de vulnerabilidades, auditoria de explorabilidade e validação de modelo de ameaças.

Segurança por code-yeongyu

security-scanning-security-dependencies

41.2k

You are a security expert specializing in dependency vulnerability analysis, SBOM generation, and supply chain security. Scan project dependencies across multiple ecosystems to identify vulnerabilities, assess risks, and provide automated remediation strategies.

Segurança #ai #git por sickn33

vulnerability-scanner

41.2k

Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.

Segurança #ai #git por sickn33

dependency-management-deps-audit

41.2k

You are a dependency security expert specializing in vulnerability scanning, license compliance, and supply chain security. Analyze project dependencies for known vulnerabilities, licensing issues, outdated packages, and provide actionable remediation strategies.

Segurança #ai #git por sickn33

Alerta por categoria

Receba novas skills de Segurança toda segunda

1 email curto, só com as skills novas de Segurança. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

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](reference.md) for code snippets, CLI commands, and configuration details.

Compartilhar X LinkedIn