@grapesjs/studio-sdk-plugins 1.0.35 → 1.0.36

package/dist/canvasGridMode/index.umd.js

@@ -1,4 +1,4 @@
-(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=`
+(function(x,P){typeof exports=="object"&&typeof module<"u"?module.exports=P():typeof define=="function"&&define.amd?define(P):(x=typeof globalThis<"u"?globalThis:x||self,x.StudioSdkPlugins_canvasGridMode=P())})(this,function(){"use strict";const x="app.grapesjs.com",P="app-stage.grapesjs.com",W=[x,"app2.grapesjs.com",P,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],rt="license:check:end",st=()=>typeof window<"u",at=({isDev:t,isStage:e,isPlatform:r})=>`${t?"":`https://${e?P:x}`}/${r?"platform-api":"api"}`,it=()=>{const t=st()&&window.location.hostname;return!!t&&(W.includes(t)||W.some(e=>t.endsWith(e)))};function U(t){return typeof t=="function"}async function lt({path:t,baseApiUrl:e,method:r="GET",headers:n={},params:o,body:i}){const a=`${e||at({isDev:!1,isStage:!1})}${t}`,p={method:r,headers:{"Content-Type":"application/json",...n}};i&&(p.body=JSON.stringify(i));const d=o?new URLSearchParams(o).toString():"",c=d?`?${d}`:"",l=await fetch(`${a}${c}`,p);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var G=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(G||{}),L=(t=>(t.toastAdd="studio:toastAdd",t.toastRemove="studio:toastRemove",t.dialogOpen="studio:dialogOpen",t.dialogClose="studio:dialogClose",t.dialogExportCode="studio:dialogExportCode",t.dialogImportCode="studio:dialogImportCode",t.sidebarLeftSet="studio:sidebarLeft:set",t.sidebarLeftGet="studio:sidebarLeft:get",t.sidebarLeftToggle="studio:sidebarLeft:toggle",t.sidebarRightSet="studio:sidebarRight:set",t.sidebarRightGet="studio:sidebarRight:get",t.sidebarRightToggle="studio:sidebarRight:toggle",t.sidebarTopSet="studio:sidebarTop:set",t.sidebarTopGet="studio:sidebarTop:get",t.sidebarTopToggle="studio:sidebarTop:toggle",t.sidebarBottomSet="studio:sidebarBottom:set",t.sidebarBottomGet="studio:sidebarBottom:get",t.sidebarBottomToggle="studio:sidebarBottom:toggle",t.symbolAdd="studio:symbolAdd",t.symbolDetach="studio:symbolDetach",t.symbolOverride="studio:symbolOverride",t.symbolPropagateStyles="studio:propagateStyles",t.getPagesConfig="studio:getPagesConfig",t.setPagesConfig="studio:setPagesConfig",t.getPageSettings="studio:getPageSettings",t.setPageSettings="studio:setPageSettings",t.clearPage="studio:clearPage",t.projectFiles="studio:projectFiles",t.validateCode="studio:validateCode",t.canvasReload="studio:canvasReload",t.getBlocksPanel="studio:getBlocksPanel",t.setBlocksPanel="studio:setBlocksPanel",t.getStateContextMenu="studio:getStateContextMenu",t.setStateContextMenu="studio:setStateContextMenu",t.contextMenuComponent="studio:contextMenuComponent",t.layoutAdd="studio:layoutAdd",t.layoutRemove="studio:layoutRemove",t.layoutToggle="studio:layoutToggle",t.layoutUpdate="studio:layoutUpdate",t.layoutGet="studio:layoutGet",t.layoutConfigGet="studio:layoutConfigGet",t.layoutConfigSet="studio:layoutConfigSet",t.layoutComponentAdd="studio:layoutComponentAdd",t.layoutComponentGet="studio:layoutComponentGet",t.layoutComponentRemove="studio:layoutComponentRemove",t.layoutComponentRender="studio:layoutComponentRender",t.getStateTheme="studio:getStateTheme",t.setStateTheme="studio:setStateTheme",t.settings="studio:settings",t.assetProviderGet="studio:assetProviderGet",t.assetProviderAdd="studio:assetProviderAdd",t.assetProviderRemove="studio:assetProviderRemove",t.fontGet="studio:fontGet",t.fontAdd="studio:fontAdd",t.fontRemove="studio:fontRemove",t.fontManagerOpen="studio:fontManagerOpen",t.menuFontLoad="studio:menuFontLoad",t.toggleStateDataSource="studio:toggleStateDataSource",t.getStateDataSource="studio:getStateDataSource",t.dataSourceSetGlobalData="studio:dataSourceSetGlobalData",t.dataSourceSetImporter="studio:dataSourceSetImporter",t.dataSourceSetExporter="studio:dataSourceSetExporter",t.setDragAbsolute="studio:setDragAbsolute",t))(L||{});const k={[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="",a;const p=l=>{console.warn("Cleanup plugin:",r,"Reason:",l),i()},d=(l={})=>{var w;const{error:g,sdkLicense:u}=l,h=(w=l.plan)==null?void 0:w.category;if(!(u||l.license)||g)p(g||"Invalid license");else if(h){const v=k[e],R=k[h];v>R&&p({pluginRequiredPlan:e,licensePlan:h})}};t.Commands.has(L.settings)&&(a=t.runCommand(L.settings),s=(a==null?void 0:a.baseUrl)||"");const c=l=>{o==null||o(l),l&&d(l)};if(!a){t.onReady(async()=>{if(!it())if(n){const l=await ut({licenseKey:n,pluginName:r,baseApiUrl:s});c(l)}else p("The `licenseKey` option not provided")});return}if(a.licensePlan||a.licenseError){const l=gt(a);c(l);return}t.on(rt,l=>c(l))}const gt=t=>({sdkLicense:t.license,license:t.license,error:t.licenseError,plan:t.licensePlan});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",ft=G.startup,O="component-grid-mode",D="grid-mode",M="gjs-drag-grid-spot",q=`${M}__grid-item`,Y=`${M}__grid-target`,H=`${M}__snapped`,mt=`${M}__container`,yt=()=>{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};
@@ -8,14 +8,14 @@
             height: 100%;
             opacity: 0.1;
         }
-        .${Y} {
+        .${H} {
             width: 100%;
             height: 100%;
             outline: 2px solid ${n};
             outline-offset: -2px;
             position: absolute;
         }
-        .${H} {
+        .${Y} {
             position: absolute;
             z-index: -1;
             background: ${r};
@@ -23,4 +23,4 @@
             outline-offset: -1px;
             opacity: 0.35;
         }
-    `,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})})});
+    `,e.head.appendChild(o)};function X(t){const{editor:e,type:r}=t,n=St(e,t.component),o=F(e,n.component);if(!$t(e,n,o,r))return{target:n,container:o,startScroll:Z(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:D,component:o.component})}}function K(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:n,shadowContainerEl:o,spotEl:i,target:s,container:a}=t,{Canvas:p}=e,d=e.config.stylePrefix;i==null||i.appendChild(o),o==null||o.appendChild(r),o==null||o.appendChild(n),ht(o,a),wt(r,s,a),bt(n,s),vt(o,a.el),s.el.style.opacity="0";const c=p.getSpots().filter(l=>l.type!==D);e.em.stopDefault({preserveSelected:!0}),p.removeSpots(c),p.startAutoscroll(),p.getBody().classList.add(`${d}is__grabbing`)}function J(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:n,target:o,cancelled:i}=t,{Canvas:s}=e,a=e.config.stylePrefix,{component:p}=o;if(!i){const d=window.getComputedStyle(r);p.addStyle({"grid-area":d.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(`${a}is__grabbing`),s.removeSpots({type:D}),e.select(p)}function ht(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 wt(t,e,r){return t.className=Y,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 bt(t,e){const r=tt(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 vt(t,e){const r=window.getComputedStyle(e);t.className=mt,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 Q(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function St(t,e){const r=Q(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 F(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 T(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 Z(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 B(t,e,r={}){const n=Q(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,a=window.getComputedStyle(i).display==="grid";return U(s)?s({component:n,parent:o,isParentGrid:a}):a}const V=t=>t.split(" ").map(e=>parseFloat(e));function tt(t,e){const r=t.ownerDocument.defaultView,n=e||r.getComputedStyle(t),o=n.gridArea.split("/").some(b=>isNaN(parseInt(b.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,a=r.getComputedStyle(s),p=parseFloat(a.columnGap)||0,d=parseFloat(a.rowGap)||0,c=V(a.gridTemplateColumns),l=V(a.gridTemplateRows),g=parseFloat(a.paddingLeft)||0,u=parseFloat(a.paddingTop)||0,h=s.getBoundingClientRect(),m=t.getBoundingClientRect(),w=(b,S,E,$,_)=>{let I=1,A=$+_;for(let C=0;C<S.length;C++){const j=S[C],nt=A+j;if(b>=A&&b<nt)return I;A=nt+E,I++}return-1},v=w(m.left,c,p,h.left,g),R=w(m.right-1,c,p,h.left,g)+1,y=w(m.top,l,d,h.top,u),f=w(m.bottom-1,l,d,h.top,u)+1;return{...i,row:{start:y,end:f},column:{start:v,end:R}}}function Rt(t){t.Commands.add(O,{stop(){},run(e,r,n={}){const o=X({editor:e,component:n.target,type:"draggable"});if(!o){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:a,shadowSnappedEl:p,shadowTargetEl:d,startScroll:c}=o;let{container:l}=o,g;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{g=setTimeout(()=>{K({editor:e,shadowTargetEl:d,shadowSnappedEl:p,shadowContainerEl:a,spotEl:i.attributes.spotEl,target:s,container:l}),l=F(e,s.component)},10)},onEnd:(h,m,{cancelled:w})=>{clearTimeout(g),J({editor:e,shadowSnappedEl:p,shadowContainerEl:a,target:s,cancelled:w}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:m})=>{const{scroll:w}=Z(e),{columns:v,rows:R,gap:y,offset:f,padding:b}=l,{offset:S,margin:E}=s,$=S.top-f.top-b.top-E.top+m-c.top+w.top,_=S.left-f.left-b.left-E.left+h-c.left+w.left,I=Math.min(T(v,1,_,y.column,.5),v.length),A=Math.min(T(R,1,$,y.row,.5),R.length),C=Math.min(T(v,I,S.width,y.column)+1,v.length+1),j=Math.min(T(R,A,S.height,y.row)+1,R.length+1);p.style.gridArea=`${A} / ${I} / ${j} / ${C}`,d.style.top=`${$+b.top}px`,d.style.left=`${_+b.left}px`}}).start(n.event)}})}function Tt(t,e){const r=X({editor:t,component:e.component,type:"resizable"});if(!r)return;const{onMove:n,onEnd:o}=e.options||{},{spot:i,target:s,shadowContainerEl:a,shadowSnappedEl:p,shadowTargetEl:d}=r;let{container:c}=r,l="",g;return{onStart:u=>{l=u.target.dataset.gjsHandler||"",g=setTimeout(()=>{K({editor:t,shadowTargetEl:d,shadowSnappedEl:p,shadowContainerEl:a,spotEl:i.attributes.spotEl,target:s,container:c}),c=F(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(u,h)=>{const{startDim:m,rectDim:w}=h.resizer,v=JSON.stringify(m)===JSON.stringify(w);clearTimeout(g),J({editor:t,shadowSnappedEl:p,shadowContainerEl:a,target:s,cancelled:v}),o==null||o(u,h)},onMove:(u,h)=>{const m=tt(p),w=s.margin.left,v=s.margin.top,R=s.margin.bottom,y=s.margin.right,{w:f,t:b,l:S,h:E}=h.resizer.rectDim,$={t:b-v,l:S-w,h:E+v+R,w:f+w+y};l.endsWith("l")&&(m.column.start=T(c.columns,1,$.l-c.offset.left-c.padding.left,c.gap.column,.5)),l.startsWith("t")&&(m.row.start=T(c.rows,1,$.t-c.offset.top-c.padding.top,c.gap.row,.5)),l.endsWith("r")&&(m.column.end=Math.max(T(c.columns,m.column.start,$.w,c.gap.column,.5),m.column.start+1)),l.startsWith("b")&&(m.row.end=Math.max(T(c.rows,m.row.start,$.h,c.gap.row,.5),m.row.start+1)),p.style.gridArea=`${m.row.start} / ${m.column.start} / ${m.row.end} / ${m.column.end}`,d.style.width=`${$.w}px`,d.style.height=`${$.h}px`,d.style.left=`${$.l-c.offset.left}px`,d.style.top=`${$.t-c.offset.top}px`,n==null||n(u,h)}}}const et=["px","%","em","rem","vw","vh"],xt=(t,e)=>{const r=t.Styles.getSectors().find(n=>!!n.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},Pt=(t,e)=>xt(t,e),Gt=(t,{x:e,y:r,mergable:n}={})=>{const o={property:`${t}-x`,type:"integer",units:et,...e},i={property:`${t}-y`,type:"integer",units:et,...r};return{property:t,type:"composite",properties:[o,i],...n&&{fromStyle(s,{name:a,separator:p,property:d}){const[c,l]=d.getProperties(),[g,u]=(s[a]||"").split(p);return{[c.getId()]:s[c.getName()]||g||"",[l.getId()]:s[l.getName()]||u||g||""}},toStyle(s,{name:a,property:p}){const[d,c]=p.getProperties(),l=s[d.getId()],g=s[c.getId()];return{[a]:l===g?l:`${l} ${g}`}}}}},z={display:["grid"]};function Et(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,a=i;const p=i.match(r);return p&&(s=p[1],a=p[2]),{total:o,min:s===a?"":s,max:a}}function At(t={}){let e="",r="",n="",o="";const i=m=>m.split("/").map(w=>w.trim()).filter(Boolean),s=t["grid-area"]||"",a=t["grid-column"]||"",p=t["grid-row"]||"",d=i(s),c=i(a),l=i(p),g=d.length,u=c.length,h=l.length;return g===4?(n=d[0],e=d[1],o=d[2],r=d[3]):g===3?(n=d[0],e=d[1],o=d[2]):g===2?(n=d[0],e=d[1]):g===1&&(n=d[0]),u===2?(e=c[0],r=c[1]):u===1&&(e=c[0]),h===2?(n=l[0],o=l[1]):h===1&&(n=l[0]),{columnStart:e,columnEnd:r,rowStart:n,rowEnd:o}}function ot(t){const{property:e,label:r}=t,n="1",o="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:a,property:p}=s,[d,c,l]=p.getProperties(),g=i[a],u=Et(g),h=(u==null?void 0:u.max)??o;return{[d.id]:(u==null?void 0:u.total)??n,[c.id]:(u==null?void 0:u.min)??"",[l.id]:h===o?"":h}},toStyle(i,{name:s,property:a}){const[p,d,c]=a.getProperties(),l=i[p.id],g=i[d.id],u=i[c.id]||o,h=g&&u?`minmax(${g}, ${u})`:u;return{[s]:`repeat(${l||n}, ${h})`}}}}function Dt(t,e){if(!e.styleableGrid)return;const{property:r,...n}=Pt(t,"display");if(!r)return;const o=r.getOption("grid"),i=n.sector;o||r.addOption({id:"grid",label:"Grid"}),i.addProperty(ot({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(ot({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:z,...Gt("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 a=At(s);return{"grid-column-start":s["grid-column-start"]||a.columnStart,"grid-column-end":s["grid-column-end"]||a.columnEnd,"grid-row-start":s["grid-row-start"]||a.rowStart,"grid-row-end":s["grid-row-end"]||a.rowEnd}},toStyle(s,{name:a}){const p=s["grid-row-start"]||"auto",d=s["grid-row-end"]||"auto",c=s["grid-column-start"]||"auto",l=s["grid-column-end"]||"auto";return{[a]:`${p} / ${c} / ${d} / ${l}`}}},{})}return pt(function(t,e={}){const r={itemResizable:!0,...e},{Canvas:n,Commands:o,Components:i}=t,{itemResizable:s}=r,a=n.events,p=o.events,d=i.events,c=`${p.runBeforeCommand}tlb-move`,l=`${p.runBeforeCommand}resize`;let g;Rt(t);const u=({options:y})=>{B(t,y.target,r)&&(t.runCommand(O,{...y}),y.abort=!0)},h=y=>{const{options:f}=y;B(t,f.component,r)&&(f.options=Object.assign(f.options||{},Tt(t,f)))},m=()=>{const y=n.getSpots({type:D}).pop();if(!y)return;let f=y.attributes.spotEl;f||(f=document.createElement("div"),f.className=M,y.set({spotEl:f})),Object.entries(y.getStyle()).forEach(([b,S])=>f.style.setProperty(b,S)),g==null||g.appendChild(f)},w=({spot:y})=>{const f=y.attributes.spotEl;y.type!==D||!f||g==null||g.removeChild(f)};if(s){const y=f=>{const b=U(s)?s({component:f}):s;return typeof b=="boolean"?b:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...b}};t.on(d.resizeInit,f=>{const{component:b}=f;if(B(t,b,r)){const S=y(b);f.resizable=S}})}const v=[[c,u],[l,h],[a.spot,m],[a.spotRemove,w]];v.forEach(([y,f])=>{t.on(y,f)}),t.onReady(()=>{g=n.getSpotsEl(),yt(),Dt(t,r)});const R=()=>{delete t.Commands.commands[O],v.forEach(([y,f])=>{t.off(y,f)})};dt({editor:t,licenseKey:r.licenseKey,plan:ft,pluginName:N,cleanup:R})})});

package/dist/canvasScreenshot/index.cjs.js

@@ -1 +1 @@
-"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;
+"use strict";const D="app.grapesjs.com",L="app-stage.grapesjs.com",G="app2.grapesjs.com",I="app-stage2.grapesjs.com",A=[D,G,L,I,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],x="license:check:end",O=()=>typeof window<"u",B=(e,o={})=>{const n=j(e)?{id:e,src:e}:e;return new Promise((r,a)=>{var p,d;const{loadedScripts:i}=o,{id:c,src:s}=n,l=document.querySelector(`script[src="${s}"]`);if(l){if((p=o.onScript)==null||p.call(o,l),i&&!i.get(s)){l.addEventListener("load",()=>r(c)),l.addEventListener("error",()=>a(c));return}return r(c)}const u=window.define;window.define=void 0;const g=()=>{i==null||i.set(s,!0),window.define=u},t=document.createElement("script");t.src=s,t.onload=()=>{r(c),g()},t.onerror=()=>{a(c),g()},document.head.appendChild(t),(d=o.onScript)==null||d.call(o,t)})},M=e=>{const o=e.map(n=>B(n));return Promise.allSettled(o)},N=async e=>{const o=window.define;window.define=void 0;const n=await M(e);return window.define=o,n},U=({isDev:e,isStage:o,isPlatform:n})=>`${e?"":`https://${o?L:D}`}/${n?"platform-api":"api"}`,$=()=>{const e=O()&&window.location.hostname;return!!e&&(A.includes(e)||A.some(o=>e.endsWith(o)))},j=e=>typeof e=="string";async function _({path:e,baseApiUrl:o,method:n="GET",headers:r={},params:a,body:i}){const s=`${o||U({isDev:!1,isStage:!1})}${e}`,l={method:n,headers:{"Content-Type":"application/json",...r}};i&&(l.body=JSON.stringify(i));const u=a?new URLSearchParams(a).toString():"",g=u?`?${u}`:"",t=await fetch(`${s}${g}`,l);if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);return t.json()}var h=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(h||{}),P=(e=>(e.toastAdd="studio:toastAdd",e.toastRemove="studio:toastRemove",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.dialogExportCode="studio:dialogExportCode",e.dialogImportCode="studio:dialogImportCode",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.clearPage="studio:clearPage",e.projectFiles="studio:projectFiles",e.validateCode="studio:validateCode",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.layoutComponentAdd="studio:layoutComponentAdd",e.layoutComponentGet="studio:layoutComponentGet",e.layoutComponentRemove="studio:layoutComponentRemove",e.layoutComponentRender="studio:layoutComponentRender",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.settings="studio:settings",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.fontManagerOpen="studio:fontManagerOpen",e.menuFontLoad="studio:menuFontLoad",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e.dataSourceSetGlobalData="studio:dataSourceSetGlobalData",e.dataSourceSetImporter="studio:dataSourceSetImporter",e.dataSourceSetExporter="studio:dataSourceSetExporter",e.setDragAbsolute="studio:setDragAbsolute",e))(P||{});const R={[h.free]:0,[h.startup]:10,[h.business]:20,[h.enterprise]:30};function W(e){const o=e;return o.init=n=>r=>e(r,n),o}const k=e=>W(e);async function F({editor:e,plan:o,pluginName:n,licenseKey:r,onLicenseCheckResponse:a,cleanup:i}){let c="",s;const l=t=>{console.warn("Cleanup plugin:",n,"Reason:",t),i()},u=(t={})=>{var v;const{error:p,sdkLicense:d}=t,f=(v=t.plan)==null?void 0:v.category;if(!(d||t.license)||p)l(p||"Invalid license");else if(f){const y=R[o],b=R[f];y>b&&l({pluginRequiredPlan:o,licensePlan:f})}};e.Commands.has(P.settings)&&(s=e.runCommand(P.settings),c=(s==null?void 0:s.baseUrl)||"");const g=t=>{a==null||a(t),t&&u(t)};if(!s){e.onReady(async()=>{if(!$())if(r){const t=await K({licenseKey:r,pluginName:n,baseApiUrl:c});g(t)}else l("The `licenseKey` option not provided")});return}if(s.licensePlan||s.licenseError){const t=H(s);g(t);return}e.on(x,t=>g(t))}const H=e=>({sdkLicense:e.license,license:e.license,error:e.licenseError,plan:e.licensePlan});async function K(e){const{licenseKey:o,pluginName:n,baseApiUrl:r}=e;try{return(await _({baseApiUrl:r,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const S="canvasScreenshot",q=h.startup;var E=(e=>(e.screenshot="studioPlugin:screenshot",e))(E||{});const J=async e=>await N([{id:"html-to-image",src:e}]),z=async(e,o={},n={})=>{const{cdnScript:r}=n;if(!window.htmlToImage){if(!r)return;await J(r)}return new Promise((a,i)=>{(async()=>{try{const{canvasWidth:s,canvasHeight:l,width:u,height:g,type:t,quality:p,addOptions:d}=o,f={pixelRatio:1,width:u,height:g,canvasWidth:s,canvasHeight:l},T=(d==null?void 0:d(f))||f,y=await window.htmlToImage.toCanvas(e,T);y.toBlob(b=>{b?a({file:b,canvas:y}):i(new Error("Failed to create file from canvas"))},t,p)}catch(s){i(s)}})()})},w=E.screenshot,Q=function(e,o={}){const{Commands:n,Canvas:r,Storage:a}=e,i=a.events.afterStore,c={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...o};n.add(w,async(u,g,t)=>{const{el:p,...d}=t;return await z(p,d,c)});const s=async()=>{var g;const u=r.getBody();if(!u)return e.log("Canvas element not found");try{const t=await e.runCommand(w,{el:u,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(g=c.screenshotOnSave)==null||g.call(c,{...t,editor:e})}catch(t){console.error("Screenshot error",t)}};c.screenshotOnSave&&e.on(i,s);const l=()=>{delete n.commands[w],e.off(i,s)};F({editor:e,licenseKey:o.licenseKey,plan:q,pluginName:S,cleanup:l})},V=k(Q);module.exports=V;

package/dist/canvasScreenshot/index.es.js

@@ -1,8 +1,8 @@
-const I = "app.grapesjs.com", T = "app-stage.grapesjs.com", N = "app2.grapesjs.com", A = "app-stage2.grapesjs.com", E = [
+const D = "app.grapesjs.com", L = "app-stage.grapesjs.com", G = "app2.grapesjs.com", I = "app-stage2.grapesjs.com", A = [
+  D,
+  G,
+  L,
   I,
-  N,
-  T,
-  A,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,180 +11,193 @@ const I = "app.grapesjs.com", T = "app-stage.grapesjs.com", N = "app2.grapesjs.c
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], 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));
+], x = "license:check:end", O = () => typeof window < "u", B = (e, o = {}) => {
+  const n = j(e) ? { id: e, src: e } : e;
+  return new Promise((r, a) => {
+    var p, d;
+    const { loadedScripts: i } = o, { id: c, src: s } = n, l = document.querySelector(`script[src="${s}"]`);
+    if (l) {
+      if ((p = o.onScript) == null || p.call(o, l), i && !i.get(s)) {
+        l.addEventListener("load", () => r(c)), l.addEventListener("error", () => a(c));
         return;
       }
-      return a(c);
+      return r(c);
     }
-    const l = window.define;
+    const u = window.define;
     window.define = void 0;
-    const u = () => {
-      r == null || r.set(i, !0), window.define = l;
+    const g = () => {
+      i == null || i.set(s, !0), window.define = u;
     }, t = document.createElement("script");
-    t.src = i, t.onload = () => {
-      a(c), u();
+    t.src = s, t.onload = () => {
+      r(c), g();
     }, t.onerror = () => {
-      o(c), u();
-    }, document.head.appendChild(t), (m = e.onScript) == null || m.call(e, t);
+      a(c), g();
+    }, document.head.appendChild(t), (d = o.onScript) == null || d.call(o, t);
   });
-}, W = (n) => {
-  const e = n.map((s) => $(s));
-  return Promise.allSettled(e);
-}, O = async (n) => {
-  const e = window.define;
+}, M = (e) => {
+  const o = e.map((n) => B(n));
+  return Promise.allSettled(o);
+}, N = async (e) => {
+  const o = window.define;
   window.define = void 0;
-  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: a = {},
-  params: o,
-  body: r
+  const n = await M(e);
+  return window.define = o, n;
+}, U = ({
+  isDev: e,
+  isStage: o,
+  isPlatform: n
+}) => `${e ? "" : `https://${o ? L : D}`}/${n ? "platform-api" : "api"}`, $ = () => {
+  const e = O() && window.location.hostname;
+  return !!e && (A.includes(e) || A.some((o) => e.endsWith(o)));
+}, j = (e) => typeof e == "string";
+async function _({
+  path: e,
+  baseApiUrl: o,
+  method: n = "GET",
+  headers: r = {},
+  params: a,
+  body: i
 }) {
-  const i = `${e || j({ isDev: !1, isStage: !1 })}${n}`, d = {
-    method: s,
+  const s = `${o || U({ isDev: !1, isStage: !1 })}${e}`, l = {
+    method: n,
     headers: {
       "Content-Type": "application/json",
-      ...a
+      ...r
     }
   };
-  r && (d.body = JSON.stringify(r));
-  const l = o ? new URLSearchParams(o).toString() : "", u = l ? `?${l}` : "", t = await fetch(`${i}${u}`, d);
+  i && (l.body = JSON.stringify(i));
+  const u = a ? new URLSearchParams(a).toString() : "", g = u ? `?${u}` : "", t = await fetch(`${s}${g}`, l);
   if (!t.ok)
     throw new Error(`HTTP error! status: ${t.status}`);
   return t.json();
 }
-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
+var h = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(h || {}), P = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.toastRemove = "studio:toastRemove", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.dialogExportCode = "studio:dialogExportCode", e.dialogImportCode = "studio:dialogImportCode", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.clearPage = "studio:clearPage", e.projectFiles = "studio:projectFiles", e.validateCode = "studio:validateCode", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.layoutComponentAdd = "studio:layoutComponentAdd", e.layoutComponentGet = "studio:layoutComponentGet", e.layoutComponentRemove = "studio:layoutComponentRemove", e.layoutComponentRender = "studio:layoutComponentRender", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.settings = "studio:settings", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e.fontManagerOpen = "studio:fontManagerOpen", e.menuFontLoad = "studio:menuFontLoad", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", e.dataSourceSetImporter = "studio:dataSourceSetImporter", e.dataSourceSetExporter = "studio:dataSourceSetExporter", e.setDragAbsolute = "studio:setDragAbsolute", e))(P || {});
+const R = {
+  [h.free]: 0,
+  [h.startup]: 10,
+  [h.business]: 20,
+  [h.enterprise]: 30
 };
-function K(n) {
-  const e = n;
-  return e.init = (s) => (a) => n(a, s), e;
+function W(e) {
+  const o = e;
+  return o.init = (n) => (r) => e(r, n), o;
 }
-const x = (n) => /* @__PURE__ */ K(n);
-async function G({
-  editor: n,
-  plan: e,
-  pluginName: s,
-  licenseKey: a,
-  onLicenseCheckResponse: o,
-  cleanup: r
+const k = (e) => /* @__PURE__ */ W(e);
+async function F({
+  editor: e,
+  plan: o,
+  pluginName: n,
+  licenseKey: r,
+  onLicenseCheckResponse: a,
+  cleanup: i
 }) {
-  let c = "", i = !1;
-  const d = L(), l = (t) => {
-    console.warn("Cleanup plugin:", s, "Reason:", t), r();
+  let c = "", s;
+  const l = (t) => {
+    console.warn("Cleanup plugin:", n, "Reason:", t), i();
   }, u = (t = {}) => {
-    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");
+    var v;
+    const { error: p, sdkLicense: d } = t, f = (v = t.plan) == null ? void 0 : v.category;
+    if (!(d || t.license) || p)
+      l(p || "Invalid license");
     else if (f) {
-      const w = b[e], g = b[f];
-      w > g && l({ pluginRequiredPlan: e, licensePlan: f });
+      const y = R[o], b = R[f];
+      y > b && l({ pluginRequiredPlan: o, licensePlan: f });
     }
   };
-  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 (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);
+  e.Commands.has(P.settings) && (s = e.runCommand(P.settings), c = (s == null ? void 0 : s.baseUrl) || "");
+  const g = (t) => {
+    a == null || a(t), t && u(t);
+  };
+  if (!s) {
+    e.onReady(async () => {
+      if (!$())
+        if (r) {
+          const t = await K({ licenseKey: r, pluginName: n, baseApiUrl: c });
+          g(t);
+        } else
+          l("The `licenseKey` option not provided");
+    });
+    return;
+  }
+  if (s.licensePlan || s.licenseError) {
+    const t = H(s);
+    g(t);
+    return;
+  }
+  e.on(x, (t) => g(t));
 }
-async function M(n) {
-  const { licenseKey: e, pluginName: s, baseApiUrl: a } = n;
+const H = (e) => ({
+  sdkLicense: e.license,
+  license: e.license,
+  error: e.licenseError,
+  plan: e.licensePlan
+});
+async function K(e) {
+  const { licenseKey: o, pluginName: n, baseApiUrl: r } = e;
   try {
-    return (await H({
-      baseApiUrl: a,
-      path: `/sdk/${e || "na"}`,
+    return (await _({
+      baseApiUrl: r,
+      path: `/sdk/${o || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
-        pn: s
+        pn: n
       }
     })).result || {};
