carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 5.72 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/utils"),r=require("lexical"),i=require("react"),a=require("./toolbar.style.js"),o=require("../../../../button/button.component.js"),l=require("../../../../../hooks/__internal__/useLocale/useLocale.js"),s=require("./buttons/bold.component.js"),d=require("./buttons/hyperlink.component.js"),u=require("./buttons/italic.component.js"),c=require("./buttons/list.component.js"),p=require("./buttons/save.component.js"),b=require("./buttons/typography.component.js"),m=require("./buttons/underline.component.js"),x=require("./button-group/button-group.component.js"),h=require("../../__utils__/constants.js"),f=require("../../../../textbox/textbox.component.js"),g=require("@lexical/link"),j=require("../../../../dialog/dialog.component.js"),v=require("../../../../form/form.component.js");require("../../../../form/required-fields-indicator/required-fields-indicator.component.js"),exports.default=({contentEditorRef:y,namespace:k,hasHeader:q,onCancel:E,onSave:S,size:T="medium",toolbarControls:$=["typography","bold","italic","underline","unordered-list","ordered-list","link"]})=>{const[C]=t.useLexicalComposerContext(),_=C.isEditable(),D=i.useRef(null),[F,I]=i.useState(!1),[B,L]=i.useState(!1),[w,z]=i.useState(!1),[A,O]=i.useState(!1),[R,N]=i.useState(!1),[P,H]=i.useState(-1),[U,X]=i.useState(""),[Y,K]=i.useState(""),M=l.default(),W=$.includes("typography"),G=$.includes("bold")||$.includes("italic")||$.includes("underline"),J=$.includes("unordered-list")||$.includes("ordered-list"),Q=$.includes("link"),V=i.useCallback((()=>{const e=r.$getSelection();r.$isRangeSelection(e)&&(I(e.hasFormat(h.TEXT_EDITOR_ACTION_TYPES.Bold)),L(e.hasFormat(h.TEXT_EDITOR_ACTION_TYPES.Italic)),z(e.hasFormat(h.TEXT_EDITOR_ACTION_TYPES.Underline)))}),[]);i.useEffect((()=>n.mergeRegister(C.registerUpdateListener((({editorState:e})=>{e.read((()=>{C.isEditable()&&V()}))})))),[V,C]);const Z=()=>{X(""),K(""),O(!1)};if(!_)return null;const ee=U.length&&Y.length;return e.jsxs(a.StyledToolbarWrapper,{"data-role":`${k}-toolbar-wrapper`,hasHeader:q,id:`${k}-toolbar-wrapper`,size:T,children:[e.jsxs(a.StyledToolbar,{role:"toolbar","aria-label":M.textEditor.toolbarAriaLabel(),"data-role":`${k}-toolbar`,id:`${k}-toolbar`,ref:D,onKeyDown:e=>{var t,n;if(0===$.length||!D.current)return;const r=Array.from(null===(t=D.current)||void 0===t?void 0:t.querySelectorAll("button.toolbar-button"));if(!r.length)return;const i=r.findIndex((e=>{var t;return e.id===(null===(t=document.activeElement)||void 0===t?void 0:t.id)}));let a=-1;switch(e.key){case"ArrowRight":e.preventDefault(),R||(a=i<r.length-1?i+1:0);break;case"ArrowLeft":e.preventDefault(),R||(a=i>0?i-1:r.length-1);break;case"Home":e.preventDefault(),a=0;break;case"End":e.preventDefault(),a=r.length-1;break;default:return}r.forEach(((e,t)=>{e.tabIndex=t===a?0:-1})),a>-1&&(null===(n=r[a])||void 0===n||n.focus())},tabIndex:-1,children:[e.jsxs(e.Fragment,{children:[W&&e.jsx(x.default,{name:"typography-formatting-buttons",namespace:k,showDivider:G||J||Q,children:e.jsx(b.default,{contentEditorRef:y,namespace:k,isFirstButton:!0,isOpen:R,setIsOpen:N,focusedIndex:P,setFocusedIndex:H,size:T})}),G&&e.jsxs(x.default,{name:"text-formatting-buttons",namespace:k,showDivider:J||Q,children:[$.includes("bold")&&e.jsx(s.default,{isActive:F,namespace:k,isFirstButton:!W,size:T}),$.includes("italic")&&e.jsx(u.default,{isActive:B,namespace:k,isFirstButton:!W&&!$.includes("bold"),size:T}),$.includes("underline")&&e.jsx(m.default,{isActive:w,namespace:k,isFirstButton:!W&&!$.includes("bold")&&!$.includes("italic"),size:T})]}),J&&e.jsx(x.default,{name:"list-formatting-buttons",namespace:k,showDivider:Q,children:e.jsx(c.default,{namespace:k,olIsFirstButton:!W&&!G&&!$.includes("unordered-list"),showOL:$.includes("ordered-list"),showUL:$.includes("unordered-list"),ulIsFirstButton:!W&&!G,size:T})}),Q&&e.jsx(x.default,{name:"hyperlink-formatting-buttons",namespace:k,showDivider:!1,children:e.jsx(d.default,{namespace:k,isFirstButton:!W&&!G&&!J,setDialogOpen:O,size:T})})]}),e.jsx(j.Dialog,{open:A,onCancel:()=>{Z()},title:M.textEditor.hyperlink.dialogTitle(),"data-role":`${k}-hyperlink-dialog`,"aria-label":M.textEditor.hyperlink.dialogTitle(),size:"small",children:e.jsxs(v.Form,{leftSideButtons:e.jsx(o.default,{"data-role":`${k}-hyperlink-cancel-button`,onClick:()=>{Z()},children:"Cancel"}),saveButton:e.jsx(o.default,{buttonType:"primary",type:"submit",disabled:!ee,"data-role":`${k}-hyperlink-save-button`,children:"Save"}),onSubmit:e=>{e.preventDefault(),C.isEditable()&&(C.update((()=>{const e=r.$getRoot(),t=e.getChildrenSize(),n=r.$getSelection(),i=g.$createLinkNode(Y);if(i.append(r.$createTextNode(U)),0===t){const t=r.$createParagraphNode();t.append(i),e.append(t),t.selectEnd()}else if(r.$isRangeSelection(n))n.insertNodes([i]);else{const t=e.getLastChild();r.$isParagraphNode(t)&&t.append(i)}})),Z())},children:[e.jsx(f.Textbox,{label:M.textEditor.hyperlink.textFieldLabel(),name:"text",required:!0,"data-role":`${k}-hyperlink-text-field`,value:U,onChange:e=>X(e.target.value)}),e.jsx(f.Textbox,{label:M.textEditor.hyperlink.linkFieldLabel(),name:"link",required:!0,"data-role":`${k}-hyperlink-link-field`,value:Y,onChange:e=>K(e.target.value)})]})})]}),e.jsxs(a.CommandButtons,{"data-role":`${k}-command-buttons`,children:[E&&e.jsx(o.default,{buttonType:"tertiary","data-role":`${k}-cancel-button`,"aria-label":M.textEditor.cancelButtonAria(),onClick:()=>null==E?void 0:E(C),size:T,className:"command-button",children:M.textEditor.cancelButton()}),S&&e.jsx(p.default,{namespace:k,onSave:S,size:T})]})]})};