Skip to main content

RichTextEditor

Component for generating rich text.

github
View source code
figma
View design

Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.
Component Guide
import { RichTextEditor } from '@uhg-abyss/web/ui/RichTextEditor';

Overview​

RichTextEditor is a rich text editor component built using Tiptapopens in a new window. It provides a user-friendly interface for creating and editing rich text content with various formatting options.

Usage​

Use sub-components of RichTextEditor to build a toolbar of options for editing text. Controls should be placed within the <RichTextEditor.Toolbar> component and grouped by the <RichTextEditor.ControlsGroup> component.

  • Undo or redo actions with
    • <RichTextEditor.Undo />
    • <RichTextEditor.Redo />
  • Format text styles with
    • <RichTextEditor.Bold />
    • <RichTextEditor.Italic />
    • <RichTextEditor.Underline />
    • <RichTextEditor.Strike />
    • <RichTextEditor.Color />
    • <RichTextEditor.BackgroundColor />
    • <RichTextEditor.Highlight />
  • Edit text with
    • <RichTextEditor.Headings />
    • <RichTextEditor.FontSize />
    • <RichTextEditor.Alignments />
    • <RichTextEditor.Lists />
  • Add/copy elements with
    • <RichTextEditor.Link />
    • <RichTextEditor.Code />
    • <RichTextEditor.Image />
    • <RichTextEditor.Copy />
  • Add tables with
    • <RichTextEditor.Table />
  • Separate groups with
    • <RichTextEditor.Separator />

Tables​

In Abyss v2.6.0 and below, the table control was split into multiple controls:

  • <RichTextEditor.Table />
  • <RichTextEditor.TableRows />
  • <RichTextEditor.TableColumns />

These have now been consolidated into a single <RichTextEditor.Table /> control. The previous controls are still available but are deprecated and will be removed in a future release. Use the deprecatedMenu prop on the <RichTextEditor.Table> control to enable the old menu.

Customization​

You can customize the toolbar by adding or removing controls as needed. Some controls have additional props for further customization:

  • <RichTextEditor.FontSize /> - Customize available font sizes using the fontSizes prop.
  • <RichTextEditor.Color /> - Customize available colors using the colors prop.
  • RichTextEditor.BackgroundColor - Customize available background colors using the backgroundColors prop.
  • RichTextEditor.Table - Customize the default table configuration using the tableConfig prop.
Note

Even if a control is not present in the toolbar, it can still be used with the associated keybinding. For example, the <RichTextEditor.Bold /> control is not present in the toolbar, it is still possible to use CTRL/CMD + B to make text bold.

Using useForm and FormProvider simplifies form management by providing out-of-the-box validation, form state handling, and performance optimizations, leveraging the power of react-hook-form.

useState​

Disabling options​

Manually disable certain options by using the isDisabled prop.

Format - HTML/JSON​

Change the output format to JSON by passing the string 'json' to the format prop.

Ref​

Use the ref prop to pass in a ref to the component. RichTextEditor will then attach the updateContent function to this ref, which can be called to programmatically update the content of the editor.

Note

The updateContent function will not make changes if the new content is identical to the previous content.

RichTextEditor.Alignments Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-alignments", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the Alignment button
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-alignments", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.BackgroundColor Props​