-  } catch (o) {
-    return console.error("Error during SDK license check:", o), !1;
+  } catch (a) {
+    return console.error("Error during SDK license check:", a), !1;
   }
 }
-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;
+const S = "canvasScreenshot", q = h.startup;
+var E = /* @__PURE__ */ ((e) => (e.screenshot = "studioPlugin:screenshot", e))(E || {});
+const J = async (e) => await N([{ id: "html-to-image", src: e }]), z = async (e, o = {}, n = {}) => {
+  const { cdnScript: r } = n;
   if (!window.htmlToImage) {
-    if (!a) return;
-    await F(a);
+    if (!r) return;
+    await J(r);
   }
-  return new Promise((o, r) => {
+  return new Promise((a, i) => {
     (async () => {
       try {
-        const { canvasWidth: i, canvasHeight: d, width: l, height: u, type: t, quality: h, addOptions: m } = e, f = {
+        const { canvasWidth: s, canvasHeight: l, width: u, height: g, type: t, quality: p, addOptions: d } = o, f = {
           pixelRatio: 1,
-          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(
-          (g) => {
-            g ? o({
-              file: g,
-              canvas: w
-            }) : r(new Error("Failed to create file from canvas"));
+          width: u,
+          height: g,
+          canvasWidth: s,
+          canvasHeight: l
+        }, T = (d == null ? void 0 : d(f)) || f, y = await window.htmlToImage.toCanvas(e, T);
+        y.toBlob(
+          (b) => {
+            b ? a({
+              file: b,
+              canvas: y
+            }) : i(new Error("Failed to create file from canvas"));
           },
           t,
-          h
+          p
         );
-      } catch (i) {
-        r(i);
+      } catch (s) {
+        i(s);
       }
     })();
   });
-}, v = P.screenshot, k = function(n, e = {}) {
-  const { Commands: s, Canvas: a, Storage: o } = n, r = o.events.afterStore, c = {
+}, w = E.screenshot, Q = function(e, o = {}) {
+  const { Commands: n, Canvas: r, Storage: a } = e, i = a.events.afterStore, c = {
     cdnScript: "https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",
-    ...e
+    ...o
   };
-  s.add(v, async (l, u, t) => {
-    const { el: h, ...m } = t;
-    return await J(h, m, c);
+  n.add(w, async (u, g, t) => {
+    const { el: p, ...d } = t;
+    return await z(p, d, c);
   });
-  const i = async () => {
-    var u;
-    const l = a.getBody();
-    if (!l)
-      return n.log("Canvas element not found");
+  const s = async () => {
+    var g;
+    const u = r.getBody();
+    if (!u)
+      return e.log("Canvas element not found");
     try {
-      const t = await n.runCommand(v, {
-        el: l,
+      const t = await e.runCommand(w, {
+        el: u,
         canvasWidth: 400,
         // max element width for the screenshot
         canvasHeight: 225,
@@ -195,23 +208,23 @@ const F = async (n) => await O([{ id: "html-to-image", src: n }]), J = async (n,
         //  1200 / (16/9) - 16:9 aspect ratio
         type: "image/jpeg"
       });
-      (u = c.screenshotOnSave) == null || u.call(c, { ...t, editor: n });
+      (g = c.screenshotOnSave) == null || g.call(c, { ...t, editor: e });
     } catch (t) {
       console.error("Screenshot error", t);
     }
   };
-  c.screenshotOnSave && n.on(r, i);
-  const d = () => {
-    delete s.commands[v], n.off(r, i);
+  c.screenshotOnSave && e.on(i, s);
+  const l = () => {
+    delete n.commands[w], e.off(i, s);
   };
-  G({
-    editor: n,
-    licenseKey: e.licenseKey,
-    plan: B,
-    pluginName: q,
-    cleanup: d
+  F({
+    editor: e,
+    licenseKey: o.licenseKey,
+    plan: q,
+    pluginName: S,
+    cleanup: l
   });
-}, z = x(k);
+}, V = k(Q);
 export {
-  z as default
+  V as default
 };

package/dist/canvasScreenshot/index.umd.js

@@ -1 +1 @@
-(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})})});
+(function(f,h){typeof exports=="object"&&typeof module<"u"?module.exports=h():typeof define=="function"&&define.amd?define(h):(f=typeof globalThis<"u"?globalThis:f||self,f.StudioSdkPlugins_canvasScreenshot=h())})(this,function(){"use strict";const f="app.grapesjs.com",h="app-stage.grapesjs.com",R=[f,"app2.grapesjs.com",h,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],I="license:check:end",L=()=>typeof window<"u",O=(e,o={})=>{const n=U(e)?{id:e,src:e}:e;return new Promise((r,a)=>{var p,d;const{loadedScripts:i}=o,{id:c,src:s}=n,l=document.querySelector(`script[src="${s}"]`);if(l){if((p=o.onScript)==null||p.call(o,l),i&&!i.get(s)){l.addEventListener("load",()=>r(c)),l.addEventListener("error",()=>a(c));return}return r(c)}const g=window.define;window.define=void 0;const u=()=>{i==null||i.set(s,!0),window.define=g},t=document.createElement("script");t.src=s,t.onload=()=>{r(c),u()},t.onerror=()=>{a(c),u()},document.head.appendChild(t),(d=o.onScript)==null||d.call(o,t)})},x=e=>{const o=e.map(n=>O(n));return Promise.allSettled(o)},M=async e=>{const o=window.define;window.define=void 0;const n=await x(e);return window.define=o,n},N=({isDev:e,isStage:o,isPlatform:n})=>`${e?"":`https://${o?h:f}`}/${n?"platform-api":"api"}`,B=()=>{const e=L()&&window.location.hostname;return!!e&&(R.includes(e)||R.some(o=>e.endsWith(o)))},U=e=>typeof e=="string";async function _({path:e,baseApiUrl:o,method:n="GET",headers:r={},params:a,body:i}){const s=`${o||N({isDev:!1,isStage:!1})}${e}`,l={method:n,headers:{"Content-Type":"application/json",...r}};i&&(l.body=JSON.stringify(i));const g=a?new URLSearchParams(a).toString():"",u=g?`?${g}`:"",t=await fetch(`${s}${u}`,l);if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);return t.json()}var y=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(y||{}),P=(e=>(e.toastAdd="studio:toastAdd",e.toastRemove="studio:toastRemove",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.dialogExportCode="studio:dialogExportCode",e.dialogImportCode="studio:dialogImportCode",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.clearPage="studio:clearPage",e.projectFiles="studio:projectFiles",e.validateCode="studio:validateCode",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.layoutComponentAdd="studio:layoutComponentAdd",e.layoutComponentGet="studio:layoutComponentGet",e.layoutComponentRemove="studio:layoutComponentRemove",e.layoutComponentRender="studio:layoutComponentRender",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.settings="studio:settings",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.fontManagerOpen="studio:fontManagerOpen",e.menuFontLoad="studio:menuFontLoad",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e.dataSourceSetGlobalData="studio:dataSourceSetGlobalData",e.dataSourceSetImporter="studio:dataSourceSetImporter",e.dataSourceSetExporter="studio:dataSourceSetExporter",e.setDragAbsolute="studio:setDragAbsolute",e))(P||{});const D={[y.free]:0,[y.startup]:10,[y.business]:20,[y.enterprise]:30};function j(e){const o=e;return o.init=n=>r=>e(r,n),o}const $=e=>j(e);async function k({editor:e,plan:o,pluginName:n,licenseKey:r,onLicenseCheckResponse:a,cleanup:i}){let c="",s;const l=t=>{console.warn("Cleanup plugin:",n,"Reason:",t),i()},g=(t={})=>{var A;const{error:p,sdkLicense:d}=t,b=(A=t.plan)==null?void 0:A.category;if(!(d||t.license)||p)l(p||"Invalid license");else if(b){const v=D[o],w=D[b];v>w&&l({pluginRequiredPlan:o,licensePlan:b})}};e.Commands.has(P.settings)&&(s=e.runCommand(P.settings),c=(s==null?void 0:s.baseUrl)||"");const u=t=>{a==null||a(t),t&&g(t)};if(!s){e.onReady(async()=>{if(!B())if(r){const t=await W({licenseKey:r,pluginName:n,baseApiUrl:c});u(t)}else l("The `licenseKey` option not provided")});return}if(s.licensePlan||s.licenseError){const t=S(s);u(t);return}e.on(I,t=>u(t))}const S=e=>({sdkLicense:e.license,license:e.license,error:e.licenseError,plan:e.licensePlan});async function W(e){const{licenseKey:o,pluginName:n,baseApiUrl:r}=e;try{return(await _({baseApiUrl:r,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const F="canvasScreenshot",H=y.startup;var E=(e=>(e.screenshot="studioPlugin:screenshot",e))(E||{});const K=async e=>await M([{id:"html-to-image",src:e}]),q=async(e,o={},n={})=>{const{cdnScript:r}=n;if(!window.htmlToImage){if(!r)return;await K(r)}return new Promise((a,i)=>{(async()=>{try{const{canvasWidth:s,canvasHeight:l,width:g,height:u,type:t,quality:p,addOptions:d}=o,b={pixelRatio:1,width:g,height:u,canvasWidth:s,canvasHeight:l},G=(d==null?void 0:d(b))||b,v=await window.htmlToImage.toCanvas(e,G);v.toBlob(w=>{w?a({file:w,canvas:v}):i(new Error("Failed to create file from canvas"))},t,p)}catch(s){i(s)}})()})},T=E.screenshot;return $(function(e,o={}){const{Commands:n,Canvas:r,Storage:a}=e,i=a.events.afterStore,c={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...o};n.add(T,async(g,u,t)=>{const{el:p,...d}=t;return await q(p,d,c)});const s=async()=>{var u;const g=r.getBody();if(!g)return e.log("Canvas element not found");try{const t=await e.runCommand(T,{el:g,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(u=c.screenshotOnSave)==null||u.call(c,{...t,editor:e})}catch(t){console.error("Screenshot error",t)}};c.screenshotOnSave&&e.on(i,s);const l=()=>{delete n.commands[T],e.off(i,s)};k({editor:e,licenseKey:o.licenseKey,plan:H,pluginName:F,cleanup:l})})});