Rich Text Editor
A text area with additional capabilities for users to format the input text.
Also known as:
WYSIWYG editorHTML editor
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field
- Select
- Slider
- Slider
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need to know
- Used to create & publish content for other users, where control over the look & feel of the content is important (e.g. survey communications) or users need to structure text to make it more readable (e.g. performance reviews & manager 1:1s).
Visuals
To keep in mind
- The output of a Rich Text Editor can appear in the context of a larger page, and can present information that comes from a user rather than the system. In support of this:
- We offer only limited formatting options.
- If the content being edited is part of a wider page, users should have the ability to preview that content in context.
- For accessibility, there is a single tab key stop for the button groups in the toolbar, and the left and right arrows are used to navigate through each button.
- Focus indicator
- See Interaction states guidelines for focus indicators.
- On keyboard navigation and when clicking into the text field show the focus indicator around the entire rich text editor component.
Formatting controls
Formatting controls of the same type are visually grouped to distinguish them. There are 4 types of format controls:
- Character format
- Bold
- Italic
- Underline
- Paragraph format
- Headings (With a maximum of 3 levels: H1, H2, H3)
- Bulleted lists
- Numbered lists
- Insert
- Images
- Links
- Variables
- Clear formatting
Interactions
- Character formatting is applied to any selected text/characters.
- Paragraph formatting is applied to the entire paragraph surrounding the selection or cursor.
- Common formatting functions (like bold, italic) have commonly understood keyboard bindings or shortcuts that we will support. These shortcuts will be shown as tooltips on the button action.
- Bold: ⌘+b (Mac) Ctrl+b (Windows)
- Italic: ⌘+i (Mac) Ctrl+i (Windows)
- Underline: ⌘+u (Mac) Ctrl+u (Windows)
- Link: ⌘+k (Mac) Ctrl+k (Windows)
- No right click functionality (i.e context menus)
Adding a link
- Highlight the text, click the link icon and add a URL to the dialog.
- To preview the link, highlight the linked text.
- To edit a link, highlight the linked text and choose to edit the URL.
- To delete a link, highlight the linked text and choose delete.
Adding a variable
- Place your cursor/caret where you want to insert the variable.
- Select a variable from the list.
- The variable will appear in the text area as tag displaying the variable name, and an example of the data.
- Upon saving & previewing, the tag will be substituted with the corresponding data.
- Use backspace/delete to remove the variable.
Adding an image
- (Not yet built)
Minimum defaults
- For a consistent experience across the product, all rich text editors should at least have the default set of formatting controls:
- Bold
- Italic
- Underline
- Bulleted & numbered lists
When to use and when not to use
When to use
- Use a Rich Text Editor when the input is to be consumed by other users, and control over the look and feel of the content is needed for a clear message.
When not to use
- The user doesn’t need control over the look & feel of the input text:
- If the input is short, consider using a Text Field.
- If input is longer consider using a Text Area Field.
- Collecting information that in a configuration or setting.
- For end users who are responding to questions in a Prominent Text Field, consider using WYSIWYG-lite.
See also
External links
Here are some examples of other existing design systems: