reactjs-tiptap-editor/lib/Excalidraw.cjs

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

"use strict";var z=Object.create;var C=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var $=(e,s,i,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of V(s))!B.call(e,o)&&o!==i&&C(e,o,{get:()=>s[o],enumerable:!(d=P(s,o))||d.enumerable});return e};var M=(e,s,i)=>(i=e!=null?z(q(e)):{},$(s||!e||!e.__esModule?C(i,"default",{value:e,enumerable:!0}):i,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./clsx-CXbNJWDD.cjs"),t=require("react/jsx-runtime"),r=require("react"),a=require("./index-BnVcq33n.cjs"),U=require("re-resizable"),y=require("./dom-dataset-BqoJhJXt.cjs");function F(){const e=a.useEditorInstance(),s=a.useButtonProps(_.name),i=a.useExtension(_.name),{tooltipOptions:d={},isActive:o=void 0}=(s==null?void 0:s.componentProps)??{},{editorDisabled:x}=a.useToggleActive(o),p=r.useMemo(()=>(i==null?void 0:i.options)||{},[i]),[c,S]=r.useState(null),[m,I]=r.useState({}),[E,D]=r.useState({elements:[],appState:{isLoading:!1},files:null}),[u,g]=r.useState(!1),[T,j]=r.useState(!0),[f,L]=r.useState(null),n=r.useCallback(l=>{l&&import("@excalidraw/excalidraw").then(N=>{S(N.Excalidraw)}).catch(L).finally(()=>j(!1))},[j]),h=r.useCallback(l=>{setTimeout(()=>{l.refresh()})},[]),w=r.useCallback((l,N,Z)=>{I({elements:l,appState:{isLoading:!1},files:Z})},[]),v=r.useCallback(()=>{if(!c){g(!1);return}e.chain().focus().setExcalidraw({data:m}).run(),g(!1)},[c,e,m,g]),H=l=>{g(!0),l!=null&&l.data&&D(l==null?void 0:l.data)},k=a.EVENTS.EXCALIDRAW(e.id);return a.useListener(H,[k]),r.useEffect(()=>{!T&&c&&u&&setTimeout(()=>{window.dispatchEvent(new Event("resize"))},400)},[T,c,u]),t.jsxs(a.Dialog,{onOpenChange:g,open:u,children:[t.jsx(a.DialogTrigger,{asChild:!0,children:t.jsx(a.ActionButton,{disabled:x,icon:"Excalidraw",tooltip:"Excalidraw",tooltipOptions:d,action:()=>{x||g(!0)}})}),t.jsxs(a.DialogContent,{className:"richtext-z-[99999] !richtext-max-w-[1300px]",children:[t.jsx(a.DialogTitle,{children:"Excalidraw"}),t.jsxs("div",{style:{height:"100%",borderWidth:1},children:[T&&t.jsx("p",{children:"Loading..."}),f&&t.jsx("p",{children:f&&f.message||"Error"}),t.jsx("div",{ref:n,style:{width:"100%",height:600},children:!T&&!f&&c?t.jsx(c,{initialData:E,langCode:"en",onChange:w,ref:h,...p.excalidrawProps}):null})]}),t.jsx(a.DialogFooter,{children:t.jsx(a.Button,{disabled:!c,onClick:v,type:"button",children:"Save changes"})})]})]})}const X="_wrap_dra8y_1",Y="_renderWrap_dra8y_7",G="_handlerWrap_dra8y_30",J="_disabled_dra8y_40",A={wrap:X,renderWrap:Y,handlerWrap:G,disabled:J},K=10,Q=200,R=15,O={width:"100%",height:"100%",maxWidth:"100%"};function ee({editor:e,node:s,updateAttributes:i}){const d=r.useRef(null),o=a.useEditableEditor(),x=e.isActive(_.name),{data:p,width:c,height:S}=s.attrs,[m,I]=r.useState(null),[E,D]=r.useState(!0),[u,g]=r.useState(null),[T,j]=r.useState(100),f=r.useCallback(n=>()=>{j(h=>a.clamp(n==="minus"?h-R:h+R,K,Q))},[]);r.useEffect(()=>{let n=!1;return import("@excalidraw/excalidraw").then(h=>{n||(d.current=h.exportToSvg)}).catch(h=>!n&&g(h)).finally(()=>!n&&D(!1)),()=>{n=!0}},[p]),r.useEffect(()=>{let n=!1;return(async()=>{if(!d.current||n||E||u||!p)return;const w=await d.current(p);n||(w.setAttribute("width","100%"),w.setAttribute("height","100%"),w.setAttribute("display","block"),I(w))})(),()=>{n=!0}},[p,E,u]);const L=n=>{i({width:n.width,height:n.height})};return t.jsx(b.NodeViewWrapper,{className:b.clsx(A.wrap,{[A.active]:x,[A.disabled]:!o}),children:t.jsx(U.Resizable,{size:{width:Number.parseInt(c),height:Number.parseInt(S)},onResizeStop:(n,h,w,v)=>{L({width:Number.parseInt(c)+v.width,height:Number.parseInt(S)+v.height})},children:t.jsxs("div",{className:b.clsx(A.renderWrap,"render-wrapper"),style:{...O,overflow:"hidden"},children:[u&&t.jsx("div",{style:O,children:t.jsx("p",{children:u.message||u})}),E&&t.jsx("p",{children:"Loading..."}),!E&&!u&&m&&t.jsx("div",{dangerouslySetInnerHTML:{__html:(m==null?void 0:m.outerHTML)??""},style:{height:"100%",maxHeight:"100%",padding:24,overflow:"hidden",display:"flex",justifyContent:"center",alignItems:"center",transform:`scale(${T/100})`,transition:"all ease-in-out .3s"}}),t.jsxs("div",{className:A.handlerWrap,children:[t.jsx(a.ActionButton,{action:f("minus"),disabled:!o,icon:"ZoomOut",tooltip:"Zoom Out"}),t.jsx(a.ActionButton,{action:f("plus"),disabled:!o,icon:"ZoomIn",tooltip:"Zoom In"})]})]})})})}const W={elements:[]},_=b.Node3.create({name:"excalidraw",group:"block",selectable:!0,atom:!0,draggable:!0,inline:!1,addAttributes(){return{defaultShowPicker:{default:!1},createUser:{default:null},width:{default:"100%",parseHTML:y.getDatasetAttribute("width")},height:{default:240,parseHTML:y.getDatasetAttribute("height")},data:{default:W,parseHTML:y.getDatasetAttribute("data",!0)}}},addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),HTMLAttributes:{class:"excalidraw"},excalidrawProps:{},button:()=>({componentProps:{}})}},parseHTML(){return[{tag:"div[class=excalidraw]"}]},renderHTML({HTMLAttributes:e,node:s}){return["div",b.mergeAttributes(this.options.HTMLAttributes,e,y.nodeAttrsToDataset(s))]},addCommands(){return{setExcalidraw:e=>({tr:s,commands:i,chain:d})=>{var o,x,p;return e=e||{},e.data=e.data||W,((p=(x=(o=s.selection)==null?void 0:o.node)==null?void 0:x.type)==null?void 0:p.name)==this.name?i.updateAttributes(this.name,e):d().insertContent({type:this.name,attrs:e}).run()}}},addNodeView(){return b.ReactNodeViewRenderer(ee)},addInputRules(){return[b.nodeInputRule({find:/^\$excalidraw\$$/,type:this.type,getAttributes:()=>({width:"100%"})})]}});exports.Excalidraw=_;exports.RichTextExcalidraw=F;