Prompt Area

A contentEditable rich text input with trigger-based chips, inline markdown, undo/redo, and list auto-formatting. Built as a shadcn registry component.

Try It

All capabilities in one editor. / commands (start of line, inline style), @ mentions (pill style), # tags (auto-resolve on space), ! callback mode. Cmd+B bold, Cmd+I italic, Ctrl+Z/Ctrl+Shift+Z undo/redo. Type - for lists, paste a URL for auto-linking, or use the buttons below to call the imperative API. Enter to submit, Escape to dismiss.

[]

All Options

Every prop and option in a single example. Toggles for disabled, markdown, and autoGrow. All 4 trigger types (/ start-of-line dropdown, @ pill dropdown, # auto-resolve on space, ! callback mode). Every callback (onSubmit, onEscape, onChipClick, onChipAdd, onChipDelete, onLinkClick, onPaste, onUndo, onRedo) logs to the event panel. Imperative handle methods (focus, blur, insertChip, getPlainText, clear) are wired to buttons. Also sets minHeight, maxHeight, className, aria-label, and data-test-id.

[
  {
    "type": "text",
    "text": "Hello "
  },
  {
    "type": "chip",
    "trigger": "@",
    "value": "alice",
    "displayText": "Alice"
  },
  {
    "type": "text",
    "text": " — click a chip, paste text, or try every feature!"
  }
]

Examples

Image Attachments

Paste an image (screenshot or file) to attach it. Images show a loading spinner during upload simulation. Click × to remove. Use imagePosition to control placement.

PreviewCode

Images Above (default)

Paste an image here...

Images Below

Paste an image here...