skills.rest
toddmoy
toddmoyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pillbox pattern

Implement inline pill nodes with at-mention insertion in TipTap editors.

1|Updated Jul 23, 2024
Search Tags:#editor#tokens#tiptap#inline-edit#pills#mention
One-click install
npx skills add https://github.com/toddmoy/protobox --skill pillbox-pattern
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pillbox pattern
Source: https://github.com/toddmoy/protobox/tree/main/.claude/skills/pillbox-pattern
Command: npx skills add https://github.com/toddmoy/protobox --skill pillbox-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Provide a pattern for inline pills within text that can be inserted via an at-mention flow, suitable for rich text editors.

Core Features & Use Cases

  • Inline pills: Pills flow with text and wrap naturally.
  • Mention integration: Trigger text with "@" and suggest pills from a dropdown.
  • Editor integration: Use Tiptap extensions for pill nodes.

Quick Start

Set up the editor and mention menu, then type "@" to open the pill suggestions and insert a pill.

Frequently Asked Questions about pillbox pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add inline pills to a TipTap editor with mention triggers?▼

Inline pills in TipTap editors are custom nodes rendered within text that trigger via '@' mentions and populate from a suggestion menu. This pattern implements a Pill node with label and color attributes, pairs it with a Mention extension, and uses an insertPill command to add pills that wrap naturally with surrounding text.

Can I use inline pills with text wrapping in a rich text editor?▼

Yes. Inline pills are designed to flow with text and wrap across lines naturally. The Pill node uses inline and atom attributes to ensure pills behave as atomic inline elements within TipTap editors while remaining responsive to text layout changes.

What's the best way to implement editable token suggestions in React?▼

Use a Mention extension paired with a custom Pill node in TipTap. Type '@' to trigger a suggestion dropdown, select a pill option, and the insertPill command embeds it as a colored, labeled inline token. This combines mention-driven insertion with custom pill rendering.

How do I render colored pills with custom labels in TipTap?▼

Create a Pill node with color and label attributes, then define a PillComponent to render each pill's visual appearance. The pattern manages both the node schema and rendering layer, allowing color variants and label text to display consistently inline.

Does this pattern work for mention-based workflows in text editors?▼

Yes. The pattern combines a Mention extension to detect '@' triggers with a suggestion menu and insertPill command to convert selections into inline pills. It's designed specifically for mention-driven insertion workflows in rich text editors.

Related Skills

Explore More Software Engineering Skills→
albanistalbanist
4

umbraco-tiptap-extension

Implement custom Tiptap extensions for the Umbraco rich text editor.

Community
Intermediate
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
umbracoumbraco
26

umbraco-tiptap-extension

Generate custom Tiptap node and mark extensions for Umbraco's rich text editor.

Official
Intermediate
BamoJBamoJ

webflow-editor-integration

Detect Webflow Designer mode and branch runtime logic for editor-safe behavior.

Community
Intermediate