Rich Text Editor

The rich text editor (RTE) is a complex control for data input and editing.
It allows users to format the text and insert different types of elements within the text, such as hyperlinks or code blocks.

gux-rich-text-editor-beta

Properties

Property Attribute Description Type Default
disabled disabled boolean false

Events

Event Description Type
guxToggleAction CustomEvent<string>

Slots

Slot Description
"editor" Slot for the editor.
"global-action" Slot for global action.
"inserting" Slot for inserting actions.
"lists-indentation" Slot for lists and indentation actions.
"text-styling" Slot for text-styling actions.
"typographical-emphasis" Slot for typographical actions.

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-beta --> gux-rich-style-list-item
                                                  gux-rich-text-editor-beta --> gux-rich-text-editor-sub-list
                                                  gux-rich-text-editor-beta --> gux-truncate
                                                  gux-rich-text-editor-beta --> gux-rich-text-editor-menu
                                                  gux-rich-style-list-item --> gux-truncate
                                                  gux-truncate --> gux-tooltip
                                                  gux-rich-text-editor-sub-list --> gux-icon
                                                  gux-rich-text-editor-menu --> gux-tooltip-beta
                                                  gux-rich-text-editor-menu --> gux-popup
                                                  gux-rich-text-editor-menu --> gux-button-slot
                                                  gux-rich-text-editor-menu --> gux-icon
                                                  gux-rich-text-editor-menu --> gux-screen-reader-beta
                                                  gux-rich-text-editor-menu --> gux-rich-text-editor-list
                                                  gux-tooltip-beta --> gux-tooltip-base-beta
                                                  style gux-rich-text-editor-beta fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-menu

Dependencies

Used by

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-menu --> gux-tooltip-beta
                                                  gux-rich-text-editor-menu --> gux-popup
                                                  gux-rich-text-editor-menu --> gux-button-slot
                                                  gux-rich-text-editor-menu --> gux-icon
                                                  gux-rich-text-editor-menu --> gux-screen-reader-beta
                                                  gux-rich-text-editor-menu --> gux-rich-text-editor-list
                                                  gux-tooltip-beta --> gux-tooltip-base-beta
                                                  gux-rich-text-editor-beta --> gux-rich-text-editor-menu
                                                  style gux-rich-text-editor-menu fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-list

Properties

Property Attribute Description Type Default
value value string undefined

Events

Event Description Type
internallistitemsupdated CustomEvent<any>

Methods

guxFocusFirstItem() => Promise<void>

Returns

Type: Promise<void>

guxFocusLastItem() => Promise<void>

Returns

Type: Promise<void>

Dependencies

Used by

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-action-rich-style --> gux-rich-text-editor-list
                                                  gux-rich-text-editor-action-text-highlight --> gux-rich-text-editor-list
                                                  gux-rich-text-editor-menu --> gux-rich-text-editor-list
                                                  style gux-rich-text-editor-list fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-sub-list

Properties

Property Attribute Description Type Default
disabled disabled boolean false
label label string undefined

Dependencies

Used by

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-sub-list --> gux-icon
                                                  gux-rich-text-editor-beta --> gux-rich-text-editor-sub-list
                                                  style gux-rich-text-editor-sub-list fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-style-list-item

Properties

Property Attribute Description Type Default
disabled disabled boolean false
value value string undefined

Slots

Slot Description
text

Dependencies

Used by

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-style-list-item --> gux-truncate
                                                  gux-truncate --> gux-tooltip
                                                  gux-rich-text-editor-beta --> gux-rich-style-list-item
                                                  style gux-rich-style-list-item fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-highlight-list-item

Properties

Property Attribute Description Type Default
disabled disabled boolean false
highlight highlight "blue" | "blueberry" | "coral" | "inherit" | "island" | "islandaqua" | "mango" | "mineral" | "orange" | "pear" | "raspberry" | "tomato" 'orange'
value value string undefined

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-highlight-list-item --> gux-tooltip-beta
                                                  gux-tooltip-beta --> gux-tooltip-base-beta
                                                  style gux-rich-highlight-list-item fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-action

Properties

