@zeniai/web-components 4.4.70 → 4.4.71-betaAK1

package/dist/TaskDescriptionEditor-DLuXATNl.cjs

@@ -0,0 +1,197 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./vendor-react-CzqSQR9J.cjs"),i=require("react"),f=require("@emotion/styled"),tt=require("@lexical/html"),R=require("@lexical/link"),M=require("@lexical/list"),rt=require("@lexical/react/LexicalComposer"),et=require("@lexical/react/LexicalComposerContext"),at=require("@lexical/react/LexicalContentEditable"),lt=require("@lexical/react/LexicalErrorBoundary"),ct=require("@lexical/react/LexicalHistoryPlugin"),dt=require("@lexical/react/LexicalLinkPlugin"),pt=require("@lexical/react/LexicalListPlugin"),ut=require("@lexical/react/LexicalRichTextPlugin"),I=require("@lexical/rich-text"),P=require("@lexical/selection"),H=require("@lexical/utils"),mt=require("@mui/material/styles"),l=require("lexical"),xt=require("react-dom"),s=require("./SessionTimeoutPopup-JoJimbHb.cjs"),c=require("./underline-CtPZKkkA.cjs"),gt=t=>t.replace(s.HTML_AMPERSAND_PATTERN,"&").replace(s.HTML_LESS_THAN_PATTERN,"<").replace(s.HTML_GREATER_THAN_PATTERN,">"),Et=new Set(["ADDRESS","ARTICLE","ASIDE","BLOCKQUOTE","DD","DIV","DL","DT","FIGURE","FOOTER","H1","H2","H3","H4","H5","H6","HEADER","LI","MAIN","NAV","OL","P","PRE","SECTION","TABLE","TBODY","TD","TFOOT","TH","THEAD","TR","UL"]),D=t=>t!=null&&t.nodeType===Node.ELEMENT_NODE&&Et.has(t.tagName),bt=t=>{const{previousSibling:o,nextSibling:n}=t,a=o==null||D(o),r=n==null||D(n);return a&&r&&(D(o)||D(n))},ht=t=>{const o=t.createTreeWalker(t.body,NodeFilter.SHOW_TEXT),n=[];let a=o.nextNode();for(;a!=null;)n.push(a),a=o.nextNode();n.forEach(r=>{if(r.parentNode==null||r.textContent==null)return;const d=r.textContent.replace(s.CRLF_OR_CR_PATTERN,`
+`);if(!d.includes(`
+`)||d.trim()===""&&bt(r))return;const u=t.createDocumentFragment();d.split(`
+`).forEach((m,E)=>{E>0&&u.appendChild(t.createElement("br")),m!==""&&u.appendChild(t.createTextNode(m))}),r.parentNode.replaceChild(u,r)})},ft=200,jt=(t,o)=>{if(t.delete(o),t.add(o),t.size>ft){const n=t.values().next().value;n!=null&&t.delete(n)}},Rt=(t,o,n)=>t!==o&&!n.has(t),w=1,{taskManagement:{taskDetail:{descriptionEditorTooltip:T}},common:{texts:{bold:F,italic:U,underline:G,link:K,bulletList:W,indent:z,outdent:X,undo:V,redo:Q}}}=s.appLocale.getLocalizedStrings();function Y(t,o){o===null?(t.style.opacity="0",t.style.top="-1000px",t.style.left="-1000px"):(t.style.opacity="1",t.style.top=`${o.top+o.height+window.pageYOffset+10}px`,t.style.left=`${o.left+window.pageXOffset-t.offsetWidth/2+o.width/2}px`)}function ot(t){const o=t.anchor,n=t.focus,a=t.anchor.getNode(),r=t.focus.getNode();return a===r?a:t?.isBackward()?P.$isAtNodeEnd(n)?a:r:P.$isAtNodeEnd(o)?r:a}function Nt({editor:t}){const o=mt.useTheme(),n=i.useRef(null),a=i.useRef(null),r=i.useRef(!1),[d,u]=i.useState(""),[m,E]=i.useState(!1),[y,j]=i.useState(null),b=i.useCallback(()=>{const p=l.$getSelection();if(l.$isRangeSelection(p)){const k=ot(p),h=k.getParent();R.$isLinkNode(h)?u(h.getURL()):R.$isLinkNode(k)?u(k.getURL()):u("")}const A=n.current,C=window.getSelection(),O=document.activeElement;if(A===null)return;const S=t.getRootElement();if(p!==null&&C!=null&&!C.isCollapsed&&S!==null&&S.contains(C.anchorNode)){const k=C.getRangeAt(0);let h;if(C.anchorNode===S){let L=S;for(;L.firstElementChild!=null;)L=L.firstElementChild;h=L.getBoundingClientRect()}else h=k.getBoundingClientRect();r.current||Y(A,h),j(p)}else(!O||O.className!=="link-input")&&(Y(A,null),j(null),E(!1),u(""));return!0},[t]);return i.useEffect(()=>H.mergeRegister(t.registerUpdateListener(({editorState:p})=>{p.read(()=>{b()})}),t.registerCommand(l.SELECTION_CHANGE_COMMAND,()=>(b(),!0),w)),[t,b]),i.useEffect(()=>{t.getEditorState().read(()=>{b()})},[t,b]),i.useEffect(()=>{m&&a.current!=null&&a.current?.focus()},[m]),e.jsxRuntimeExports.jsx(At,{ref:n,children:m?e.jsxRuntimeExports.jsx("input",{ref:a,className:"link-input",value:d,onChange:p=>{u(p.target.value)},onKeyDown:p=>{p.key==="Enter"?(p.preventDefault(),y!==null&&(d!==""&&t.dispatchCommand(R.TOGGLE_LINK_COMMAND,d),E(!1))):p.key==="Escape"&&(p.preventDefault(),E(!1))}}):e.jsxRuntimeExports.jsxs(Ot,{className:"link-input",children:[e.jsxRuntimeExports.jsx($t,{href:d,target:"_blank",rel:"noopener noreferrer",children:d}),e.jsxRuntimeExports.jsx(_t,{className:"link-edit",type:"button",tabIndex:0,onMouseDown:p=>p.preventDefault(),onClick:()=>{E(!0)},children:e.jsxRuntimeExports.jsx(s.SvgEdit,{style:{width:s.Space.sp3,height:s.Space.sp3,color:o.colors.primary}})})]})})}function Tt({onChange:t}){const[o]=et.useLexicalComposerContext(),n=i.useRef(null),[a,r]=i.useState(!1),[d,u]=i.useState(!1),[m,E]=i.useState("paragraph"),[,y]=i.useState(!1),[j,b]=i.useState(!1),[p,A]=i.useState(!1),[C,O]=i.useState(!1),[S,k]=i.useState(!1),h=i.useCallback(()=>{const x=l.$getSelection();if(l.$isRangeSelection(x)){const v=x.anchor.getNode(),N=v.getKey()==="root"?v:v.getTopLevelElementOrThrow(),$=N.getKey();if(o.getElementByKey($)!==null)if(M.$isListNode(N)){const _=H.$getNearestNodeOfType(v,M.ListNode),nt=_?_.getTag():N.getTag();E(nt)}else{const _=I.$isHeadingNode(N)?N.getTag():N.getType();E(_)}k(x.hasFormat("bold")),A(x.hasFormat("italic")),O(x.hasFormat("underline")),y(P.$isParentElementRTL(x));const B=ot(x),it=B.getParent();R.$isLinkNode(it)||R.$isLinkNode(B)?b(!0):b(!1)}},[o]);i.useEffect(()=>H.mergeRegister(o.registerUpdateListener(({editorState:x})=>{x.read(()=>{h()})}),o.registerCommand(l.SELECTION_CHANGE_COMMAND,()=>(h(),!1),w),o.registerCommand(l.CAN_UNDO_COMMAND,x=>(r(x),!1),w),o.registerCommand(l.CAN_REDO_COMMAND,x=>(u(x),!1),w)),[o,h]),i.useEffect(()=>o.registerUpdateListener(({dirtyElements:x,dirtyLeaves:v,editorState:N,tags:$})=>{$.has("history-merge")||$.has("initial-content")||x.size===0&&v.size===0||N.read(()=>{const q=tt.$generateHtmlFromNodes(o,null);t(q)})}),[o,t]);const L=i.useCallback(()=>{j?o.dispatchCommand(R.TOGGLE_LINK_COMMAND,null):o.dispatchCommand(R.TOGGLE_LINK_COMMAND,"https://")},[o,j]),st=()=>{m!=="ul"?o.dispatchCommand(M.INSERT_UNORDERED_LIST_COMMAND,void 0):o.dispatchCommand(M.REMOVE_LIST_COMMAND,void 0)};return e.jsxRuntimeExports.jsxs(Mt,{className:"toolbar",ref:n,children:[e.jsxRuntimeExports.jsxs(J,{children:[e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:F,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.FORMAT_TEXT_COMMAND,"bold"),className:"toolbar-item spaced "+(S?"active":""),"data-testid":"task-description-editor-toolbar-bold","aria-label":F,children:e.jsxRuntimeExports.jsx(c.SvgBold,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:U,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.FORMAT_TEXT_COMMAND,"italic"),className:"toolbar-item spaced "+(p?"active":""),"data-testid":"task-description-editor-toolbar-italic","aria-label":U,children:e.jsxRuntimeExports.jsx(c.SvgItalic,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:G,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.FORMAT_TEXT_COMMAND,"underline"),className:"toolbar-item spaced "+(C?"active":""),"data-testid":"task-description-editor-toolbar-underline","aria-label":G,children:e.jsxRuntimeExports.jsx(c.SvgUnderline,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:K,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:L,className:"toolbar-item spaced "+(j?"active":""),"data-testid":"task-description-editor-toolbar-link","aria-label":K,children:e.jsxRuntimeExports.jsx(c.SvgLink,{className:"format"})})}),j&&xt.createPortal(e.jsxRuntimeExports.jsx(Nt,{editor:o}),document.body),e.jsxRuntimeExports.jsx(Z,{}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:W,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:st,className:"toolbar-item spaced "+(m==="ul"?"active":""),"data-testid":"task-description-editor-toolbar-bulletList","aria-label":W,children:e.jsxRuntimeExports.jsx(c.SvgList,{className:"format"})})}),e.jsxRuntimeExports.jsx(Z,{}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:T.leftAlign,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.FORMAT_ELEMENT_COMMAND,"left"),className:"toolbar-item spaced","data-testid":"task-description-editor-toolbar-leftAlign","aria-label":T.leftAlign,children:e.jsxRuntimeExports.jsx(c.SvgLeft,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:T.centerAlign,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.FORMAT_ELEMENT_COMMAND,"center"),className:"toolbar-item spaced","data-testid":"task-description-editor-toolbar-centerAlign","aria-label":T.centerAlign,children:e.jsxRuntimeExports.jsx(c.SvgCentre,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:T.rightAlign,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.FORMAT_ELEMENT_COMMAND,"right"),className:"toolbar-item spaced","data-testid":"task-description-editor-toolbar-rightAlign","aria-label":T.rightAlign,children:e.jsxRuntimeExports.jsx(c.SvgRight,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:T.justifyAlign,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.FORMAT_ELEMENT_COMMAND,"justify"),className:"toolbar-item","data-testid":"task-description-editor-toolbar-justifyAlign","aria-label":T.justifyAlign,children:e.jsxRuntimeExports.jsx(c.SvgJustify,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:z,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.INDENT_CONTENT_COMMAND,void 0),className:"toolbar-item","data-testid":"task-description-editor-toolbar-indent","aria-label":z,children:e.jsxRuntimeExports.jsx(c.SvgIndent,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:X,children:e.jsxRuntimeExports.jsx(g,{type:"button",onClick:()=>o.dispatchCommand(l.OUTDENT_CONTENT_COMMAND,void 0),className:"toolbar-item","data-testid":"task-description-editor-toolbar-outdent","aria-label":X,children:e.jsxRuntimeExports.jsx(c.SvgOutdent,{className:"format"})})})]}),e.jsxRuntimeExports.jsxs(J,{children:[e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:V,children:e.jsxRuntimeExports.jsx(g,{type:"button",disabled:!a,onClick:()=>o.dispatchCommand(l.UNDO_COMMAND,void 0),className:"toolbar-item spaced","data-testid":"task-description-editor-toolbar-undo","aria-label":V,children:e.jsxRuntimeExports.jsx(s.SvgUndo,{className:"format"})})}),e.jsxRuntimeExports.jsx(s.Tooltip,{placement:"bottom",title:Q,children:e.jsxRuntimeExports.jsx(g,{type:"button",disabled:!d,onClick:()=>o.dispatchCommand(l.REDO_COMMAND,void 0),className:"toolbar-item","data-testid":"task-description-editor-toolbar-redo","aria-label":Q,children:e.jsxRuntimeExports.jsx(c.SvgRedo,{className:"format"})})})]})]})}function Ct({emittedHtml:t,initialValue:o}){const[n]=et.useLexicalComposerContext(),a=i.useRef(void 0);return i.useEffect(()=>{const r=o??"";if(!Rt(r,a.current,t)){a.current=r;return}const d=a.current==null;if(a.current=r,r.trim()===""){d||n.update(()=>{const u=l.$getRoot();u.clear(),u.append(l.$createParagraphNode())},{tag:"initial-content"});return}n.update(()=>{const u=new DOMParser,m=r.trim(),E=m.startsWith("<p")||m.startsWith("<div")||m.startsWith("<ul")||m.startsWith("<ol")||m.startsWith("<h")?r:`<p>${gt(r)}</p>`,y=u.parseFromString(E,"text/html");ht(y);const j=tt.$generateNodesFromDOM(n,y),b=l.$getRoot();b.clear(),b.append(...j)},{tag:"initial-content"})},[n,o,t]),null}const kt={namespace:"TaskDescriptionEditor",onError(t){throw t},nodes:[I.HeadingNode,M.ListNode,M.ListItemNode,I.QuoteNode,R.AutoLinkNode,R.LinkNode],theme:c.theme};function yt({initialValue:t,placeholder:o,onChange:n}){const a=i.useRef(new Set).current,r=i.useCallback(d=>{jt(a,d),n(d)},[a,n]);return e.jsxRuntimeExports.jsxs(rt.LexicalComposer,{initialConfig:kt,children:[e.jsxRuntimeExports.jsx(c.EditorGlobalStyles,{}),e.jsxRuntimeExports.jsxs(St,{children:[e.jsxRuntimeExports.jsx(Tt,{onChange:r}),e.jsxRuntimeExports.jsxs(Lt,{children:[e.jsxRuntimeExports.jsx(ut.RichTextPlugin,{contentEditable:e.jsxRuntimeExports.jsx(at.ContentEditable,{className:"task-editor-input"}),placeholder:o!=null&&o!==""?e.jsxRuntimeExports.jsx(vt,{children:o}):null,ErrorBoundary:lt}),e.jsxRuntimeExports.jsx(Ct,{emittedHtml:a,initialValue:t}),e.jsxRuntimeExports.jsx(c.CustomPastePlugin,{}),e.jsxRuntimeExports.jsx(c.CustomTabPlugin,{}),e.jsxRuntimeExports.jsx(ct.HistoryPlugin,{}),e.jsxRuntimeExports.jsx(pt.ListPlugin,{}),e.jsxRuntimeExports.jsx(dt.LinkPlugin,{}),e.jsxRuntimeExports.jsx(c.PlaygroundAutoLinkPlugin,{}),e.jsxRuntimeExports.jsx(c.ListMaxIndentLevelPlugin,{maxDepth:7})]})]})]})}const St=f(s.StandardRegular)`
+  position: relative;
+  margin: ${s.Space.sp0};
+  border-radius: ${s.Space.sp2};
+  color: ${t=>t.theme.colors.primary};
+  text-align: left;
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  overflow: hidden;
+  margin-bottom: ${s.Space.sp3};
+
+  &:hover {
+    border: 1px solid ${t=>t.theme.colors.primary};
+
+    .toolbar {
+      border-bottom: 1px solid ${t=>t.theme.colors.primary};
+    }
+  }
+
+  &:focus-within {
+    border: 1px solid ${t=>t.theme.colors.primary};
+
+    .toolbar {
+      border-bottom: 1px solid ${t=>t.theme.colors.primary};
+    }
+  }
+
+  .task-editor-input {
+    min-height: 80px;
+    max-height: 240px;
+    overflow: auto;
+    resize: none;
+    ${s.textStyles.largeRegular.css};
+    color: ${t=>t.theme.colors.primary};
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    padding: ${s.Space.sp3} 12px;
+
+    .editor__link {
+      color: ${t=>t.theme.colors.link};
+      text-decoration: none;
+    }
+    .editor__link:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .task-editor-input p {
+    margin: 0;
+  }
+
+  .toolbar {
+    display: flex;
+    margin-bottom: 1px;
+    background: ${t=>t.theme.colors.grey5};
+    padding: ${s.Space.sp1};
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    vertical-align: middle;
+    border-bottom: 1px solid ${t=>t.theme.colors.grey3};
+    justify-content: space-between;
+  }
+
+  .toolbar button.toolbar-item {
+    border: 0;
+    display: flex;
+    background: none;
+    border-radius: ${s.Space.sp2};
+    padding: ${s.Space.sp1};
+    cursor: pointer;
+    vertical-align: middle;
+  }
+
+  .toolbar button.toolbar-item:disabled {
+    cursor: not-allowed;
+  }
+
+  .toolbar button.toolbar-item.spaced {
+    margin-right: 2px;
+  }
+
+  .toolbar button.toolbar-item svg.format {
+    background-size: contain;
+    display: inline-block;
+    height: ${s.Space.sp3};
+    width: ${s.Space.sp3};
+    vertical-align: -0.25em;
+    display: flex;
+    color: ${t=>t.theme.colors.grey1};
+  }
+
+  .toolbar button.toolbar-item:disabled svg.format {
+    opacity: 0.2;
+  }
+
+  .toolbar button.toolbar-item.active {
+    svg.format {
+      color: ${t=>t.theme.colors.primary};
+    }
+  }
+
+  .toolbar .toolbar-item:hover:not([disabled]) {
+    svg.format {
+      color: ${t=>t.theme.colors.primary};
+    }
+  }
+
+  .toolbar .divider {
+    width: 1px;
+    background-color: ${t=>t.theme.colors.background};
+    margin: ${s.Space.sp0} ${s.Space.sp1};
+  }
+`,Lt=f.div`
+  background-color: transparent;
+  position: relative;
+`,vt=f(s.LargeRegular)`
+  color: ${t=>t.theme.colors.grey2};
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: ${s.Space.sp3};
+  left: 12px;
+  user-select: none;
+  display: inline-block;
+  pointer-events: none;
+`,Mt=f.div``,J=f.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.Space.sp1};
+`,g=f.button``,Z=()=>e.jsxRuntimeExports.jsx("div",{className:"divider"}),At=f.div`
+  position: absolute;
+  z-index: 10000;
+  top: -10000px;
+  left: -10000px;
+  margin-top: -6px;
+  max-width: 300px;
+  width: 100%;
+  opacity: 0;
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  background-color: ${t=>t.theme.colors.grey5};
+  box-shadow: ${s.Space.sp0} 5px 10px ${s.Colors.overlayLight};
+  border-radius: ${s.Space.sp2};
+  transition: opacity 0.5s;
+
+  .link-input {
+    display: block;
+    box-sizing: border-box;
+    padding: ${s.Space.sp3};
+    border-radius: ${s.Space.sp3};
+    background-color: ${t=>t.theme.colors.grey5};
+    ${s.textStyles.standardRegular.css};
+    color: ${t=>t.theme.colors.primary};
+    border: 0;
+    outline: 0;
+    position: relative;
+  }
+
+  button.link-edit {
+    display: flex;
+    align-items: center;
+    width: 35px;
+    position: absolute;
+    right: ${s.Space.sp0};
+    top: ${s.Space.sp0};
+    bottom: ${s.Space.sp0};
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    &:focus {
+      outline: none;
+    }
+  }
+`,Ot=f.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`,$t=f.a`
+  color: ${t=>t.theme.colors.link};
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 30px;
+  ${s.textStyles.standardRegular.css};
+
+  &:hover {
+    text-decoration: underline;
+  }
+`,_t=f.button``;exports.default=yt;