Anatomy
Main Component
- RTE Toolbar: Options to show more buttons and button groups
- RTE Container: State styles are the same as for Text Inputs
- Content Block: Options for headings, text, code, and quote blocks
RTE Toolbar
- RTE Toolbar Button Group
- RTE Button - uses the Button component, main options: icon-only, text dropdown
- Divider - option to show or hide on the right or left side of the group
- Slot - enables including more components
Best Practices - RTE Toolbar
Ordering and Grouping Buttons
Grouping buttons meaningfully and ordering them according to relevance can help users find formatting options more easily.
Avoid mixing formatting options that belong to different contexts.
Identify groups that can represent formatting options in a meaningful way.
Tooltips for dropdown options
To keep the experience consistent, besides icon-only components, dropdown options should also have tooltips on hover.
Instead of repeating the chosen option, show a group name for all the options.
Avoid repeating the currently selected option’s name in the tooltip.
Use a group name for all the options. In this example, we’ve named all the options within the dropdown (heading 1, heading 2, paragraph, etc.) “Rich Style”.
Responsive Guidelines
Context Menu for hidden options
In case the toolbar doesn’t fit the available space horizontally, the options should be included in a Context Menu.
In the coded component, entire Button Groups get transferred under the Context Menu (instead of leaving a fraction of Button Group visible), except for the insert link button.
The insert link button opens.
💡 Use the button instance property on the .RTE Button subcomponent to swap for the Context Menu Button quickly.
Exception: Link
Inserting a link requires further inputs (display name and URL). To avoid multiple menu and popover levels, this action should always remain visible.
Multi-level menu
To show options that are parents, - for eg. rich style - it is recommended to place a Menu component next to the Context Menu.
Menu Placement
- Aligned to the Context Menu, spacing: 4xs (4px)
- Depending on the available space, the secondary menu can either be on the right or left-hand side.
Naming the parent option
Use a name that describes all the options, eg. Rich style includes headings and paragraphs.
Tweaking the width of the Context Menu
- Set the label_subtext layer to hug
- Set the Menu to hug
- Change the horizontal gap between options to Auto for the parent option(s)
- Add some right (eg. 40px) padding to one of the options
📝 The coded component already has this responsive behavior, there is no need to spec this in designs.
Examples and Options
Content
There are preset content variants in the RTE:
- Heading (1,2,3 levels)
- Paragraph
- Code block
- Quote block
- Link
The spacing between two content blocks (any variant) is spacing-xs (16px).
Adding custom content
To add custom content, use the slot within the content area.
The slot enables you to add any type of custom component with custom sizing, and you can also use the content blocks to display more content than the preset.
Discarding draft
It is recommended to give users an option to discard the draft they’ve been editing.
Placing this action on the right of the toolbar - via the global action property - separates it from other options.
Inserting with Popover and Form
Use the combination of a Popover and a Form for inserting options that require inputs from the users.
Rich Text Editor-Specific Base Components
In order to accelerate the design process for standard RTE options, we have included some out-of-the-box base components.
📝 These components are restricted for the Rich Text Editor.
RTE Menu
The RTE Menu component enables including custom components within the menu via a slot.
You can also use base components from the preferred instances.
In the below examples the slot is replaced by the RTE Rich Style List and the RTE Color Palette base components.
