Inline nodes

Inline nodes (pills/chips) replace the trigger + query with a rendered node on selection. Register pill types in the extension, reference them by name on triggers. Control Backspace behavior and add custom attributes.

What pills are

When the user selects an item from a trigger that has an inline node (pill) configured, the trigger and query range are replaced by a custom Tiptap node (e.g. mention, tag, variable). The node can render as a chip with label, icon, and attributes. For inline-node triggers, the replacement is handled by the extension; onItemSelect is optional (e.g. for side effects only).

Registering pills

Pass pills to SuggestMenuExtension.configure({ pills: [...] }). Each entry is an InlineNodeConfig (name, group, attributes, render, etc.). On the trigger (e.g. in useSuggestMenu or SuggestMenu props), reference the pill by name so the extension knows to replace with that node.

Backspace behavior

Two behaviors: unwrap — cursor after the pill, Backspace turns the pill back into trigger+query so the user can search again. Delete — Backspace removes the pill entirely. Configurable per pill type in the extension config.

Custom attributes

Pills can store custom attributes (e.g. id, label, avatar). Define them in the node schema and pass them when creating the node on select. Your React node view can read node.attrs to render.

Demos

Basic @mention (type, select, see the chip). Backspace unwrap (cursor after pill → pill becomes @query again). Backspace delete (pill removed). Multiple pill types in one editor (mention, tag, variable) with different colors. Custom attributes on pills. Interactive demos can be embedded here; see Storybook for full examples.