On this page
Overview
Show code, EditAndPreview.tsx
Variants
- Outline
A form, a dialog, a pane or a document that is the page's content. The default.
- Ghost
Notes in a quiet panel: only the text at rest.
Toolbar
The toolbar shows the commands the content needs, in order, or none.
- Commands of one kind share a group, with a line between groups: text styles, lists, blocks, and links and tables.
- Undo and Redo, and Attach files, follow in groups of their own.
- Formatting on at the caret, such as bold, shows as a pressed toggle.
Anatomy
Editor
Toolbar
Document
Reference
Task
Description
Show code, RichTextAnatomy.tsx
Behaviour
Show saved content
RichText shows saved text again as it was written, also on a server, and opens its references and links through the application. A single newline in the Markdown starts a new line, as in the editor.
Task lists keep their checkboxes in full color, read-only, each on the middle of its text's first line.
Show code, SavedContent.tsx
References
Typing a source's trigger, such as @, opens its suggestions, and the reference stays linked to what it names.
Show code, References.tsx
Slash commands
Typing / offers blocks, such as headings and lists, then the application's own commands.
Show code, SlashCommands.tsx
Attachments and links
The application can let people attach files, and replace the link dialog with a picker of its own.
Show code, UploadsAndLinks.tsx
What it keeps
Headings, emphasis, strikethrough, code, lists and task lists, quotes, links, images, simple tables and references.
- Raw HTML shows as text.
- Other syntax, such as footnotes, needs an extension or Markdown.
Rules
Offer the commands the content needs, and describe every image.
Use it when
- Formatted text people see as it will look, such as meeting notes or a brief
- Text that mentions people, topics or files the application knows
- Formatted text saved earlier, shown again read-onlyRichText
Show code, FewCommands.tsx
Show code, EveryCommand.tsx
Content
Give image attachments a label that describes the image: it becomes the alternative text.
Accessibility
On Apple keyboards, ⌘ replaces Ctrl and ⌥ replaces Alt.
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the toolbar, one tab stop, then the document. |
| ←, → | Moves between toolbar buttons. |
| Ctrl+B, I, E | Bold, italic, inline code. |
| Ctrl+Shift+S | Strikethrough. |
| Ctrl+Alt+1 to 6 | A heading of that level. |
| Ctrl+Shift+7, 8, 9 | A numbered, bulleted or task list. |
| Ctrl+Shift+B | A quote. |
| Ctrl+Alt+C | A code block. |
| Ctrl+Z | Undoes. |
| Ctrl+Shift+Z, Ctrl+Y | Redoes. |
| Tab, Shift+Tab in a list item | Indents or outdents it. |
| A trigger, such as @ or / | Opens the suggestions. |
| ↑, ↓, Enter in the suggestions | Highlights an option, and inserts it. |
| Esc | Closes the suggestions or the link dialog. |