@grapesjs/studio-sdk-plugins 1.0.33-rc.1 → 1.0.33

package/dist/canvasGridMode/index.umd.js

@@ -1,6 +1,6 @@
-(function(x,T){typeof exports=="object"&&typeof module<"u"?module.exports=T():typeof define=="function"&&define.amd?define(T):(x=typeof globalThis<"u"?globalThis:x||self,x.StudioSdkPlugins_canvasGridMode=T())})(this,function(){"use strict";const x="app.grapesjs.com",T="app-stage.grapesjs.com",j=[x,"app2.grapesjs.com",T,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],ot="license:check:start",rt="license:check:end",st=()=>typeof window<"u",at=({isDev:t,isStage:e})=>`${t?"":`https://${e?T:x}`}/api`,it=()=>{const t=st()&&window.location.hostname;return!!t&&(j.includes(t)||j.some(e=>t.endsWith(e)))};function k(t){return typeof t=="function"}async function lt({path:t,baseApiUrl:e,method:r="GET",headers:o={},params:n,body:i}){const l=`${e||at({isDev:!1,isStage:!1})}${t}`,c={method:r,headers:{"Content-Type":"application/json",...o}};i&&(c.body=JSON.stringify(i));const p=n?new URLSearchParams(n).toString():"",a=p?`?${p}`:"",d=await fetch(`${l}${a}`,c);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var R=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(R||{});const B={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function ct(t){const e=t;return e.init=r=>o=>t(o,r),e}const pt=t=>ct(t);async function dt({editor:t,plan:e,pluginName:r,licenseKey:o,cleanup:n}){let i="",s=!1;const l=it(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),n()},p=(a={})=>{var g;const{error:d,sdkLicense:u}=a,m=(g=a.plan)==null?void 0:g.category;if(!(u||a.license)||d)c(d||"Invalid license");else if(m){const w=B[e],b=B[m];w>b&&c({pluginRequiredPlan:e,licensePlan:m})}};t.on(ot,a=>{i=a==null?void 0:a.baseApiUrl,s=!0}),t.on(rt,a=>{p(a)}),setTimeout(async()=>{if(!s){if(l)return;if(o){const a=await ut({licenseKey:o,pluginName:r,baseApiUrl:i});a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function ut(t){const{licenseKey:e,pluginName:r,baseApiUrl:o}=t;try{return(await lt({baseApiUrl:o,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const N="canvasGridMode",mt=R.startup,L="component-grid-mode",P="grid-mode",D="gjs-drag-grid-spot",U=`${D}__grid-item`,q=`${D}__grid-target`,H=`${D}__snapped`,gt=`${D}__container`,ft=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",o="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",n=e.querySelector(`style[${t}]`)||e.createElement("style");n.setAttribute(t,"true"),n.innerHTML=`
-        .${U} {
-            outline: 2px solid ${o};
+(function(x,T){typeof exports=="object"&&typeof module<"u"?module.exports=T():typeof define=="function"&&define.amd?define(T):(x=typeof globalThis<"u"?globalThis:x||self,x.StudioSdkPlugins_canvasGridMode=T())})(this,function(){"use strict";const x="app.grapesjs.com",T="app-stage.grapesjs.com",j=[x,"app2.grapesjs.com",T,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],nt="license:check:start",rt="license:check:end",st=()=>typeof window<"u",at=({isDev:t,isStage:e,isPlatform:r})=>`${t?"":`https://${e?T:x}`}/${r?"platform-api":"api"}`,it=()=>{const t=st()&&window.location.hostname;return!!t&&(j.includes(t)||j.some(e=>t.endsWith(e)))};function B(t){return typeof t=="function"}async function lt({path:t,baseApiUrl:e,method:r="GET",headers:n={},params:o,body:i}){const l=`${e||at({isDev:!1,isStage:!1})}${t}`,d={method:r,headers:{"Content-Type":"application/json",...n}};i&&(d.body=JSON.stringify(i));const c=o?new URLSearchParams(o).toString():"",p=c?`?${c}`:"",a=await fetch(`${l}${p}`,d);if(!a.ok)throw new Error(`HTTP error! status: ${a.status}`);return a.json()}var G=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(G||{});const U={[G.free]:0,[G.startup]:10,[G.business]:20,[G.enterprise]:30};function ct(t){const e=t;return e.init=r=>n=>t(n,r),e}const pt=t=>ct(t);async function dt({editor:t,plan:e,pluginName:r,licenseKey:n,onLicenseCheckResponse:o,cleanup:i}){let s="",l=!1;const d=it(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),i()},p=(a={})=>{var w;const{error:u,sdkLicense:m}=a,h=(w=a.plan)==null?void 0:w.category;if(!(m||a.license)||u)c(u||"Invalid license");else if(h){const b=U[e],v=U[h];b>v&&c({pluginRequiredPlan:e,licensePlan:h})}};t.on(nt,a=>{s=a==null?void 0:a.baseApiUrl,l=!0}),t.on(rt,a=>{o==null||o(a),p(a)}),setTimeout(async()=>{if(!l){if(d)return;if(n){const a=await ut({licenseKey:n,pluginName:r,baseApiUrl:s});o==null||o(a),a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function ut(t){const{licenseKey:e,pluginName:r,baseApiUrl:n}=t;try{return(await lt({baseApiUrl:n,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const N="canvasGridMode",mt=G.startup,F="component-grid-mode",D="grid-mode",R="gjs-drag-grid-spot",q=`${R}__grid-item`,H=`${R}__grid-target`,Y=`${R}__snapped`,gt=`${R}__container`,ft=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",n="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",o=e.querySelector(`style[${t}]`)||e.createElement("style");o.setAttribute(t,"true"),o.innerHTML=`
+        .${q} {
+            outline: 2px solid ${n};
             background: ${r};
             outline-offset: -2px;
             border-radius: 3px;
@@ -8,19 +8,19 @@
             height: 100%;
             opacity: 0.1;
         }
-        .${H} {
+        .${Y} {
             width: 100%;
             height: 100%;
-            outline: 2px solid ${o};
+            outline: 2px solid ${n};
             outline-offset: -2px;
             position: absolute;
         }
-        .${q} {
+        .${H} {
             position: absolute;
             z-index: -1;
             background: ${r};
-            outline: 1px solid ${o};
+            outline: 1px solid ${n};
             outline-offset: -1px;
             opacity: 0.35;
         }
-    `,e.head.appendChild(n)};function Y(t){const{editor:e,type:r}=t,o=bt(e,t.component),n=F(e,o.component);if(!Ct(e,o,n,r))return{target:o,container:n,startScroll:Q(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:P,component:n.component})}}function K(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:o,shadowContainerEl:n,spotEl:i,target:s,container:l}=t,{Canvas:c}=e,p=e.config.stylePrefix;i==null||i.appendChild(n),n==null||n.appendChild(r),n==null||n.appendChild(o),yt(n,l),ht(r,s,l),wt(o,s),St(n,l.el),s.el.style.opacity="0";const a=c.getSpots().filter(d=>d.type!==P);e.em.stopDefault({preserveSelected:!0}),c.removeSpots(a),c.startAutoscroll(),c.getBody().classList.add(`${p}is__grabbing`)}function X(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:o,target:n,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:c}=n;if(!i){const p=window.getComputedStyle(r);c.addStyle({"grid-area":p.gridArea,width:"",height:""})}n.el.style.opacity="",o.contains(r)&&(o==null||o.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:P}),e.select(c)}function yt(t,{rows:e,columns:r}){const o=[];for(let n=0;n<r.length;n++){o[n]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=U,s.style.gridArea=`${i+1} / ${n+1}`,o[n][i]=s,t.appendChild(s)}}return o}function ht(t,e,r){return t.className=q,t.style.top=`${e.offset.top-r.offset.top}px`,t.style.left=`${e.offset.left-r.offset.left}px`,t.style.width=`${e.offset.width+e.margin.left+e.margin.right}px`,t.style.height=`${e.offset.height+e.margin.top+e.margin.bottom}px`,t}function wt(t,e){const r=V(e.el,e.computedStyles);return t.className=H,t.style.gridArea=`${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`,t}function St(t,e){const r=window.getComputedStyle(e);t.className=gt,t.style.position="relative",t.style.display=r.display,t.style.gap=r.gap,t.style.padding=r.padding,t.style.border=r.border,t.style.gridTemplateColumns=r.gridTemplateColumns,t.style.gridTemplateRows=r.gridTemplateRows}function J(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function bt(t,e){const r=J(t,e),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),margin:{top:parseFloat(n.marginTop),right:parseFloat(n.marginRight),bottom:parseFloat(n.marginBottom),left:parseFloat(n.marginLeft)},computedStyles:n}}function F(t,e){const r=e.parent(),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),computedStyles:n,padding:{top:parseFloat(n.paddingTop),right:parseFloat(n.paddingRight),bottom:parseFloat(n.paddingBottom),left:parseFloat(n.paddingLeft)},columns:n.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:n.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(n.columnGap),row:parseInt(n.rowGap)}}}function E(t,e,r,o,n=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+o)*n>r)return s;i+=o+t[s-1]}return t.length+1}function Q(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function Ct(t,e,r,o){const n=i=>t.em.logWarning(i);return o==="draggable"&&e.component.get(o)===!1?(n(`[${N}] The element is not ${o}`),!0):r.computedStyles.display!=="grid"?(n(`[${N}] The container does not have style display:grid`),!0):!1}function O(t,e,r={}){const o=J(t,e),n=o==null?void 0:o.parent(),i=n==null?void 0:n.getEl();if(!n||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return k(s)?s({component:o,parent:n,isParentGrid:l}):l}const Z=t=>t.split(" ").map(e=>parseFloat(e));function V(t,e){const r=t.ownerDocument.defaultView,o=e||r.getComputedStyle(t),n=o.gridArea.split("/").some(S=>isNaN(parseInt(S.trim()))),i={isComputed:n,raw:o.gridArea};if(!n)return{...i,row:{start:parseInt(o.gridRowStart),end:parseInt(o.gridRowEnd)},column:{start:parseInt(o.gridColumnStart),end:parseInt(o.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),c=parseFloat(l.columnGap)||0,p=parseFloat(l.rowGap)||0,a=Z(l.gridTemplateColumns),d=Z(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,m=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),g=t.getBoundingClientRect(),w=(S,C,G,$,_)=>{let M=1,A=$+_;for(let I=0;I<C.length;I++){const W=C[I],nt=A+W;if(S>=A&&S<nt)return M;A=nt+G,M++}return-1},b=w(g.left,a,c,h.left,u),v=w(g.right-1,a,c,h.left,u)+1,y=w(g.top,d,p,h.top,m),f=w(g.bottom-1,d,p,h.top,m)+1;return{...i,row:{start:y,end:f},column:{start:b,end:v}}}function $t(t){t.Commands.add(L,{stop(){},run(e,r,o={}){const n=Y({editor:e,component:o.target,type:"draggable"});if(!n){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p,startScroll:a}=n;let{container:d}=n,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{K({editor:e,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:d}),d=F(e,s.component)},10)},onEnd:(h,g,{cancelled:w})=>{clearTimeout(u),X({editor:e,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:w}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:g})=>{const{scroll:w}=Q(e),{columns:b,rows:v,gap:y,offset:f,padding:S}=d,{offset:C,margin:G}=s,$=C.top-f.top-S.top-G.top+g-a.top+w.top,_=C.left-f.left-S.left-G.left+h-a.left+w.left,M=Math.min(E(b,1,_,y.column,.5),b.length),A=Math.min(E(v,1,$,y.row,.5),v.length),I=Math.min(E(b,M,C.width,y.column)+1,b.length+1),W=Math.min(E(v,A,C.height,y.row)+1,v.length+1);c.style.gridArea=`${A} / ${M} / ${W} / ${I}`,p.style.top=`${$+S.top}px`,p.style.left=`${_+S.left}px`}}).start(o.event)}})}function vt(t,e){const r=Y({editor:t,component:e.component,type:"resizable"});if(!r)return;const{onMove:o,onEnd:n}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p}=r;let{container:a}=r,d="",u;return{onStart:m=>{d=m.target.dataset.gjsHandler||"",u=setTimeout(()=>{K({editor:t,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=F(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(m,h)=>{const{startDim:g,rectDim:w}=h.resizer,b=JSON.stringify(g)===JSON.stringify(w);clearTimeout(u),X({editor:t,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:b}),n==null||n(m,h)},onMove:(m,h)=>{const g=V(c),w=s.margin.left,b=s.margin.top,v=s.margin.bottom,y=s.margin.right,{w:f,t:S,l:C,h:G}=h.resizer.rectDim,$={t:S-b,l:C-w,h:G+b+v,w:f+w+y};d.endsWith("l")&&(g.column.start=E(a.columns,1,$.l-a.offset.left-a.padding.left,a.gap.column,.5)),d.startsWith("t")&&(g.row.start=E(a.rows,1,$.t-a.offset.top-a.padding.top,a.gap.row,.5)),d.endsWith("r")&&(g.column.end=Math.max(E(a.columns,g.column.start,$.w,a.gap.column,.5),g.column.start+1)),d.startsWith("b")&&(g.row.end=Math.max(E(a.rows,g.row.start,$.h,a.gap.row,.5),g.row.start+1)),c.style.gridArea=`${g.row.start} / ${g.column.start} / ${g.row.end} / ${g.column.end}`,p.style.width=`${$.w}px`,p.style.height=`${$.h}px`,p.style.left=`${$.l-a.offset.left}px`,p.style.top=`${$.t-a.offset.top}px`,o==null||o(m,h)}}}const tt=["px","%","em","rem","vw","vh"],Et=(t,e)=>{const r=t.Styles.getSectors().find(o=>!!o.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},xt=(t,e)=>Et(t,e),Tt=(t,{x:e,y:r,mergable:o}={})=>{const n={property:`${t}-x`,type:"integer",units:tt,...e},i={property:`${t}-y`,type:"integer",units:tt,...r};return{property:t,type:"composite",properties:[n,i],...o&&{fromStyle(s,{name:l,separator:c,property:p}){const[a,d]=p.getProperties(),[u,m]=(s[l]||"").split(c);return{[a.getId()]:s[a.getName()]||u||"",[d.getId()]:s[d.getName()]||m||u||""}},toStyle(s,{name:l,property:c}){const[p,a]=c.getProperties(),d=s[p.getId()],u=s[a.getId()];return{[l]:d===u?d:`${d} ${u}`}}}}},z={display:["grid"]};function Rt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,o=t.match(e);if(!o)return null;const n=parseInt(o[1],10),i=o[2];let s=i,l=i;const c=i.match(r);return c&&(s=c[1],l=c[2]),{total:n,min:s===l?"":s,max:l}}function Gt(t={}){let e="",r="",o="",n="";const i=g=>g.split("/").map(w=>w.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",c=t["grid-row"]||"",p=i(s),a=i(l),d=i(c),u=p.length,m=a.length,h=d.length;return u===4?(o=p[0],e=p[1],n=p[2],r=p[3]):u===3?(o=p[0],e=p[1],n=p[2]):u===2?(o=p[0],e=p[1]):u===1&&(o=p[0]),m===2?(e=a[0],r=a[1]):m===1&&(e=a[0]),h===2?(o=d[0],n=d[1]):h===1&&(o=d[0]),{columnStart:e,columnEnd:r,rowStart:o,rowEnd:n}}function et(t){const{property:e,label:r}=t,o="1",n="1fr";return{property:e,label:r,type:"composite",requires:z,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:c}=s,[p,a,d]=c.getProperties(),u=i[l],m=Rt(u),h=(m==null?void 0:m.max)??n;return{[p.id]:(m==null?void 0:m.total)??o,[a.id]:(m==null?void 0:m.min)??"",[d.id]:h===n?"":h}},toStyle(i,{name:s,property:l}){const[c,p,a]=l.getProperties(),d=i[c.id],u=i[p.id],m=i[a.id]||n,h=u&&m?`minmax(${u}, ${m})`:m;return{[s]:`repeat(${d||o}, ${h})`}}}}function At(t,e){if(!e.styleableGrid)return;const{property:r,...o}=xt(t,"display");if(!r)return;const n=r.getOption("grid"),i=o.sector;n||r.addOption({id:"grid",label:"Grid"}),i.addProperty(et({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(et({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:z,...Tt("gap",{x:{id:"grid-row-gap",label:"Row",property:"row-gap",min:0,default:"0"},y:{id:"grid-column-gap",label:"Column",property:"column-gap",min:0,default:"0"},mergable:!0})},{}),i.addProperty({type:"composite",property:"grid-area",label:"Grid area",requiresParent:z,generic:!0,properties:[{label:"Row start",property:"grid-row-start",type:"integer",default:"auto"},{label:"Row end",property:"grid-row-end",type:"integer",default:"auto"},{label:"Column start",property:"grid-column-start",type:"integer",default:"auto"},{label:"Column end",property:"grid-column-end",type:"integer",default:"auto"}],fromStyle(s){const l=Gt(s);return{"grid-column-start":s["grid-column-start"]||l.columnStart,"grid-column-end":s["grid-column-end"]||l.columnEnd,"grid-row-start":s["grid-row-start"]||l.rowStart,"grid-row-end":s["grid-row-end"]||l.rowEnd}},toStyle(s,{name:l}){const c=s["grid-row-start"]||"auto",p=s["grid-row-end"]||"auto",a=s["grid-column-start"]||"auto",d=s["grid-column-end"]||"auto";return{[l]:`${c} / ${a} / ${p} / ${d}`}}},{})}return pt(function(t,e={}){const r={itemResizable:!0,...e},{Canvas:o,Commands:n,Components:i}=t,{itemResizable:s}=r,l=o.events,c=n.events,p=i.events,a=`${c.runBeforeCommand}tlb-move`,d=`${c.runBeforeCommand}resize`;let u;$t(t);const m=({options:y})=>{O(t,y.target,r)&&(t.runCommand(L,{...y}),y.abort=!0)},h=y=>{const{options:f}=y;O(t,f.component,r)&&(f.options=Object.assign(f.options||{},vt(t,f)))},g=()=>{const y=o.getSpots({type:P}).pop();if(!y)return;let f=y.attributes.spotEl;f||(f=document.createElement("div"),f.className=D,y.set({spotEl:f})),Object.entries(y.getStyle()).forEach(([S,C])=>f.style.setProperty(S,C)),u==null||u.appendChild(f)},w=({spot:y})=>{const f=y.attributes.spotEl;y.type!==P||!f||u==null||u.removeChild(f)};if(s){const y=f=>{const S=k(s)?s({component:f}):s;return typeof S=="boolean"?S:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...S}};t.on(p.resizeInit,f=>{const{component:S}=f;if(O(t,S,r)){const C=y(S);f.resizable=C}})}const b=[[a,m],[d,h],[l.spot,g],[l.spotRemove,w]];b.forEach(([y,f])=>{t.on(y,f)}),t.onReady(()=>{u=o.getSpotsEl(),ft(),At(t,r)});const v=()=>{delete t.Commands.commands[L],b.forEach(([y,f])=>{t.off(y,f)})};dt({editor:t,licenseKey:r.licenseKey,plan:mt,pluginName:N,cleanup:v})})});
+    `,e.head.appendChild(o)};function K(t){const{editor:e,type:r}=t,n=bt(e,t.component),o=O(e,n.component);if(!$t(e,n,o,r))return{target:n,container:o,startScroll:Q(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:D,component:o.component})}}function X(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:n,shadowContainerEl:o,spotEl:i,target:s,container:l}=t,{Canvas:d}=e,c=e.config.stylePrefix;i==null||i.appendChild(o),o==null||o.appendChild(r),o==null||o.appendChild(n),yt(o,l),ht(r,s,l),wt(n,s),St(o,l.el),s.el.style.opacity="0";const p=d.getSpots().filter(a=>a.type!==D);e.em.stopDefault({preserveSelected:!0}),d.removeSpots(p),d.startAutoscroll(),d.getBody().classList.add(`${c}is__grabbing`)}function k(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:n,target:o,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:d}=o;if(!i){const c=window.getComputedStyle(r);d.addStyle({"grid-area":c.gridArea,width:"",height:""})}o.el.style.opacity="",n.contains(r)&&(n==null||n.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:D}),e.select(d)}function yt(t,{rows:e,columns:r}){const n=[];for(let o=0;o<r.length;o++){n[o]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=q,s.style.gridArea=`${i+1} / ${o+1}`,n[o][i]=s,t.appendChild(s)}}return n}function ht(t,e,r){return t.className=H,t.style.top=`${e.offset.top-r.offset.top}px`,t.style.left=`${e.offset.left-r.offset.left}px`,t.style.width=`${e.offset.width+e.margin.left+e.margin.right}px`,t.style.height=`${e.offset.height+e.margin.top+e.margin.bottom}px`,t}function wt(t,e){const r=V(e.el,e.computedStyles);return t.className=Y,t.style.gridArea=`${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`,t}function St(t,e){const r=window.getComputedStyle(e);t.className=gt,t.style.position="relative",t.style.display=r.display,t.style.gap=r.gap,t.style.padding=r.padding,t.style.border=r.border,t.style.gridTemplateColumns=r.gridTemplateColumns,t.style.gridTemplateRows=r.gridTemplateRows}function J(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function bt(t,e){const r=J(t,e),n=r.getEl(),o=window.getComputedStyle(n);return{component:r,el:n,offset:t.Canvas.offset(n),margin:{top:parseFloat(o.marginTop),right:parseFloat(o.marginRight),bottom:parseFloat(o.marginBottom),left:parseFloat(o.marginLeft)},computedStyles:o}}function O(t,e){const r=e.parent(),n=r.getEl(),o=window.getComputedStyle(n);return{component:r,el:n,offset:t.Canvas.offset(n),computedStyles:o,padding:{top:parseFloat(o.paddingTop),right:parseFloat(o.paddingRight),bottom:parseFloat(o.paddingBottom),left:parseFloat(o.paddingLeft)},columns:o.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:o.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(o.columnGap),row:parseInt(o.rowGap)}}}function E(t,e,r,n,o=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+n)*o>r)return s;i+=n+t[s-1]}return t.length+1}function Q(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function $t(t,e,r,n){const o=i=>t.em.logWarning(i);return n==="draggable"&&e.component.get(n)===!1?(o(`[${N}] The element is not ${n}`),!0):r.computedStyles.display!=="grid"?(o(`[${N}] The container does not have style display:grid`),!0):!1}function z(t,e,r={}){const n=J(t,e),o=n==null?void 0:n.parent(),i=o==null?void 0:o.getEl();if(!o||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return B(s)?s({component:n,parent:o,isParentGrid:l}):l}const Z=t=>t.split(" ").map(e=>parseFloat(e));function V(t,e){const r=t.ownerDocument.defaultView,n=e||r.getComputedStyle(t),o=n.gridArea.split("/").some(S=>isNaN(parseInt(S.trim()))),i={isComputed:o,raw:n.gridArea};if(!o)return{...i,row:{start:parseInt(n.gridRowStart),end:parseInt(n.gridRowEnd)},column:{start:parseInt(n.gridColumnStart),end:parseInt(n.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),d=parseFloat(l.columnGap)||0,c=parseFloat(l.rowGap)||0,p=Z(l.gridTemplateColumns),a=Z(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,m=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),f=t.getBoundingClientRect(),w=(S,$,A,C,_)=>{let M=1,P=C+_;for(let I=0;I<$.length;I++){const W=$[I],ot=P+W;if(S>=P&&S<ot)return M;P=ot+A,M++}return-1},b=w(f.left,p,d,h.left,u),v=w(f.right-1,p,d,h.left,u)+1,y=w(f.top,a,c,h.top,m),g=w(f.bottom-1,a,c,h.top,m)+1;return{...i,row:{start:y,end:g},column:{start:b,end:v}}}function Ct(t){t.Commands.add(F,{stop(){},run(e,r,n={}){const o=K({editor:e,component:n.target,type:"draggable"});if(!o){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:d,shadowTargetEl:c,startScroll:p}=o;let{container:a}=o,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{X({editor:e,shadowTargetEl:c,shadowSnappedEl:d,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=O(e,s.component)},10)},onEnd:(h,f,{cancelled:w})=>{clearTimeout(u),k({editor:e,shadowSnappedEl:d,shadowContainerEl:l,target:s,cancelled:w}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:f})=>{const{scroll:w}=Q(e),{columns:b,rows:v,gap:y,offset:g,padding:S}=a,{offset:$,margin:A}=s,C=$.top-g.top-S.top-A.top+f-p.top+w.top,_=$.left-g.left-S.left-A.left+h-p.left+w.left,M=Math.min(E(b,1,_,y.column,.5),b.length),P=Math.min(E(v,1,C,y.row,.5),v.length),I=Math.min(E(b,M,$.width,y.column)+1,b.length+1),W=Math.min(E(v,P,$.height,y.row)+1,v.length+1);d.style.gridArea=`${P} / ${M} / ${W} / ${I}`,c.style.top=`${C+S.top}px`,c.style.left=`${_+S.left}px`}}).start(n.event)}})}function vt(t,e){const r=K({editor:t,component:e.component,type:"resizable"});if(!r)return;const{onMove:n,onEnd:o}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:d,shadowTargetEl:c}=r;let{container:p}=r,a="",u;return{onStart:m=>{a=m.target.dataset.gjsHandler||"",u=setTimeout(()=>{X({editor:t,shadowTargetEl:c,shadowSnappedEl:d,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:p}),p=O(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(m,h)=>{const{startDim:f,rectDim:w}=h.resizer,b=JSON.stringify(f)===JSON.stringify(w);clearTimeout(u),k({editor:t,shadowSnappedEl:d,shadowContainerEl:l,target:s,cancelled:b}),o==null||o(m,h)},onMove:(m,h)=>{const f=V(d),w=s.margin.left,b=s.margin.top,v=s.margin.bottom,y=s.margin.right,{w:g,t:S,l:$,h:A}=h.resizer.rectDim,C={t:S-b,l:$-w,h:A+b+v,w:g+w+y};a.endsWith("l")&&(f.column.start=E(p.columns,1,C.l-p.offset.left-p.padding.left,p.gap.column,.5)),a.startsWith("t")&&(f.row.start=E(p.rows,1,C.t-p.offset.top-p.padding.top,p.gap.row,.5)),a.endsWith("r")&&(f.column.end=Math.max(E(p.columns,f.column.start,C.w,p.gap.column,.5),f.column.start+1)),a.startsWith("b")&&(f.row.end=Math.max(E(p.rows,f.row.start,C.h,p.gap.row,.5),f.row.start+1)),d.style.gridArea=`${f.row.start} / ${f.column.start} / ${f.row.end} / ${f.column.end}`,c.style.width=`${C.w}px`,c.style.height=`${C.h}px`,c.style.left=`${C.l-p.offset.left}px`,c.style.top=`${C.t-p.offset.top}px`,n==null||n(m,h)}}}const tt=["px","%","em","rem","vw","vh"],Et=(t,e)=>{const r=t.Styles.getSectors().find(n=>!!n.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},xt=(t,e)=>Et(t,e),Tt=(t,{x:e,y:r,mergable:n}={})=>{const o={property:`${t}-x`,type:"integer",units:tt,...e},i={property:`${t}-y`,type:"integer",units:tt,...r};return{property:t,type:"composite",properties:[o,i],...n&&{fromStyle(s,{name:l,separator:d,property:c}){const[p,a]=c.getProperties(),[u,m]=(s[l]||"").split(d);return{[p.getId()]:s[p.getName()]||u||"",[a.getId()]:s[a.getName()]||m||u||""}},toStyle(s,{name:l,property:d}){const[c,p]=d.getProperties(),a=s[c.getId()],u=s[p.getId()];return{[l]:a===u?a:`${a} ${u}`}}}}},L={display:["grid"]};function Gt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,n=t.match(e);if(!n)return null;const o=parseInt(n[1],10),i=n[2];let s=i,l=i;const d=i.match(r);return d&&(s=d[1],l=d[2]),{total:o,min:s===l?"":s,max:l}}function At(t={}){let e="",r="",n="",o="";const i=f=>f.split("/").map(w=>w.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",d=t["grid-row"]||"",c=i(s),p=i(l),a=i(d),u=c.length,m=p.length,h=a.length;return u===4?(n=c[0],e=c[1],o=c[2],r=c[3]):u===3?(n=c[0],e=c[1],o=c[2]):u===2?(n=c[0],e=c[1]):u===1&&(n=c[0]),m===2?(e=p[0],r=p[1]):m===1&&(e=p[0]),h===2?(n=a[0],o=a[1]):h===1&&(n=a[0]),{columnStart:e,columnEnd:r,rowStart:n,rowEnd:o}}function et(t){const{property:e,label:r}=t,n="1",o="1fr";return{property:e,label:r,type:"composite",requires:L,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:d}=s,[c,p,a]=d.getProperties(),u=i[l],m=Gt(u),h=(m==null?void 0:m.max)??o;return{[c.id]:(m==null?void 0:m.total)??n,[p.id]:(m==null?void 0:m.min)??"",[a.id]:h===o?"":h}},toStyle(i,{name:s,property:l}){const[d,c,p]=l.getProperties(),a=i[d.id],u=i[c.id],m=i[p.id]||o,h=u&&m?`minmax(${u}, ${m})`:m;return{[s]:`repeat(${a||n}, ${h})`}}}}function Pt(t,e){if(!e.styleableGrid)return;const{property:r,...n}=xt(t,"display");if(!r)return;const o=r.getOption("grid"),i=n.sector;o||r.addOption({id:"grid",label:"Grid"}),i.addProperty(et({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(et({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:L,...Tt("gap",{x:{id:"grid-row-gap",label:"Row",property:"row-gap",min:0,default:"0"},y:{id:"grid-column-gap",label:"Column",property:"column-gap",min:0,default:"0"},mergable:!0})},{}),i.addProperty({type:"composite",property:"grid-area",label:"Grid area",requiresParent:L,generic:!0,properties:[{label:"Row start",property:"grid-row-start",type:"integer",default:"auto"},{label:"Row end",property:"grid-row-end",type:"integer",default:"auto"},{label:"Column start",property:"grid-column-start",type:"integer",default:"auto"},{label:"Column end",property:"grid-column-end",type:"integer",default:"auto"}],fromStyle(s){const l=At(s);return{"grid-column-start":s["grid-column-start"]||l.columnStart,"grid-column-end":s["grid-column-end"]||l.columnEnd,"grid-row-start":s["grid-row-start"]||l.rowStart,"grid-row-end":s["grid-row-end"]||l.rowEnd}},toStyle(s,{name:l}){const d=s["grid-row-start"]||"auto",c=s["grid-row-end"]||"auto",p=s["grid-column-start"]||"auto",a=s["grid-column-end"]||"auto";return{[l]:`${d} / ${p} / ${c} / ${a}`}}},{})}return pt(function(t,e={}){const r={itemResizable:!0,...e},{Canvas:n,Commands:o,Components:i}=t,{itemResizable:s}=r,l=n.events,d=o.events,c=i.events,p=`${d.runBeforeCommand}tlb-move`,a=`${d.runBeforeCommand}resize`;let u;Ct(t);const m=({options:y})=>{z(t,y.target,r)&&(t.runCommand(F,{...y}),y.abort=!0)},h=y=>{const{options:g}=y;z(t,g.component,r)&&(g.options=Object.assign(g.options||{},vt(t,g)))},f=()=>{const y=n.getSpots({type:D}).pop();if(!y)return;let g=y.attributes.spotEl;g||(g=document.createElement("div"),g.className=R,y.set({spotEl:g})),Object.entries(y.getStyle()).forEach(([S,$])=>g.style.setProperty(S,$)),u==null||u.appendChild(g)},w=({spot:y})=>{const g=y.attributes.spotEl;y.type!==D||!g||u==null||u.removeChild(g)};if(s){const y=g=>{const S=B(s)?s({component:g}):s;return typeof S=="boolean"?S:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...S}};t.on(c.resizeInit,g=>{const{component:S}=g;if(z(t,S,r)){const $=y(S);g.resizable=$}})}const b=[[p,m],[a,h],[l.spot,f],[l.spotRemove,w]];b.forEach(([y,g])=>{t.on(y,g)}),t.onReady(()=>{u=n.getSpotsEl(),ft(),Pt(t,r)});const v=()=>{delete t.Commands.commands[F],b.forEach(([y,g])=>{t.off(y,g)})};dt({editor:t,licenseKey:r.licenseKey,plan:mt,pluginName:N,cleanup:v})})});

package/dist/canvasScreenshot/index.cjs.js

@@ -1 +1 @@
-"use strict";const I="app.grapesjs.com",L="app-stage.grapesjs.com",C="app2.grapesjs.com",P="app-stage2.grapesjs.com",E=[I,C,L,P,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],N="license:check:start",A="license:check:end",D=()=>typeof window<"u",_=(e,n={})=>{const s=O(e)?{id:e,src:e}:e;return new Promise((c,d)=>{var m,h;const{loadedScripts:r}=n,{id:i,src:a}=s,l=document.querySelector(`script[src="${a}"]`);if(l){if((m=n.onScript)==null||m.call(n,l),r&&!r.get(a)){l.addEventListener("load",()=>c(i)),l.addEventListener("error",()=>d(i));return}return c(i)}const u=window.define;window.define=void 0;const t=()=>{r==null||r.set(a,!0),window.define=u},o=document.createElement("script");o.src=a,o.onload=()=>{c(i),t()},o.onerror=()=>{d(i),t()},document.head.appendChild(o),(h=n.onScript)==null||h.call(n,o)})},U=e=>{const n=e.map(s=>_(s));return Promise.allSettled(n)},W=async e=>{const n=window.define;window.define=void 0;const s=await U(e);return window.define=n,s},$=({isDev:e,isStage:n})=>`${e?"":`https://${n?L:I}`}/api`,k=()=>{const e=D()&&window.location.hostname;return!!e&&(E.includes(e)||E.some(n=>e.endsWith(n)))},O=e=>typeof e=="string";async function j({path:e,baseApiUrl:n,method:s="GET",headers:c={},params:d,body:r}){const a=`${n||$({isDev:!1,isStage:!1})}${e}`,l={method:s,headers:{"Content-Type":"application/json",...c}};r&&(l.body=JSON.stringify(r));const u=d?new URLSearchParams(d).toString():"",t=u?`?${u}`:"",o=await fetch(`${a}${t}`,l);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var p=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(p||{});const b={[p.free]:0,[p.startup]:10,[p.business]:20,[p.enterprise]:30};function R(e){const n=e;return n.init=s=>c=>e(c,s),n}const H=e=>R(e);async function K({editor:e,plan:n,pluginName:s,licenseKey:c,cleanup:d}){let r="",i=!1;const a=k(),l=t=>{console.warn("Cleanup plugin:",s,"Reason:",t),d()},u=(t={})=>{var f;const{error:o,sdkLicense:m}=t,h=(f=t.plan)==null?void 0:f.category;if(!(m||t.license)||o)l(o||"Invalid license");else if(h){const v=b[n],w=b[h];v>w&&l({pluginRequiredPlan:n,licensePlan:h})}};e.on(N,t=>{r=t==null?void 0:t.baseApiUrl,i=!0}),e.on(A,t=>{u(t)}),setTimeout(async()=>{if(!i){if(a)return;if(c){const t=await x({licenseKey:c,pluginName:s,baseApiUrl:r});t&&u(t)}else l("The `licenseKey` option not provided")}},2e3)}async function x(e){const{licenseKey:n,pluginName:s,baseApiUrl:c}=e;try{return(await j({baseApiUrl:c,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const G="canvasScreenshot",M=p.startup;var T=(e=>(e.screenshot="studioPlugin:screenshot",e))(T||{});const q=async e=>await W([{id:"html-to-image",src:e}]),B=async(e,n={},s={})=>{const{cdnScript:c}=s;if(!window.htmlToImage){if(!c)return;await q(c)}return new Promise((d,r)=>{(async()=>{try{const{canvasWidth:a,canvasHeight:l,width:u,height:t,type:o,quality:m,addOptions:h}=n,g={pixelRatio:1,width:u,height:t,canvasWidth:a,canvasHeight:l},f=(h==null?void 0:h(g))||g,w=await window.htmlToImage.toCanvas(e,f);w.toBlob(y=>{y?d({file:y,canvas:w}):r(new Error("Failed to create file from canvas"))},o,m)}catch(a){r(a)}})()})},S=T.screenshot,F=function(e,n={}){const{Commands:s,Canvas:c,Storage:d}=e,r=d.events.afterStore,i={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...n};s.add(S,async(u,t,o)=>{const{el:m,...h}=o;return await B(m,h,i)});const a=async()=>{var t;const u=c.getBody();if(!u)return e.log("Canvas element not found");try{const o=await e.runCommand(S,{el:u,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(t=i.screenshotOnSave)==null||t.call(i,{...o,editor:e})}catch(o){console.error("Screenshot error",o)}};i.screenshotOnSave&&e.on(r,a);const l=()=>{delete s.commands[S],e.off(r,a)};K({editor:e,licenseKey:n.licenseKey,plan:M,pluginName:G,cleanup:l})},J=H(F);module.exports=J;
+"use strict";const I="app.grapesjs.com",T="app-stage.grapesjs.com",N="app2.grapesjs.com",A="app-stage2.grapesjs.com",E=[I,N,T,A,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],D="license:check:start",_="license:check:end",U=()=>typeof window<"u",$=(t,e={})=>{const s=C(t)?{id:t,src:t}:t;return new Promise((r,o)=>{var h,m;const{loadedScripts:a}=e,{id:c,src:i}=s,d=document.querySelector(`script[src="${i}"]`);if(d){if((h=e.onScript)==null||h.call(e,d),a&&!a.get(i)){d.addEventListener("load",()=>r(c)),d.addEventListener("error",()=>o(c));return}return r(c)}const l=window.define;window.define=void 0;const u=()=>{a==null||a.set(i,!0),window.define=l},n=document.createElement("script");n.src=i,n.onload=()=>{r(c),u()},n.onerror=()=>{o(c),u()},document.head.appendChild(n),(m=e.onScript)==null||m.call(e,n)})},W=t=>{const e=t.map(s=>$(s));return Promise.allSettled(e)},O=async t=>{const e=window.define;window.define=void 0;const s=await W(t);return window.define=e,s},j=({isDev:t,isStage:e,isPlatform:s})=>`${t?"":`https://${e?T:I}`}/${s?"platform-api":"api"}`,L=()=>{const t=U()&&window.location.hostname;return!!t&&(E.includes(t)||E.some(e=>t.endsWith(e)))},C=t=>typeof t=="string";async function H({path:t,baseApiUrl:e,method:s="GET",headers:r={},params:o,body:a}){const i=`${e||j({isDev:!1,isStage:!1})}${t}`,d={method:s,headers:{"Content-Type":"application/json",...r}};a&&(d.body=JSON.stringify(a));const l=o?new URLSearchParams(o).toString():"",u=l?`?${l}`:"",n=await fetch(`${i}${u}`,d);if(!n.ok)throw new Error(`HTTP error! status: ${n.status}`);return n.json()}var p=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(p||{});const b={[p.free]:0,[p.startup]:10,[p.business]:20,[p.enterprise]:30};function K(t){const e=t;return e.init=s=>r=>t(r,s),e}const x=t=>K(t);async function G({editor:t,plan:e,pluginName:s,licenseKey:r,onLicenseCheckResponse:o,cleanup:a}){let c="",i=!1;const d=L(),l=n=>{console.warn("Cleanup plugin:",s,"Reason:",n),a()},u=(n={})=>{var S;const{error:h,sdkLicense:m}=n,f=(S=n.plan)==null?void 0:S.category;if(!(m||n.license)||h)l(h||"Invalid license");else if(f){const w=b[e],g=b[f];w>g&&l({pluginRequiredPlan:e,licensePlan:f})}};t.on(D,n=>{c=n==null?void 0:n.baseApiUrl,i=!0}),t.on(_,n=>{o==null||o(n),u(n)}),setTimeout(async()=>{if(!i){if(d)return;if(r){const n=await M({licenseKey:r,pluginName:s,baseApiUrl:c});o==null||o(n),n&&u(n)}else l("The `licenseKey` option not provided")}},2e3)}async function M(t){const{licenseKey:e,pluginName:s,baseApiUrl:r}=t;try{return(await H({baseApiUrl:r,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const q="canvasScreenshot",B=p.startup;var P=(t=>(t.screenshot="studioPlugin:screenshot",t))(P||{});const F=async t=>await O([{id:"html-to-image",src:t}]),J=async(t,e={},s={})=>{const{cdnScript:r}=s;if(!window.htmlToImage){if(!r)return;await F(r)}return new Promise((o,a)=>{(async()=>{try{const{canvasWidth:i,canvasHeight:d,width:l,height:u,type:n,quality:h,addOptions:m}=e,f={pixelRatio:1,width:l,height:u,canvasWidth:i,canvasHeight:d},y=(m==null?void 0:m(f))||f,w=await window.htmlToImage.toCanvas(t,y);w.toBlob(g=>{g?o({file:g,canvas:w}):a(new Error("Failed to create file from canvas"))},n,h)}catch(i){a(i)}})()})},v=P.screenshot,k=function(t,e={}){const{Commands:s,Canvas:r,Storage:o}=t,a=o.events.afterStore,c={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...e};s.add(v,async(l,u,n)=>{const{el:h,...m}=n;return await J(h,m,c)});const i=async()=>{var u;const l=r.getBody();if(!l)return t.log("Canvas element not found");try{const n=await t.runCommand(v,{el:l,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(u=c.screenshotOnSave)==null||u.call(c,{...n,editor:t})}catch(n){console.error("Screenshot error",n)}};c.screenshotOnSave&&t.on(a,i);const d=()=>{delete s.commands[v],t.off(a,i)};G({editor:t,licenseKey:e.licenseKey,plan:B,pluginName:q,cleanup:d})},z=x(k);module.exports=z;

package/dist/canvasScreenshot/index.es.js

@@ -1,8 +1,8 @@
-const I = "app.grapesjs.com", L = "app-stage.grapesjs.com", C = "app2.grapesjs.com", P = "app-stage2.grapesjs.com", E = [
+const I = "app.grapesjs.com", T = "app-stage.grapesjs.com", N = "app2.grapesjs.com", A = "app-stage2.grapesjs.com", E = [
   I,
-  C,
-  L,
-  P,
+  N,
+  T,
+  A,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,175 +11,180 @@ const I = "app.grapesjs.com", L = "app-stage.grapesjs.com", C = "app2.grapesjs.c
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], N = "license:check:start", A = "license:check:end", D = () => typeof window < "u", _ = (e, n = {}) => {
-  const s = O(e) ? { id: e, src: e } : e;
-  return new Promise((c, d) => {
-    var m, h;
-    const { loadedScripts: r } = n, { id: i, src: a } = s, l = document.querySelector(`script[src="${a}"]`);
-    if (l) {
-      if ((m = n.onScript) == null || m.call(n, l), r && !r.get(a)) {
-        l.addEventListener("load", () => c(i)), l.addEventListener("error", () => d(i));
+], D = "license:check:start", _ = "license:check:end", U = () => typeof window < "u", $ = (n, e = {}) => {
+  const s = C(n) ? { id: n, src: n } : n;
+  return new Promise((a, o) => {
+    var h, m;
+    const { loadedScripts: r } = e, { id: c, src: i } = s, d = document.querySelector(`script[src="${i}"]`);
+    if (d) {
+      if ((h = e.onScript) == null || h.call(e, d), r && !r.get(i)) {
+        d.addEventListener("load", () => a(c)), d.addEventListener("error", () => o(c));
         return;
       }
-      return c(i);
+      return a(c);
     }
-    const u = window.define;
+    const l = window.define;
     window.define = void 0;
-    const t = () => {
-      r == null || r.set(a, !0), window.define = u;
-    }, o = document.createElement("script");
-    o.src = a, o.onload = () => {
-      c(i), t();
-    }, o.onerror = () => {
-      d(i), t();
-    }, document.head.appendChild(o), (h = n.onScript) == null || h.call(n, o);
+    const u = () => {
+      r == null || r.set(i, !0), window.define = l;
+    }, t = document.createElement("script");
+    t.src = i, t.onload = () => {
+      a(c), u();
+    }, t.onerror = () => {
+      o(c), u();
+    }, document.head.appendChild(t), (m = e.onScript) == null || m.call(e, t);
   });
-}, U = (e) => {
-  const n = e.map((s) => _(s));
-  return Promise.allSettled(n);
-}, W = async (e) => {
-  const n = window.define;
+}, W = (n) => {
+  const e = n.map((s) => $(s));
+  return Promise.allSettled(e);
+}, O = async (n) => {
+  const e = window.define;
   window.define = void 0;
-  const s = await U(e);
-  return window.define = n, s;
-}, $ = ({ isDev: e, isStage: n }) => `${e ? "" : `https://${n ? L : I}`}/api`, k = () => {
-  const e = D() && window.location.hostname;
-  return !!e && (E.includes(e) || E.some((n) => e.endsWith(n)));
-}, O = (e) => typeof e == "string";
-async function j({
-  path: e,
-  baseApiUrl: n,
+  const s = await W(n);
+  return window.define = e, s;
+}, j = ({
+  isDev: n,
+  isStage: e,
+  isPlatform: s
+}) => `${n ? "" : `https://${e ? T : I}`}/${s ? "platform-api" : "api"}`, L = () => {
+  const n = U() && window.location.hostname;
+  return !!n && (E.includes(n) || E.some((e) => n.endsWith(e)));
+}, C = (n) => typeof n == "string";
+async function H({
+  path: n,
+  baseApiUrl: e,
   method: s = "GET",
-  headers: c = {},
-  params: d,
+  headers: a = {},
+  params: o,
   body: r
 }) {
-  const a = `${n || $({ isDev: !1, isStage: !1 })}${e}`, l = {
+  const i = `${e || j({ isDev: !1, isStage: !1 })}${n}`, d = {
     method: s,
     headers: {
       "Content-Type": "application/json",
-      ...c
+      ...a
     }
   };
-  r && (l.body = JSON.stringify(r));
-  const u = d ? new URLSearchParams(d).toString() : "", t = u ? `?${u}` : "", o = await fetch(`${a}${t}`, l);
-  if (!o.ok)
-    throw new Error(`HTTP error! status: ${o.status}`);
-  return o.json();
+  r && (d.body = JSON.stringify(r));
+  const l = o ? new URLSearchParams(o).toString() : "", u = l ? `?${l}` : "", t = await fetch(`${i}${u}`, d);
+  if (!t.ok)
+    throw new Error(`HTTP error! status: ${t.status}`);
+  return t.json();
 }
-var p = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(p || {});
+var p = /* @__PURE__ */ ((n) => (n.free = "free", n.startup = "startup", n.business = "business", n.enterprise = "enterprise", n))(p || {});
 const b = {
   [p.free]: 0,
   [p.startup]: 10,
   [p.business]: 20,
   [p.enterprise]: 30
 };
-function R(e) {
-  const n = e;
-  return n.init = (s) => (c) => e(c, s), n;
+function K(n) {
+  const e = n;
+  return e.init = (s) => (a) => n(a, s), e;
 }
-const H = (e) => /* @__PURE__ */ R(e);
-async function K({
-  editor: e,
-  plan: n,
+const x = (n) => /* @__PURE__ */ K(n);
+async function G({
+  editor: n,
+  plan: e,
   pluginName: s,
-  licenseKey: c,
-  cleanup: d
+  licenseKey: a,
+  onLicenseCheckResponse: o,
+  cleanup: r
 }) {
-  let r = "", i = !1;
-  const a = k(), l = (t) => {
-    console.warn("Cleanup plugin:", s, "Reason:", t), d();
+  let c = "", i = !1;
+  const d = L(), l = (t) => {
+    console.warn("Cleanup plugin:", s, "Reason:", t), r();
   }, u = (t = {}) => {
-    var f;
-    const { error: o, sdkLicense: m } = t, h = (f = t.plan) == null ? void 0 : f.category;
-    if (!(m || t.license) || o)
-      l(o || "Invalid license");
-    else if (h) {
-      const v = b[n], w = b[h];
-      v > w && l({ pluginRequiredPlan: n, licensePlan: h });
+    var S;
+    const { error: h, sdkLicense: m } = t, f = (S = t.plan) == null ? void 0 : S.category;
+    if (!(m || t.license) || h)
+      l(h || "Invalid license");
+    else if (f) {
+      const w = b[e], g = b[f];
+      w > g && l({ pluginRequiredPlan: e, licensePlan: f });
     }
   };
-  e.on(N, (t) => {
-    r = t == null ? void 0 : t.baseApiUrl, i = !0;
-  }), e.on(A, (t) => {
-    u(t);
+  n.on(D, (t) => {
+    c = t == null ? void 0 : t.baseApiUrl, i = !0;
+  }), n.on(_, (t) => {
+    o == null || o(t), u(t);
   }), setTimeout(async () => {
     if (!i) {
-      if (a) return;
-      if (c) {
-        const t = await x({ licenseKey: c, pluginName: s, baseApiUrl: r });
-        t && u(t);
+      if (d) return;
+      if (a) {
+        const t = await M({ licenseKey: a, pluginName: s, baseApiUrl: c });
+        o == null || o(t), t && u(t);
       } else
         l("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function x(e) {
-  const { licenseKey: n, pluginName: s, baseApiUrl: c } = e;
+async function M(n) {
+  const { licenseKey: e, pluginName: s, baseApiUrl: a } = n;
   try {
-    return (await j({
-      baseApiUrl: c,
-      path: `/sdk/${n || "na"}`,
+    return (await H({
+      baseApiUrl: a,
+      path: `/sdk/${e || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
         pn: s
       }
     })).result || {};
-  } catch (d) {
-    return console.error("Error during SDK license check:", d), !1;
+  } catch (o) {
+    return console.error("Error during SDK license check:", o), !1;
   }
 }
-const G = "canvasScreenshot", M = p.startup;
-var T = /* @__PURE__ */ ((e) => (e.screenshot = "studioPlugin:screenshot", e))(T || {});
-const q = async (e) => await W([{ id: "html-to-image", src: e }]), B = async (e, n = {}, s = {}) => {
-  const { cdnScript: c } = s;
+const q = "canvasScreenshot", B = p.startup;
+var P = /* @__PURE__ */ ((n) => (n.screenshot = "studioPlugin:screenshot", n))(P || {});
+const F = async (n) => await O([{ id: "html-to-image", src: n }]), J = async (n, e = {}, s = {}) => {
+  const { cdnScript: a } = s;
   if (!window.htmlToImage) {
-    if (!c) return;
-    await q(c);
+    if (!a) return;
+    await F(a);
   }
-  return new Promise((d, r) => {
+  return new Promise((o, r) => {
     (async () => {
       try {
-        const { canvasWidth: a, canvasHeight: l, width: u, height: t, type: o, quality: m, addOptions: h } = n, g = {
+        const { canvasWidth: i, canvasHeight: d, width: l, height: u, type: t, quality: h, addOptions: m } = e, f = {
           pixelRatio: 1,
-          width: u,
-          height: t,
-          canvasWidth: a,
-          canvasHeight: l
-        }, f = (h == null ? void 0 : h(g)) || g, w = await window.htmlToImage.toCanvas(e, f);
+          width: l,
+          height: u,
+          canvasWidth: i,
+          canvasHeight: d
+        }, y = (m == null ? void 0 : m(f)) || f, w = await window.htmlToImage.toCanvas(n, y);
         w.toBlob(
-          (y) => {
-            y ? d({
-              file: y,
+          (g) => {
+            g ? o({
+              file: g,
               canvas: w
             }) : r(new Error("Failed to create file from canvas"));
           },
-          o,
-          m
+          t,
+          h
         );
-      } catch (a) {
-        r(a);
+      } catch (i) {
+        r(i);
       }
     })();
   });
-}, S = T.screenshot, F = function(e, n = {}) {
-  const { Commands: s, Canvas: c, Storage: d } = e, r = d.events.afterStore, i = {
+}, v = P.screenshot, k = function(n, e = {}) {
+  const { Commands: s, Canvas: a, Storage: o } = n, r = o.events.afterStore, c = {
     cdnScript: "https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",
-    ...n
+    ...e
   };
-  s.add(S, async (u, t, o) => {
-    const { el: m, ...h } = o;
-    return await B(m, h, i);
+  s.add(v, async (l, u, t) => {
+    const { el: h, ...m } = t;
+    return await J(h, m, c);
   });
-  const a = async () => {
-    var t;
-    const u = c.getBody();
-    if (!u)
-      return e.log("Canvas element not found");
+  const i = async () => {
+    var u;
+    const l = a.getBody();
+    if (!l)
+      return n.log("Canvas element not found");
     try {
-      const o = await e.runCommand(S, {
-        el: u,
+      const t = await n.runCommand(v, {
+        el: l,
         canvasWidth: 400,
         // max element width for the screenshot
         canvasHeight: 225,
@@ -190,23 +195,23 @@ const q = async (e) => await W([{ id: "html-to-image", src: e }]), B = async (e,
         //  1200 / (16/9) - 16:9 aspect ratio
         type: "image/jpeg"
       });
-      (t = i.screenshotOnSave) == null || t.call(i, { ...o, editor: e });
-    } catch (o) {
-      console.error("Screenshot error", o);
+      (u = c.screenshotOnSave) == null || u.call(c, { ...t, editor: n });
+    } catch (t) {
+      console.error("Screenshot error", t);
     }
   };
-  i.screenshotOnSave && e.on(r, a);
-  const l = () => {
-    delete s.commands[S], e.off(r, a);
+  c.screenshotOnSave && n.on(r, i);
+  const d = () => {
+    delete s.commands[v], n.off(r, i);
   };
-  K({
-    editor: e,
-    licenseKey: n.licenseKey,
-    plan: M,
-    pluginName: G,
-    cleanup: l
+  G({
+    editor: n,
+    licenseKey: e.licenseKey,
+    plan: B,
+    pluginName: q,
+    cleanup: d
   });
-}, J = H(F);
+}, z = x(k);
 export {
-  J as default
+  z as default
 };

package/dist/canvasScreenshot/index.umd.js

@@ -1 +1 @@
-(function(m,f){typeof exports=="object"&&typeof module<"u"?module.exports=f():typeof define=="function"&&define.amd?define(f):(m=typeof globalThis<"u"?globalThis:m||self,m.StudioSdkPlugins_canvasScreenshot=f())})(this,function(){"use strict";const m="app.grapesjs.com",f="app-stage.grapesjs.com",T=[m,"app2.grapesjs.com",f,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],P="license:check:start",A="license:check:end",N=()=>typeof window<"u",C=(e,n={})=>{const s=k(e)?{id:e,src:e}:e;return new Promise((c,d)=>{var p,h;const{loadedScripts:i}=n,{id:r,src:a}=s,l=document.querySelector(`script[src="${a}"]`);if(l){if((p=n.onScript)==null||p.call(n,l),i&&!i.get(a)){l.addEventListener("load",()=>c(r)),l.addEventListener("error",()=>d(r));return}return c(r)}const u=window.define;window.define=void 0;const t=()=>{i==null||i.set(a,!0),window.define=u},o=document.createElement("script");o.src=a,o.onload=()=>{c(r),t()},o.onerror=()=>{d(r),t()},document.head.appendChild(o),(h=n.onScript)==null||h.call(n,o)})},D=e=>{const n=e.map(s=>C(s));return Promise.allSettled(n)},_=async e=>{const n=window.define;window.define=void 0;const s=await D(e);return window.define=n,s},O=({isDev:e,isStage:n})=>`${e?"":`https://${n?f:m}`}/api`,U=()=>{const e=N()&&window.location.hostname;return!!e&&(T.includes(e)||T.some(n=>e.endsWith(n)))},k=e=>typeof e=="string";async function W({path:e,baseApiUrl:n,method:s="GET",headers:c={},params:d,body:i}){const a=`${n||O({isDev:!1,isStage:!1})}${e}`,l={method:s,headers:{"Content-Type":"application/json",...c}};i&&(l.body=JSON.stringify(i));const u=d?new URLSearchParams(d).toString():"",t=u?`?${u}`:"",o=await fetch(`${a}${t}`,l);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var w=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(w||{});const E={[w.free]:0,[w.startup]:10,[w.business]:20,[w.enterprise]:30};function $(e){const n=e;return n.init=s=>c=>e(c,s),n}const j=e=>$(e);async function R({editor:e,plan:n,pluginName:s,licenseKey:c,cleanup:d}){let i="",r=!1;const a=U(),l=t=>{console.warn("Cleanup plugin:",s,"Reason:",t),d()},u=(t={})=>{var g;const{error:o,sdkLicense:p}=t,h=(g=t.plan)==null?void 0:g.category;if(!(p||t.license)||o)l(o||"Invalid license");else if(h){const b=E[n],S=E[h];b>S&&l({pluginRequiredPlan:n,licensePlan:h})}};e.on(P,t=>{i=t==null?void 0:t.baseApiUrl,r=!0}),e.on(A,t=>{u(t)}),setTimeout(async()=>{if(!r){if(a)return;if(c){const t=await x({licenseKey:c,pluginName:s,baseApiUrl:i});t&&u(t)}else l("The `licenseKey` option not provided")}},2e3)}async function x(e){const{licenseKey:n,pluginName:s,baseApiUrl:c}=e;try{return(await W({baseApiUrl:c,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const M="canvasScreenshot",G=w.startup;var I=(e=>(e.screenshot="studioPlugin:screenshot",e))(I||{});const H=async e=>await _([{id:"html-to-image",src:e}]),K=async(e,n={},s={})=>{const{cdnScript:c}=s;if(!window.htmlToImage){if(!c)return;await H(c)}return new Promise((d,i)=>{(async()=>{try{const{canvasWidth:a,canvasHeight:l,width:u,height:t,type:o,quality:p,addOptions:h}=n,y={pixelRatio:1,width:u,height:t,canvasWidth:a,canvasHeight:l},g=(h==null?void 0:h(y))||y,S=await window.htmlToImage.toCanvas(e,g);S.toBlob(L=>{L?d({file:L,canvas:S}):i(new Error("Failed to create file from canvas"))},o,p)}catch(a){i(a)}})()})},v=I.screenshot;return j(function(e,n={}){const{Commands:s,Canvas:c,Storage:d}=e,i=d.events.afterStore,r={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...n};s.add(v,async(u,t,o)=>{const{el:p,...h}=o;return await K(p,h,r)});const a=async()=>{var t;const u=c.getBody();if(!u)return e.log("Canvas element not found");try{const o=await e.runCommand(v,{el:u,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(t=r.screenshotOnSave)==null||t.call(r,{...o,editor:e})}catch(o){console.error("Screenshot error",o)}};r.screenshotOnSave&&e.on(i,a);const l=()=>{delete s.commands[v],e.off(i,a)};R({editor:e,licenseKey:n.licenseKey,plan:G,pluginName:M,cleanup:l})})});
+(function(h,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(h=typeof globalThis<"u"?globalThis:h||self,h.StudioSdkPlugins_canvasScreenshot=p())})(this,function(){"use strict";const h="app.grapesjs.com",p="app-stage.grapesjs.com",E=[h,"app2.grapesjs.com",p,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],A="license:check:start",N="license:check:end",D=()=>typeof window<"u",_=(n,t={})=>{const s=j(n)?{id:n,src:n}:n;return new Promise((i,o)=>{var f,m;const{loadedScripts:r}=t,{id:c,src:a}=s,d=document.querySelector(`script[src="${a}"]`);if(d){if((f=t.onScript)==null||f.call(t,d),r&&!r.get(a)){d.addEventListener("load",()=>i(c)),d.addEventListener("error",()=>o(c));return}return i(c)}const l=window.define;window.define=void 0;const u=()=>{r==null||r.set(a,!0),window.define=l},e=document.createElement("script");e.src=a,e.onload=()=>{i(c),u()},e.onerror=()=>{o(c),u()},document.head.appendChild(e),(m=t.onScript)==null||m.call(t,e)})},O=n=>{const t=n.map(s=>_(s));return Promise.allSettled(t)},U=async n=>{const t=window.define;window.define=void 0;const s=await O(n);return window.define=t,s},$=({isDev:n,isStage:t,isPlatform:s})=>`${n?"":`https://${t?p:h}`}/${s?"platform-api":"api"}`,W=()=>{const n=D()&&window.location.hostname;return!!n&&(E.includes(n)||E.some(t=>n.endsWith(t)))},j=n=>typeof n=="string";async function L({path:n,baseApiUrl:t,method:s="GET",headers:i={},params:o,body:r}){const a=`${t||$({isDev:!1,isStage:!1})}${n}`,d={method:s,headers:{"Content-Type":"application/json",...i}};r&&(d.body=JSON.stringify(r));const l=o?new URLSearchParams(o).toString():"",u=l?`?${l}`:"",e=await fetch(`${a}${u}`,d);if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);return e.json()}var w=(n=>(n.free="free",n.startup="startup",n.business="business",n.enterprise="enterprise",n))(w||{});const I={[w.free]:0,[w.startup]:10,[w.business]:20,[w.enterprise]:30};function x(n){const t=n;return t.init=s=>i=>n(i,s),t}const M=n=>x(n);async function C({editor:n,plan:t,pluginName:s,licenseKey:i,onLicenseCheckResponse:o,cleanup:r}){let c="",a=!1;const d=W(),l=e=>{console.warn("Cleanup plugin:",s,"Reason:",e),r()},u=(e={})=>{var T;const{error:f,sdkLicense:m}=e,g=(T=e.plan)==null?void 0:T.category;if(!(m||e.license)||f)l(f||"Invalid license");else if(g){const S=I[t],v=I[g];S>v&&l({pluginRequiredPlan:t,licensePlan:g})}};n.on(A,e=>{c=e==null?void 0:e.baseApiUrl,a=!0}),n.on(N,e=>{o==null||o(e),u(e)}),setTimeout(async()=>{if(!a){if(d)return;if(i){const e=await G({licenseKey:i,pluginName:s,baseApiUrl:c});o==null||o(e),e&&u(e)}else l("The `licenseKey` option not provided")}},2e3)}async function G(n){const{licenseKey:t,pluginName:s,baseApiUrl:i}=n;try{return(await L({baseApiUrl:i,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const H="canvasScreenshot",K=w.startup;var b=(n=>(n.screenshot="studioPlugin:screenshot",n))(b||{});const q=async n=>await U([{id:"html-to-image",src:n}]),B=async(n,t={},s={})=>{const{cdnScript:i}=s;if(!window.htmlToImage){if(!i)return;await q(i)}return new Promise((o,r)=>{(async()=>{try{const{canvasWidth:a,canvasHeight:d,width:l,height:u,type:e,quality:f,addOptions:m}=t,g={pixelRatio:1,width:l,height:u,canvasWidth:a,canvasHeight:d},P=(m==null?void 0:m(g))||g,S=await window.htmlToImage.toCanvas(n,P);S.toBlob(v=>{v?o({file:v,canvas:S}):r(new Error("Failed to create file from canvas"))},e,f)}catch(a){r(a)}})()})},y=b.screenshot;return M(function(n,t={}){const{Commands:s,Canvas:i,Storage:o}=n,r=o.events.afterStore,c={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...t};s.add(y,async(l,u,e)=>{const{el:f,...m}=e;return await B(f,m,c)});const a=async()=>{var u;const l=i.getBody();if(!l)return n.log("Canvas element not found");try{const e=await n.runCommand(y,{el:l,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(u=c.screenshotOnSave)==null||u.call(c,{...e,editor:n})}catch(e){console.error("Screenshot error",e)}};c.screenshotOnSave&&n.on(r,a);const d=()=>{delete s.commands[y],n.off(r,a)};C({editor:n,licenseKey:t.licenseKey,plan:K,pluginName:H,cleanup:d})})});