Rich Text Editor

Usage

import {
  RichTextEditor,
  type RichTextEditorHandle,
  type RichTextValue,
} from "@tulipfarm/sprout/rich-text-editor";

// A local draft with a formatting toolbar
const editor = useRef<RichTextEditorHandle>(null);
const [value, setValue] = useState<RichTextValue>({ type: "doc", content: [{ type: "paragraph" }] });

<RichTextEditor ref={editor} value={value} onChange={setValue} onSend={send}
  placeholder="Write a local draft…"
  toolbarAddon={<>
    <Button variant="ghost" size="icon-sm" aria-label="Bold"
      aria-pressed={editor.current?.editor()?.isActive("bold") ?? false}
      onClick={() => editor.current?.editor()?.chain().focus().toggleMark("bold").run()}>
      <Bold aria-hidden="true" />
    </Button>
    <Button variant="outline" size="sm" onClick={send}>Send <Send aria-hidden="true" /></Button>
  </>} />

// Compact, without a toolbar
<RichTextEditor size="compact" value={value} onChange={setValue} onSend={send} />

// Inside the chat composer
<InputGroup variant={questionPending ? "question-composer" : "composer"}>
  {attachments && <InputGroupAddon align="block-start">{attachments}</InputGroupAddon>}
  <RichTextEditor
    key={compact ? "compact" : "full"}
    ref={inputRef}
    size={compact ? "compact" : "default"}
    condensed={questionPending && !focused && !attachments && !canSend}
    placeholder={questionPending ? "Send a separate message…" : "Ask anything…"}
    value={value}
    onChange={setValue}
    onSend={send}
    disabled={disabled || sending}
    ariaInvalid={!!validation}
    ariaDescribedBy={validation ? errorId : undefined}
    ariaExpanded={!!suggestions}
    ariaControls={suggestions?.id}
    ariaActiveDescendant={suggestions?.activeId}
    extensions={compact ? mentionNodes : [...mentionNodes, fileSuggestion, skillSuggestion]}
    toolbarAddon={<>
      <FileChoices />
      <ModelPicker />
      <InputGroupButton type="submit" size="icon-sm"
        variant={canSend ? "default" : "secondary"} aria-label="Send message">
        <ArrowUp aria-hidden="true" />
      </InputGroupButton>
    </>}
  />
</InputGroup>

Props

value is a Tiptap JSON document and onChangegets the new one on every edit. A new value from outside replaces the content without calling onChange.onSend runs on Enter and on Cmd or Ctrl+Enter.

size is default (80px to 256px, 16px text, a toolbar row below) or compact (40px to 128px, 14px text, the toolbar inline at the end). condensed shrinks a default editor to the same single row, such as while an agent question waits. Past the maximum height the editor scrolls.

toolbarAddon holds buttons and pickers.extensions adds Tiptap extensions, such as mention nodes and@ or / suggestion triggers. Pass a stable array withuseMemo; a new array rebuilds the editor.placeholder defaults to Ask anything… and can change while mounted.

disabled stops editing and dims the editor.ariaLabel (default Message),ariaInvalid, ariaDescribedBy,ariaControls, and ariaActiveDescendant go on the textbox.ariaExpanded tells the editor a suggestion list is open; it isn't written to the DOM, because ARIA doesn't allowaria-expanded on a textbox.

The ref handle has focus(),editor() for Tiptap commands, andsetContent(doc), which replaces the document and callsonChange.

Behavior

Enter sends unless the caret is in a list item or code block, a suggestion list is open (ariaExpanded), or the line is a bare code fence. Shift+Enter adds a line break; Cmd or Ctrl+Enter always sends. Enter during IME composition never sends.

Headings go up to level 3. Typing ```sql and Space starts a code block, even after a Shift+Enter line break. Pasted text with``` or ~~~ fences becomes code blocks. Links allow only http, https, andmailto, don't open on click, and stop extending once you type past them. There is no underline or horizontal rule.

Accessibility

The editor is a multi-line textbox witharia-autocomplete="list". PointariaControls at a suggestion listbox andariaActiveDescendant at its active option, so screen readers follow arrow keys while focus stays in the text. Name icon-only toolbar buttons witharia-label and show pressed formats with aria-pressed.

On its own the editor shows a 2px focus outline. Inside anInputGroup it is markeddata-slot="input-group-control", so the group draws focus and invalid borders instead. Fades take 120ms and stop when reduced motion is requested. Forced colors mode keeps a system focus outline.

Theme tokens

Text uses --sprout-text, the placeholder and quotes--sprout-muted, code backgrounds--sprout-hover, and links --sprout-primary. The toolbar divider is --sprout-line and focus--sprout-focus. The opt-in TulipFarm theme tints links and the send button through these tokens.