Token Highlighting
TipTap-powered rich text editor with inline token highlighting. Keys, values, and negation prefixes are visually distinguished with customizable marks.
@requence/tokenized-search
A compound React component for building structured search inputs with key:value tokens, rich text editing, and dropdown suggestions.
Features
Section titled “Features”Dropdown Suggestions
Context-aware dropdowns suggest available token keys and values as the user types. Supports both static arrays and async option sources with AbortSignal.
Structured Parsing
parseTokenizedSearch extracts typed segments from raw query text, producing structured token and text segments with position info.
Compound Styling API
Style every element using declarative slot components. Pass plain Tailwind classes — no internal CSS selectors needed. Use aria-selected: and data-[dirty]: variants for state styling.
Live Example
Section titled “Live Example”Installation
Section titled “Installation”npm install @requence/tokenized-search