@grapesjs/studio-sdk-plugins 1.0.16 → 1.0.17

package/dist/canvasFullSize/index.cjs.js

@@ -1,5 +1,9 @@
-"use strict";function j(e,a,n){let t,o,c,p,d;const r=a;function u(){const l=Date.now()-p;l<r&&l>=0?t=setTimeout(u,r-l):(t=null,d=e.apply(c,o),c=o=null)}const s=function(){return c=this,o=arguments,p=Date.now(),t||(t=setTimeout(u,r)),d};return s.clear=function(){t&&(clearTimeout(t),t=null)},s.flush=function(){t&&(d=e.apply(c,o),c=o=null,clearTimeout(t),t=null)},s}const R="app.grapesjs.com",U="app-stage.grapesjs.com",k=[R,U,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],K="license:check:start",F="license:check:end",q=()=>typeof window<"u",V=({isDev:e,isStage:a})=>`${e?"":`https://${a?U:R}`}/api`,X=()=>{const e=q()&&window.location.hostname;return!!e&&(k.includes(e)||k.some(a=>e.endsWith(a)))};async function Y({path:e,baseApiUrl:a,method:n="GET",headers:t={},params:o,body:c}){const d=`${a||V({isDev:!1,isStage:!1})}${e}`,r={method:n,headers:{"Content-Type":"application/json",...t}};c&&(r.body=JSON.stringify(c));const u=o?new URLSearchParams(o).toString():"",s=u?`?${u}`:"",l=await fetch(`${d}${s}`,r);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var b=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(b||{});const z={[b.free]:0,[b.startup]:10,[b.business]:20,[b.enterprise]:30};function B(e){const a=e;return a.init=n=>t=>e(t,n),a}const G=e=>B(e);async function Z({editor:e,plan:a,pluginName:n,licenseKey:t,cleanup:o}){let c="",p=!1;const d=X(),r=s=>{console.warn("Cleanup plugin:",n,"Reason:",s),o()},u=(s={})=>{var C;const{error:l,sdkLicense:D}=s,y=(C=s.plan)==null?void 0:C.category;if(!(D||s.license)||l)r(l||"Invalid license");else if(y){const S=z[a],T=z[y];S>T&&r({pluginRequiredPlan:a,licensePlan:y})}};e.on(K,s=>{c=s==null?void 0:s.baseApiUrl,p=!0}),e.on(F,s=>{u(s)}),setTimeout(async()=>{if(!p){if(d)return;if(t){const s=await J({licenseKey:t,pluginName:n,baseApiUrl:c});s&&u(s)}else r("The `licenseKey` option not provided")}},2e3)}async function J(e){const{licenseKey:a,pluginName:n,baseApiUrl:t}=e;try{return(await Y({baseApiUrl:t,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const N="canvasFullSize",Q=function(e,a={}){const{Canvas:n,Commands:t,Devices:o}=e,c={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...a},{canvasOffsetY:p,canvasOffsetX:d,canvasTransition:r,deviceMaxWidth:u,deviceMinHeigth:s,frameBorderRadius:l,frameTransition:D}=c,y=`${s}px`,E=n.events,C=`${t.events.stopCommand}core:preview`,S=n.getConfig(),T=`${N}:disable`,P=o.getAll().map(i=>({...i.attributes}));S.scrollableCanvas=!0,o.getAll().map(i=>{!i.get("width")&&i.set("width",`${u}px`),!i.get("height")&&i.set("height","auto"),!i.get("minHeight")&&i.set("minHeight",y)});const L=i=>{const v="data-gs-plg-full-size",f=document.querySelector(`style[${v}]`);if(i&&f)return f.remove();const m=f||document.createElement("style"),h=n.getZoomMultiplier();m.setAttribute(v,"true"),m.innerHTML=`
+"use strict";function F(e,a,n){let t,o,c,p,m;const r=a;function u(){const l=Date.now()-p;l<r&&l>=0?t=setTimeout(u,r-l):(t=null,m=e.apply(c,o),c=o=null)}const s=function(){return c=this,o=arguments,p=Date.now(),t||(t=setTimeout(u,r)),m};return s.clear=function(){t&&(clearTimeout(t),t=null)},s.flush=function(){t&&(m=e.apply(c,o),c=o=null,clearTimeout(t),t=null)},s}const R="app.grapesjs.com",U="app-stage.grapesjs.com",z=[R,U,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],q="license:check:start",V="license:check:end",X=()=>typeof window<"u",Y=({isDev:e,isStage:a})=>`${e?"":`https://${a?U:R}`}/api`,B=()=>{const e=X()&&window.location.hostname;return!!e&&(z.includes(e)||z.some(a=>e.endsWith(a)))};async function G({path:e,baseApiUrl:a,method:n="GET",headers:t={},params:o,body:c}){const m=`${a||Y({isDev:!1,isStage:!1})}${e}`,r={method:n,headers:{"Content-Type":"application/json",...t}};c&&(r.body=JSON.stringify(c));const u=o?new URLSearchParams(o).toString():"",s=u?`?${u}`:"",l=await fetch(`${m}${s}`,r);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var b=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(b||{});const N={[b.free]:0,[b.startup]:10,[b.business]:20,[b.enterprise]:30};function Z(e){const a=e;return a.init=n=>t=>e(t,n),a}const J=e=>Z(e);async function Q({editor:e,plan:a,pluginName:n,licenseKey:t,cleanup:o}){let c="",p=!1;const m=B(),r=s=>{console.warn("Cleanup plugin:",n,"Reason:",s),o()},u=(s={})=>{var C;const{error:l,sdkLicense:D}=s,v=(C=s.plan)==null?void 0:C.category;if(!(D||s.license)||l)r(l||"Invalid license");else if(v){const E=N[a],S=N[v];E>S&&r({pluginRequiredPlan:a,licensePlan:v})}};e.on(q,s=>{c=s==null?void 0:s.baseApiUrl,p=!0}),e.on(V,s=>{u(s)}),setTimeout(async()=>{if(!p){if(m)return;if(t){const s=await ee({licenseKey:t,pluginName:n,baseApiUrl:c});s&&u(s)}else r("The `licenseKey` option not provided")}},2e3)}async function ee(e){const{licenseKey:a,pluginName:n,baseApiUrl:t}=e;try{return(await G({baseApiUrl:t,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const P="canvasFullSize",te=function(e,a={}){const{Canvas:n,Commands:t,Devices:o}=e,c={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...a},{canvasOffsetY:p,canvasOffsetX:m,canvasTransition:r,deviceMaxWidth:u,deviceMinHeigth:s,frameBorderRadius:l,frameTransition:D}=c,v=`${s}px`,$=n.events,C="core:preview",E=`${t.events.stopCommand}${C}`,S=n.getConfig(),A=`${P}:disable`,_=o.getAll().map(i=>({...i.attributes}));S.scrollableCanvas=!0,o.getAll().map(i=>{!i.get("width")&&i.set("width",`${u}px`),!i.get("height")&&i.set("height","auto"),!i.get("minHeight")&&i.set("minHeight",v)});const L=i=>{const w="data-gs-plg-full-size",d=document.querySelector(`style[${w}]`);if(i&&d)return d.remove();const f=d||document.createElement("style"),h=n.getZoomMultiplier();f.setAttribute(w,"true"),f.innerHTML=`
       .gjs-frame-wrapper { transition: width ${D}s !important; }
       .gjs-frame-wrapper__bottom { height: ${p*h}px }
       .gjs-frame { border-radius: ${l}px }
