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 />
  • <RichTextEditor.TableRows />
  • <RichTextEditor.TableColumns />

• Separate groups with

  • <RichTextEditor.Separator />

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.

useForm (recommended)

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 that the updateContent function will not make changes if the new content is identical to the previous content.

RichTextEditor.Alignments Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the Alignment button

RichTextEditor.BackgroundColor Props

Name	Type	Default	Required	Description
backgroundColors	{ code: string; label: string; }[]	'[ { 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.)
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the BackgroundColor button.

RichTextEditor.Bold Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the Bold button

RichTextEditor.Color Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
colors	{ code: string; label: string; }[]	'[ { 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.
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the Color button.

RichTextEditor.Copy Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the Copy button

RichTextEditor.FontSize Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
fontSizes	string[]	'['14px', '16px', '18px', '24px', '30px']'	-	Array of font sizes to display in the dropdown menu
isDisabled	boolean	false	-	Disables the FontSize button

RichTextEditor.Headings Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the Headings button

RichTextEditor.Highlight Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables Highlight button

RichTextEditor.Image Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the Image button

RichTextEditor.Italic Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables Italics button

RichTextEditor.Link Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables Link button

RichTextEditor.Lists Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disabled Lists button

RichTextEditor.Redo Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables Redo button

RichTextEditor.Strike Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables Strike button

RichTextEditor.Table Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the Table button
tableConfig	{ rows: number; cols: number; withHeaderRow: boolean; }	'{ rows: 3, cols: 3, withHeaderRow: true }'	-	Configuration for the table to be inserted

RichTextEditor.TableColumns Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the TableColumns button

RichTextEditor.TableRows Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables the TableRows button

RichTextEditor.Toolbar Props

Name	Type	Default	Required	Description
children	React.ReactNode	-	-	Toolbar children
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information

RichTextEditor.Underline Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables Underline button

RichTextEditor.Undo Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
isDisabled	boolean	false	-	Disables Undo button

RichTextEditor Props

Name	Type	Default	Required	Description
children	React.ReactNode	-	-	Rich Text Editor children
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	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"	'html'	-	Return html or json data
height	string | number	'200px'	-	Rich Text Editor height
label	string	'Rich Text Editor'	-	Label for the Rich Text Editor
model	string	-	-	Form model to be used with FormProvider
onChange	(value: string) => void	-	-	Callback fired every time the value changes
value	string	-	-	Value of the Rich Text Editor.

RichTextEditor Classes

Class Name	Description
.abyss-

RichTextEditor.ControlsButton Classes

Class Name	Description
.abyss-rich-text-editor-controls-button	Class applied to the control button

RichTextEditor.ControlsGroup Classes

Class Name	Description
.abyss-rich-text-editor-controls-group	Class applied to the ControlsGroup component

RichTextEditor.ControlsDropdown Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown	Class applied to the ControlsDropdown component

RichTextEditor.Alignments Classes

Class Name	Description
.abyss-

RichTextEditor.BackgroundColor Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-background-color	Class applied to the BackgroundColor control popover trigger (dropdown)

RichTextEditor.Bold Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-bold	Class applied to the Bold control button

RichTextEditor.Color Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-color	Class applied to the Color control popover trigger (dropdown)

RichTextEditor.Copy Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-copy	Class applied to the Copy control button

RichTextEditor.FontSize Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-font-size	Class applied to the FontSize control dropdown

RichTextEditor.Headings Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-headings	Class applied to the Headings control dropdown

RichTextEditor.Highlight Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-highlight	Class applied to the Highlight control button

RichTextEditor.Image Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-image	Class applied to the Image control button

RichTextEditor.Italic Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-italic	Class applied to the Italic control button

RichTextEditor.Link Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-link-dropdown-text-input-container	Container for the text inputs inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-display-text-input	Display text input inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-text-input	URL text input inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-button-container	Container for the buttons inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-set-button	Set button inside the link dropdown
.abyss-rich-text-editor-controls-button-link-dropdown-unset-button	Unset button inside the link dropdown
.abyss-rich-text-editor-controls-button-link-tooltip	Tooltip for the link control button
.abyss-rich-text-editor-controls-dropdown-link	Class applied to the link control dropdown when active

RichTextEditor.Lists Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-lists	Class applied to the Lists control dropdown

RichTextEditor.Redo Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-redo	Class applied to the Redo control button

RichTextEditor.Separator Classes

Class Name	Description
.abyss-rich-text-editor-separator-container	Class applied to the Separator container
.abyss-rich-text-editor-separator-line	Class applied to the Separator line

RichTextEditor.Strike Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-strike	Class applied to the Strike control button

RichTextEditor.Table Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-table	Class applied to the Table control dropdown

RichTextEditor.TableColumns Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-table-columns	Class applied to the TableColumns control dropdown

RichTextEditor.TableRows Classes

Class Name	Description
.abyss-rich-text-editor-controls-dropdown-table-rows	Class applied to the TableRows control dropdown

RichTextEditor.Toolbar Classes

Class Name	Description
.abyss-rich-text-editor-toolbar	Class applied to the Toolbar component

RichTextEditor.Underline Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-underline	Class applied to the Underline control button

RichTextEditor.Undo Classes

Class Name	Description
.abyss-rich-text-editor-controls-button-undo	Class applied to the Undo control button

Rich Text Editor Keyboard Interactions

Key	Description
Control + Z	Undo
Control + Shift + Z	Redo
Control + B	Bold
Control + I	Italic
Control + U	Underline
Control + Shift + S	Strikethrough
Control + Shift + H	Highlight
Control + E	Code
Control + Shift + 7	Ordered list
Control + Shift + 8	Bullet list
Control + Shift + L	Left Align
Control + Shift + E	Center Align
Control + Shift + R	Right Align
Control + Shift + J	Justify
Control + Alt + 0	Normal Text
Control + Alt + 1	Heading 1
Control + Alt + 2	Heading 2
Control + Alt + 3	Heading 3
Control + Alt + 4	Heading 4
Control + Alt + 5	Heading 5
Control + Alt + 6	Heading 6

Navigating Inside Toolbar Keyboard Interactions

Key	Description
Right Arrow	Moves focus one cell to the right.
Left Arrow	Moves focus one cell to the left.
Enter	Select Item

Component Tokens

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

Search tokens

RichTextEditor Tokens

Token Name	Value
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.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.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.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-width.all.container	1px
rich-text-editor.border-width.all.control	1px
rich-text-editor.border-width.bottom.toolbar	1px
rich-text-editor.spacing.gap.horizontal.control	4px
rich-text-editor.spacing.gap.horizontal.toolbar	8px
rich-text-editor.spacing.gap.vertical.container	16px
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.vertical.toolbar	12px

Search tokens

ActionMenu Tokens

Token Name	Value
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