Home
Previous componentNext component

Rich text editor

Open in fibo's Storybook

A rich text editor takes formatted writing: headings, emphasis, lists, quotes and links. It runs on Tiptap, with a toolbar for people who reach for the pointer and Markdown shortcuts for people who don't.

Rich text editorType ## for a heading, - for a list or > for a quote. Select a word and press Bold, or Cmd+B.

Features

  • Bold, italic, strikethrough, inline code, a heading, lists, quotes and links from the toolbar, a shortcut, or Markdown as you type (## , - , 1. , > , backticks).
  • One tab stop for the whole toolbar; arrows, Home and End move inside it, and each button says whether it's on.
  • Links go in through a row under the toolbar, never a browser prompt.
  • maxLength stops typing and pasting at the limit and counts down from 80%.
  • In a narrow frame the toolbar stays one row and scrolls sideways, so the writing area doesn't drop below a second row of tools.

Examples

With a limitFrom 80% of maxLength a count of what's left shows in the corner, and turns destructive at the limit.
Minimal toolstools picks which buttons show. They keep the toolbar's order whatever order you list them in.

Screen readers hear the count when it first shows, at each further ten characters, and at the limit, not on every keystroke.

Read only

editable={false} drops the toolbar and shows the document as it will read.

Proposal reply

A reply box with a short toolbar and a limit. The visible label names the writing area through aria-labelledby and the hint describes it through aria-describedby. Sending clears it by remounting it with a new key.

Reply to the proposal

Up to 500 characters. The team sees it in the proposal thread.

Write a reply and send it. It shows above, and the box starts over.

Anatomy

A frame around a toolbar, the writing area and an optional count. The link row opens between the toolbar and the writing area while a link is being added, and a hidden live region reads the count at thresholds.

  1. Frame
  2. Toolbar
  3. Tool
  4. Content
  5. Count
The partsA short toolbar over a note close to its limit.

Guidelines

  • 01Use it where formatting changes what the words mean: notes, proposals, release notes, replies. For a plain message or a short answer, use a textarea or Chat composer.
  • 02Show only the tools the content needs. A comment box rarely needs headings or code.
  • 03State a length limit before people reach it, in the label or a description, not only in the counter.
  • 04Store and send the HTML, and sanitise it wherever it's shown to someone else.

Best practices

DoTrim the toolbar to what the content needs.
Don'tDon't hand a one-line comment box every tool. The toolbar outweighs the writing.

Accessibility

  • 01The writing area is a multi-line textbox, named by aria-labelledby when it's given and by label otherwise. Point aria-labelledby at a visible label.
  • 02The toolbar is one tab stop. Arrow keys, Home and End move between its buttons, following the ARIA toolbar pattern. Marks and blocks carry aria-pressed.
  • 03Clicking a tool keeps focus and the selection in the writing area. Running one from the keyboard sends focus back there.
  • 04Undo and Redo stay focusable when there's nothing to do, so the toolbar's keyboard path never changes length.
  • 05Escape closes the link row and returns to the writing area. The visible count is hidden from screen readers; a separate aria-live="polite" region reads it when it first shows, at each further ten characters, and at the limit.

References