Property Attribute Description Type Default
action action "blockQuote" | "bold" | "bulletList" | "clearFormatting" | "codeblock" | "delete" | "italic" | "orderedList" | "redo" | "strike" | "underline" | "undo" undefined
active active boolean false
disabled disabled boolean false
isActive is-active [DEPRECATED] This property is deprecated. Use the active property instead.

 boolean false

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-action --> gux-tooltip-beta
                                                  gux-rich-text-editor-action --> gux-button-slot
                                                  gux-rich-text-editor-action --> gux-icon
                                                  gux-rich-text-editor-action --> gux-screen-reader-beta
                                                  gux-tooltip-beta --> gux-tooltip-base-beta
                                                  style gux-rich-text-editor-action fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-action-text-highlight

Properties

Property Attribute Description Type Default
active active boolean false
disabled disabled boolean false
isActive is-active [DEPRECATED] This property is deprecated. Use the active property instead.

 boolean false

Events

Event Description Type
noHighlightAction CustomEvent<void>

Slots

Slot Description
for a collection of gux-rich-highlight-list-item.

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-action-text-highlight --> gux-tooltip-beta
                                                  gux-rich-text-editor-action-text-highlight --> gux-button-slot
                                                  gux-rich-text-editor-action-text-highlight --> gux-truncate
                                                  gux-rich-text-editor-action-text-highlight --> gux-rich-text-editor-list
                                                  gux-rich-text-editor-action-text-highlight --> gux-icon
                                                  gux-rich-text-editor-action-text-highlight --> gux-screen-reader-beta
                                                  gux-rich-text-editor-action-text-highlight --> gux-popup
                                                  gux-tooltip-beta --> gux-tooltip-base-beta
                                                  gux-truncate --> gux-tooltip
                                                  style gux-rich-text-editor-action-text-highlight fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-action-rich-style

Properties

Property Attribute Description Type Default
disabled disabled boolean false
value value string undefined

Slots

Slot Description
for a collection of gux-rich-style-list-item elements.

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-action-rich-style --> gux-icon
                                                  gux-rich-text-editor-action-rich-style --> gux-truncate
                                                  gux-rich-text-editor-action-rich-style --> gux-tooltip-beta
                                                  gux-rich-text-editor-action-rich-style --> gux-rich-text-editor-list
                                                  gux-rich-text-editor-action-rich-style --> gux-button-slot
                                                  gux-rich-text-editor-action-rich-style --> gux-popup
                                                  gux-truncate --> gux-tooltip
                                                  gux-tooltip-beta --> gux-tooltip-base-beta
                                                  style gux-rich-text-editor-action-rich-style fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-action-link

Properties

Property Attribute Description Type Default
active active boolean false
disabled disabled boolean false
isActive is-active [DEPRECATED] This property is deprecated. Use the active property instead.

 boolean false

Events

Event Description Type
linkOptions CustomEvent<{ textToDisplay: string; href: string; }>

Dependencies

Depends on

Graph


                                                
                                                graph TD;
                                                  gux-rich-text-editor-action-link --> gux-tooltip-beta
                                                  gux-rich-text-editor-action-link --> gux-button-slot
                                                  gux-rich-text-editor-action-link --> gux-icon
                                                  gux-rich-text-editor-action-link --> gux-popover
                                                  gux-rich-text-editor-action-link --> gux-form-field-text-like
                                                  gux-rich-text-editor-action-link --> gux-cta-group
                                                  gux-rich-text-editor-action-link --> gux-button
                                                  gux-tooltip-beta --> gux-tooltip-base-beta
                                                  gux-popover --> gux-dismiss-button
                                                  gux-dismiss-button --> gux-button-slot
                                                  gux-dismiss-button --> gux-icon
                                                  gux-form-field-text-like --> gux-radial-loading
                                                  gux-form-field-text-like --> gux-form-field-label-indicator
                                                  gux-form-field-text-like --> gux-form-field-input-clear-button
                                                  gux-form-field-text-like --> gux-icon
                                                  gux-form-field-text-like --> gux-screen-reader-beta
                                                  gux-form-field-input-clear-button --> gux-icon
                                                  gux-form-field-input-clear-button --> gux-tooltip-beta
                                                  gux-button --> gux-tooltip-beta
                                                  style gux-rich-text-editor-action-link fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

gux-rich-text-editor-action-group

Properties

Property Attribute Description Type Default
disabled disabled boolean false
hideActionDivider hide-action-divider boolean false

Slots

Slot Description
"actions" Slot for gux-rich-text-editor-actions

Built with StencilJS

Rich Text Editor
Design
Rich Text Editor
Sandbox

Something looks broken on this site?

Report it to the Design System team here!

Resources

Support

© 2026 Spark Flare 4.0. Page last updated on Jan 5, 2026, 19:24