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 Tiptap. 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​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables the Alignment button

RichTextEditor.BackgroundColor Props​

NameTypeDefaultRequiredDescription
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.
(A separate "remove background" option is rendered by the component.)
isDisabled
boolean | undefined
false
-
Disables the BackgroundColor button.

RichTextEditor.Bold Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables the Bold button

RichTextEditor.Color Props​

NameTypeDefaultRequiredDescription
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.
isDisabled
boolean | undefined
false
-
Disables the Color button.

RichTextEditor.Copy Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables the Copy button

RichTextEditor.FontSize Props​

NameTypeDefaultRequiredDescription
fontSizes
string[] | undefined
'['14px', '16px', '18px', '24px', '30px']'
-
Array of font sizes to display in the dropdown menu
isDisabled
boolean | undefined
false
-
Disables the FontSize button

RichTextEditor.Headings Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables the Headings button

RichTextEditor.Highlight Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables Highlight button

RichTextEditor.Image Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables the Image button

RichTextEditor.Italic Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables Italics button

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables Link button

RichTextEditor.Lists Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disabled Lists button

RichTextEditor.Redo Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables Redo button

RichTextEditor.Strike Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables Strike button

RichTextEditor.Table Props​

NameTypeDefaultRequiredDescription
deprecatedMenu
boolean | undefined
false
-
If true, the Table button will render the previous version of the table control (without the popover).
isDisabled
boolean | undefined
false
-
Disables the Table button
tableConfig
{ rows: number; cols: number; withHeaderRow: boolean; } | undefined
'{ rows: 3, cols: 3, withHeaderRow: true }'
-
The default configuration for tables inserted via the Table control. These values are used as the default values in the table insertion menu.

RichTextEditor.TableColumns Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables the TableColumns button

RichTextEditor.TableRows Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables the TableRows button

RichTextEditor.Toolbar Props​

NameTypeDefaultRequiredDescription
children
React.ReactNode | undefined
--
Toolbar children

RichTextEditor.Underline Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables Underline button

RichTextEditor.Undo Props​

NameTypeDefaultRequiredDescription
isDisabled
boolean | undefined
false
-
Disables Undo button

RichTextEditor Props​

NameTypeDefaultRequiredDescription
children
React.ReactNode | undefined
--
Rich Text Editor children
format
'html' | 'json' | undefined
'html'
-
Return html or json data
height
string | number | undefined
'200px'
-
Rich Text Editor height
label
string | undefined
'Rich Text Editor'
-
Label for the Rich Text Editor
model
string | undefined
--
Form model to be used with FormProvider
onChange
(value: string) => void | undefined
--
Callback fired every time the value changes
value
string | undefined
--
Value of the Rich Text Editor.

RichTextEditor Classes​

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

RichTextEditor.ControlsButton Classes​

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

RichTextEditor.ControlsGroup Classes​

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

RichTextEditor.ControlsDropdown Classes​

Class NameDescription
.abyss-rich-text-editor-controls-dropdownClass applied to the ControlsDropdown 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-tooltipTooltip for the image control button
.abyss-rich-text-editor-controls-dropdown-imageClass applied to the image control 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-button-containerContainer for the buttons 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-dropdown-cancel-buttonCancel button inside the image 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-text-input-containerContainer for the text inputs 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-text-inputURL text input inside the link dropdown
.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-set-buttonSet button 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-dropdown-tableClass applied to the Table control 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-cols-inputNumber of columns input 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-button-table-dropdown-caption-inputTable caption input 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-button-containerContainer for the buttons 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-cancel-buttonCancel button inside the table 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