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

Ready to run

npx skills add https://github.com/toddmoy/protobox --skill pillbox-pattern

💬 Prompt for ChatGPT / Claude Chat▼

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.