{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "RichTextEditor", "description": "The default rich text editor contains a minimal amount of text formatting capabilities.", "structure": { "name": "root", "restrict": [ "div" ], "description": "Form element wrapper for the rich text editor", "children": [ { "name": "label", "restrict": [ "label", "span" ], "description": "Editor label", "renderWhen": "slotFilled", "slot": { "name": "label" }, "attributes": { "static": { "class": "slds-form-element__label" } } }, { "name": "control", "restrict": [ "div" ], "description": "Form element control wrapper around the editor", "children": [ { "name": "editor", "restrict": [ "div" ], "description": "The default rich text editor contains a minimal amount of text formatting capabilities.", "children": [ { "name": "toolbar", "restrict": [ "div" ], "description": "Container for Rich Text Editor Toolbar", "attributes": { "static": { "role": "toolbar", "class": "slds-rich-text-editor__toolbar slds-shrink-none" }, "bound": { "aria-label": { "prop": "toolbarLabel" } } }, "slot": { "name": "toolbar" }, "children": [ { "name": "toolbarSelectGroup", "restrict": [ "div" ], "description": "Grouped font and font-size selects", "attributes": { "static": { "role": "group", "class": "slds-grid slds-rich-text-editor__spacing-wrapper" }, "bound": { "aria-label": { "prop": "selectGroupLabel" } } }, "children": [ { "name": "toolbarSelect", "restrict": [ "div" ], "description": "Container for Rich Text Editor Combobox", "children": [ { "name": "toolbarSelectFormElement", "restrict": [ "div" ], "children": [ { "name": "toolbarSelectLabel", "restrict": [ "label" ], "description": "Visually-hidden label for the select", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } }, { "name": "toolbarSelectControl", "restrict": [ "div" ], "children": [ { "name": "toolbarSelectComboboxContainer", "restrict": [ "div" ], "children": [ { "name": "toolbarSelectCombobox", "restrict": [ "div" ], "description": "Combobox trigger + dropdown wrapper", "children": [ { "name": "toolbarSelectComboboxFormElement", "restrict": [ "div" ], "attributes": { "static": { "role": "none", "class": "slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" } }, "children": [ { "name": "toolbarSelectInput", "restrict": [ "div" ], "description": "Faux input that triggers the dropdown", "attributes": { "static": { "role": "combobox", "class": "slds-input_faux slds-combobox__input slds-combobox__input-value", "aria-haspopup": "listbox" }, "bound": { "aria-expanded": { "prop": "expanded" }, "aria-controls": { "prop": "controlsId" }, "aria-labelledby": { "prop": "labelId" }, "aria-haspopup": { "prop": "haspopup" } } }, "children": [ { "name": "toolbarSelectInputValue", "restrict": [ "span" ], "description": "Current selected value text", "attributes": { "static": { "class": "slds-truncate" } } } ] }, { "name": "toolbarSelectIconContainer", "restrict": [ "span" ], "description": "Container for the dropdown caret icon", "children": [ { "name": "toolbarSelectIconSvg", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-icon slds-icon slds-icon_x-small slds-icon-text-default" } }, "children": [ { "name": "toolbarSelectIconUse" } ] } ], "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right" } } } ], "modifiers": [ { "name": "selectSize", "attribute": "class", "options": [ { "propValue": "xSmall", "value": "slds-rich-text-editor__select_x-small" }, { "propValue": "xxSmall", "value": "slds-rich-text-editor__select_xx-small" } ], "description": "Compact width applied to the select form element wrapper" } ] }, { "name": "toolbarSelectDropdown", "restrict": [ "div" ], "description": "Dropdown panel containing the listbox", "attributes": { "static": { "role": "listbox", "class": "slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid slds-dropdown_left" }, "bound": { "aria-busy": { "prop": "busy" }, "aria-label": { "prop": "listboxLabel" } } }, "children": [ { "name": "toolbarSelectListbox", "restrict": [ "ul" ], "attributes": { "static": { "role": "presentation", "class": "slds-listbox slds-listbox_vertical" } }, "children": [ { "name": "toolbarSelectListboxItem", "restrict": [ "li" ], "attributes": { "static": { "role": "presentation", "class": "slds-listbox__item" } }, "children": [ { "name": "toolbarSelectListboxOption", "restrict": [ "div" ], "attributes": { "static": { "role": "option", "class": "slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" } }, "children": [ { "name": "toolbarSelectListboxOptionBody", "restrict": [ "span" ], "children": [ { "name": "toolbarSelectListboxOptionLabel", "restrict": [ "span" ], "attributes": { "static": { "class": "slds-truncate" } } } ], "attributes": { "static": { "class": "slds-media__body" } } } ] } ] } ] } ] } ], "attributes": { "static": { "class": "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" } } } ], "attributes": { "static": { "class": "slds-combobox_container" } } } ], "attributes": { "static": { "class": "slds-form-element__control" } } } ], "attributes": { "static": { "class": "slds-form-element" } } } ], "attributes": { "static": { "class": "slds-rich-text-editor__select" } } } ] }, { "name": "toolbarButtonGroup", "restrict": [ "ul" ], "description": "Group of toolbar icon buttons sharing an accessible label", "attributes": { "bound": { "aria-label": { "prop": "groupLabel" } }, "static": { "class": "slds-button-group-list" } }, "children": [ { "name": "toolbarButtonItem", "restrict": [ "li" ], "children": [ { "name": "toolbarButton", "restrict": [ "button" ], "description": "Icon button that triggers a formatting action", "children": [ { "name": "toolbarButtonIcon", "component": "PrimitiveIcon", "attributes": { "static": { "class": "slds-button__icon" } }, "modifiers": [ { "name": "xSmall", "attribute": "class", "value": "slds-button__icon_x-small", "description": "Renders the secondary chevron icon at x-small size on split icon buttons" } ], "children": [ { "name": "toolbarButtonUse" } ] }, { "name": "toolbarButtonAssistiveText", "restrict": [ "span" ], "description": "Visually-hidden label describing the button action", "attributes": { "static": { "class": "slds-assistive-text" } } } ], "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-border-filled" } }, "modifiers": [ { "name": "more", "attribute": "class", "value": "slds-button_icon-more slds-button_icon-more-filled", "description": "Renders a split-style 'more' icon-button (e.g. background/text color pickers)" } ] }, { "name": "toolbarButtonTooltip", "restrict": [ "div" ], "description": "Tooltip popover associated with a toolbar button", "renderWhen": "propFilled", "attributes": { "static": { "role": "tooltip", "class": "slds-popover slds-popover_tooltip slds-nubbin_top-left" } }, "children": [ { "name": "toolbarButtonTooltipBody", "restrict": [ "div" ], "children": [ { "name": "toolbarButtonTooltipKbd", "restrict": [ "kbd" ], "description": "Keyboard shortcut hint inside the tooltip" } ], "attributes": { "static": { "class": "slds-popover__body" } } } ] } ] } ] } ], "modifiers": [ { "name": "bottom", "attribute": "class", "value": "slds-rich-text-editor__toolbar_bottom", "description": "Container for Rich Text Editor Bottom Toolbar" }, { "name": "detached", "attribute": "class", "value": "slds-rich-text-editor__toolbar_detached", "description": "Container for Rich Text Editor Toolbar when detached from Textarea" } ] }, { "name": "textarea", "restrict": [ "div" ], "description": "Wrapper around the editable content region", "children": [ { "name": "content", "restrict": [ "div" ], "description": "Textarea for Rich Text Editor which is an editable div", "attributes": { "static": { "role": "textbox", "contenteditable": "true", "class": "slds-rich-text-area__content slds-grow" }, "bound": { "aria-multiline": { "prop": "multiline" }, "aria-labelledby": { "prop": "labelId" }, "aria-describedby": { "prop": "ariaDescribedBy" } } }, "slot": { "name": "default" }, "modifiers": [ { "name": "placeholder", "attribute": "class", "value": "slds-text-color_weak", "description": "Tints the content area with the weak text color while showing placeholder/compose copy" } ], "children": [ { "name": "contentParagraph", "restrict": [ "p" ] }, { "name": "contentHeading1", "restrict": [ "h1" ] }, { "name": "contentHeading2", "restrict": [ "h2" ] }, { "name": "contentHeading3", "restrict": [ "h3" ] }, { "name": "contentHeading4", "restrict": [ "h4" ] }, { "name": "contentHeading5", "restrict": [ "h5" ] }, { "name": "contentHeading6", "restrict": [ "h6" ] }, { "name": "contentStrong", "restrict": [ "strong" ] }, { "name": "contentEmphasis", "restrict": [ "em" ] }, { "name": "contentUnderline", "restrict": [ "u" ] }, { "name": "contentStrikethrough", "restrict": [ "s", "del" ] }, { "name": "contentInsert", "restrict": [ "ins" ] }, { "name": "contentSubscript", "restrict": [ "sub" ] }, { "name": "contentSuperscript", "restrict": [ "sup" ] }, { "name": "contentAbbreviation", "restrict": [ "abbr" ] }, { "name": "contentLink", "restrict": [ "a" ] }, { "name": "contentBlockquote", "restrict": [ "blockquote" ] }, { "name": "contentUnorderedList", "restrict": [ "ul" ] }, { "name": "contentOrderedList", "restrict": [ "ol" ] }, { "name": "contentListItem", "restrict": [ "li" ] }, { "name": "contentDescriptionList", "restrict": [ "dl" ] }, { "name": "contentDescriptionTerm", "restrict": [ "dt" ] }, { "name": "contentDescriptionDetail", "restrict": [ "dd" ] }, { "name": "contentTable", "restrict": [ "table" ] }, { "name": "contentTableHead", "restrict": [ "thead" ] }, { "name": "contentTableBody", "restrict": [ "tbody" ] }, { "name": "contentTableRow", "restrict": [ "tr" ] }, { "name": "contentTableHeaderCell", "restrict": [ "th" ] }, { "name": "contentTableCell", "restrict": [ "td" ] } ] } ], "attributes": { "static": { "class": "slds-rich-text-editor__textarea slds-grid" } }, "variants": [ { "name": "container", "description": "Wrapper class around the editable region", "options": [ { "value": "textarea", "class": "slds-rich-text-editor__textarea" }, { "value": "output", "class": "slds-rich-text-editor__output" } ] } ] } ], "attributes": { "static": { "class": "slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap" } }, "modifiers": [ { "name": "toolbarOnly", "attribute": "class", "value": "slds-rich-text-editor_toolbar-only", "description": "Rich text editor container for when toolbar is detached from Textarea." } ] } ], "attributes": { "static": { "class": "slds-form-element__control" } } }, { "name": "help", "restrict": [ "div" ], "description": "Form-level help / error message", "renderWhen": { "prop": "hasError", "eq": "true" }, "slot": { "name": "help" }, "attributes": { "static": { "class": "slds-form-element__help" } } } ], "attributes": { "static": { "class": "slds-form-element" } } }, "states": [ { "name": "disabled", "type": "boolean", "aria": "aria-disabled", "description": "Whether the editor is disabled" }, { "name": "readonly", "type": "boolean", "aria": "aria-readonly", "description": "Whether the editor is read-only" }, { "name": "hasError", "type": "boolean", "description": "Error state for rich text editor" }, { "name": "focused", "type": "boolean", "description": "Focus state for rich text editor" } ], "accessibility": { "requirements": [ { "id": "textbox-role", "description": "Editor area must have role='textbox' with aria-multiline='true'" }, { "id": "toolbar-label", "description": "Toolbar must have an accessible label" }, { "id": "keyboard-formatting", "description": "Common formatting shortcuts (Ctrl+B, Ctrl+I) should work" }, { "id": "button-assistive-text", "description": "Every icon-only toolbar button must include a visually-hidden text label" } ] }, "componentRefs": { "PrimitiveIcon": { "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.", "props": { "iconName": { "type": "string", "required": true, "description": "Sprite reference for the icon glyph" } } } }, "extensions": { "com.salesforce-ux": { "dateAdded": "2017-03-01", "genReady": false, "lbc": "lightning-input-rich-text" } }, "cssSource": "./richTextEditor.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "disabled", "class": "slds-is-disabled" }, { "state": "focused", "class": "slds-has-focus" }, { "state": "hasError", "class": "slds-has-error" } ] }