@salesforce-ux/design-system/__internal/chunked/docs/ui/components/rich-text-editor/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9564:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return V},getElement:function(){return Q}});var n=l(1594),r=l.n(n),a=l(5671),i=l(6547),o=(l(2436),l(9582),l(5619),l(8342)),s=l(806),d=l(7412),c=l.n(d),u=l(942),m=l.n(u),b=l(4216),E=l(1412),p=l(6955),f=l(8347),h=l(5159),x=l(3964),g=l(6185),v=(l(5786),l(538)),y=l(2711);function _(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=l){var n,r,a,i,o=[],s=!0,d=!1;try{if(a=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;s=!1}else for(;!(s=(n=a.call(l)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){d=!0,r=e}finally{try{if(!s&&null!=l.return&&(i=l.return(),Object(i)!==i))return}finally{if(d)throw r}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return N(e,t);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l||"Set"===l?Array.from(e):"Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l)?N(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function N(e,t){(null==t||t>e.length)&&(t=e.length);for(var l=0,n=Array(t);l<t;l++)n[l]=e[l];return n}l(5526);var w="rich-text-editor-unique-id-01",T=function(e){return r().createElement(y.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},r().createElement("div",{className:m()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};T.propTypes={children:c().node.isRequired,errorId:c().string,hasError:c().bool,inlineMessage:c().string,labelContent:c().string,labelId:c().string};var I=function(e){return r().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:m()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},O=function(e){var t=e.listboxData,l=e.id;return r().createElement(g.Ay,{id:l,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};O.propTypes={listboxData:c().object.isRequired,id:c().string};var A=function(e){var t=e.listboxData,l=e.id;return r().createElement(g.Ay,{id:l,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};A.propTypes={listboxData:c().object.isRequired,id:c().string};var S=function(e){var t=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],l=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],a=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],i=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0];return r().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:t,"aria-controls":l,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:r().createElement(v.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(O,{listboxData:x.kz,id:l}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:a,"aria-controls":i,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:r().createElement(v.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(A,{listboxData:x.TU,id:i}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},j=function(e){return r().createElement(E.GW,{"aria-label":"Format text"},r().createElement("li",null,r().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},q=function(e){return r().createElement(E.GW,{"aria-label":"Format background & text color"},r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Background Color"))),r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},L=function(e){return r().createElement(E.GW,{"aria-label":"Format body"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},B=function(e){return r().createElement(E.GW,{"aria-label":"Align text"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},C=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},R=function(e){return r().createElement(E.GW,{"aria-label":"Add user"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"adduser",disabled:e.disabledButtons,assistiveText:"Add User"})))},k=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},D=function(e){return r().createElement("div",{className:m()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label||"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))};function M(){return M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var n in l)({}).hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},M.apply(null,arguments)}var G=function(e){return r().createElement("div",M({className:m()("demo-only",e.className),style:{minHeight:"180px"}},e),e.children)};G.propTypes={children:c().node,className:c().string};var F=function(e){return r().createElement("div",null,r().createElement("h1",null,"Heading - h1"),r().createElement("p",null,"Lorem ipsum dolor sit amet, ",r().createElement("strong",null,"strong")," adipisicing elit, sed do ",r().createElement("em",null,"emphasis")," tempor incididunt ut ",r().createElement("u",null,"underlined")," et dolore"," ",r().createElement("s",null,"strikethrough")," aliqua. Ut ",r().createElement("sub",null,"subscript")," ad"," ",r().createElement("sup",null,"superscript")," veniam, ",r().createElement("abbr",null,"quis")," nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ",r().createElement("a",{href:"#"},"link")," in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h2",null,"Heading - h2"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"," ",r().createElement("a",{href:"#"},"veryVeryLongWordWithHyperlinkExample")," tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ul",null,r().createElement("li",null,"Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Unordered list item")),r().createElement("h3",null,"Heading - h3"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ol",null,r().createElement("li",null,"Ordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Ordered list item")),r().createElement("ul",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("ol",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("h4",null,"Heading - h4"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("dl",null,r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description"),r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description")),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("table",null,r().createElement("thead",null,r().createElement("tr",null,r().createElement("th",null,"Column"),r().createElement("th",null,"Column"))),r().createElement("tbody",null,r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")),r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")))),r().createElement("h5",null,"Heading - h5"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("blockquote",null,"Blockquote - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h6",null,"Heading - h6"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"," ",r().createElement("a",{href:"#"},"https://url.com/document/d/1dSOGKlCQtSG73NcSJB7qCJVyjE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/ed")," ","quis nostrud ",r().createElement("ins",null,"Content to be inserted.")," exercitation ullamco"," ",r().createElement("del",null,"Content to be deleted.")," laboris nisi ut aliquip ex ea commodo consequat."))},U=[{id:"default",label:"Default",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))}],H=[{id:"focused",label:"Focused",element:r().createElement(G,null,r().createElement(T,{className:"slds-has-focus"},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"filled-out",label:"Filled Out",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(F,null)})))},{id:"error",label:"Error",element:r().createElement(G,null,r().createElement(T,{className:"slds-has-error",inlineMessage:"This field is required",hasError:!0,errorId:"rte-error-01"},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...","aria-describedby":"rte-error-01"})))},{id:"disabled",label:"Disabled",element:r().createElement(G,null,r().createElement(T,{disabledLabel:"disabled"},r().createElement(I,{disabledButtons:!0,disabledLabel:"disabled"},r().createElement(j,{tabIndexSetting:"0",disabledButtons:!0}),r().createElement(L,{disabledButtons:!0}),r().createElement(k,{disabledButtons:!0})),r().createElement(D,{placeholder:"Compose text...",disabled:!0})))},{id:"tooltip",label:"Tooltip",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0",hasTooltip:!0}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."}),r().createElement(b.m_,{className:"slds-nubbin_top-left",id:"bold",style:{position:"absolute",top:"48px",left:"2px"}},"Bold ",r().createElement("kbd",null,"cmd+b"))))},{id:"toolbar-only",label:"Toolbar Only",element:r().createElement(G,null,r().createElement(T,{isToolbarOnly:!0},r().createElement(I,{isToolbarOnly:!0},r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null))))}],W=[{id:"bottom-toolbar",label:"Bottom toolbar",element:r().createElement(G,null,r().createElement(T,null,r().createElement(D,{placeholder:"Compose text..."}),r().createElement(I,{className:"slds-rich-text-editor__toolbar_bottom"},r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null))))},{id:"with-label",label:"With a Label",element:r().createElement(G,null,r().createElement(T,{label:"Details and Steps to Reproduce",labelId:w},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...",labelId:w})))},{id:"email",label:"Email",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(S,null),r().createElement(j,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"toolbar-narrow",label:"Toolbar Narrow",element:r().createElement(G,{style:{width:"294px"},className:"slds-region_narrow"},r().createElement(T,null,r().createElement(I,null,r().createElement(S,null),r().createElement(j,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"feed",label:"Feed",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(R,null),r().createElement(k,null)),r().createElement(D,{label:"Post to feed",placeholder:"Post to feed..."})))},{id:"note",label:"Notes",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose note",placeholder:"Compose Note..."})))},{id:"styling-hooks-rte-min-height",label:"Styling Hooks - Base (Min Height)",demoStyles:"\n        --sds-c-textarea-sizing-min-height: 3rem;\n      ",storybookStyles:!0,element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"styling-hooks-rte-max-height",label:"Styling Hooks - Base (Max Height)",demoStyles:"\n        --sds-c-textarea-sizing-max-height: 10rem;\n      ",storybookStyles:!0,element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(F,null)})))}],P=a.XB.code,z=a.XB.h2,X=a.XB.h3,J=a.XB.p,Q=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"The Rich Text Editor is a textarea with added capabilities for use in various publishers."),(0,n.createElement)(i.A,{exampleOnly:!0},(0,s.NO)(H,"filled-out")),z({id:"About-Rich-Text-Editor"},"About Rich Text Editor"),J({},"At a high-level, the buttons in Rich Text Editor (RTE) are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”."),J({},'The "clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.'),J({},"On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap outside of the container. To adjust the widths of the dropdowns, apply the class ",P({},"slds-region_narrow")," to the outermost ",P({},"div")," of the rich text editor."),J({},"A label may be used to further describe the purpose of a Rich Text Editor. To add a label, place a ",P({},"<span>")," element with the class ",P({},"slds-form-element__label"),", right before the ",P({},"slds-form-element__control")," element."),X({id:"Accessibility"},"Accessibility"),J({},"Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button."),z({id:"Base"},"Base"),(0,n.createElement)(i.A,null,(0,s.NO)(U)),z({id:"States"},"States"),X({id:"Focused"},"Focused"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"focused")),X({id:"Filled-Out"},"Filled Out"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"filled-out")),X({id:"Error"},"Error"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"error")),X({id:"Disabled"},"Disabled"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"disabled")),X({id:"Tooltip"},"Tooltip"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"tooltip")),z({id:"Examples"},"Examples"),X({id:"Bottom-toolbar"},"Bottom toolbar"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"bottom-toolbar")),X({id:"With-a-Label"},"With a Label"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"with-label")),X({id:"Email"},"Email"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"email")),X({id:"Toolbar-Narrow"},"Toolbar Narrow"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"toolbar-narrow")),X({id:"Feed"},"Feed"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"feed")),X({id:"Notes"},"Notes"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"note")),z({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(o.A,{name:"rich-text-editor",type:"component"}))},V=function(){return(0,a.Qr)(Q())}}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var l=r[e]={id:e,exports:{}};return n[e](l,l.exports,a),l.exports}a.m=n,a.amdO={},e=[],a.O=function(t,l,n,r){if(!l){var i=1/0;for(c=0;c<e.length;c++){l=e[c][0],n=e[c][1],r=e[c][2];for(var o=!0,s=0;s<l.length;s++)(!1&r||i>=r)&&Object.keys(a.O).every(function(e){return a.O[e](l[s])})?l.splice(s--,1):(o=!1,r<i&&(i=r));if(o){e.splice(c--,1);var d=n();void 0!==d&&(t=d)}}return t}r=r||0;for(var c=e.length;c>0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[l,n,r]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var r=Object.create(null);a.r(r);var i={};t=t||[null,l({}),l([]),l(l)];for(var o=2&n&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},a.d(r,i),r},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=1399,function(){var e={1399:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,r,i=l[0],o=l[1],s=l[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(n in o)a.o(o,n)&&(a.m[n]=o[n]);if(s)var c=s(a)}for(t&&t(l);d<i.length;d++)r=i[d],a.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return a.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),a.nc=void 0;var i=a.O(void 0,[3540],function(){return a(9564)});i=a.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/rich-text-editor/docs.mdx.js"]=i}();