@bolttech/template-editor 0.1.5 → 0.1.6

package/dist/template-editor.cjs

@@ -69,7 +69,7 @@ The range will extend backwards to the start of the first line containing the se
 `)return!0;return!1}var jE=ME;function _E(t,e,r={}){return Ms(t,r.backwards?e-1:e,r)!==e}var IE=_E;function BE(t,e,r){let n=e==='"'?"'":'"',s=rd(!1,t,/\\(.)|(["'])/gsu,(o,i,a)=>i===n?i:a===e?"\\"+a:a||(r&&/^[^\n\r"'0-7\\bfnrt-vx\u2028\u2029]$/u.test(i)?i:"\\"+i));return e+s+e}var PE=BE;function LE(t,e,r){return Im(t,r(e))}function RE(t,e){return arguments.length===2||typeof e=="number"?Im(t,e):LE(...arguments)}function zE(t,e,r){return Om(t,r(e))}function $E(t,e){return arguments.length===2||typeof e=="number"?Om(t,e):zE(...arguments)}function HE(t,e,r){return Bm(t,r(e))}function VE(t,e){return arguments.length===2||typeof e=="number"?Bm(t,e):HE(...arguments)}function fo(t,e=1){return async(...r)=>{let n=r[e]??{},s=n.plugins??[];return r[e]={...n,plugins:Array.isArray(s)?s:Object.values(s)},t(...r)}}var Kv=fo(qv);async function lc(t,e){let{formatted:r}=await Kv(t,{...e,cursorOffset:-1});return r}async function UE(t,e){return await lc(t,e)===t}var qE=fo(Tv,0),WE={parse:fo(cE),formatAST:fo(dE),formatDoc:fo(pE),printToDoc:fo(hE),printDocToString:fo(fE)},JE=uv;function KE(t=""){const{actions:e,query:r}=Ce.useEditor(),{getState:n,loadState:s}=bm(),{convertFromHtml:o,convertToHtml:i}=xm(),[a,l]=V.useState(t),[u,c]=V.useState(t),[f,g]=V.useState("idle"),[y,v]=V.useState(""),[w,k]=V.useState(!1),F=V.useCallback(async()=>{if(a.trim()){k(!0);try{const ae=await lc(a,{parser:"html",plugins:[Ug],printWidth:80,tabWidth:2,useTabs:!1,semi:!0,singleQuote:!1,trailingComma:"none",bracketSpacing:!0,htmlWhitespaceSensitivity:"css"});l(ae)}catch(ae){console.error("Error formatting HTML:",ae);const ne=a.replace(/>\s*</g,"><").replace(/\n\s*\n/g,`
 `).split(`
 `).map(de=>de.trim()).filter(de=>de).join(`
