@grapesjs/studio-sdk-plugins 1.0.27 → 1.0.28-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,9 @@
1
- "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=`
2
- .gjs-frame-wrapper { transition: width ${v}s !important; }
3
- .gjs-frame-wrapper__bottom { height: ${m*$}px }
4
- .gjs-frame { border-radius: ${D}px }
5
- `,!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=`
6
- [data-gjs-type="wrapper"] { min-height: ${w}; }
7
- [data-gjs-type="mjml"] { min-height: ${w} !important; }
8
- [data-gjs-type="mj-body"] { min-height: ${w} !important; }
9
- `,!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;
1
+ "use strict";function B(e,i,s){let n,a,c,d,m;const r=i;function l(){const u=Date.now()-d;u<r&&u>=0?n=setTimeout(l,r-u):(n=null,m=e.apply(c,a),c=a=null)}const o=function(){return c=this,a=arguments,d=Date.now(),n||(n=setTimeout(l,r)),m};return o.clear=function(){n&&(clearTimeout(n),n=null)},o.flush=function(){n&&(m=e.apply(c,a),c=a=null,clearTimeout(n),n=null)},o}const _="app.grapesjs.com",k="app-stage.grapesjs.com",P=[_,k,"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:i})=>`${e?"":`https://${i?k:_}`}/api`,J=()=>{const e=Y()&&window.location.hostname;return!!e&&(P.includes(e)||P.some(i=>e.endsWith(i)))};async function Q({path:e,baseApiUrl:i,method:s="GET",headers:n={},params:a,body:c}){const m=`${i||Z({isDev:!1,isStage:!1})}${e}`,r={method:s,headers:{"Content-Type":"application/json",...n}};c&&(r.body=JSON.stringify(c));const l=a?new URLSearchParams(a).toString():"",o=l?`?${l}`:"",u=await fetch(`${m}${o}`,r);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.json()}var v=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(v||{});const V={[v.free]:0,[v.startup]:10,[v.business]:20,[v.enterprise]:30};function ee(e){const i=e;return i.init=s=>n=>e(n,s),i}const te=e=>ee(e);async function ne({editor:e,plan:i,pluginName:s,licenseKey:n,cleanup:a}){let c="",d=!1;const m=J(),r=o=>{console.warn("Cleanup plugin:",s,"Reason:",o),a()},l=(o={})=>{var b;const{error:u,sdkLicense:w}=o,g=(b=o.plan)==null?void 0:b.category;if(!(w||o.license)||u)r(u||"Invalid license");else if(g){const E=V[i],L=V[g];E>L&&r({pluginRequiredPlan:i,licensePlan:g})}};e.on(G,o=>{c=o==null?void 0:o.baseApiUrl,d=!0}),e.on(X,o=>{l(o)}),setTimeout(async()=>{if(!d){if(m)return;if(n){const o=await se({licenseKey:n,pluginName:s,baseApiUrl:c});o&&l(o)}else r("The `licenseKey` option not provided")}},2e3)}async function se(e){const{licenseKey:i,pluginName:s,baseApiUrl:n}=e;try{return(await Q({baseApiUrl:n,path:`/sdk/${i||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const W="canvasFullSize",oe=v.startup,ae=(e,i)=>{const{rule:s,ruleView:n}=i,{style:a}=s.attributes;if(a&&a[e]){const c=a[e],d=/([0-9.]+)(vh|dvh|lvh|svh)/g,m=d.test(c),r=n.frameView.model;if(m&&r.hasAutoHeight()){const l=c.replace(d,(u,w)=>`${window.innerHeight*(parseFloat(w)/100)}px`),o=s.toCSS({style:{...a,[e]:l}});i.css=o}}},ie=e=>{["height","min-height","max-height"].forEach(i=>ae(i,e))},ce=function(e,i={}){const{Canvas:s,Commands:n,Devices:a,Css:c}=e,d={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...i},{canvasOffsetY:m,canvasOffsetX:r,canvasTransition:l,deviceMaxWidth:o,deviceMinHeigth:u,frameBorderRadius:w,frameTransition:g}=d,y=`${u}px`,b=s.events,E="core:preview",L=`${n.events.stopCommand}${E}`,x=s.getConfig(),M=`${W}:disable`,O=a.getAll().map(t=>({...t.attributes})),R=l*1e3,U={x:r,y:m};let C={},A,S;x.scrollableCanvas=!0,a.getAll().map(t=>{!t.get("width")&&t.set("width",`${o}px`),!t.get("height")&&t.set("height","auto"),!t.get("minHeight")&&t.set("minHeight",y)});const H=t=>{const p="data-gs-plg-full-size",h=document.querySelector(`style[${p}]`);if(t&&h)return h.remove();const f=h||document.createElement("style"),T=s.getZoomMultiplier();f.setAttribute(p,"true"),f.innerHTML=`
2
+ .gjs-frame-wrapper { transition: width ${g}s !important; }
3
+ .gjs-frame-wrapper__bottom { height: ${m*T}px }
4
+ .gjs-frame { border-radius: ${w}px }
5
+ `,!h&&document.body.appendChild(f)};e.on(b.frameLoadHead,t=>{if(!x.scrollableCanvas)return;const{window:p}=t,h=p.document,f=h.head,T="data-gs-plg-wrapper-style",D=f.querySelector(`style[${T}]`)||h.createElement("style");D.setAttribute(T,"true"),D.innerHTML=`
6
+ [data-gjs-type="wrapper"] { min-height: ${y}; }
7
+ [data-gjs-type="mjml"] { min-height: ${y} !important; }
8
+ [data-gjs-type="mj-body"] { min-height: ${y} !important; }
9
+ `,!f.contains(D)&&f.appendChild(D)});const j=()=>A.style.display="none",z=()=>A.style.display="",$=B(()=>{s.fitViewport({zoom:t=>t>100?100:t,ignoreHeight:!0,gap:U}),H(),setTimeout(()=>{var p,h;const{em:t}=e;t.destroyed||((h=(p=e.getSelected())==null?void 0:p.getEl())==null||h.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),z(),n.isActive(E)?t.stopDefault():t.runDefault())},R)},100),F=(t={})=>{t.options&&t.options.from!=="fitViewport"&&s.fitViewport({zoom:s.getZoom(),ignoreHeight:!0,gap:U})},K=()=>{j(),$()},q=()=>{C.overflowX="hidden",C.overflowY="auto"},I=()=>{S==null||S.disconnect(),$.clear()},N=[[a.events.select,K],[b.zoom,F],[L,q],[e.events.destroy,I],[c.events.mountBefore,ie]];n.add(M,()=>{a.devices.reset(O),x.scrollableCanvas=!1,s.getModel().updateDevice(),s.setZoom(100),s.setCoords(0,0),C.overflowY="hidden",H(!0),N.forEach(([t,p])=>e.off(t,p)),I(),n.run("studio:canvasReload")}),N.forEach(([t,p])=>e.on(t,p)),e.onReady(()=>{const t=s.getElement(),p=s.getFramesEl();A=s.getSpotsEl(),C=t.style,C.overflowX="hidden",p.style.transition=`transform ${l}s`,H(),S=new ResizeObserver(()=>{j(),$()}),S.observe(t.parentElement),$()}),ne({editor:e,licenseKey:d.licenseKey,plan:oe,pluginName:W,cleanup:()=>{e.runCommand(M)}})},re=te(ce);module.exports=re;
@@ -1,22 +1,22 @@
1
- function B(e, a, s) {
2
- let n, i, c, r, m;
3
- const l = a;
4
- function u() {
5
- const p = Date.now() - r;
6
- p < l && p >= 0 ? n = setTimeout(u, l - p) : (n = null, m = e.apply(c, i), c = i = null);
1
+ function B(e, i, s) {
2
+ let n, a, c, d, m;
3
+ const r = i;
4
+ function l() {
5
+ const u = Date.now() - d;
6
+ u < r && u >= 0 ? n = setTimeout(l, r - u) : (n = null, m = e.apply(c, a), c = a = null);
7
7
  }
8
8
  const o = function() {
9
- return c = this, i = arguments, r = Date.now(), n || (n = setTimeout(u, l)), m;
9
+ return c = this, a = arguments, d = Date.now(), n || (n = setTimeout(l, r)), m;
10
10
  };
11
11
  return o.clear = function() {
12
12
  n && (clearTimeout(n), n = null);
13
13
  }, o.flush = function() {
14
- n && (m = e.apply(c, i), c = i = null, clearTimeout(n), n = null);
14
+ n && (m = e.apply(c, a), c = a = null, clearTimeout(n), n = null);
15
15
  }, o;
16
16
  }
17
- const O = "app.grapesjs.com", R = "app-stage.grapesjs.com", U = [
18
- O,
19
- R,
17
+ const _ = "app.grapesjs.com", k = "app-stage.grapesjs.com", P = [
18
+ _,
19
+ k,
20
20
  "localhost",
21
21
  "127.0.0.1",
22
22
  ".local-credentialless.webcontainer.io",
@@ -25,113 +25,112 @@ const O = "app.grapesjs.com", R = "app-stage.grapesjs.com", U = [
25
25
  // For stackblitz.com demos
26
26
  "-sandpack.codesandbox.io"
27
27
  // For Sandpack demos
28
- ], G = "license:check:start", X = "license:check:end", Y = () => typeof window < "u", Z = ({ isDev: e, isStage: a }) => `${e ? "" : `https://${a ? R : O}`}/api`, J = () => {
28
+ ], G = "license:check:start", X = "license:check:end", Y = () => typeof window < "u", Z = ({ isDev: e, isStage: i }) => `${e ? "" : `https://${i ? k : _}`}/api`, J = () => {
29
29
  const e = Y() && window.location.hostname;
30
- return !!e && (U.includes(e) || U.some((a) => e.endsWith(a)));
30
+ return !!e && (P.includes(e) || P.some((i) => e.endsWith(i)));
31
31
  };
32
32
  async function Q({
33
33
  path: e,
34
- baseApiUrl: a,
34
+ baseApiUrl: i,
35
35
  method: s = "GET",
36
36
  headers: n = {},
37
- params: i,
37
+ params: a,
38
38
  body: c
39
39
  }) {
40
- const m = `${a || Z({ isDev: !1, isStage: !1 })}${e}`, l = {
40
+ const m = `${i || Z({ isDev: !1, isStage: !1 })}${e}`, r = {
41
41
  method: s,
42
42
  headers: {
43
43
  "Content-Type": "application/json",
44
44
  ...n
45
45
  }
46
46
  };
47
- c && (l.body = JSON.stringify(c));
48
- const u = i ? new URLSearchParams(i).toString() : "", o = u ? `?${u}` : "", p = await fetch(`${m}${o}`, l);
49
- if (!p.ok)
50
- throw new Error(`HTTP error! status: ${p.status}`);
51
- return p.json();
47
+ c && (r.body = JSON.stringify(c));
48
+ const l = a ? new URLSearchParams(a).toString() : "", o = l ? `?${l}` : "", u = await fetch(`${m}${o}`, r);
49
+ if (!u.ok)
50
+ throw new Error(`HTTP error! status: ${u.status}`);
51
+ return u.json();
52
52
  }
53
- var g = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(g || {});
54
- const W = {
55
- [g.free]: 0,
56
- [g.startup]: 10,
57
- [g.business]: 20,
58
- [g.enterprise]: 30
53
+ var v = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(v || {});
54
+ const V = {
55
+ [v.free]: 0,
56
+ [v.startup]: 10,
57
+ [v.business]: 20,
58
+ [v.enterprise]: 30
59
59
  };
60
60
  function ee(e) {
61
- const a = e;
62
- return a.init = (s) => (n) => e(n, s), a;
61
+ const i = e;
62
+ return i.init = (s) => (n) => e(n, s), i;
63
63
  }
64
64
  const te = (e) => /* @__PURE__ */ ee(e);
65
65
  async function ne({
66
66
  editor: e,
67
- plan: a,
67
+ plan: i,
68
68
  pluginName: s,
69
69
  licenseKey: n,
70
- cleanup: i
70
+ cleanup: a
71
71
  }) {
72
- let c = "", r = !1;
73
- const m = J(), l = (o) => {
74
- console.warn("Cleanup plugin:", s, "Reason:", o), i();
75
- }, u = (o = {}) => {
76
- var y;
77
- const { error: p, sdkLicense: D } = o, v = (y = o.plan) == null ? void 0 : y.category;
78
- if (!(D || o.license) || p)
79
- l(p || "Invalid license");
80
- else if (v) {
81
- const S = W[a], L = W[v];
82
- S > L && l({ pluginRequiredPlan: a, licensePlan: v });
72
+ let c = "", d = !1;
73
+ const m = J(), r = (o) => {
74
+ console.warn("Cleanup plugin:", s, "Reason:", o), a();
75
+ }, l = (o = {}) => {
76
+ var b;
77
+ const { error: u, sdkLicense: w } = o, g = (b = o.plan) == null ? void 0 : b.category;
78
+ if (!(w || o.license) || u)
79
+ r(u || "Invalid license");
80
+ else if (g) {
81
+ const E = V[i], L = V[g];
82
+ E > L && r({ pluginRequiredPlan: i, licensePlan: g });
83
83
  }
84
84
  };
85
85
  e.on(G, (o) => {
86
- c = o == null ? void 0 : o.baseApiUrl, r = !0;
86
+ c = o == null ? void 0 : o.baseApiUrl, d = !0;
87
87
  }), e.on(X, (o) => {
88
- u(o);
88
+ l(o);
89
89
  }), setTimeout(async () => {
90
- if (!r) {
90
+ if (!d) {
91
91
  if (m) return;
92
92
  if (n) {
93
93
  const o = await se({ licenseKey: n, pluginName: s, baseApiUrl: c });
94
- o && u(o);
94
+ o && l(o);
95
95
  } else
96
- l("The `licenseKey` option not provided");
96
+ r("The `licenseKey` option not provided");
97
97
  }
98
98
  }, 2e3);
99
99
  }
100
100
  async function se(e) {
101
- const { licenseKey: a, pluginName: s, baseApiUrl: n } = e;
101
+ const { licenseKey: i, pluginName: s, baseApiUrl: n } = e;
102
102
  try {
103
103
  return (await Q({
104
104
  baseApiUrl: n,
105
- path: `/sdk/${a || "na"}`,
105
+ path: `/sdk/${i || "na"}`,
106
106
  method: "POST",
107
107
  params: {
108
108
  d: window.location.hostname,
109
109
  pn: s
110
110
  }
111
111
  })).result || {};
112
- } catch (i) {
113
- return console.error("Error during SDK license check:", i), !1;
112
+ } catch (a) {
113
+ return console.error("Error during SDK license check:", a), !1;
114
114
  }
115
115
  }
116
- const k = "canvasFullSize", oe = g.startup, ie = (e, a) => {
117
- var c;
118
- const { rule: s, ruleView: n } = a, { style: i } = s.attributes;
119
- if (i && i[e]) {
120
- const r = i[e], m = (c = r == null ? void 0 : r.endsWith) == null ? void 0 : c.call(r, "vh"), l = n.frameView.model;
121
- if (m && l.hasAutoHeight()) {
122
- const u = parseFloat(r), o = s.toCSS({
116
+ const W = "canvasFullSize", oe = v.startup, ae = (e, i) => {
117
+ const { rule: s, ruleView: n } = i, { style: a } = s.attributes;
118
+ if (a && a[e]) {
119
+ const c = a[e], d = /([0-9.]+)(vh|dvh|lvh|svh)/g, m = d.test(c), r = n.frameView.model;
120
+ if (m && r.hasAutoHeight()) {
121
+ const l = c.replace(d, (u, w) => `${window.innerHeight * (parseFloat(w) / 100)}px`), o = s.toCSS({
123
122
  style: {
124
- ...i,
125
- [e]: `${window.outerHeight * (u / 100)}px`
123
+ ...a,
124
+ [e]: l
126
125
  }
127
126
  });
128
- a.css = o;
127
+ i.css = o;
129
128
  }
130
129
  }
131
- }, ae = (e) => {
132
- ["height", "min-height", "max-height"].forEach((a) => ie(a, e));
133
- }, ce = function(e, a = {}) {
134
- const { Canvas: s, Commands: n, Devices: i, Css: c } = e, r = {
130
+ }, ie = (e) => {
131
+ ["height", "min-height", "max-height"].forEach((i) => ae(i, e));
132
+ }, ce = function(e, i = {}) {
133
+ const { Canvas: s, Commands: n, Devices: a, Css: c } = e, d = {
135
134
  deviceMaxWidth: 1200,
136
135
  deviceMinHeigth: 500,
137
136
  canvasOffsetY: 30,
@@ -139,81 +138,81 @@ const k = "canvasFullSize", oe = g.startup, ie = (e, a) => {
139
138
  canvasTransition: 0.3,
140
139
  frameBorderRadius: 5,
141
140
  frameTransition: 0.3,
142
- ...a
141
+ ...i
143
142
  }, {
144
143
  canvasOffsetY: m,
145
- canvasOffsetX: l,
146
- canvasTransition: u,
144
+ canvasOffsetX: r,
145
+ canvasTransition: l,
147
146
  deviceMaxWidth: o,
148
- deviceMinHeigth: p,
149
- frameBorderRadius: D,
150
- frameTransition: v
151
- } = 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 };
152
- let b = {}, H, C;
153
- A.scrollableCanvas = !0, i.getAll().map((t) => {
154
- !t.get("width") && t.set("width", `${o}px`), !t.get("height") && t.set("height", "auto"), !t.get("minHeight") && t.set("minHeight", w);
147
+ deviceMinHeigth: u,
148
+ frameBorderRadius: w,
149
+ frameTransition: g
150
+ } = d, y = `${u}px`, b = s.events, E = "core:preview", L = `${n.events.stopCommand}${E}`, x = s.getConfig(), M = `${W}:disable`, O = a.getAll().map((t) => ({ ...t.attributes })), R = l * 1e3, U = { x: r, y: m };
151
+ let C = {}, A, S;
152
+ x.scrollableCanvas = !0, a.getAll().map((t) => {
153
+ !t.get("width") && t.set("width", `${o}px`), !t.get("height") && t.set("height", "auto"), !t.get("minHeight") && t.set("minHeight", y);
155
154
  });
156
- const x = (t) => {
157
- const d = "data-gs-plg-full-size", f = document.querySelector(`style[${d}]`);
158
- if (t && f)
159
- return f.remove();
160
- const h = f || document.createElement("style"), $ = s.getZoomMultiplier();
161
- h.setAttribute(d, "true"), h.innerHTML = `
162
- .gjs-frame-wrapper { transition: width ${v}s !important; }
163
- .gjs-frame-wrapper__bottom { height: ${m * $}px }
164
- .gjs-frame { border-radius: ${D}px }
165
- `, !f && document.body.appendChild(h);
155
+ const H = (t) => {
156
+ const p = "data-gs-plg-full-size", h = document.querySelector(`style[${p}]`);
157
+ if (t && h)
158
+ return h.remove();
159
+ const f = h || document.createElement("style"), T = s.getZoomMultiplier();
160
+ f.setAttribute(p, "true"), f.innerHTML = `
161
+ .gjs-frame-wrapper { transition: width ${g}s !important; }
162
+ .gjs-frame-wrapper__bottom { height: ${m * T}px }
163
+ .gjs-frame { border-radius: ${w}px }
164
+ `, !h && document.body.appendChild(f);
166
165
  };
167
- e.on(y.frameLoadHead, (t) => {
168
- if (!A.scrollableCanvas) return;
169
- const { window: d } = t, f = d.document, h = f.head, $ = "data-gs-plg-wrapper-style", T = h.querySelector(`style[${$}]`) || f.createElement("style");
170
- T.setAttribute($, "true"), T.innerHTML = `
171
- [data-gjs-type="wrapper"] { min-height: ${w}; }
172
- [data-gjs-type="mjml"] { min-height: ${w} !important; }
173
- [data-gjs-type="mj-body"] { min-height: ${w} !important; }
174
- `, !h.contains(T) && h.appendChild(T);
166
+ e.on(b.frameLoadHead, (t) => {
167
+ if (!x.scrollableCanvas) return;
168
+ const { window: p } = t, h = p.document, f = h.head, T = "data-gs-plg-wrapper-style", D = f.querySelector(`style[${T}]`) || h.createElement("style");
169
+ D.setAttribute(T, "true"), D.innerHTML = `
170
+ [data-gjs-type="wrapper"] { min-height: ${y}; }
171
+ [data-gjs-type="mjml"] { min-height: ${y} !important; }
172
+ [data-gjs-type="mj-body"] { min-height: ${y} !important; }
173
+ `, !f.contains(D) && f.appendChild(D);
175
174
  });
176
- const j = () => H.style.display = "none", F = () => H.style.display = "", E = B(() => {
175
+ const j = () => A.style.display = "none", z = () => A.style.display = "", $ = B(() => {
177
176
  s.fitViewport({
178
177
  zoom: (t) => t > 100 ? 100 : t,
179
178
  ignoreHeight: !0,
180
- gap: N
181
- }), x(), setTimeout(() => {
182
- var d, f;
179
+ gap: U
180
+ }), H(), setTimeout(() => {
181
+ var p, h;
183
182
  const { em: t } = e;
184
- 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());
185
- }, z);
186
- }, 100), K = (t = {}) => {
183
+ t.destroyed || ((h = (p = e.getSelected()) == null ? void 0 : p.getEl()) == null || h.scrollIntoView({ block: "nearest" }), e.refresh({ tools: !0 }), z(), n.isActive(E) ? t.stopDefault() : t.runDefault());
184
+ }, R);
185
+ }, 100), F = (t = {}) => {
187
186
  t.options && t.options.from !== "fitViewport" && s.fitViewport({
188
187
  zoom: s.getZoom(),
189
188
  ignoreHeight: !0,
190
- gap: N
189
+ gap: U
191
190
  });
192
- }, V = () => {
193
- j(), E();
191
+ }, K = () => {
192
+ j(), $();
194
193
  }, q = () => {
195
- b.overflowX = "hidden", b.overflowY = "auto";
194
+ C.overflowX = "hidden", C.overflowY = "auto";
196
195
  }, I = () => {
197
- C == null || C.disconnect(), E.clear();
198
- }, P = [
199
- [i.events.select, V],
200
- [y.zoom, K],
196
+ S == null || S.disconnect(), $.clear();
197
+ }, N = [
198
+ [a.events.select, K],
199
+ [b.zoom, F],
201
200
  [L, q],
202
201
  [e.events.destroy, I],
203
- [c.events.mountBefore, ae]
202
+ [c.events.mountBefore, ie]
204
203
  ];
205
204
  n.add(M, () => {
206
- 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");
207
- }), P.forEach(([t, d]) => e.on(t, d)), e.onReady(() => {
208
- const t = s.getElement(), d = s.getFramesEl();
209
- H = s.getSpotsEl(), b = t.style, b.overflowX = "hidden", d.style.transition = `transform ${u}s`, x(), C = new ResizeObserver(() => {
210
- j(), E();
211
- }), C.observe(t.parentElement), E();
205
+ a.devices.reset(O), x.scrollableCanvas = !1, s.getModel().updateDevice(), s.setZoom(100), s.setCoords(0, 0), C.overflowY = "hidden", H(!0), N.forEach(([t, p]) => e.off(t, p)), I(), n.run("studio:canvasReload");
206
+ }), N.forEach(([t, p]) => e.on(t, p)), e.onReady(() => {
207
+ const t = s.getElement(), p = s.getFramesEl();
208
+ A = s.getSpotsEl(), C = t.style, C.overflowX = "hidden", p.style.transition = `transform ${l}s`, H(), S = new ResizeObserver(() => {
209
+ j(), $();
210
+ }), S.observe(t.parentElement), $();
212
211
  }), ne({
213
212
  editor: e,
214
- licenseKey: r.licenseKey,
213
+ licenseKey: d.licenseKey,
215
214
  plan: oe,
216
- pluginName: k,
215
+ pluginName: W,
217
216
  cleanup: () => {
218
217
  e.runCommand(M);
219
218
  }
@@ -1,9 +1,9 @@
1
- (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=`
2
- .gjs-frame-wrapper { transition: width ${y}s !important; }
1
+ (function(y,g){typeof exports=="object"&&typeof module<"u"?module.exports=g():typeof define=="function"&&define.amd?define(g):(y=typeof globalThis<"u"?globalThis:y||self,y.StudioSdkPlugins_canvasFullSize=g())})(this,function(){"use strict";function y(e,a,s){let n,i,c,p,f;const r=a;function l(){const u=Date.now()-p;u<r&&u>=0?n=setTimeout(l,r-u):(n=null,f=e.apply(c,i),c=i=null)}const o=function(){return c=this,i=arguments,p=Date.now(),n||(n=setTimeout(l,r)),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",P="app-stage.grapesjs.com",U=[g,P,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],R="license:check:start",z="license:check:end",F=()=>typeof window<"u",K=({isDev:e,isStage:a})=>`${e?"":`https://${a?P:g}`}/api`,q=()=>{const e=F()&&window.location.hostname;return!!e&&(U.includes(e)||U.some(a=>e.endsWith(a)))};async function B({path:e,baseApiUrl:a,method:s="GET",headers:n={},params:i,body:c}){const f=`${a||K({isDev:!1,isStage:!1})}${e}`,r={method:s,headers:{"Content-Type":"application/json",...n}};c&&(r.body=JSON.stringify(c));const l=i?new URLSearchParams(i).toString():"",o=l?`?${l}`:"",u=await fetch(`${f}${o}`,r);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.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="",p=!1;const f=q(),r=o=>{console.warn("Cleanup plugin:",s,"Reason:",o),i()},l=(o={})=>{var C;const{error:u,sdkLicense:b}=o,w=(C=o.plan)==null?void 0:C.category;if(!(b||o.license)||u)r(u||"Invalid license");else if(w){const $=I[a],A=I[w];$>A&&r({pluginRequiredPlan:a,licensePlan:w})}};e.on(R,o=>{c=o==null?void 0:o.baseApiUrl,p=!0}),e.on(z,o=>{l(o)}),setTimeout(async()=>{if(!p){if(f)return;if(n){const o=await Z({licenseKey:n,pluginName:s,baseApiUrl:c});o&&l(o)}else r("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 N="canvasFullSize",J=v.startup,Q=(e,a)=>{const{rule:s,ruleView:n}=a,{style:i}=s.attributes;if(i&&i[e]){const c=i[e],p=/([0-9.]+)(vh|dvh|lvh|svh)/g,f=p.test(c),r=n.frameView.model;if(f&&r.hasAutoHeight()){const l=c.replace(p,(u,b)=>`${window.innerHeight*(parseFloat(b)/100)}px`),o=s.toCSS({style:{...i,[e]:l}});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,p={deviceMaxWidth:1200,deviceMinHeigth:500,canvasOffsetY:30,canvasOffsetX:50,canvasTransition:.3,frameBorderRadius:5,frameTransition:.3,...a},{canvasOffsetY:f,canvasOffsetX:r,canvasTransition:l,deviceMaxWidth:o,deviceMinHeigth:u,frameBorderRadius:b,frameTransition:w}=p,S=`${u}px`,C=s.events,$="core:preview",A=`${n.events.stopCommand}${$}`,H=s.getConfig(),V=`${N}:disable`,te=i.getAll().map(t=>({...t.attributes})),ne=l*1e3,_={x:r,y:f};let E={},j,T;H.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",S)});const M=t=>{const d="data-gs-plg-full-size",m=document.querySelector(`style[${d}]`);if(t&&m)return m.remove();const h=m||document.createElement("style"),D=s.getZoomMultiplier();h.setAttribute(d,"true"),h.innerHTML=`
2
+ .gjs-frame-wrapper { transition: width ${w}s !important; }
3
3
  .gjs-frame-wrapper__bottom { height: ${f*D}px }
4
- .gjs-frame { border-radius: ${A}px }
5
- `,!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=`
6
- [data-gjs-type="wrapper"] { min-height: ${b}; }
7
- [data-gjs-type="mjml"] { min-height: ${b} !important; }
8
- [data-gjs-type="mj-body"] { min-height: ${b} !important; }
9
- `,!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)}})})});
4
+ .gjs-frame { border-radius: ${b}px }
5
+ `,!m&&document.body.appendChild(h)};e.on(C.frameLoadHead,t=>{if(!H.scrollableCanvas)return;const{window:d}=t,m=d.document,h=m.head,D="data-gs-plg-wrapper-style",L=h.querySelector(`style[${D}]`)||m.createElement("style");L.setAttribute(D,"true"),L.innerHTML=`
6
+ [data-gjs-type="wrapper"] { min-height: ${S}; }
7
+ [data-gjs-type="mjml"] { min-height: ${S} !important; }
8
+ [data-gjs-type="mj-body"] { min-height: ${S} !important; }
9
+ `,!h.contains(L)&&h.appendChild(L)});const k=()=>j.style.display="none",se=()=>j.style.display="",x=y(()=>{s.fitViewport({zoom:t=>t>100?100:t,ignoreHeight:!0,gap:_}),M(),setTimeout(()=>{var d,m;const{em:t}=e;t.destroyed||((m=(d=e.getSelected())==null?void 0:d.getEl())==null||m.scrollIntoView({block:"nearest"}),e.refresh({tools:!0}),se(),n.isActive($)?t.stopDefault():t.runDefault())},ne)},100),oe=(t={})=>{t.options&&t.options.from!=="fitViewport"&&s.fitViewport({zoom:s.getZoom(),ignoreHeight:!0,gap:_})},ie=()=>{k(),x()},ae=()=>{E.overflowX="hidden",E.overflowY="auto"},W=()=>{T==null||T.disconnect(),x.clear()},O=[[i.events.select,ie],[C.zoom,oe],[A,ae],[e.events.destroy,W],[c.events.mountBefore,ee]];n.add(V,()=>{i.devices.reset(te),H.scrollableCanvas=!1,s.getModel().updateDevice(),s.setZoom(100),s.setCoords(0,0),E.overflowY="hidden",M(!0),O.forEach(([t,d])=>e.off(t,d)),W(),n.run("studio:canvasReload")}),O.forEach(([t,d])=>e.on(t,d)),e.onReady(()=>{const t=s.getElement(),d=s.getFramesEl();j=s.getSpotsEl(),E=t.style,E.overflowX="hidden",d.style.transition=`transform ${l}s`,M(),T=new ResizeObserver(()=>{k(),x()}),T.observe(t.parentElement),x()}),Y({editor:e,licenseKey:p.licenseKey,plan:J,pluginName:N,cleanup:()=>{e.runCommand(V)}})})});
@@ -1,6 +1,6 @@
1
1
  import { CommandOptions, Editor } from 'grapesjs';
2
2
  export default function resizeCommand(editor: Editor, options: CommandOptions): {
3
- onStart: (ev: Event) => void;
4
- onEnd: (__: Event, opts: import('grapesjs').CallbackOptions) => void;
5
- onMove: (ev: Event) => void;
3
+ onStart: (ev: PointerEvent) => void;
4
+ onEnd: (__: PointerEvent, opts: import('grapesjs').CallbackOptions) => void;
5
+ onMove: (ev: PointerEvent, opts: import('grapesjs').CallbackOptions) => void;
6
6
  } | undefined;
@@ -1,5 +1,5 @@
1
- "use strict";const q="app.grapesjs.com",K="app-stage.grapesjs.com",U=[q,K,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],st="license:check:start",at="license:check:end",it=()=>typeof window<"u",lt=({isDev:t,isStage:e})=>`${t?"":`https://${e?K:q}`}/api`,ct=()=>{const t=it()&&window.location.hostname;return!!t&&(U.includes(t)||U.some(e=>t.endsWith(e)))};function J(t){return typeof t=="function"}async function pt({path:t,baseApiUrl:e,method:r="GET",headers:o={},params:n,body:i}){const l=`${e||lt({isDev:!1,isStage:!1})}${t}`,c={method:r,headers:{"Content-Type":"application/json",...o}};i&&(c.body=JSON.stringify(i));const p=n?new URLSearchParams(n).toString():"",a=p?`?${p}`:"",d=await fetch(`${l}${a}`,c);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var M=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(M||{});const j={[M.free]:0,[M.startup]:10,[M.business]:20,[M.enterprise]:30};function dt(t){const e=t;return e.init=r=>o=>t(o,r),e}const ut=t=>dt(t);async function gt({editor:t,plan:e,pluginName:r,licenseKey:o,cleanup:n}){let i="",s=!1;const l=ct(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),n()},p=(a={})=>{var S;const{error:d,sdkLicense:u}=a,g=(S=a.plan)==null?void 0:S.category;if(!(u||a.license)||d)c(d||"Invalid license");else if(g){const f=j[e],b=j[g];f>b&&c({pluginRequiredPlan:e,licensePlan:g})}};t.on(st,a=>{i=a==null?void 0:a.baseApiUrl,s=!0}),t.on(at,a=>{p(a)}),setTimeout(async()=>{if(!s){if(l)return;if(o){const a=await mt({licenseKey:o,pluginName:r,baseApiUrl:i});a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function mt(t){const{licenseKey:e,pluginName:r,baseApiUrl:o}=t;try{return(await pt({baseApiUrl:o,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const W="canvasGridMode",ft=M.startup,F="component-grid-mode",_="grid-mode",L="gjs-drag-grid-spot",Q=`${L}__grid-item`,Z=`${L}__grid-target`,V=`${L}__snapped`,yt=`${L}__container`,ht=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",o="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",n=e.querySelector(`style[${t}]`)||e.createElement("style");n.setAttribute(t,"true"),n.innerHTML=`
2
- .${Q} {
1
+ "use strict";const q="app.grapesjs.com",H="app-stage.grapesjs.com",B=[q,H,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],ot="license:check:start",rt="license:check:end",st=()=>typeof window<"u",at=({isDev:t,isStage:e})=>`${t?"":`https://${e?H:q}`}/api`,it=()=>{const t=st()&&window.location.hostname;return!!t&&(B.includes(t)||B.some(e=>t.endsWith(e)))};function Y(t){return typeof t=="function"}async function lt({path:t,baseApiUrl:e,method:r="GET",headers:o={},params:n,body:i}){const l=`${e||at({isDev:!1,isStage:!1})}${t}`,c={method:r,headers:{"Content-Type":"application/json",...o}};i&&(c.body=JSON.stringify(i));const p=n?new URLSearchParams(n).toString():"",a=p?`?${p}`:"",d=await fetch(`${l}${a}`,c);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var R=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(R||{});const O={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function ct(t){const e=t;return e.init=r=>o=>t(o,r),e}const pt=t=>ct(t);async function dt({editor:t,plan:e,pluginName:r,licenseKey:o,cleanup:n}){let i="",s=!1;const l=it(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),n()},p=(a={})=>{var g;const{error:d,sdkLicense:u}=a,m=(g=a.plan)==null?void 0:g.category;if(!(u||a.license)||d)c(d||"Invalid license");else if(m){const w=O[e],b=O[m];w>b&&c({pluginRequiredPlan:e,licensePlan:m})}};t.on(ot,a=>{i=a==null?void 0:a.baseApiUrl,s=!0}),t.on(rt,a=>{p(a)}),setTimeout(async()=>{if(!s){if(l)return;if(o){const a=await ut({licenseKey:o,pluginName:r,baseApiUrl:i});a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function ut(t){const{licenseKey:e,pluginName:r,baseApiUrl:o}=t;try{return(await lt({baseApiUrl:o,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const L="canvasGridMode",mt=R.startup,N="component-grid-mode",A="grid-mode",D="gjs-drag-grid-spot",K=`${D}__grid-item`,X=`${D}__grid-target`,J=`${D}__snapped`,gt=`${D}__container`,ft=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",o="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",n=e.querySelector(`style[${t}]`)||e.createElement("style");n.setAttribute(t,"true"),n.innerHTML=`
2
+ .${K} {
3
3
  outline: 2px solid ${o};
4
4
  background: ${r};
5
5
  outline-offset: -2px;
@@ -8,14 +8,14 @@
8
8
  height: 100%;
9
9
  opacity: 0.1;
10
10
  }
11
- .${V} {
11
+ .${J} {
12
12
  width: 100%;
13
13
  height: 100%;
14
14
  outline: 2px solid ${o};
15
15
  outline-offset: -2px;
16
16
  position: absolute;
17
17
  }
18
- .${Z} {
18
+ .${X} {
19
19
  position: absolute;
20
20
  z-index: -1;
21
21
  background: ${r};
@@ -23,4 +23,4 @@
23
23
  outline-offset: -1px;
24
24
  opacity: 0.35;
25
25
  }
26
- `,e.head.appendChild(n)};function tt(t){const{editor:e,type:r}=t,o=$t(e,t.component),n=B(e,o.component);if(!vt(e,o,n,r))return{target:o,container:n,startScroll:O(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:_,component:n.component})}}function et(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:o,shadowContainerEl:n,spotEl:i,target:s,container:l}=t,{Canvas:c}=e,p=e.config.stylePrefix;i==null||i.appendChild(n),n==null||n.appendChild(r),n==null||n.appendChild(o),wt(n,l),St(r,s,l),bt(o,s),Ct(n,l.el),s.el.style.opacity="0";const a=c.getSpots().filter(d=>d.type!==_);e.em.stopDefault({preserveSelected:!0}),c.removeSpots(a),c.startAutoscroll(),c.getBody().classList.add(`${p}is__grabbing`)}function nt(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:o,target:n,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:c}=n;if(!i){const p=window.getComputedStyle(r);c.addStyle({"grid-area":p.gridArea,width:"",height:""})}n.el.style.opacity="",o.contains(r)&&(o==null||o.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:_}),e.select(c)}function wt(t,{rows:e,columns:r}){const o=[];for(let n=0;n<r.length;n++){o[n]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=Q,s.style.gridArea=`${i+1} / ${n+1}`,o[n][i]=s,t.appendChild(s)}}return o}function St(t,e,r){return t.className=Z,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=rt(e.el,e.computedStyles);return t.className=V,t.style.gridArea=`${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`,t}function Ct(t,e){const r=window.getComputedStyle(e);t.className=yt,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 ot(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function $t(t,e){const r=ot(t,e),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),margin:{top:parseFloat(n.marginTop),right:parseFloat(n.marginRight),bottom:parseFloat(n.marginBottom),left:parseFloat(n.marginLeft)},computedStyles:n}}function B(t,e){const r=e.parent(),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),computedStyles:n,padding:{top:parseFloat(n.paddingTop),right:parseFloat(n.paddingRight),bottom:parseFloat(n.paddingBottom),left:parseFloat(n.paddingLeft)},columns:n.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:n.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(n.columnGap),row:parseInt(n.rowGap)}}}function P(t,e,r,o,n=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+o)*n>r)return s;i+=o+t[s-1]}return t.length+1}function O(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function vt(t,e,r,o){const n=i=>t.em.logWarning(i);return o==="draggable"&&e.component.get(o)===!1?(n(`[${W}] The element is not ${o}`),!0):r.computedStyles.display!=="grid"?(n(`[${W}] The container does not have style display:grid`),!0):!1}function N(t,e,r={}){const o=ot(t,e),n=o==null?void 0:o.parent(),i=n==null?void 0:n.getEl();if(!n||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return J(s)?s({component:o,parent:n,isParentGrid:l}):l}const Y=t=>t.split(" ").map(e=>parseFloat(e));function rt(t,e){const r=t.ownerDocument.defaultView,o=e||r.getComputedStyle(t),n=o.gridArea.split("/").some(w=>isNaN(parseInt(w.trim()))),i={isComputed:n,raw:o.gridArea};if(!n)return{...i,row:{start:parseInt(o.gridRowStart),end:parseInt(o.gridRowEnd)},column:{start:parseInt(o.gridColumnStart),end:parseInt(o.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),c=parseFloat(l.columnGap)||0,p=parseFloat(l.rowGap)||0,a=Y(l.gridTemplateColumns),d=Y(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,g=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),S=t.getBoundingClientRect(),f=(w,C,T,R,A)=>{let x=1,E=R+A;for(let G=0;G<C.length;G++){const D=C[G],I=E+D;if(w>=E&&w<I)return x;E=I+T,x++}return-1},b=f(S.left,a,c,h.left,u),v=f(S.right-1,a,c,h.left,u)+1,m=f(S.top,d,p,h.top,g),y=f(S.bottom-1,d,p,h.top,g)+1;return{...i,row:{start:m,end:y},column:{start:b,end:v}}}function Et(t){t.Commands.add(F,{stop(){},run(e,r,o={}){const n=tt({editor:e,component:o.target,type:"draggable"});if(!n){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p,startScroll:a}=n;let{container:d}=n,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{et({editor:e,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:d}),d=B(e,s.component)},10)},onEnd:(h,S,{cancelled:f})=>{clearTimeout(u),nt({editor:e,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:f}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:S})=>{const{scroll:f}=O(e),{columns:b,rows:v,gap:m,offset:y,padding:w}=d,{offset:C,margin:T}=s,R=C.top-y.top-w.top-T.top+S-a.top+f.top,A=C.left-y.left-w.left-T.left+h-a.left+f.left,x=Math.min(P(b,1,A,m.column,.5),b.length),E=Math.min(P(v,1,R,m.row,.5),v.length),G=Math.min(P(b,x,C.width,m.column)+1,b.length+1),D=Math.min(P(v,E,C.height,m.row)+1,v.length+1);c.style.gridArea=`${E} / ${x} / ${D} / ${G}`,p.style.top=`${R+w.top}px`,p.style.left=`${A+w.left}px`}}).start(o.event)}})}function xt(t,e){const r=tt({editor:t,component:e.target,type:"resizable"});if(!r)return;const{onMove:o,onEnd:n}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p}=r;let{container:a}=r,d="",u;return{onStart:g=>{d=g.target.dataset.gjsHandler||"",u=setTimeout(()=>{et({editor:t,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=B(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(g,h)=>{const{startDim:S,rectDim:f}=h.resizer,b=JSON.stringify(S)===JSON.stringify(f);clearTimeout(u),nt({editor:t,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:b}),n==null||n(g,h)},onMove:g=>{var k;const h=g;if(((k=h.target)==null?void 0:k.nodeName)==="I")return;const{scroll:S}=O(t),f=rt(c);let b=0,v=0,m=0,y=0;const w=s.margin.left,C=s.margin.top,T=s.margin.bottom,R=s.margin.right,{width:A,top:x,left:E,height:G}=s.offset,D=h.clientX,I=h.clientY,$={t:x-C,l:E-w,h:G+C+T,w:A+w+R};d.startsWith("t")?($.t=I-C,$.h=x+G+C+T-I):d.startsWith("b")&&($.h=I-x+C+T),d.endsWith("l")?($.l=D-w,$.w=E+A+w+R-D):d.endsWith("r")&&($.w=D-E+w+R),d.endsWith("l")&&(m=S.left,f.column.start=P(a.columns,1,$.l-a.offset.left-m-a.padding.left,a.gap.column,.5)),d.startsWith("t")&&(b=S.top,f.row.start=P(a.rows,1,$.t-a.offset.top+b-a.padding.top,a.gap.row,.5)),d.endsWith("r")&&(y=S.left,f.column.end=Math.max(P(a.columns,f.column.start,$.w-y,a.gap.column,.5),f.column.start+1)),d.startsWith("b")&&(v=S.top,f.row.end=Math.max(P(a.rows,f.row.start,$.h+v,a.gap.row,.5),f.row.start+1)),c.style.gridArea=`${f.row.start} / ${f.column.start} / ${f.row.end} / ${f.column.end}`,p.style.width=`${$.w+y+m}px`,p.style.height=`${$.h+v-b}px`,p.style.left=`${$.l-a.offset.left-m}px`,p.style.top=`${$.t-a.offset.top+b}px`,o==null||o(g)}}}const H=["px","%","em","rem","vw","vh"],Tt=(t,e)=>{const r=t.Styles.getSectors().find(o=>!!o.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},Rt=(t,e)=>Tt(t,e),Gt=(t,{x:e,y:r,mergable:o}={})=>{const n={property:`${t}-x`,type:"integer",units:H,...e},i={property:`${t}-y`,type:"integer",units:H,...r};return{property:t,type:"composite",properties:[n,i],...o&&{fromStyle(s,{name:l,separator:c,property:p}){const[a,d]=p.getProperties(),[u,g]=(s[l]||"").split(c);return{[a.getId()]:s[a.getName()]||u||"",[d.getId()]:s[d.getName()]||g||u||""}},toStyle(s,{name:l,property:c}){const[p,a]=c.getProperties(),d=s[p.getId()],u=s[a.getId()];return{[l]:d===u?d:`${d} ${u}`}}}}},z={display:["grid"]};function Pt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,o=t.match(e);if(!o)return null;const n=parseInt(o[1],10),i=o[2];let s=i,l=i;const c=i.match(r);return c&&(s=c[1],l=c[2]),{total:n,min:s===l?"":s,max:l}}function At(t={}){let e="",r="",o="",n="";const i=S=>S.split("/").map(f=>f.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",c=t["grid-row"]||"",p=i(s),a=i(l),d=i(c),u=p.length,g=a.length,h=d.length;return u===4?(o=p[0],e=p[1],n=p[2],r=p[3]):u===3?(o=p[0],e=p[1],n=p[2]):u===2?(o=p[0],e=p[1]):u===1&&(o=p[0]),g===2?(e=a[0],r=a[1]):g===1&&(e=a[0]),h===2?(o=d[0],n=d[1]):h===1&&(o=d[0]),{columnStart:e,columnEnd:r,rowStart:o,rowEnd:n}}function X(t){const{property:e,label:r}=t,o="1",n="1fr";return{property:e,label:r,type:"composite",requires:z,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:c}=s,[p,a,d]=c.getProperties(),u=i[l],g=Pt(u),h=(g==null?void 0:g.max)??n;return{[p.id]:(g==null?void 0:g.total)??o,[a.id]:(g==null?void 0:g.min)??"",[d.id]:h===n?"":h}},toStyle(i,{name:s,property:l}){const[c,p,a]=l.getProperties(),d=i[c.id],u=i[p.id],g=i[a.id]||n,h=u&&g?`minmax(${u}, ${g})`:g;return{[s]:`repeat(${d||o}, ${h})`}}}}function Dt(t,e){if(!e.styleableGrid)return;const{property:r,...o}=Rt(t,"display");if(!r)return;const n=r.getOption("grid"),i=o.sector;n||r.addOption({id:"grid",label:"Grid"}),i.addProperty(X({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(X({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 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 c=s["grid-row-start"]||"auto",p=s["grid-row-end"]||"auto",a=s["grid-column-start"]||"auto",d=s["grid-column-end"]||"auto";return{[l]:`${c} / ${a} / ${p} / ${d}`}}},{})}const It=function(t,e={}){const r={itemResizable:!0,...e},{Canvas:o,Commands:n,Components:i}=t,{itemResizable:s}=r,l=o.events,c=n.events,p=i.events,a=`${c.runBeforeCommand}tlb-move`,d=`${c.runBeforeCommand}resize`;let u;Et(t);const g=({options:m})=>{N(t,m.target,r)&&(t.runCommand(F,{...m}),m.abort=!0)},h=({options:m})=>{N(t,m.target,r)&&Object.assign(m.options,xt(t,m))},S=()=>{const m=o.getSpots({type:_}).pop();if(!m)return;let y=m.attributes.spotEl;y||(y=document.createElement("div"),y.className=L,m.set({spotEl:y})),Object.entries(m.getStyle()).forEach(([w,C])=>y.style.setProperty(w,C)),u==null||u.appendChild(y)},f=({spot:m})=>{const y=m.attributes.spotEl;m.type!==_||!y||u==null||u.removeChild(y)};if(s){const m=y=>{const w=J(s)?s({component:y}):s;return typeof w=="boolean"?w:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...w}};t.on(p.resizeInit,y=>{const{component:w}=y;if(N(t,w,r)){const C=m(w);y.resizable=C}})}const b=[[a,g],[d,h],[l.spot,S],[l.spotRemove,f]];b.forEach(([m,y])=>{t.on(m,y)}),t.onReady(()=>{u=o.getSpotsEl(),ht(),Dt(t,r)});const v=()=>{delete t.Commands.commands[F],b.forEach(([m,y])=>{t.off(m,y)})};gt({editor:t,licenseKey:r.licenseKey,plan:ft,pluginName:W,cleanup:v})},Mt=ut(It);module.exports=Mt;
26
+ `,e.head.appendChild(n)};function Q(t){const{editor:e,type:r}=t,o=bt(e,t.component),n=z(e,o.component);if(!Ct(e,o,n,r))return{target:o,container:n,startScroll:et(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:A,component:n.component})}}function Z(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:o,shadowContainerEl:n,spotEl:i,target:s,container:l}=t,{Canvas:c}=e,p=e.config.stylePrefix;i==null||i.appendChild(n),n==null||n.appendChild(r),n==null||n.appendChild(o),yt(n,l),ht(r,s,l),wt(o,s),St(n,l.el),s.el.style.opacity="0";const a=c.getSpots().filter(d=>d.type!==A);e.em.stopDefault({preserveSelected:!0}),c.removeSpots(a),c.startAutoscroll(),c.getBody().classList.add(`${p}is__grabbing`)}function V(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:o,target:n,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:c}=n;if(!i){const p=window.getComputedStyle(r);c.addStyle({"grid-area":p.gridArea,width:"",height:""})}n.el.style.opacity="",o.contains(r)&&(o==null||o.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:A}),e.select(c)}function yt(t,{rows:e,columns:r}){const o=[];for(let n=0;n<r.length;n++){o[n]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=K,s.style.gridArea=`${i+1} / ${n+1}`,o[n][i]=s,t.appendChild(s)}}return o}function ht(t,e,r){return t.className=X,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=nt(e.el,e.computedStyles);return t.className=J,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 tt(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function bt(t,e){const r=tt(t,e),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),margin:{top:parseFloat(n.marginTop),right:parseFloat(n.marginRight),bottom:parseFloat(n.marginBottom),left:parseFloat(n.marginLeft)},computedStyles:n}}function z(t,e){const r=e.parent(),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),computedStyles:n,padding:{top:parseFloat(n.paddingTop),right:parseFloat(n.paddingRight),bottom:parseFloat(n.paddingBottom),left:parseFloat(n.paddingLeft)},columns:n.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:n.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(n.columnGap),row:parseInt(n.rowGap)}}}function E(t,e,r,o,n=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+o)*n>r)return s;i+=o+t[s-1]}return t.length+1}function et(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function Ct(t,e,r,o){const n=i=>t.em.logWarning(i);return o==="draggable"&&e.component.get(o)===!1?(n(`[${L}] The element is not ${o}`),!0):r.computedStyles.display!=="grid"?(n(`[${L}] The container does not have style display:grid`),!0):!1}function _(t,e,r={}){const o=tt(t,e),n=o==null?void 0:o.parent(),i=n==null?void 0:n.getEl();if(!n||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return Y(s)?s({component:o,parent:n,isParentGrid:l}):l}const k=t=>t.split(" ").map(e=>parseFloat(e));function nt(t,e){const r=t.ownerDocument.defaultView,o=e||r.getComputedStyle(t),n=o.gridArea.split("/").some(S=>isNaN(parseInt(S.trim()))),i={isComputed:n,raw:o.gridArea};if(!n)return{...i,row:{start:parseInt(o.gridRowStart),end:parseInt(o.gridRowEnd)},column:{start:parseInt(o.gridColumnStart),end:parseInt(o.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),c=parseFloat(l.columnGap)||0,p=parseFloat(l.rowGap)||0,a=k(l.gridTemplateColumns),d=k(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,m=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),g=t.getBoundingClientRect(),w=(S,C,x,$,M)=>{let G=1,T=$+M;for(let P=0;P<C.length;P++){const I=C[P],W=T+I;if(S>=T&&S<W)return G;T=W+x,G++}return-1},b=w(g.left,a,c,h.left,u),v=w(g.right-1,a,c,h.left,u)+1,y=w(g.top,d,p,h.top,m),f=w(g.bottom-1,d,p,h.top,m)+1;return{...i,row:{start:y,end:f},column:{start:b,end:v}}}function $t(t){t.Commands.add(N,{stop(){},run(e,r,o={}){const n=Q({editor:e,component:o.target,type:"draggable"});if(!n){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p,startScroll:a}=n;let{container:d}=n,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{Z({editor:e,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:d}),d=z(e,s.component)},10)},onEnd:(h,g,{cancelled:w})=>{clearTimeout(u),V({editor:e,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:w}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:g})=>{const{scroll:w}=et(e),{columns:b,rows:v,gap:y,offset:f,padding:S}=d,{offset:C,margin:x}=s,$=C.top-f.top-S.top-x.top+g-a.top+w.top,M=C.left-f.left-S.left-x.left+h-a.left+w.left,G=Math.min(E(b,1,M,y.column,.5),b.length),T=Math.min(E(v,1,$,y.row,.5),v.length),P=Math.min(E(b,G,C.width,y.column)+1,b.length+1),I=Math.min(E(v,T,C.height,y.row)+1,v.length+1);c.style.gridArea=`${T} / ${G} / ${I} / ${P}`,p.style.top=`${$+S.top}px`,p.style.left=`${M+S.left}px`}}).start(o.event)}})}function vt(t,e){const r=Q({editor:t,component:e.component,type:"resizable"});if(!r)return;const{onMove:o,onEnd:n}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p}=r;let{container:a}=r,d="",u;return{onStart:m=>{d=m.target.dataset.gjsHandler||"",u=setTimeout(()=>{Z({editor:t,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=z(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(m,h)=>{const{startDim:g,rectDim:w}=h.resizer,b=JSON.stringify(g)===JSON.stringify(w);clearTimeout(u),V({editor:t,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:b}),n==null||n(m,h)},onMove:(m,h)=>{const g=nt(c),w=s.margin.left,b=s.margin.top,v=s.margin.bottom,y=s.margin.right,{w:f,t:S,l:C,h:x}=h.resizer.rectDim,$={t:S-b,l:C-w,h:x+b+v,w:f+w+y};d.endsWith("l")&&(g.column.start=E(a.columns,1,$.l-a.offset.left-a.padding.left,a.gap.column,.5)),d.startsWith("t")&&(g.row.start=E(a.rows,1,$.t-a.offset.top-a.padding.top,a.gap.row,.5)),d.endsWith("r")&&(g.column.end=Math.max(E(a.columns,g.column.start,$.w,a.gap.column,.5),g.column.start+1)),d.startsWith("b")&&(g.row.end=Math.max(E(a.rows,g.row.start,$.h,a.gap.row,.5),g.row.start+1)),c.style.gridArea=`${g.row.start} / ${g.column.start} / ${g.row.end} / ${g.column.end}`,p.style.width=`${$.w}px`,p.style.height=`${$.h}px`,p.style.left=`${$.l-a.offset.left}px`,p.style.top=`${$.t-a.offset.top}px`,o==null||o(m,h)}}}const U=["px","%","em","rem","vw","vh"],Et=(t,e)=>{const r=t.Styles.getSectors().find(o=>!!o.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},xt=(t,e)=>Et(t,e),Tt=(t,{x:e,y:r,mergable:o}={})=>{const n={property:`${t}-x`,type:"integer",units:U,...e},i={property:`${t}-y`,type:"integer",units:U,...r};return{property:t,type:"composite",properties:[n,i],...o&&{fromStyle(s,{name:l,separator:c,property:p}){const[a,d]=p.getProperties(),[u,m]=(s[l]||"").split(c);return{[a.getId()]:s[a.getName()]||u||"",[d.getId()]:s[d.getName()]||m||u||""}},toStyle(s,{name:l,property:c}){const[p,a]=c.getProperties(),d=s[p.getId()],u=s[a.getId()];return{[l]:d===u?d:`${d} ${u}`}}}}},F={display:["grid"]};function Rt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,o=t.match(e);if(!o)return null;const n=parseInt(o[1],10),i=o[2];let s=i,l=i;const c=i.match(r);return c&&(s=c[1],l=c[2]),{total:n,min:s===l?"":s,max:l}}function Gt(t={}){let e="",r="",o="",n="";const i=g=>g.split("/").map(w=>w.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",c=t["grid-row"]||"",p=i(s),a=i(l),d=i(c),u=p.length,m=a.length,h=d.length;return u===4?(o=p[0],e=p[1],n=p[2],r=p[3]):u===3?(o=p[0],e=p[1],n=p[2]):u===2?(o=p[0],e=p[1]):u===1&&(o=p[0]),m===2?(e=a[0],r=a[1]):m===1&&(e=a[0]),h===2?(o=d[0],n=d[1]):h===1&&(o=d[0]),{columnStart:e,columnEnd:r,rowStart:o,rowEnd:n}}function j(t){const{property:e,label:r}=t,o="1",n="1fr";return{property:e,label:r,type:"composite",requires:F,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:c}=s,[p,a,d]=c.getProperties(),u=i[l],m=Rt(u),h=(m==null?void 0:m.max)??n;return{[p.id]:(m==null?void 0:m.total)??o,[a.id]:(m==null?void 0:m.min)??"",[d.id]:h===n?"":h}},toStyle(i,{name:s,property:l}){const[c,p,a]=l.getProperties(),d=i[c.id],u=i[p.id],m=i[a.id]||n,h=u&&m?`minmax(${u}, ${m})`:m;return{[s]:`repeat(${d||o}, ${h})`}}}}function Pt(t,e){if(!e.styleableGrid)return;const{property:r,...o}=xt(t,"display");if(!r)return;const n=r.getOption("grid"),i=o.sector;n||r.addOption({id:"grid",label:"Grid"}),i.addProperty(j({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(j({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:F,...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:F,generic:!0,properties:[{label:"Row start",property:"grid-row-start",type:"integer",default:"auto"},{label:"Row end",property:"grid-row-end",type:"integer",default:"auto"},{label:"Column start",property:"grid-column-start",type:"integer",default:"auto"},{label:"Column end",property:"grid-column-end",type:"integer",default:"auto"}],fromStyle(s){const l=Gt(s);return{"grid-column-start":s["grid-column-start"]||l.columnStart,"grid-column-end":s["grid-column-end"]||l.columnEnd,"grid-row-start":s["grid-row-start"]||l.rowStart,"grid-row-end":s["grid-row-end"]||l.rowEnd}},toStyle(s,{name:l}){const c=s["grid-row-start"]||"auto",p=s["grid-row-end"]||"auto",a=s["grid-column-start"]||"auto",d=s["grid-column-end"]||"auto";return{[l]:`${c} / ${a} / ${p} / ${d}`}}},{})}const At=function(t,e={}){const r={itemResizable:!0,...e},{Canvas:o,Commands:n,Components:i}=t,{itemResizable:s}=r,l=o.events,c=n.events,p=i.events,a=`${c.runBeforeCommand}tlb-move`,d=`${c.runBeforeCommand}resize`;let u;$t(t);const m=({options:y})=>{_(t,y.target,r)&&(t.runCommand(N,{...y}),y.abort=!0)},h=y=>{const{options:f}=y;_(t,f.component,r)&&(f.options=Object.assign(f.options||{},vt(t,f)))},g=()=>{const y=o.getSpots({type:A}).pop();if(!y)return;let f=y.attributes.spotEl;f||(f=document.createElement("div"),f.className=D,y.set({spotEl:f})),Object.entries(y.getStyle()).forEach(([S,C])=>f.style.setProperty(S,C)),u==null||u.appendChild(f)},w=({spot:y})=>{const f=y.attributes.spotEl;y.type!==A||!f||u==null||u.removeChild(f)};if(s){const y=f=>{const S=Y(s)?s({component:f}):s;return typeof S=="boolean"?S:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...S}};t.on(p.resizeInit,f=>{const{component:S}=f;if(_(t,S,r)){const C=y(S);f.resizable=C}})}const b=[[a,m],[d,h],[l.spot,g],[l.spotRemove,w]];b.forEach(([y,f])=>{t.on(y,f)}),t.onReady(()=>{u=o.getSpotsEl(),ft(),Pt(t,r)});const v=()=>{delete t.Commands.commands[N],b.forEach(([y,f])=>{t.off(y,f)})};dt({editor:t,licenseKey:r.licenseKey,plan:mt,pluginName:L,cleanup:v})},Dt=pt(At);module.exports=Dt;