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