-`);l(ne)}finally{k(!1)}}},[a]),$=V.useRef(null),U=V.useRef(!1),W=a!==u;V.useEffect(()=>{if(!U.current&&e&&r)try{const ae=i(n());ae&&ae.trim()&&lc(ae,{parser:"html",plugins:[Ug],printWidth:80,tabWidth:2,useTabs:!1,htmlWhitespaceSensitivity:"css"}).then(ne=>{l(ne),c(ne)}).catch(()=>{l(ae),c(ae)}),U.current=!0}catch(ae){console.warn("Could not initialize code from canvas:",ae)}},[e,r,i,n]);const Y=V.useCallback(async()=>{if(a.trim()){g("processing"),v("");try{const ae=o(a,{replace:!0});ae&&ae.includes("ROOT")&&s(ae),g("success")}catch(ae){console.error("Error applying code to canvas:",ae),g("error"),v(ae instanceof Error?ae.message:"Unknown error occurred")}}},[a]),te=V.useCallback(ae=>{l(ae),$.current&&clearTimeout($.current),$.current=setTimeout(()=>{ae.trim()?Y():g("idle")},1e3)},[Y]),re=V.useCallback(()=>{c(a),g("success");try{localStorage.setItem("editor_saved_code",a)}catch(ae){console.warn("Could not save to localStorage:",ae)}},[a]),fe=V.useCallback(()=>{l(u),g("idle"),v(""),$.current&&clearTimeout($.current)},[u]),se=V.useCallback(()=>{$.current&&clearTimeout($.current),g("idle"),v("")},[]);return V.useEffect(()=>()=>{$.current&&clearTimeout($.current)},[]),{codeValue:a,savedCodeValue:u,conversionStatus:f,hasUnsavedChanges:W,errorMessage:y,isFormattingCode:w,handleCodeChange:te,handleSave:re,handleRevert:fe,handleClose:se,applyCodeToCanvas:Y,formatCode:F}}function GE({containerWidth:t=0,containerHeight:e=0,contentWidth:r=0,contentHeight:n=0}={}){const[s,o]=V.useState(100),[i,a]=V.useState({x:0,y:0}),u=V.useCallback(w=>{if(!t||!r||!e)return 1;const k=.01,F=t*(1-k*2),$=e*(1-k*2),U=F/r,W=$/n,Y=Math.min(U,W);return w==="fit"||w===100?Y:Y*(w/100)},[t,e,r,n])(s);V.useEffect(()=>{(s==="fit"||s===100)&&a({x:0,y:0})},[s]),V.useEffect(()=>{a({x:0,y:0})},[r,n]);const c=V.useCallback(()=>{const F=(s==="fit"?100:s)*1.07,$=Math.min(Math.round(F*10)/10,400);o($)},[s]),f=V.useCallback(()=>{const F=(s==="fit"?100:s)/1.07,$=Math.max(Math.round(F*10)/10,10);o($)},[s]),g=V.useCallback(w=>{o(w)},[]),y=V.useCallback(w=>{const k=Math.max(10,Math.min(400,w));o(k)},[]),v=V.useCallback(()=>{o(100)},[]);return{zoom:s,scale:u,panOffset:i,setPanOffset:a,zoomIn:c,zoomOut:f,setZoomLevel:g,setZoomToLevel:y,resetZoom:v,canZoomIn:typeof s=="number"&&s<400,canZoomOut:typeof s=="number"&&s>10}}const Fs={THROTTLE_MS:50,BASE_FACTOR:1.07,MAC_GESTURE_BOOST:1.7,MAC_GESTURE_THRESHOLD:10,SCROLL_AMOUNT:100,MIN_ZOOM:10,MAX_ZOOM:400},YE=t=>Math.abs(t)<Fs.MAC_GESTURE_THRESHOLD,Gv=t=>t?Math.pow(Fs.BASE_FACTOR,Fs.MAC_GESTURE_BOOST):Fs.BASE_FACTOR,Yv=t=>t==="fit"?100:t,Xv=t=>Math.max(Fs.MIN_ZOOM,Math.min(Fs.MAX_ZOOM,Math.round(t*10)/10)),XE=(t,e)=>{const r=Yv(t),n=Gv(e);return Xv(r*n)},QE=(t,e)=>{const r=Yv(t),n=Gv(e);return Xv(r/n)},ZE=(t,e,r)=>{const n=(e-t.clientWidth)/2,s=(r-t.clientHeight)/2;t.scrollLeft=Math.max(0,n),t.scrollTop=Math.max(0,s)},eS=(t,e)=>{const{SCROLL_AMOUNT:r}=Fs;switch(t){case"ArrowUp":return e.scrollTop-=r,!0;case"ArrowDown":return e.scrollTop+=r,!0;case"ArrowLeft":return e.scrollLeft-=r,!0;case"ArrowRight":return e.scrollLeft+=r,!0;default:return!1}};function tS({scale:t,zoom:e,panOffset:r,onPanOffsetChange:n,onZoomToLevel:s,containerRef:o}){const[i,a]=V.useState(!1),[l,u]=V.useState({x:0,y:0}),c=V.useRef(0),f=V.useCallback(w=>{t>1&&w.button===0&&w.target===o.current&&(a(!0),u({x:w.clientX-r.x,y:w.clientY-r.y}),w.preventDefault())},[t,r,o]),g=V.useCallback(w=>{if(i&&n){const k={x:w.clientX-l.x,y:w.clientY-l.y};n(k)}},[i,l,n]),y=V.useCallback(()=>{a(!1)},[]),v=V.useCallback(w=>{if(!w.ctrlKey&&!w.metaKey)return;w.preventDefault();const k=Date.now();if(k-c.current<Fs.THROTTLE_MS||(c.current=k,!s))return;const F=w.deltaY,$=YE(F);if(F<0){const U=XE(e,$);s(U)}else if(F>0){const U=QE(e,$);s(U)}},[e,s]);return V.useEffect(()=>{const w=o.current;if(!w)return;const k=F=>{if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(F.key)||t===1)return;eS(F.key,w)&&F.preventDefault()};return window.addEventListener("keydown",k),()=>window.removeEventListener("keydown",k)},[t,o]),V.useEffect(()=>{const w=o.current;if(w)return w.addEventListener("wheel",v,{passive:!1}),()=>w.removeEventListener("wheel",v)},[v,o]),{isDragging:i,handleMouseDown:f,handleMouseMove:g,handleMouseUp:y}}const Qv=V.createContext({showPageBreaks:!0,setShowPageBreaks:()=>{},togglePageBreaks:()=>{}}),Pm=()=>V.useContext(Qv);function rS({children:t}){const[e,r]=V.useState(!0),n=V.useMemo(()=>({showPageBreaks:e,setShowPageBreaks:r,togglePageBreaks:()=>r(s=>!s)}),[e]);return p.jsx(Qv.Provider,{value:n,children:t})}const nS={flex:1};function Lm({children:t,style:e}){const{connectors:{connect:r},isHover:n,isSelected:s,actions:{setCustom:o},id:i}=Ce.useNode(k=>({isHover:k.events.hovered,isSelected:k.events.selected,id:k.id})),{pdfConfig:a,totalPages:l,pageNumber:u}=Ce.useEditor(k=>{const $=k.nodes["template-head"]?.data?.props?.pdfConfig||dn,W=k.nodes["template-body"]?.data?.nodes||[],Y=W.length||1,te=W.indexOf(i),re=te>=0?te+1:1;return{pdfConfig:$,totalPages:Y,pageNumber:re}}),c=`Page ${u}/${l}`;V.useEffect(()=>{o(k=>{k.indicatorLabel!==c&&(k.indicatorLabel=c)})},[c,o]);const f=n&&!s,g=s,{showPageBreaks:y}=Pm(),v=vm(a.paperSize,a.orientation),w={width:`${v.width}px`,height:`${v.height}px`,overflow:"hidden",backgroundColor:e?.backgroundColor||"#ffffff",boxShadow:y?"0 2px 8px rgba(0, 0, 0, 0.1)":"none",position:"relative",display:"flex",flexDirection:"column",outline:g?"2px solid #170F4F":f?"2px dashed #00BAC7":y?"1px solid #e5e7eb":"none",outlineOffset:"-1px",transition:"box-shadow 0.3s ease-in-out, outline 0.3s ease-in-out",...e};return p.jsx("div",{ref:k=>{k&&r(k)},style:w,className:"page-container","data-page-number":u,children:p.jsx("div",{style:nS,className:"page-content",children:t})})}Lm.craft={displayName:"Page",isCanvas:!0,props:{style:{backgroundColor:"#ffffff",paddingTop:"76px",paddingRight:"76px",paddingBottom:"76px",paddingLeft:"76px"}},custom:{displayName:"Page",resizable:!1,settings:["spacing","background"],layer:{label:"Page",icon:"FiFile",hide:!1}},rules:{canDrag:()=>!0,canMoveIn:()=>!0,canMoveOut:()=>!0}};function Zv(t,e){const n=e.node("template-body").get()?.data?.nodes||[];if(!n.some((i,a)=>{const l=`page-${a+1}`;return i!==l}))return;const o=n.map((i,a)=>{const l=`page-${a+1}`,u=e.node(i).toNodeTree();return{oldId:i,newId:l,nodeTree:u,index:a}});n.forEach(i=>{t.delete(i)}),o.forEach(({newId:i,nodeTree:a,index:l})=>{if(!a||!a.nodes)return;const u=a.rootNodeId,c=a.nodes[u];if(!c)return;const f={};f[i]={...c,id:i,data:{...c.data,parent:"template-body"}},Object.entries(a.nodes).forEach(([y,v])=>{y!==u&&(f[y]={...v,data:{...v.data,parent:v.data.parent===u?i:v.data.parent}})});const g={...a,rootNodeId:i,nodes:f};t.addNodeTree(g,"template-body",l)})}function sS(){const[t,e]=V.useState(dn),{showPageBreaks:r,togglePageBreaks:n}=Pm(),{actions:s,query:o}=Ce.useEditor(),{totalPages:i,currentPage:a}=Ce.useEditor(f=>{const y=f.nodes["template-body"]?.data?.nodes||[],v=y.length||0,w=f.events?.selected?Array.from(f.events.selected)[0]:null;if(!w)return{totalPages:v,currentPage:1};const k=y.indexOf(w);if(k>=0)return{totalPages:v,currentPage:k+1};let F=w;for(;F;){const U=f.nodes[F]?.data?.parent;if(y.includes(F)){const W=y.indexOf(F);return{totalPages:v,currentPage:W+1}}F=U}return{totalPages:v,currentPage:1}}),l=V.useCallback(()=>{const g=o.node("template-body").get()?.data?.nodes||[];let y=0;g.forEach(F=>{const $=F.match(/^page-(\d+)$/);if($){const U=parseInt($[1],10);U>y&&(y=U)}});const v=`page-${y+1}`,w={data:{type:Lm,props:{style:{backgroundColor:"#ffffff",paddingTop:"76px",paddingRight:"76px",paddingBottom:"76px",paddingLeft:"76px"}},custom:{settings:["spacing","background"]},isCanvas:!0}},k=o.parseFreshNode(w).toNode();k.id=v,s.add(k,"template-body")},[s,o]),u=V.useCallback(f=>{e(g=>({...g,paperSize:f})),s.setProp("template-head",g=>{g.pdfConfig||(g.pdfConfig={...dn}),g.pdfConfig.paperSize=f})},[s]),c=V.useCallback(f=>{const v=(o.node("template-body").get()?.data?.nodes||[])[f-1];v&&s.selectNode(v)},[s,o]);return{pdfConfig:t,setPaperSize:u,totalPages:i,currentPage:a,addPage:l,selectPage:c,showPageBreaks:r,togglePageBreaks:n}}function ex({setPublicUrl:t,onlyImages:e}){const r=V.useRef(null),[n,s]=V.useState(null),[o,i]=V.useState(null),[a,l]=V.useState(!1),{token:u}=oD(),{baseUrl:c,storageKey:f}=aD(),{template:g}=Xr(),y=async(U,W)=>{const Y=await u(),re=await new wb.StorageGatewayClient(c,{...Y?{authorization:`Bearer ${Y}`}:{}}).uploadFile({storageKey:f??"default",file:U,path:`templates/${g.id}/${W}`});return t(re.data),re};V.useEffect(()=>{n&&o&&y(n,o.name)},[n,o]);const v=U=>{if(e&&!U.type.startsWith("image/")){alert("Only image files are allowed.");return}s(U),i({name:U.name,size:U.size})},w=U=>{const W=U.target.files?.[0];W&&v(W)},k=V.useCallback(U=>{U.preventDefault(),l(!1);const W=U.dataTransfer.files?.[0];W&&v(W)},[]),F=U=>{U.preventDefault(),l(!0)},$=()=>l(!1);return p.jsxs("div",{className:"mx-auto flex w-full max-w-md flex-col gap-2 bg-white",children:[p.jsx("input",{type:"file",ref:r,onChange:w,className:"hidden"}),p.jsx("div",{onDrop:k,onDragOver:F,onDragLeave:$,className:`flex h-[100px] w-full cursor-pointer flex-col items-center justify-center border-2 p-6 transition ${a?"border-blue-600 bg-blue-50":"border-gray-300 bg-gray-50"}`,onClick:()=>r.current?.click(),children:p.jsx("p",{className:"text-center text-gray-700",children:a?"Drop file here...":n&&o?"File uploaded, now you can see the URL below or upload another file":"Drag & drop a file, or click to select"})})]})}function Rm(){const{actions:{setProp:t},src:e,alt:r,style:n}=Ce.useNode(o=>({src:o.data.props.src,alt:o.data.props.alt,style:o.data.props.style})),s=o=>{t(i=>i.src=o)};return p.jsxs("div",{className:"space-y-4 p-4",children:[p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Upload image on Storage service"}),p.jsx(ex,{setPublicUrl:s,onlyImages:!0})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Image URL"}),p.jsx("input",{type:"text",value:e,onChange:o=>t(i=>i.src=o.target.value),placeholder:"https://example.com/image.jpg",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Alt Text"}),p.jsx("input",{type:"text",value:r,onChange:o=>t(i=>i.alt=o.target.value),placeholder:"Image description",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]}),p.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Width"}),p.jsx("input",{type:"text",value:n.width,onChange:o=>t(i=>{i.style={...i.style,width:o.target.value}}),placeholder:"100%",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Height"}),p.jsx("input",{type:"text",value:n.height,onChange:o=>t(i=>{i.style={...i.style,height:o.target.value}}),placeholder:"auto",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Object Fit"}),p.jsx(Pr,{options:[{value:"cover",label:"Cover"},{value:"contain",label:"Contain"},{value:"fill",label:"Fill"},{value:"none",label:"None"},{value:"scale-down",label:"Scale Down"}],value:n.objectFit,onChange:o=>t(i=>{i.style={...i.style,objectFit:o}}),placeholder:"Choose object fit"})]})]})}xb.craft={...X2,related:{settings:Rm}};var oS=Object.defineProperty,uc=Object.getOwnPropertySymbols,tx=Object.prototype.hasOwnProperty,rx=Object.prototype.propertyIsEnumerable,w0=(t,e,r)=>e in t?oS(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Af=(t,e)=>{for(var r in e||(e={}))tx.call(e,r)&&w0(t,r,e[r]);if(uc)for(var r of uc(e))rx.call(e,r)&&w0(t,r,e[r]);return t},Of=(t,e)=>{var r={};for(var n in t)tx.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(t!=null&&uc)for(var n of uc(t))e.indexOf(n)<0&&rx.call(t,n)&&(r[n]=t[n]);return r};/**
+`);l(ne)}finally{k(!1)}}},[a]),$=V.useRef(null),U=V.useRef(!1),W=a!==u;V.useEffect(()=>{if(!U.current&&e&&r)try{const ae=i(n());ae&&ae.trim()&&lc(ae,{parser:"html",plugins:[Ug],printWidth:80,tabWidth:2,useTabs:!1,htmlWhitespaceSensitivity:"css"}).then(ne=>{l(ne),c(ne)}).catch(()=>{l(ae),c(ae)}),U.current=!0}catch(ae){console.warn("Could not initialize code from canvas:",ae)}},[e,r,i,n]);const Y=V.useCallback(async()=>{if(a.trim()){g("processing"),v("");try{const ae=o(a,{replace:!0});ae&&ae.includes("ROOT")&&s(ae),g("success")}catch(ae){console.error("Error applying code to canvas:",ae),g("error"),v(ae instanceof Error?ae.message:"Unknown error occurred")}}},[a]),te=V.useCallback(ae=>{l(ae),$.current&&clearTimeout($.current),$.current=setTimeout(()=>{ae.trim()?Y():g("idle")},1e3)},[Y]),re=V.useCallback(()=>{c(a),g("success");try{localStorage.setItem("editor_saved_code",a)}catch(ae){console.warn("Could not save to localStorage:",ae)}},[a]),fe=V.useCallback(()=>{l(u),g("idle"),v(""),$.current&&clearTimeout($.current)},[u]),se=V.useCallback(()=>{$.current&&clearTimeout($.current),g("idle"),v("")},[]);return V.useEffect(()=>()=>{$.current&&clearTimeout($.current)},[]),{codeValue:a,savedCodeValue:u,conversionStatus:f,hasUnsavedChanges:W,errorMessage:y,isFormattingCode:w,handleCodeChange:te,handleSave:re,handleRevert:fe,handleClose:se,applyCodeToCanvas:Y,formatCode:F}}function GE({containerWidth:t=0,containerHeight:e=0,contentWidth:r=0,contentHeight:n=0}={}){const[s,o]=V.useState(100),[i,a]=V.useState({x:0,y:0}),u=V.useCallback(w=>{if(!t||!r||!e)return 1;const k=.01,F=t*(1-k*2),$=e*(1-k*2),U=F/r,W=$/n,Y=Math.min(U,W);return w==="fit"||w===100?Y:Y*(w/100)},[t,e,r,n])(s);V.useEffect(()=>{(s==="fit"||s===100)&&a({x:0,y:0})},[s]),V.useEffect(()=>{a({x:0,y:0})},[r,n]);const c=V.useCallback(()=>{const F=(s==="fit"?100:s)*1.07,$=Math.min(Math.round(F*10)/10,400);o($)},[s]),f=V.useCallback(()=>{const F=(s==="fit"?100:s)/1.07,$=Math.max(Math.round(F*10)/10,10);o($)},[s]),g=V.useCallback(w=>{o(w)},[]),y=V.useCallback(w=>{const k=Math.max(10,Math.min(400,w));o(k)},[]),v=V.useCallback(()=>{o(100)},[]);return{zoom:s,scale:u,panOffset:i,setPanOffset:a,zoomIn:c,zoomOut:f,setZoomLevel:g,setZoomToLevel:y,resetZoom:v,canZoomIn:typeof s=="number"&&s<400,canZoomOut:typeof s=="number"&&s>10}}const Fs={THROTTLE_MS:50,BASE_FACTOR:1.07,MAC_GESTURE_BOOST:1.7,MAC_GESTURE_THRESHOLD:10,SCROLL_AMOUNT:100,MIN_ZOOM:10,MAX_ZOOM:400},YE=t=>Math.abs(t)<Fs.MAC_GESTURE_THRESHOLD,Gv=t=>t?Math.pow(Fs.BASE_FACTOR,Fs.MAC_GESTURE_BOOST):Fs.BASE_FACTOR,Yv=t=>t==="fit"?100:t,Xv=t=>Math.max(Fs.MIN_ZOOM,Math.min(Fs.MAX_ZOOM,Math.round(t*10)/10)),XE=(t,e)=>{const r=Yv(t),n=Gv(e);return Xv(r*n)},QE=(t,e)=>{const r=Yv(t),n=Gv(e);return Xv(r/n)},ZE=(t,e,r)=>{const n=(e-t.clientWidth)/2,s=(r-t.clientHeight)/2;t.scrollLeft=Math.max(0,n),t.scrollTop=Math.max(0,s)},eS=(t,e)=>{const{SCROLL_AMOUNT:r}=Fs;switch(t){case"ArrowUp":return e.scrollTop-=r,!0;case"ArrowDown":return e.scrollTop+=r,!0;case"ArrowLeft":return e.scrollLeft-=r,!0;case"ArrowRight":return e.scrollLeft+=r,!0;default:return!1}};function tS({scale:t,zoom:e,panOffset:r,onPanOffsetChange:n,onZoomToLevel:s,containerRef:o}){const[i,a]=V.useState(!1),[l,u]=V.useState({x:0,y:0}),c=V.useRef(0),f=V.useCallback(w=>{t>1&&w.button===0&&w.target===o.current&&(a(!0),u({x:w.clientX-r.x,y:w.clientY-r.y}),w.preventDefault())},[t,r,o]),g=V.useCallback(w=>{if(i&&n){const k={x:w.clientX-l.x,y:w.clientY-l.y};n(k)}},[i,l,n]),y=V.useCallback(()=>{a(!1)},[]),v=V.useCallback(w=>{if(!w.ctrlKey&&!w.metaKey)return;w.preventDefault();const k=Date.now();if(k-c.current<Fs.THROTTLE_MS||(c.current=k,!s))return;const F=w.deltaY,$=YE(F);if(F<0){const U=XE(e,$);s(U)}else if(F>0){const U=QE(e,$);s(U)}},[e,s]);return V.useEffect(()=>{const w=o.current;if(!w)return;const k=F=>{if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(F.key)||t===1)return;eS(F.key,w)&&F.preventDefault()};return window.addEventListener("keydown",k),()=>window.removeEventListener("keydown",k)},[t,o]),V.useEffect(()=>{const w=o.current;if(w)return w.addEventListener("wheel",v,{passive:!1}),()=>w.removeEventListener("wheel",v)},[v,o]),{isDragging:i,handleMouseDown:f,handleMouseMove:g,handleMouseUp:y}}const Qv=V.createContext({showPageBreaks:!0,setShowPageBreaks:()=>{},togglePageBreaks:()=>{}}),Pm=()=>V.useContext(Qv);function rS({children:t}){const[e,r]=V.useState(!0),n=V.useMemo(()=>({showPageBreaks:e,setShowPageBreaks:r,togglePageBreaks:()=>r(s=>!s)}),[e]);return p.jsx(Qv.Provider,{value:n,children:t})}const nS={flex:1};function Lm({children:t,style:e}){const{connectors:{connect:r},isHover:n,isSelected:s,actions:{setCustom:o},id:i}=Ce.useNode(k=>({isHover:k.events.hovered,isSelected:k.events.selected,id:k.id})),{pdfConfig:a,totalPages:l,pageNumber:u}=Ce.useEditor(k=>{const $=k.nodes["template-head"]?.data?.props?.pdfConfig||dn,W=k.nodes["template-body"]?.data?.nodes||[],Y=W.length||1,te=W.indexOf(i),re=te>=0?te+1:1;return{pdfConfig:$,totalPages:Y,pageNumber:re}}),c=`Page ${u}/${l}`;V.useEffect(()=>{o(k=>{k.indicatorLabel!==c&&(k.indicatorLabel=c)})},[c,o]);const f=n&&!s,g=s,{showPageBreaks:y}=Pm(),v=vm(a.paperSize,a.orientation),w={width:`${v.width}px`,height:`${v.height}px`,overflow:"hidden",backgroundColor:e?.backgroundColor||"#ffffff",boxShadow:y?"0 2px 8px rgba(0, 0, 0, 0.1)":"none",position:"relative",display:"flex",flexDirection:"column",outline:g?"2px solid #170F4F":f?"2px dashed #00BAC7":y?"1px solid #e5e7eb":"none",outlineOffset:"-1px",transition:"box-shadow 0.3s ease-in-out, outline 0.3s ease-in-out",...e};return p.jsx("div",{ref:k=>{k&&r(k)},style:w,className:"page-container","data-page-number":u,children:p.jsx("div",{style:nS,className:"page-content",children:t})})}Lm.craft={displayName:"Page",isCanvas:!0,props:{style:{backgroundColor:"#ffffff",paddingTop:"76px",paddingRight:"76px",paddingBottom:"76px",paddingLeft:"76px"}},custom:{displayName:"Page",resizable:!1,settings:["spacing","background"],layer:{label:"Page",icon:"FiFile",hide:!1}},rules:{canDrag:()=>!0,canMoveIn:()=>!0,canMoveOut:()=>!0}};function Zv(t,e){const n=e.node("template-body").get()?.data?.nodes||[];if(!n.some((i,a)=>{const l=`page-${a+1}`;return i!==l}))return;const o=n.map((i,a)=>{const l=`page-${a+1}`,u=e.node(i).toNodeTree();return{oldId:i,newId:l,nodeTree:u,index:a}});n.forEach(i=>{t.delete(i)}),o.forEach(({newId:i,nodeTree:a,index:l})=>{if(!a||!a.nodes)return;const u=a.rootNodeId,c=a.nodes[u];if(!c)return;const f={};f[i]={...c,id:i,data:{...c.data,parent:"template-body"}},Object.entries(a.nodes).forEach(([y,v])=>{y!==u&&(f[y]={...v,data:{...v.data,parent:v.data.parent===u?i:v.data.parent}})});const g={...a,rootNodeId:i,nodes:f};t.addNodeTree(g,"template-body",l)})}function sS(){const[t,e]=V.useState(dn),{showPageBreaks:r,togglePageBreaks:n}=Pm(),{actions:s,query:o}=Ce.useEditor(),{totalPages:i,currentPage:a}=Ce.useEditor(f=>{const y=f.nodes["template-body"]?.data?.nodes||[],v=y.length||0,w=f.events?.selected?Array.from(f.events.selected)[0]:null;if(!w)return{totalPages:v,currentPage:1};const k=y.indexOf(w);if(k>=0)return{totalPages:v,currentPage:k+1};let F=w;for(;F;){const U=f.nodes[F]?.data?.parent;if(y.includes(F)){const W=y.indexOf(F);return{totalPages:v,currentPage:W+1}}F=U}return{totalPages:v,currentPage:1}}),l=V.useCallback(()=>{const g=o.node("template-body").get()?.data?.nodes||[];let y=0;g.forEach(F=>{const $=F.match(/^page-(\d+)$/);if($){const U=parseInt($[1],10);U>y&&(y=U)}});const v=`page-${y+1}`,w={data:{type:Lm,props:{style:{backgroundColor:"#ffffff",paddingTop:"76px",paddingRight:"76px",paddingBottom:"76px",paddingLeft:"76px"}},custom:{settings:["spacing","background"]},isCanvas:!0}},k=o.parseFreshNode(w).toNode();k.id=v,s.add(k,"template-body")},[s,o]),u=V.useCallback(f=>{e(g=>({...g,paperSize:f})),s.setProp("template-head",g=>{g.pdfConfig||(g.pdfConfig={...dn}),g.pdfConfig.paperSize=f})},[s]),c=V.useCallback(f=>{const v=(o.node("template-body").get()?.data?.nodes||[])[f-1];v&&s.selectNode(v)},[s,o]);return{pdfConfig:t,setPaperSize:u,totalPages:i,currentPage:a,addPage:l,selectPage:c,showPageBreaks:r,togglePageBreaks:n}}function ex({setPublicUrl:t,onlyImages:e}){const r=V.useRef(null),[n,s]=V.useState(null),[o,i]=V.useState(null),[a,l]=V.useState(!1),{token:u}=oD(),{baseUrl:c,storageKey:f}=aD(),{template:g}=Xr(),y=async(U,W)=>{const Y=await u(),re=await new wb.StorageGatewayClient(`${c}/v1/storage`,{...Y?{authorization:`Bearer ${Y}`}:{}}).uploadFile({storageKey:f??"default",file:U,path:`templates/${g.id}/${W}`});return t(re.data),re};V.useEffect(()=>{n&&o&&y(n,o.name)},[n,o]);const v=U=>{if(e&&!U.type.startsWith("image/")){alert("Only image files are allowed.");return}s(U),i({name:U.name,size:U.size})},w=U=>{const W=U.target.files?.[0];W&&v(W)},k=V.useCallback(U=>{U.preventDefault(),l(!1);const W=U.dataTransfer.files?.[0];W&&v(W)},[]),F=U=>{U.preventDefault(),l(!0)},$=()=>l(!1);return p.jsxs("div",{className:"mx-auto flex w-full max-w-md flex-col gap-2 bg-white",children:[p.jsx("input",{type:"file",ref:r,onChange:w,className:"hidden"}),p.jsx("div",{onDrop:k,onDragOver:F,onDragLeave:$,className:`flex h-[100px] w-full cursor-pointer flex-col items-center justify-center border-2 p-6 transition ${a?"border-blue-600 bg-blue-50":"border-gray-300 bg-gray-50"}`,onClick:()=>r.current?.click(),children:p.jsx("p",{className:"text-center text-gray-700",children:a?"Drop file here...":n&&o?"File uploaded, now you can see the URL below or upload another file":"Drag & drop a file, or click to select"})})]})}function Rm(){const{actions:{setProp:t},src:e,alt:r,style:n}=Ce.useNode(o=>({src:o.data.props.src,alt:o.data.props.alt,style:o.data.props.style})),s=o=>{t(i=>i.src=o)};return p.jsxs("div",{className:"space-y-4 p-4",children:[p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Upload image on Storage service"}),p.jsx(ex,{setPublicUrl:s,onlyImages:!0})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Image URL"}),p.jsx("input",{type:"text",value:e,onChange:o=>t(i=>i.src=o.target.value),placeholder:"https://example.com/image.jpg",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Alt Text"}),p.jsx("input",{type:"text",value:r,onChange:o=>t(i=>i.alt=o.target.value),placeholder:"Image description",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]}),p.jsxs("div",{className:"grid grid-cols-2 gap-4",children:[p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Width"}),p.jsx("input",{type:"text",value:n.width,onChange:o=>t(i=>{i.style={...i.style,width:o.target.value}}),placeholder:"100%",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Height"}),p.jsx("input",{type:"text",value:n.height,onChange:o=>t(i=>{i.style={...i.style,height:o.target.value}}),placeholder:"auto",className:"focus:ring-primary-500 w-full border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2"})]})]}),p.jsxs("div",{children:[p.jsx("label",{className:"mb-2 block text-sm font-medium text-gray-700",children:"Object Fit"}),p.jsx(Pr,{options:[{value:"cover",label:"Cover"},{value:"contain",label:"Contain"},{value:"fill",label:"Fill"},{value:"none",label:"None"},{value:"scale-down",label:"Scale Down"}],value:n.objectFit,onChange:o=>t(i=>{i.style={...i.style,objectFit:o}}),placeholder:"Choose object fit"})]})]})}xb.craft={...X2,related:{settings:Rm}};var oS=Object.defineProperty,uc=Object.getOwnPropertySymbols,tx=Object.prototype.hasOwnProperty,rx=Object.prototype.propertyIsEnumerable,w0=(t,e,r)=>e in t?oS(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Af=(t,e)=>{for(var r in e||(e={}))tx.call(e,r)&&w0(t,r,e[r]);if(uc)for(var r of uc(e))rx.call(e,r)&&w0(t,r,e[r]);return t},Of=(t,e)=>{var r={};for(var n in t)tx.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(t!=null&&uc)for(var n of uc(t))e.indexOf(n)<0&&rx.call(t,n)&&(r[n]=t[n]);return r};/**
  * @license QR Code generator library (TypeScript)
  * Copyright (c) Project Nayuki.
  * SPDX-License-Identifier: MIT

package/dist/template-editor.mjs

@@ -8219,7 +8219,7 @@ function Hw({
   onlyImages: e
 }) {
   const r = st(null), [n, s] = de(null), [o, i] = de(null), [a, l] = de(!1), { token: u } = UC(), { baseUrl: c, storageKey: h } = WC(), { template: m } = rn(), g = async (U, W) => {
-    const Y = await u(), re = await new uv.StorageGatewayClient(c, {
+    const Y = await u(), re = await new uv.StorageGatewayClient(`${c}/v1/storage`, {
       ...Y ? { authorization: `Bearer ${Y}` } : {}
     }).uploadFile({
       storageKey: h ?? "default",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bolttech/template-editor",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "main": "./dist/template-editor.cjs",
   "module": "./dist/template-editor.mjs",