Name
Type
DefaultA11yDescription
backgroundColors
{ code: string; label: string; }[] | undefined
[ { code: '#958DF1', label: 'Lilac' }, { code: '#F98181', label: 'Light Red' }, { code: '#FBBC88', label: 'Light Orange' }, { code: '#70CFF8', label: 'Sky Blue' }, { code: '#94FADB', label: 'Light Teal' }, { code: '#B9F18D', label: 'Light Green' }, ]
Array of background colors to display in the dropdown menu; each label is also used as the accessible name (aria-label) for that swatch option.
(A separate "remove background" option is rendered by the component.)
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-background-color", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the BackgroundColor button.
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-background-color", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Bold Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-bold", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the Bold button
slotProps
Partial<Record<"rich-text-editor-controls-button-bold", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Color Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
colors
{ code: string; label: string; }[] | undefined
[ { code: '#002677', label: 'Blue' }, { code: '#0B6623', label: 'Green' }, { code: '#FF5733', label: 'Orange' }, { code: '#FFC300', label: 'Yellow' }, { code: '#C70039', label: 'Red' }, { code: '#900C3F', label: 'Magenta' }, { code: '#581845', label: 'Purple' }, ]
Array of colors to display in the dropdown menu; each label is also used as the accessible name (aria-label) for that swatch option.
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-color", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the Color button.
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-color", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Copy Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-copy", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the Copy button
slotProps
Partial<Record<"rich-text-editor-controls-button-copy", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.FontSize Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-font-size", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
fontSizes
string[] | undefined
['14px', '16px', '18px', '24px', '30px']
Array of font sizes to display in the dropdown menu
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the FontSize button
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-font-size", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Headings Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-headings", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the Headings button
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-headings", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Highlight Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-highlight", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables Highlight button
slotProps
Partial<Record<"rich-text-editor-controls-button-highlight", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Image Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-image-tooltip" | "abyss-rich-text-editor-controls-dropdown-image" | "abyss-rich-text-editor-controls-button-image-dropdown-file-upload-container" | "abyss-rich-text-editor-controls-button-image-dropdown-button-container" | "abyss-rich-text-editor...
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the Image button
slotProps
Partial<Record<ToSlotKey<{ tooltip: LeafSlotDef<"div", "rich-text-editor-controls-button-image-tooltip">; popover: WrappedSlotDef<"rich-text-editor-controls-dropdown-image">; fileUploadContainer: LeafSlotDef<...>; buttonContainer: LeafSlotDef<...>; insertButton: LeafSlotDef<...>; cancelButton: LeafSlotDef<...>; }, "...
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Italic Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-italic", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables Italics button
slotProps
Partial<Record<"rich-text-editor-controls-button-italic", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-link-dropdown-text-input-container" | "abyss-rich-text-editor-controls-button-link-dropdown-display-text-input" | ... 5 more ... | "abyss-rich-text-editor-controls-dropdown-link", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables Link button
slotProps
Partial<Record<ToSlotKey<{ textInputContainer: LeafSlotDef<"div", "rich-text-editor-controls-button-link-dropdown-text-input-container">; displayTextInput: LeafSlotDef<"div", "rich-text-editor-controls-button-link-dropdown-display-text-input">; ... 5 more ...; popover: WrappedSlotDef<...>; }, "rich-text-editor">, Sl...
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Lists Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-lists", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disabled Lists button
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-lists", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Redo Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-redo", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables Redo button
slotProps
Partial<Record<"rich-text-editor-controls-button-redo", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Strike Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-strike", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables Strike button
slotProps
Partial<Record<"rich-text-editor-controls-button-strike", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Table Props​