-    `,!f&&document.body.appendChild(m)};e.on(E.frameLoadHead,i=>{if(!S.scrollableCanvas)return;const{window:v}=i,f=v.document,m=f.head,h="data-gs-plg-wrapper-style",w=m.querySelector(`style[${h}]`)||f.createElement("style");w.setAttribute(h,"true"),w.innerHTML=`[data-gjs-type="wrapper"] { min-height: ${y}; }`,!m.contains(w)&&m.appendChild(w)}),e.onReady(()=>{const i=n.getSpotsEl(),v=n.getElement(),f=n.getFramesEl(),m=r*1e3,h=v.style;h.overflowX="hidden",f.style.transition=`transform ${r}s`;const w={x:d,y:p};L();const A=()=>i.style.display="none",_=()=>i.style.display="",$=j(()=>{n.fitViewport({zoom:g=>g>100?100:g,ignoreHeight:!0,gap:w}),L(),setTimeout(()=>{var g,W;e.em.destroyed||((W=(g=e.getSelected())==null?void 0:g.getEl())==null||W.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),_())},m)},100),H=new ResizeObserver(()=>{A(),$()});H.observe(v.parentElement);const M=()=>{A(),$()},O=(g={})=>{g.options&&g.options.from!=="fitViewport"&&n.fitViewport({zoom:n.getZoom(),ignoreHeight:!0,gap:w})},x=()=>{h.overflowX="hidden",h.overflowY="auto"},I=()=>{H.disconnect(),$.clear()};e.on(o.events.select,M),e.on(E.zoom,O),e.on(C,x),e.on(e.events.destroy,I),$(),t.add(T,()=>{o.devices.reset(P),S.scrollableCanvas=!1,n.getModel().updateDevice(),n.setZoom(100),n.setCoords(0,0),h.overflowY="hidden",L(!0),e.off(o.events.select,M),e.off(E.zoom,O),e.off(C,x),I(),t.run("studio:canvasReload")})}),Z({editor:e,licenseKey:c.licenseKey,plan:b.startup,pluginName:N,cleanup:()=>{e.runCommand(T)}})},ee=G(Q);module.exports=ee;
+    `,!d&&document.body.appendChild(f)};e.on($.frameLoadHead,i=>{if(!S.scrollableCanvas)return;const{window:w}=i,d=w.document,f=d.head,h="data-gs-plg-wrapper-style",y=f.querySelector(`style[${h}]`)||d.createElement("style");y.setAttribute(h,"true"),y.innerHTML=`
+      [data-gjs-type="wrapper"] { min-height: ${v}; }
+      [data-gjs-type="mjml"] { min-height: ${v} !important; }
+      [data-gjs-type="mj-body"] { min-height: ${v} !important; }
+    `,!f.contains(y)&&f.appendChild(y)}),e.onReady(()=>{const i=n.getSpotsEl(),w=n.getElement(),d=n.getFramesEl(),f=r*1e3,h=w.style;h.overflowX="hidden",d.style.transition=`transform ${r}s`;const y={x:m,y:p};L();const H=()=>i.style.display="none",K=()=>i.style.display="",T=F(()=>{n.fitViewport({zoom:g=>g>100?100:g,ignoreHeight:!0,gap:y}),L(),setTimeout(()=>{var W,k;const{em:g}=e;g.destroyed||((k=(W=e.getSelected())==null?void 0:W.getEl())==null||k.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),K(),t.isActive(C)?g.stopDefault():g.runDefault())},f)},100),j=new ResizeObserver(()=>{H(),T()});j.observe(w.parentElement);const M=()=>{H(),T()},O=(g={})=>{g.options&&g.options.from!=="fitViewport"&&n.fitViewport({zoom:n.getZoom(),ignoreHeight:!0,gap:y})},x=()=>{h.overflowX="hidden",h.overflowY="auto"},I=()=>{j.disconnect(),T.clear()};e.on(o.events.select,M),e.on($.zoom,O),e.on(E,x),e.on(e.events.destroy,I),T(),t.add(A,()=>{o.devices.reset(_),S.scrollableCanvas=!1,n.getModel().updateDevice(),n.setZoom(100),n.setCoords(0,0),h.overflowY="hidden",L(!0),e.off(o.events.select,M),e.off($.zoom,O),e.off(E,x),I(),t.run("studio:canvasReload")})}),Q({editor:e,licenseKey:c.licenseKey,plan:b.startup,pluginName:P,cleanup:()=>{e.runCommand(A)}})},ne=J(te);module.exports=ne;

