@grapesjs/studio-sdk-plugins 1.0.23 → 1.0.24

package/dist/animationComponent/index.es.js

@@ -103,16 +103,12 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
   category: { id: "animations", label: "Animations" },
   select: !0
 }, w = (t) => (t == null ? void 0 : t.type) === y, x = (t) => (t == null ? void 0 : t.type) === v, N = (t) => w(t) || x(t), _ = {
-  // @ts-expect-error available from the next release
   isVisible: ({ component: t }) => N(t)
 }, S = {
-  // @ts-expect-error available from the next release
   isVisible: ({ component: t }) => w(t)
 }, K = {
-  // @ts-expect-error available from the next release
   isVisible: ({ component: t }) => x(t)
 }, D = {
-  // @ts-expect-error available from the next release
   isVisible: ({ component: t, sector: n }) => {
     var e;
     return w(t) && x(t == null ? void 0 : t.parent()) ? !1 : N(t) && ((e = n.getProperty(d.onScroll)) == null ? void 0 : e.getValue()) === "true";

package/dist/canvasFullSize/index.cjs.js

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

package/dist/canvasFullSize/index.es.js

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

package/dist/canvasFullSize/index.umd.js

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

package/dist/canvasFullSize/utils.d.ts

@@ -0,0 +1,8 @@
+import { CssRule } from 'grapesjs';
+export interface OnCssMountProps {
+    rule: CssRule;
+    ruleView: CssRule['views'][0];
+    css: string;
+}
+export declare const updateVhHeight: (prop: string, props: OnCssMountProps) => void;
+export declare const onCssMount: (props: OnCssMountProps) => void;

package/dist/dataSourceEjs/EjsExporter.d.ts

@@ -1,10 +1,17 @@
-import { ConditionType, DataCollectionResolverProps, DataVariableResolverProps, IDataSourceExporter } from '@studio/editor/src/typeConfigs/dataSources';
+import { DataCollectionResolverProps, DataVariableResolverProps, IDataSourceExporter } from '@studio/editor/src/typeConfigs/dataSources';
+import { DataConditionResolverProps } from '@studio/editor/src/components/public/StudioDataConditionPicker';
 export declare class EjsExporter implements IDataSourceExporter {
-    getVariableSyntax(props: DataVariableResolverProps): string;
-    getCollectionStartSyntax(options: DataCollectionResolverProps): string;
+    getVariableSyntax({ dataResolver }: {
+        dataResolver: DataVariableResolverProps;
+    }): string;
+    getCollectionStartSyntax({ dataResolver }: {
+        dataResolver: DataCollectionResolverProps;
+    }): string;
     private _sanitizeVariableName;
     getCollectionEndSyntax(): string;
-    getConditionalStartSyntax(condition: ConditionType): string;
+    getConditionalStartSyntax({ dataResolver }: {
+        dataResolver: DataConditionResolverProps;
+    }): string;
     getConditionElseSyntax(): string;
     getConditionalEndSyntax(): string;
     private getFullPath;