{
  "_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-foundation.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"
        }
      },
      {
        "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"
                  },
                  "bound": {
                    "aria-label": {
                      "prop": "toolbarLabel"
                    }
                  }
                },
                "slot": {
                  "name": "toolbar"
                },
                "children": [
                  {
                    "name": "toolbarSelectGroup",
                    "restrict": [
                      "div"
                    ],
                    "description": "Grouped font and font-size selects",
                    "attributes": {
                      "static": {
                        "role": "group"
                      },
                      "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"
                              },
                              {
                                "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"
                                              }
                                            },
                                            "children": [
                                              {
                                                "name": "toolbarSelectInput",
                                                "restrict": [
                                                  "div"
                                                ],
                                                "description": "Faux input that triggers the dropdown",
                                                "attributes": {
                                                  "static": {
                                                    "role": "combobox"
                                                  },
                                                  "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"
                                                  }
                                                ]
                                              },
                                              {
                                                "name": "toolbarSelectIconContainer",
                                                "restrict": [
                                                  "span"
                                                ],
                                                "description": "Container for the dropdown caret icon",
                                                "children": [
                                                  {
                                                    "name": "toolbarSelectIconSvg",
                                                    "component": "PrimitiveIcon"
                                                  }
                                                ]
                                              }
                                            ]
                                          },
                                          {
                                            "name": "toolbarSelectDropdown",
                                            "restrict": [
                                              "div"
                                            ],
                                            "description": "Dropdown panel containing the listbox",
                                            "attributes": {
                                              "static": {
                                                "role": "listbox"
                                              },
                                              "bound": {
                                                "aria-busy": {
                                                  "prop": "busy"
                                                },
                                                "aria-label": {
                                                  "prop": "listboxLabel"
                                                }
                                              }
                                            },
                                            "children": [
                                              {
                                                "name": "toolbarSelectListbox",
                                                "restrict": [
                                                  "ul"
                                                ],
                                                "attributes": {
                                                  "static": {
                                                    "role": "presentation"
                                                  }
                                                },
                                                "children": [
                                                  {
                                                    "name": "toolbarSelectListboxItem",
                                                    "restrict": [
                                                      "li"
                                                    ],
                                                    "attributes": {
                                                      "static": {
                                                        "role": "presentation"
                                                      }
                                                    },
                                                    "children": [
                                                      {
                                                        "name": "toolbarSelectListboxOption",
                                                        "restrict": [
                                                          "div"
                                                        ],
                                                        "attributes": {
                                                          "static": {
                                                            "role": "option"
                                                          }
                                                        },
                                                        "children": [
                                                          {
                                                            "name": "toolbarSelectListboxOptionBody",
                                                            "restrict": [
                                                              "span"
                                                            ],
                                                            "children": [
                                                              {
                                                                "name": "toolbarSelectListboxOptionLabel",
                                                                "restrict": [
                                                                  "span"
                                                                ]
                                                              }
                                                            ]
                                                          }
                                                        ]
                                                      }
                                                    ]
                                                  }
                                                ]
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "name": "toolbarButtonGroup",
                    "restrict": [
                      "ul"
                    ],
                    "description": "Group of toolbar icon buttons sharing an accessible label",
                    "attributes": {
                      "bound": {
                        "aria-label": {
                          "prop": "groupLabel"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "toolbarButtonItem",
                        "restrict": [
                          "li"
                        ],
                        "children": [
                          {
                            "name": "toolbarButton",
                            "restrict": [
                              "button"
                            ],
                            "description": "Icon button that triggers a formatting action",
                            "children": [
                              {
                                "name": "toolbarButtonIcon",
                                "component": "PrimitiveIcon"
                              },
                              {
                                "name": "toolbarButtonAssistiveText",
                                "restrict": [
                                  "span"
                                ],
                                "description": "Visually-hidden label describing the button action"
                              }
                            ]
                          },
                          {
                            "name": "toolbarButtonTooltip",
                            "restrict": [
                              "div"
                            ],
                            "description": "Tooltip popover associated with a toolbar button",
                            "renderWhen": "propFilled",
                            "attributes": {
                              "static": {
                                "role": "tooltip"
                              }
                            },
                            "children": [
                              {
                                "name": "toolbarButtonTooltipBody",
                                "restrict": [
                                  "div"
                                ],
                                "children": [
                                  {
                                    "name": "toolbarButtonTooltipKbd",
                                    "restrict": [
                                      "kbd"
                                    ],
                                    "description": "Keyboard shortcut hint inside the tooltip"
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "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"
                      },
                      "bound": {
                        "aria-multiline": {
                          "prop": "multiline"
                        },
                        "aria-labelledby": {
                          "prop": "labelId"
                        },
                        "aria-describedby": {
                          "prop": "ariaDescribedBy"
                        }
                      }
                    },
                    "slot": {
                      "name": "default"
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "name": "help",
        "restrict": [
          "div"
        ],
        "description": "Form-level help / error message",
        "renderWhen": {
          "prop": "hasError",
          "eq": "true"
        },
        "slot": {
          "name": "help"
        }
      }
    ]
  },
  "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"
        }
      }
    }
  }
}