package/dist/canvasFullSize/index.es.js

@@ -1,20 +1,20 @@
-function j(e, a, n) {
-  let t, o, c, p, d;
+function F(e, a, n) {
+  let t, o, c, p, m;
   const r = a;
   function u() {
     const l = Date.now() - p;
-    l < r && l >= 0 ? t = setTimeout(u, r - l) : (t = null, d = e.apply(c, o), c = o = null);
+    l < r && l >= 0 ? t = setTimeout(u, r - l) : (t = null, m = e.apply(c, o), c = o = null);
   }
   const s = function() {
-    return c = this, o = arguments, p = Date.now(), t || (t = setTimeout(u, r)), d;
+    return c = this, o = arguments, p = Date.now(), t || (t = setTimeout(u, r)), m;
   };
   return s.clear = function() {
     t && (clearTimeout(t), t = null);
   }, s.flush = function() {
-    t && (d = e.apply(c, o), c = o = null, clearTimeout(t), t = null);
+    t && (m = e.apply(c, o), c = o = null, clearTimeout(t), t = null);
   }, s;
 }
-const R = "app.grapesjs.com", U = "app-stage.grapesjs.com", k = [
+const R = "app.grapesjs.com", U = "app-stage.grapesjs.com", z = [
   R,
   U,
   "localhost",
@@ -25,11 +25,11 @@ const R = "app.grapesjs.com", U = "app-stage.grapesjs.com", k = [
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], K = "license:check:start", F = "license:check:end", q = () => typeof window < "u", V = ({ isDev: e, isStage: a }) => `${e ? "" : `https://${a ? U : R}`}/api`, X = () => {
-  const e = q() && window.location.hostname;
-  return !!e && (k.includes(e) || k.some((a) => e.endsWith(a)));
+], q = "license:check:start", V = "license:check:end", X = () => typeof window < "u", Y = ({ isDev: e, isStage: a }) => `${e ? "" : `https://${a ? U : R}`}/api`, B = () => {
+  const e = X() && window.location.hostname;
+  return !!e && (z.includes(e) || z.some((a) => e.endsWith(a)));
 };
-async function Y({
+async function G({
   path: e,
   baseApiUrl: a,
   method: n = "GET",
@@ -37,7 +37,7 @@ async function Y({
   params: o,
   body: c
 }) {
-  const d = `${a || V({ isDev: !1, isStage: !1 })}${e}`, r = {
+  const m = `${a || Y({ isDev: !1, isStage: !1 })}${e}`, r = {
     method: n,
     headers: {
       "Content-Type": "application/json",
@@ -45,24 +45,24 @@ async function Y({
     }
   };
   c && (r.body = JSON.stringify(c));
-  const u = o ? new URLSearchParams(o).toString() : "", s = u ? `?${u}` : "", l = await fetch(`${d}${s}`, r);
+  const u = o ? new URLSearchParams(o).toString() : "", s = u ? `?${u}` : "", l = await fetch(`${m}${s}`, r);
   if (!l.ok)
     throw new Error(`HTTP error! status: ${l.status}`);
   return l.json();
 }
 var b = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(b || {});
-const z = {
+const N = {
   [b.free]: 0,
   [b.startup]: 10,
   [b.business]: 20,
   [b.enterprise]: 30
 };
-function B(e) {
+function Z(e) {
   const a = e;
   return a.init = (n) => (t) => e(t, n), a;
 }
-const G = (e) => /* @__PURE__ */ B(e);
-async function Z({
+const J = (e) => /* @__PURE__ */ Z(e);
+async function Q({
   editor: e,
   plan: a,
   pluginName: n,
@@ -70,37 +70,37 @@ async function Z({
   cleanup: o
 }) {
   let c = "", p = !1;
-  const d = X(), r = (s) => {
+  const m = B(), r = (s) => {
     console.warn("Cleanup plugin:", n, "Reason:", s), o();
   }, u = (s = {}) => {
     var C;
-    const { error: l, sdkLicense: D } = s, y = (C = s.plan) == null ? void 0 : C.category;
+    const { error: l, sdkLicense: D } = s, v = (C = s.plan) == null ? void 0 : C.category;
     if (!(D || s.license) || l)
       r(l || "Invalid license");
-    else if (y) {
-      const S = z[a], T = z[y];
-      S > T && r({ pluginRequiredPlan: a, licensePlan: y });
+    else if (v) {
+      const E = N[a], S = N[v];
+      E > S && r({ pluginRequiredPlan: a, licensePlan: v });
     }
   };
-  e.on(K, (s) => {
+  e.on(q, (s) => {
     c = s == null ? void 0 : s.baseApiUrl, p = !0;
-  }), e.on(F, (s) => {
+  }), e.on(V, (s) => {
     u(s);
   }), setTimeout(async () => {
     if (!p) {
-      if (d) return;
+      if (m) return;
       if (t) {
-        const s = await J({ licenseKey: t, pluginName: n, baseApiUrl: c });
+        const s = await ee({ licenseKey: t, pluginName: n, baseApiUrl: c });
         s && u(s);
       } else
         r("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function J(e) {
+async function ee(e) {
   const { licenseKey: a, pluginName: n, baseApiUrl: t } = e;
   try {
-    return (await Y({
+    return (await G({
       baseApiUrl: t,
       path: `/sdk/${a || "na"}`,
       method: "POST",
@@ -113,7 +113,7 @@ async function J(e) {
     return console.error("Error during SDK license check:", o), !1;
   }
 }
-const N = "canvasFullSize", Q = function(e, a = {}) {
+const P = "canvasFullSize", te = function(e, a = {}) {
   const { Canvas: n, Commands: t, Devices: o } = e, c = {
     deviceMaxWidth: 1200,
     deviceMinHeigth: 500,
@@ -125,75 +125,80 @@ const N = "canvasFullSize", Q = function(e, a = {}) {
     ...a
   }, {
     canvasOffsetY: p,
-    canvasOffsetX: d,
+    canvasOffsetX: m,
     canvasTransition: r,
     deviceMaxWidth: u,
     deviceMinHeigth: s,
     frameBorderRadius: l,
     frameTransition: D
-  } = c, y = `${s}px`, E = n.events, C = `${t.events.stopCommand}core:preview`, S = n.getConfig(), T = `${N}:disable`, P = o.getAll().map((i) => ({ ...i.attributes }));
+  } = c, v = `${s}px`, $ = n.events, C = "core:preview", E = `${t.events.stopCommand}${C}`, S = n.getConfig(), A = `${P}:disable`, _ = o.getAll().map((i) => ({ ...i.attributes }));
   S.scrollableCanvas = !0, o.getAll().map((i) => {
-    !i.get("width") && i.set("width", `${u}px`), !i.get("height") && i.set("height", "auto"), !i.get("minHeight") && i.set("minHeight", y);
+    !i.get("width") && i.set("width", `${u}px`), !i.get("height") && i.set("height", "auto"), !i.get("minHeight") && i.set("minHeight", v);
   });
   const L = (i) => {
-    const v = "data-gs-plg-full-size", f = document.querySelector(`style[${v}]`);
-    if (i && f)
-      return f.remove();
-    const m = f || document.createElement("style"), h = n.getZoomMultiplier();
-    m.setAttribute(v, "true"), m.innerHTML = `
+    const w = "data-gs-plg-full-size", d = document.querySelector(`style[${w}]`);
+    if (i && d)
+      return d.remove();
+    const f = d || document.createElement("style"), h = n.getZoomMultiplier();
+    f.setAttribute(w, "true"), f.innerHTML = `
       .gjs-frame-wrapper { transition: width ${D}s !important; }
       .gjs-frame-wrapper__bottom { height: ${p * h}px }
       .gjs-frame { border-radius: ${l}px }
-    `, !f && document.body.appendChild(m);
+    `, !d && document.body.appendChild(f);
   };
-  e.on(E.frameLoadHead, (i) => {
+  e.on($.frameLoadHead, (i) => {
     if (!S.scrollableCanvas) return;
-    const { window: v } = i, f = v.document, m = f.head, h = "data-gs-plg-wrapper-style", w = m.querySelector(`style[${h}]`) || f.createElement("style");
-    w.setAttribute(h, "true"), w.innerHTML = `[data-gjs-type="wrapper"] { min-height: ${y}; }`, !m.contains(w) && m.appendChild(w);
+    const { window: w } = i, d = w.document, f = d.head, h = "data-gs-plg-wrapper-style", y = f.querySelector(`style[${h}]`) || d.createElement("style");
+    y.setAttribute(h, "true"), y.innerHTML = `
+      [data-gjs-type="wrapper"] { min-height: ${v}; }
+      [data-gjs-type="mjml"] { min-height: ${v} !important; }
+      [data-gjs-type="mj-body"] { min-height: ${v} !important; }
+    `, !f.contains(y) && f.appendChild(y);
   }), e.onReady(() => {
-    const i = n.getSpotsEl(), v = n.getElement(), f = n.getFramesEl(), m = r * 1e3, h = v.style;
-    h.overflowX = "hidden", f.style.transition = `transform ${r}s`;
-    const w = { x: d, y: p };
+    const i = n.getSpotsEl(), w = n.getElement(), d = n.getFramesEl(), f = r * 1e3, h = w.style;
+    h.overflowX = "hidden", d.style.transition = `transform ${r}s`;
+    const y = { x: m, y: p };
     L();
-    const A = () => i.style.display = "none", _ = () => i.style.display = "", $ = j(() => {
+    const H = () => i.style.display = "none", K = () => i.style.display = "", T = F(() => {
       n.fitViewport({
         zoom: (g) => g > 100 ? 100 : g,
         ignoreHeight: !0,
-        gap: w
+        gap: y
       }), L(), setTimeout(() => {
-        var g, W;
-        e.em.destroyed || ((W = (g = e.getSelected()) == null ? void 0 : g.getEl()) == null || W.scrollIntoView({ block: "nearest" }), e.refresh({ tools: !0 }), _());
-      }, m);
-    }, 100), H = new ResizeObserver(() => {
-      A(), $();
+        var W, k;
+        const { em: g } = e;
+        g.destroyed || ((k = (W = e.getSelected()) == null ? void 0 : W.getEl()) == null || k.scrollIntoView({ block: "nearest" }), e.refresh({ tools: !0 }), K(), t.isActive(C) ? g.stopDefault() : g.runDefault());
+      }, f);
+    }, 100), j = new ResizeObserver(() => {
+      H(), T();
     });
-    H.observe(v.parentElement);
+    j.observe(w.parentElement);
     const M = () => {
-      A(), $();
+      H(), T();
     }, O = (g = {}) => {
       g.options && g.options.from !== "fitViewport" && n.fitViewport({
         zoom: n.getZoom(),
         ignoreHeight: !0,
-        gap: w
+        gap: y
       });
     }, x = () => {
       h.overflowX = "hidden", h.overflowY = "auto";
     }, I = () => {
-      H.disconnect(), $.clear();
+      j.disconnect(), T.clear();
     };
-    e.on(o.events.select, M), e.on(E.zoom, O), e.on(C, x), e.on(e.events.destroy, I), $(), t.add(T, () => {
-      o.devices.reset(P), S.scrollableCanvas = !1, n.getModel().updateDevice(), n.setZoom(100), n.setCoords(0, 0), h.overflowY = "hidden", L(!0), e.off(o.events.select, M), e.off(E.zoom, O), e.off(C, x), I(), t.run("studio:canvasReload");
+    e.on(o.events.select, M), e.on($.zoom, O), e.on(E, x), e.on(e.events.destroy, I), T(), t.add(A, () => {
+      o.devices.reset(_), S.scrollableCanvas = !1, n.getModel().updateDevice(), n.setZoom(100), n.setCoords(0, 0), h.overflowY = "hidden", L(!0), e.off(o.events.select, M), e.off($.zoom, O), e.off(E, x), I(), t.run("studio:canvasReload");
     });
-  }), Z({
+  }), Q({
     editor: e,
     licenseKey: c.licenseKey,
     plan: b.startup,
-    pluginName: N,
+    pluginName: P,
     cleanup: () => {
-      e.runCommand(T);
+      e.runCommand(A);
     }
   });
-}, ee = G(Q);
+}, ne = J(te);
 export {
-  ee as default
+  ne as default
 };

package/dist/canvasFullSize/index.umd.js

@@ -1,5 +1,9 @@
-(function(C,y){typeof exports=="object"&&typeof module<"u"?module.exports=y():typeof define=="function"&&define.amd?define(y):(C=typeof globalThis<"u"?globalThis:C||self,C.StudioSdkPlugins_canvasFullSize=y())})(this,function(){"use strict";function C(e,i,n){let t,o,c,p,d;const r=i;function u(){const l=Date.now()-p;l<r&&l>=0?t=setTimeout(u,r-l):(t=null,d=e.apply(c,o),c=o=null)}const s=function(){return c=this,o=arguments,p=Date.now(),t||(t=setTimeout(u,r)),d};return s.clear=function(){t&&(clearTimeout(t),t=null)},s.flush=function(){t&&(d=e.apply(c,o),c=o=null,clearTimeout(t),t=null)},s}const y="app.grapesjs.com",H="app-stage.grapesjs.com",M=[y,H,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],_="license:check:start",j="license:check:end",F=()=>typeof window<"u",K=({isDev:e,isStage:i})=>`${e?"":`https://${i?H:y}`}/api`,q=()=>{const e=F()&&window.location.hostname;return!!e&&(M.includes(e)||M.some(i=>e.endsWith(i)))};async function V({path:e,baseApiUrl:i,method:n="GET",headers:t={},params:o,body:c}){const d=`${i||K({isDev:!1,isStage:!1})}${e}`,r={method:n,headers:{"Content-Type":"application/json",...t}};c&&(r.body=JSON.stringify(c));const u=o?new URLSearchParams(o).toString():"",s=u?`?${u}`:"",l=await fetch(`${d}${s}`,r);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var b=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(b||{});const O={[b.free]:0,[b.startup]:10,[b.business]:20,[b.enterprise]:30};function X(e){const i=e;return i.init=n=>t=>e(t,n),i}const Y=e=>X(e);async function B({editor:e,plan:i,pluginName:n,licenseKey:t,cleanup:o}){let c="",p=!1;const d=q(),r=s=>{console.warn("Cleanup plugin:",n,"Reason:",s),o()},u=(s={})=>{var T;const{error:l,sdkLicense:x}=s,S=(T=s.plan)==null?void 0:T.category;if(!(x||s.license)||l)r(l||"Invalid license");else if(S){const E=O[i],D=O[S];E>D&&r({pluginRequiredPlan:i,licensePlan:S})}};e.on(_,s=>{c=s==null?void 0:s.baseApiUrl,p=!0}),e.on(j,s=>{u(s)}),setTimeout(async()=>{if(!p){if(d)return;if(t){const s=await G({licenseKey:t,pluginName:n,baseApiUrl:c});s&&u(s)}else r("The `licenseKey` option not provided")}},2e3)}async function G(e){const{licenseKey:i,pluginName:n,baseApiUrl:t}=e;try{return(await V({baseApiUrl:t,path:`/sdk/${i||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const k="canvasFullSize";return Y(function(e,i={}){const{Canvas:n,Commands:t,Devices:o}=e,c={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...i},{canvasOffsetY:p,canvasOffsetX:d,canvasTransition:r,deviceMaxWidth:u,deviceMinHeigth:s,frameBorderRadius:l,frameTransition:x}=c,S=`${s}px`,$=n.events,T=`${t.events.stopCommand}core:preview`,E=n.getConfig(),D=`${k}:disable`,Z=o.getAll().map(a=>({...a.attributes}));E.scrollableCanvas=!0,o.getAll().map(a=>{!a.get("width")&&a.set("width",`${u}px`),!a.get("height")&&a.set("height","auto"),!a.get("minHeight")&&a.set("minHeight",S)});const A=a=>{const v="data-gs-plg-full-size",f=document.querySelector(`style[${v}]`);if(a&&f)return f.remove();const m=f||document.createElement("style"),h=n.getZoomMultiplier();m.setAttribute(v,"true"),m.innerHTML=`
-      .gjs-frame-wrapper { transition: width ${x}s !important; }
+(function(C,b){typeof exports=="object"&&typeof module<"u"?module.exports=b():typeof define=="function"&&define.amd?define(b):(C=typeof globalThis<"u"?globalThis:C||self,C.StudioSdkPlugins_canvasFullSize=b())})(this,function(){"use strict";function C(e,i,n){let t,o,c,p,d;const r=i;function u(){const l=Date.now()-p;l<r&&l>=0?t=setTimeout(u,r-l):(t=null,d=e.apply(c,o),c=o=null)}const s=function(){return c=this,o=arguments,p=Date.now(),t||(t=setTimeout(u,r)),d};return s.clear=function(){t&&(clearTimeout(t),t=null)},s.flush=function(){t&&(d=e.apply(c,o),c=o=null,clearTimeout(t),t=null)},s}const b="app.grapesjs.com",x="app-stage.grapesjs.com",H=[b,x,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],F="license:check:start",K="license:check:end",q=()=>typeof window<"u",V=({isDev:e,isStage:i})=>`${e?"":`https://${i?x:b}`}/api`,X=()=>{const e=q()&&window.location.hostname;return!!e&&(H.includes(e)||H.some(i=>e.endsWith(i)))};async function Y({path:e,baseApiUrl:i,method:n="GET",headers:t={},params:o,body:c}){const d=`${i||V({isDev:!1,isStage:!1})}${e}`,r={method:n,headers:{"Content-Type":"application/json",...t}};c&&(r.body=JSON.stringify(c));const u=o?new URLSearchParams(o).toString():"",s=u?`?${u}`:"",l=await fetch(`${d}${s}`,r);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var S=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(S||{});const M={[S.free]:0,[S.startup]:10,[S.business]:20,[S.enterprise]:30};function B(e){const i=e;return i.init=n=>t=>e(t,n),i}const G=e=>B(e);async function Z({editor:e,plan:i,pluginName:n,licenseKey:t,cleanup:o}){let c="",p=!1;const d=X(),r=s=>{console.warn("Cleanup plugin:",n,"Reason:",s),o()},u=(s={})=>{var T;const{error:l,sdkLicense:A}=s,v=(T=s.plan)==null?void 0:T.category;if(!(A||s.license)||l)r(l||"Invalid license");else if(v){const D=M[i],$=M[v];D>$&&r({pluginRequiredPlan:i,licensePlan:v})}};e.on(F,s=>{c=s==null?void 0:s.baseApiUrl,p=!0}),e.on(K,s=>{u(s)}),setTimeout(async()=>{if(!p){if(d)return;if(t){const s=await J({licenseKey:t,pluginName:n,baseApiUrl:c});s&&u(s)}else r("The `licenseKey` option not provided")}},2e3)}async function J(e){const{licenseKey:i,pluginName:n,baseApiUrl:t}=e;try{return(await Y({baseApiUrl:t,path:`/sdk/${i||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const O="canvasFullSize";return G(function(e,i={}){const{Canvas:n,Commands:t,Devices:o}=e,c={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...i},{canvasOffsetY:p,canvasOffsetX:d,canvasTransition:r,deviceMaxWidth:u,deviceMinHeigth:s,frameBorderRadius:l,frameTransition:A}=c,v=`${s}px`,E=n.events,T="core:preview",D=`${t.events.stopCommand}${T}`,$=n.getConfig(),k=`${O}:disable`,Q=o.getAll().map(a=>({...a.attributes}));$.scrollableCanvas=!0,o.getAll().map(a=>{!a.get("width")&&a.set("width",`${u}px`),!a.get("height")&&a.set("height","auto"),!a.get("minHeight")&&a.set("minHeight",v)});const j=a=>{const y="data-gs-plg-full-size",f=document.querySelector(`style[${y}]`);if(a&&f)return f.remove();const m=f||document.createElement("style"),h=n.getZoomMultiplier();m.setAttribute(y,"true"),m.innerHTML=`
+      .gjs-frame-wrapper { transition: width ${A}s !important; }
       .gjs-frame-wrapper__bottom { height: ${p*h}px }
       .gjs-frame { border-radius: ${l}px }
-    `,!f&&document.body.appendChild(m)};e.on($.frameLoadHead,a=>{if(!E.scrollableCanvas)return;const{window:v}=a,f=v.document,m=f.head,h="data-gs-plg-wrapper-style",w=m.querySelector(`style[${h}]`)||f.createElement("style");w.setAttribute(h,"true"),w.innerHTML=`[data-gjs-type="wrapper"] { min-height: ${S}; }`,!m.contains(w)&&m.appendChild(w)}),e.onReady(()=>{const a=n.getSpotsEl(),v=n.getElement(),f=n.getFramesEl(),m=r*1e3,h=v.style;h.overflowX="hidden",f.style.transition=`transform ${r}s`;const w={x:d,y:p};A();const z=()=>a.style.display="none",J=()=>a.style.display="",L=C(()=>{n.fitViewport({zoom:g=>g>100?100:g,ignoreHeight:!0,gap:w}),A(),setTimeout(()=>{var g,U;e.em.destroyed||((U=(g=e.getSelected())==null?void 0:g.getEl())==null||U.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),J())},m)},100),I=new ResizeObserver(()=>{z(),L()});I.observe(v.parentElement);const W=()=>{z(),L()},N=(g={})=>{g.options&&g.options.from!=="fitViewport"&&n.fitViewport({zoom:n.getZoom(),ignoreHeight:!0,gap:w})},P=()=>{h.overflowX="hidden",h.overflowY="auto"},R=()=>{I.disconnect(),L.clear()};e.on(o.events.select,W),e.on($.zoom,N),e.on(T,P),e.on(e.events.destroy,R),L(),t.add(D,()=>{o.devices.reset(Z),E.scrollableCanvas=!1,n.getModel().updateDevice(),n.setZoom(100),n.setCoords(0,0),h.overflowY="hidden",A(!0),e.off(o.events.select,W),e.off($.zoom,N),e.off(T,P),R(),t.run("studio:canvasReload")})}),B({editor:e,licenseKey:c.licenseKey,plan:b.startup,pluginName:k,cleanup:()=>{e.runCommand(D)}})})});
+    `,!f&&document.body.appendChild(m)};e.on(E.frameLoadHead,a=>{if(!$.scrollableCanvas)return;const{window:y}=a,f=y.document,m=f.head,h="data-gs-plg-wrapper-style",w=m.querySelector(`style[${h}]`)||f.createElement("style");w.setAttribute(h,"true"),w.innerHTML=`
+      [data-gjs-type="wrapper"] { min-height: ${v}; }
+      [data-gjs-type="mjml"] { min-height: ${v} !important; }
+      [data-gjs-type="mj-body"] { min-height: ${v} !important; }
+    `,!m.contains(w)&&m.appendChild(w)}),e.onReady(()=>{const a=n.getSpotsEl(),y=n.getElement(),f=n.getFramesEl(),m=r*1e3,h=y.style;h.overflowX="hidden",f.style.transition=`transform ${r}s`;const w={x:d,y:p};j();const z=()=>a.style.display="none",ee=()=>a.style.display="",L=C(()=>{n.fitViewport({zoom:g=>g>100?100:g,ignoreHeight:!0,gap:w}),j(),setTimeout(()=>{var U,_;const{em:g}=e;g.destroyed||((_=(U=e.getSelected())==null?void 0:U.getEl())==null||_.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),ee(),t.isActive(T)?g.stopDefault():g.runDefault())},m)},100),I=new ResizeObserver(()=>{z(),L()});I.observe(y.parentElement);const P=()=>{z(),L()},W=(g={})=>{g.options&&g.options.from!=="fitViewport"&&n.fitViewport({zoom:n.getZoom(),ignoreHeight:!0,gap:w})},N=()=>{h.overflowX="hidden",h.overflowY="auto"},R=()=>{I.disconnect(),L.clear()};e.on(o.events.select,P),e.on(E.zoom,W),e.on(D,N),e.on(e.events.destroy,R),L(),t.add(k,()=>{o.devices.reset(Q),$.scrollableCanvas=!1,n.getModel().updateDevice(),n.setZoom(100),n.setCoords(0,0),h.overflowY="hidden",j(!0),e.off(o.events.select,P),e.off(E.zoom,W),e.off(D,N),R(),t.run("studio:canvasReload")})}),Z({editor:e,licenseKey:c.licenseKey,plan:S.startup,pluginName:O,cleanup:()=>{e.runCommand(k)}})})});

package/dist/canvasFullSize/typesSchema.d.ts

@@ -1,30 +1,37 @@
 import { SDKPluginOptions } from '../utils';
 export interface CanvasFullSizeOptions extends SDKPluginOptions {
     /**
+     * Default max width for the devices.
      * @default 1200
      */
     deviceMaxWidth?: number;
     /**
+     * Default min height for the devices.
      * @default 500
      */
     deviceMinHeigth?: number;
     /**
+     * Offset for the canvas on the Y axis (margin between the canvas and content frame).
      * @default 30
      */
     canvasOffsetY?: number;
     /**
+     * Offset for the canvas on the X axis (margin between the canvas and content frame).
      * @default 50
      */
     canvasOffsetX?: number;
     /**
+     * Transition time for the canvas when the screen size changes (in seconds).
      * @default 0.3
      */
     canvasTransition?: number;
     /**
+     * Border radius for the content frame (in px).
      * @default 5
      */
     frameBorderRadius?: number;
     /**
+     * Transition time for the content frame when the device changes (in seconds).
      * @default 0.3
      */
     frameTransition?: number;