Name
Type
DefaultRequiredA11yDescription
children
string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
The contents of the table component
className
string | undefined
CSS class name to apply to each element within the component
columns
TableColumn[]
Table column configuration
css
CSSProperties | Partial<Record<"abyss-table-root" | "abyss-table-head" | "abyss-table-header" | "abyss-table-styled-header" | "abyss-table-header-container" | "abyss-table-header-cell-container" | ... 9 more ... | `abyss-table-footer-cell-col-${number}`, CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
footer
ReactNode | object[]
Table footer component
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
highlightRowOnHover
boolean | undefined
false
If true, hovering over a row will highlight it
rows
TableRow[]
Table row configuration
slotProps
Partial<Record<string, SlotPropsValue<string>>> | undefined
Props to pass to individual internal slots of the component, keyed by the slot name
(e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
data-testid, and nested slotProps for child Abyss components.
See slotProps for more information
title
string
The accessible name for the table, announced to screen readers navigating by landmark or table structure.
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.TableColumns Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-table-columns", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the TableColumns button
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-table-columns", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.TableRows Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-dropdown-table-rows", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables the TableRows button
slotProps
Partial<Record<"rich-text-editor-controls-dropdown-table-rows", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Toolbar Props​

Name
Type
Description
children
string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
Toolbar children
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-toolbar", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps
Partial<Record<"rich-text-editor-toolbar", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Underline Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-underline", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables Underline button
slotProps
Partial<Record<"rich-text-editor-controls-button-underline", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor.Undo Props​

Name
Type
DefaultA11yDescription
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-controls-button-undo", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
isDisabled
boolean | undefined
false
Disables Undo button
slotProps
Partial<Record<"rich-text-editor-controls-button-undo", SlotPropsLeafValue>> | undefined
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor Props​

Name
Type
DefaultA11yDescription
children
string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined
Rich Text Editor children
className
string | undefined
CSS class name to apply to each element within the component
css
CSSProperties | Partial<Record<"abyss-rich-text-editor-root" | "abyss-rich-text-editor-content-container", CSSProperties>> | undefined
Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
See CSS Prop Styling for more information
data-testid
string | undefined
Suffix used to create a unique ID used for automated testing
See Component Testing for more information
disableDefaultProviderProps
boolean | undefined
false
If set to true, the component will not use the DefaultPropsProvider values.

If you aren’t using the DefaultPropsProvider, this prop can be ignored.
format
"html" | "json" | undefined
'html'
Return html or json data
height
string | number | undefined
200px
Rich Text Editor height
hiddenFrom
Breakpoint | undefined
When defined, the component is hidden once the screen width reaches the specified breakpoint.
label
string | undefined
'Rich Text Editor'
The accessible name for the editable region, announced to screen readers since the editor has no visible field label.
model
string | undefined
Form model to be used with FormProvider
onChange
((value: string) => void) | undefined
Callback fired every time the value changes
slotProps
Partial<Record<ToSlotKey<{ root: LeafSlotDef<"section", undefined>; contentContainer: LeafSlotDef<"div", undefined>; }, "rich-text-editor">, SlotPropsLeafValue>> | undefined
value
string | undefined
Value of the Rich Text Editor.
visibleFrom
Breakpoint | undefined
When defined, the component is hidden until the screen width reaches the specified breakpoint.

RichTextEditor Classes​

Class NameDescription
.abyss-rich-text-editor-content-containerClass applied to the content container of the Rich Text Editor
.abyss-rich-text-editor-rootClass applied to the root element of the Rich Text Editor

RichTextEditor.ControlsGroup Classes​

Class NameDescription
.abyss-rich-text-editor-controls-groupClass applied to the ControlsGroup component

RichTextEditor.Alignments Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-alignmentsClass applied to the Alignments control dropdown

RichTextEditor.BackgroundColor Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-background-colorClass applied to the BackgroundColor control popover trigger (dropdown)

RichTextEditor.Bold Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-boldClass applied to the Bold control button

RichTextEditor.Color Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-colorClass applied to the Color control popover trigger (dropdown)

RichTextEditor.Copy Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-copyClass applied to the Copy control button

RichTextEditor.FontSize Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-font-sizeClass applied to the FontSize control dropdown

RichTextEditor.Headings Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-headingsClass applied to the Headings control dropdown

RichTextEditor.Highlight Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-highlightClass applied to the Highlight control button

RichTextEditor.Image Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-image-dropdown-button-containerContainer for the buttons inside the image dropdown
.abyss-rich-text-editor-controls-button-image-dropdown-cancel-buttonCancel button inside the image dropdown
.abyss-rich-text-editor-controls-button-image-dropdown-file-upload-containerContainer for the file upload inside the image dropdown
.abyss-rich-text-editor-controls-button-image-dropdown-insert-buttonInsert button inside the image dropdown
.abyss-rich-text-editor-controls-button-image-tooltipTooltip for the image control button
.abyss-rich-text-editor-controls-dropdown-imageClass applied to the image control dropdown

RichTextEditor.Italic Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-italicClass applied to the Italic control button

Class NameDescription
.abyss-rich-text-editor-controls-button-link-dropdown-button-containerContainer for the buttons inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-display-text-inputDisplay text input inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-set-buttonSet button inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-text-inputURL text input inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-text-input-containerContainer for the text inputs inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-unset-buttonUnset button inside the link dropdown
.abyss-rich-text-editor-controls-button-link-tooltipTooltip for the link control button
.abyss-rich-text-editor-controls-dropdown-linkClass applied to the link control dropdown when active

RichTextEditor.Lists Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-listsClass applied to the Lists control dropdown

RichTextEditor.Redo Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-redoClass applied to the Redo control button

RichTextEditor.Separator Classes​

Class NameDescription
.abyss-rich-text-editor-separator-containerClass applied to the Separator container
.abyss-rich-text-editor-separator-lineClass applied to the Separator line

RichTextEditor.Strike Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-strikeClass applied to the Strike control button

RichTextEditor.Table Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-table-dropdown-button-containerContainer for the buttons inside the table popover
.abyss-rich-text-editor-controls-button-table-dropdown-cancel-buttonCancel button inside the table popover
.abyss-rich-text-editor-controls-button-table-dropdown-caption-inputTable caption input inside the table popover
.abyss-rich-text-editor-controls-button-table-dropdown-cols-inputNumber of columns input inside the table popover
.abyss-rich-text-editor-controls-button-table-dropdown-containerContainer for the content inside the table popover
.abyss-rich-text-editor-controls-button-table-dropdown-hide-caption-checkboxHide caption checkbox inside the table popover
.abyss-rich-text-editor-controls-button-table-dropdown-insert-buttonInsert button inside the table popover
.abyss-rich-text-editor-controls-button-table-dropdown-rows-inputNumber of rows input inside the table popover
.abyss-rich-text-editor-controls-dropdown-tableClass applied to the Table control popover

RichTextEditor.TableColumns Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-table-columnsClass applied to the TableColumns control dropdown

RichTextEditor.TableRows Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdown-table-rowsClass applied to the TableRows control dropdown

RichTextEditor.Toolbar Classes​

Class NameDescription
.abyss-rich-text-editor-toolbarClass applied to the Toolbar component

RichTextEditor.Underline Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-underlineClass applied to the Underline control button

RichTextEditor.Undo Classes​

Class NameDescription
.abyss-rich-text-editor-controls-button-undoClass applied to the Undo control button

Content Accessibility​

HTML formatting implementation​

HTML formatting tags are used for formatting and announced by screen readers when navigating by character through content.

  • Bold <b>
  • Italic <i>
  • Underline <u>
  • Strikethrough (delete/deletion) <s>
  • Highlight <mark>

Spellcheck support​

RichTextEditor uses HTML contenteditable="true" which also sets spellcheck="true" enabling native browser spell checking where supported.

spellcheck="true" BrAT support (7/1/2026)

  • Full: visually (using wavy red underline) & screen reader (announcement)
  • Partial screen reader (announcement, but no wavy red underline)

Unsupported formatting​

Other formatting & presentation without semantic HTML tag support are not announced including:

  • Colors: text or background
  • Alignments: Left, center, right, justified
  • Font sizes

Semantic contents​

Appropriate HTML is for semantic elements and announced by screen readers.

  • Headings: <h1> through <h6>
  • Lists
    • Bulleted: <ul>
    • Numeric: <ol>
  • Data tables (discussed below)
  • Links: <a>
  • Images: <img>
    • Include alt text
  • Code: <code>

Data tables <table>​

  • Captions (<caption>) are required for all tables and can be hidden visually.
  • New tables are created to be accessible with first row and column as headers.
    • First row of cells are column headers (<th scope="col">)
      • If not wanted or needed: Delete first row
      • Though possible, do not add rows above column headers
    • First cells in each row are row headers (<th scope="row">)
      • If not wanted or needed: Delete first column
      • If not in the correct column: Change horizontal location by inserting columns to its left

Known BrAT Issues​

JAWS / Chrome​

  • Lists
    • List region and count announced, not type.
  • Tables
    • On table menu, JAWS announces menu and dialog actions in addition to changes to table.

NVDA / Chrome​

  • Lists
    • List region and count announced, not type.
  • Tables
    • May not always announce table cell location.

VoiceOver / Safari (MacOS)​

  • Often re-announces text area contents
  • Lists
    • Bulleted list: Announces "bullet" but not entry/exit of list.
    • Numeric list: Not announced at all.
  • Tables
    • Does not announce table or cursor location in table by default.
    • Once in a table, table navigation keys [Control] + [Option] + [arrow].
      • Correctly announces column and row location.
      • Will announce row or column headers if defined.

Keyboard Interactions​

KeyDescription
Control + ZUndo
Control + Shift + ZRedo
Control + BBold
Control + IItalic
Control + UUnderline
Control + Shift + SStrikethrough
Control + Shift + HHighlight
Control + ECode
Control + Shift + 7Ordered list
Control + Shift + 8Bullet list
Control + Shift + LLeft Align
Control + Shift + ECenter Align
Control + Shift + RRight Align
Control + Shift + JJustify
Control + Alt + 0Normal Text
Control + Alt + 1Heading 1
Control + Alt + 2Heading 2
Control + Alt + 3Heading 3
Control + Alt + 4Heading 4
Control + Alt + 5Heading 5
Control + Alt + 6Heading 6
KeyDescription
Right ArrowMoves focus one cell to the right.
Left ArrowMoves focus one cell to the left.
EnterSelect Item

Component Tokens​

Tip

Click on the token row to copy the token to your clipboard.

RichTextEditor Tokens​

Token NameValue
rich-text-editor.color.border.container
#CBCCCD
rich-text-editor.color.border.control.active
#323334
rich-text-editor.color.border.toolbar
#CBCCCD
rich-text-editor.color.border.shortcut-table.row
#CBCCCD
rich-text-editor.color.surface.container
#FFFFFF
rich-text-editor.color.surface.control.rest
#FFFFFF
rich-text-editor.color.surface.control.active
#F3F3F3
rich-text-editor.color.surface.control.hover
#E5E5E6
rich-text-editor.color.surface.control.disabled
#F3F3F3
rich-text-editor.color.surface.line
#CBCCCD
rich-text-editor.color.surface.shortcut-table.row
#FFFFFF
rich-text-editor.color.surface.shortcut-table.key-label
#F3F3F3
rich-text-editor.color.text.control.rest
#323334
rich-text-editor.color.text.control.active
#323334
rich-text-editor.color.text.control.hover
#323334
rich-text-editor.color.text.control.disabled
#7D7F81
rich-text-editor.color.text.shortcut-table.caption
#002677
rich-text-editor.color.icon.control.rest
#323334
rich-text-editor.color.icon.control.active
#323334
rich-text-editor.color.icon.control.hover
#323334
rich-text-editor.color.icon.control.disabled
#7D7F81
rich-text-editor.border-radius.all.container
8px
rich-text-editor.border-radius.all.shortcut-table.key-label
4px
rich-text-editor.border-width.all.container
1px
rich-text-editor.border-width.all.control
1px
rich-text-editor.border-width.bottom.toolbar
1px
rich-text-editor.border-width.bottom.shortcut-table.row
1px
rich-text-editor.sizing.all.icon.control-button
20px
rich-text-editor.sizing.all.icon.control-dropdown-option-icon
20px
rich-text-editor.spacing.gap.horizontal.control
4px
rich-text-editor.spacing.gap.horizontal.toolbar
8px
rich-text-editor.spacing.gap.horizontal.shortcut-table.key-display
4px
rich-text-editor.spacing.gap.horizontal.shortcut-table.key-label
2px
rich-text-editor.spacing.gap.vertical.container
16px
rich-text-editor.spacing.gap.vertical.shortcut-table.container
8px
rich-text-editor.spacing.padding.all.control
8px
rich-text-editor.spacing.padding.bottom.container
16px
rich-text-editor.spacing.padding.horizontal.editor
24px
rich-text-editor.spacing.padding.horizontal.toolbar
16px
rich-text-editor.spacing.padding.horizontal.shortcut-table.cell
8px
rich-text-editor.spacing.padding.horizontal.shortcut-table.key-label
8px
rich-text-editor.spacing.padding.vertical.toolbar
12px
rich-text-editor.spacing.padding.vertical.shortcut-table.key-label
4px

ActionMenu Tokens​

Token NameValue
action-menu.color.border.container
#CBCCCD
action-menu.color.surface.container
#FFFFFF
action-menu.color.surface.menu-item.rest
#FFFFFF
action-menu.color.surface.menu-item.hover
#F3F3F3
action-menu.color.surface.menu-item.active
#E5E5E6
action-menu.color.surface.separator
#CBCCCD
action-menu.color.text.menu-item.default
#4B4D4F
action-menu.color.text.menu-item.disabled
#7D7F81
action-menu.color.icon.menu-item.default
#323334
action-menu.color.icon.menu-item.disabled
#7D7F81
action-menu.border-radius.all.container
4px
action-menu.border-width.all.container
1px
action-menu.spacing.gap.horizontal.menu-item
8px
action-menu.spacing.margin.all.separator
8px
action-menu.spacing.padding.horizontal.menu-item
16px
action-menu.spacing.padding.vertical.loading
24px
action-menu.spacing.padding.vertical.menu-item
8px
Table of Contents