UNPKG

text-editor-studio-ts

Version:

A powerful mobile-responsive rich text editor built with Lexical and React

3 lines (2 loc) 3.23 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),i=require("./index-BLOj1UA2.cjs"),s=require("@lexical/utils"),n=require("lexical"),a=require("@excalidraw/excalidraw"),r=require("./image-resizer-B_I9lFMZ.cjs");function l({elements:i,files:s,imageContainerRef:n,appState:r,rootClassName:l=null,width:o="inherit",height:u="inherit"}){const[c,d]=t.useState(null);t.useEffect(()=>{(async()=>{const e=await a.exportToSvg({appState:r,elements:i,files:s});(e=>{const t=e?.firstElementChild?.firstElementChild,i=e.getAttribute("viewBox");if(null!=i){const t=i.split(" ");e.setAttribute("width",t[2]),e.setAttribute("height",t[3])}t&&"style"===t.tagName&&t.remove()})(e),e.setAttribute("width","100%"),e.setAttribute("height","100%"),e.setAttribute("display","block"),d(e)})()},[i,s,r]);const g={};return"inherit"!==o&&(g.width=`${o}px`),"inherit"!==u&&(g.height=`${u}px`),e.jsx("div",{ref:e=>{e&&n&&(n.current=e)},className:l??"",style:g,dangerouslySetInnerHTML:{__html:c?.outerHTML??""}})}exports.default=function({nodeKey:a,data:o,width:u,height:c}){const[d]=i.o(),g=i.a(),[m,h]=t.useState("[]"===o&&d.isEditable()),p=t.useRef(null),f=t.useRef(null),C=t.useRef(null),[b,x,y]=i.u(a),[N,S]=t.useState(!1),M=t.useCallback(e=>(b&&(e.preventDefault(),d.update(()=>{const e=n.$getNodeByKey(a);e&&e.remove()})),!1),[d,b,a]);t.useEffect(()=>{if(g)return s.mergeRegister(d.registerCommand(n.CLICK_COMMAND,e=>{const t=f.current,i=e.target;return!!N||!(null===t||!t.contains(i))&&(e.shiftKey||y(),x(!b),e.detail>1&&h(!0),!0)},n.COMMAND_PRIORITY_LOW),d.registerCommand(n.KEY_DELETE_COMMAND,M,n.COMMAND_PRIORITY_LOW),d.registerCommand(n.KEY_BACKSPACE_COMMAND,M,n.COMMAND_PRIORITY_LOW));b&&y()},[y,d,b,N,M,x,g]);const O=t.useCallback(()=>(h(!1),d.update(()=>{const e=n.$getNodeByKey(a);e&&e.remove()})),[d,a]),w=t.useCallback(()=>{h(!0)},[]),{elements:E=[],files:R={},appState:A={}}=t.useMemo(()=>JSON.parse(o),[o]),v=t.useCallback(()=>{h(!1),0===E.length&&d.update(()=>{const e=n.$getNodeByKey(a);e&&e.remove()})},[d,a,E.length]);return e.jsxs(e.Fragment,{children:[g&&m&&e.jsx(i.ExcalidrawModal,{initialElements:E,initialFiles:R,initialAppState:A,isShown:m,onDelete:O,onClose:v,onSave:(e,t,s)=>{((e,t,s)=>{d.update(()=>{const r=n.$getNodeByKey(a);i.$isExcalidrawNode(r)&&(e&&e.length>0||Object.keys(s).length>0?r.setData(JSON.stringify({appState:t,elements:e,files:s})):r.remove())})})(e,t,s),h(!1)},closeOnClickOutside:!1}),E.length>0&&e.jsxs("button",{ref:f,className:"m-0 border-0 bg-transparent p-0 "+(b?"user-select-none ring-2 ring-primary ring-offset-2":""),children:[e.jsx(l,{imageContainerRef:p,className:"image",elements:E,files:R,appState:A,width:u,height:c}),b&&g&&e.jsx("div",{className:"image-edit-button",role:"button",tabIndex:0,onMouseDown:e=>e.preventDefault(),onClick:w}),(b||N)&&g&&e.jsx(r.ImageResizer,{buttonRef:C,showCaption:!0,setShowCaption:()=>null,imageRef:p,editor:d,onResizeStart:()=>{S(!0)},onResizeEnd:(e,t)=>{setTimeout(()=>{S(!1)},200),d.update(()=>{const s=n.$getNodeByKey(a);i.$isExcalidrawNode(s)&&(s.setWidth(e),s.setHeight(t))})},captionsEnabled:!0})]})]})}; //# sourceMappingURL=excalidraw-component-C5Za8rqo.cjs.map