@grapesjs/studio-sdk-plugins 1.0.31 → 1.0.32

package/dist/presetPrintable/index.es.js

@@ -1,8 +1,8 @@
-const F = "app.grapesjs.com", W = "app-stage.grapesjs.com", V = "app2.grapesjs.com", Y = "app-stage2.grapesjs.com", G = [
-  F,
-  V,
+const W = "app.grapesjs.com", C = "app-stage.grapesjs.com", X = "app2.grapesjs.com", Z = "app-stage2.grapesjs.com", U = [
   W,
-  Y,
+  X,
+  C,
+  Z,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,13 +11,13 @@ const F = "app.grapesjs.com", W = "app-stage.grapesjs.com", V = "app2.grapesjs.c
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], J = "license:check:start", X = "license:check:end", Z = () => typeof window < "u", U = (e, n = {}) => {
-  const t = te(e) ? { id: e, src: e } : e;
+], Q = "license:check:start", ee = "license:check:end", te = () => typeof window < "u", O = (e, o = {}) => {
+  const t = ne(e) ? { id: e, src: e } : e;
   return new Promise((s, a) => {
     var g, h;
-    const { loadedScripts: o } = n, { id: i, src: p } = t, c = document.querySelector(`script[src="${p}"]`);
+    const { loadedScripts: n } = o, { id: i, src: p } = t, c = document.querySelector(`script[src="${p}"]`);
     if (c) {
-      if ((g = n.onScript) == null || g.call(n, c), o && !o.get(p)) {
+      if ((g = o.onScript) == null || g.call(o, c), n && !n.get(p)) {
         c.addEventListener("load", () => s(i)), c.addEventListener("error", () => a(i));
         return;
       }
@@ -26,60 +26,60 @@ const F = "app.grapesjs.com", W = "app-stage.grapesjs.com", V = "app2.grapesjs.c
     const u = window.define;
     window.define = void 0;
     const l = () => {
-      o == null || o.set(p, !0), window.define = u;
+      n == null || n.set(p, !0), window.define = u;
     }, r = document.createElement("script");
     r.src = p, r.onload = () => {
       s(i), l();
     }, r.onerror = () => {
       a(i), l();
-    }, document.head.appendChild(r), (h = n.onScript) == null || h.call(n, r);
+    }, document.head.appendChild(r), (h = o.onScript) == null || h.call(o, r);
   });
-}, Q = ({ isDev: e, isStage: n }) => `${e ? "" : `https://${n ? W : F}`}/api`, ee = () => {
-  const e = Z() && window.location.hostname;
-  return !!e && (G.includes(e) || G.some((n) => e.endsWith(n)));
-}, te = (e) => typeof e == "string";
-async function se({
+}, se = ({ isDev: e, isStage: o }) => `${e ? "" : `https://${o ? C : W}`}/api`, oe = () => {
+  const e = te() && window.location.hostname;
+  return !!e && (U.includes(e) || U.some((o) => e.endsWith(o)));
+}, ne = (e) => typeof e == "string";
+async function ae({
   path: e,
-  baseApiUrl: n,
+  baseApiUrl: o,
   method: t = "GET",
   headers: s = {},
   params: a,
-  body: o
+  body: n
 }) {
-  const p = `${n || Q({ isDev: !1, isStage: !1 })}${e}`, c = {
+  const p = `${o || se({ isDev: !1, isStage: !1 })}${e}`, c = {
     method: t,
     headers: {
       "Content-Type": "application/json",
       ...s
     }
   };
-  o && (c.body = JSON.stringify(o));
+  n && (c.body = JSON.stringify(n));
   const u = a ? new URLSearchParams(a).toString() : "", l = u ? `?${u}` : "", r = await fetch(`${p}${l}`, c);
   if (!r.ok)
     throw new Error(`HTTP error! status: ${r.status}`);
   return r.json();
 }
-var B = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(B || {}), z = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.toastRemove = "studio:toastRemove", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.clearPage = "studio:clearPage", e.projectFiles = "studio:projectFiles", e.validateCode = "studio:validateCode", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e.fontManagerOpen = "studio:fontManagerOpen", e.menuFontLoad = "studio:menuFontLoad", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", e.dataSourceSetImporter = "studio:dataSourceSetImporter", e.dataSourceSetExporter = "studio:dataSourceSetExporter", e.setDragAbsolute = "studio:setDragAbsolute", e))(z || {});
-const O = {
-  [B.free]: 0,
-  [B.startup]: 10,
-  [B.business]: 20,
-  [B.enterprise]: 30
+var R = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(R || {}), z = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.toastRemove = "studio:toastRemove", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.dialogExportCode = "studio:dialogExportCode", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.clearPage = "studio:clearPage", e.projectFiles = "studio:projectFiles", e.validateCode = "studio:validateCode", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e.fontManagerOpen = "studio:fontManagerOpen", e.menuFontLoad = "studio:menuFontLoad", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", e.dataSourceSetImporter = "studio:dataSourceSetImporter", e.dataSourceSetExporter = "studio:dataSourceSetExporter", e.setDragAbsolute = "studio:setDragAbsolute", e))(z || {});
+const I = {
+  [R.free]: 0,
+  [R.startup]: 10,
+  [R.business]: 20,
+  [R.enterprise]: 30
 };
-function ne(e) {
-  const n = e;
-  return n.init = (t) => (s) => e(s, t), n;
+function ie(e) {
+  const o = e;
+  return o.init = (t) => (s) => e(s, t), o;
 }
-const oe = (e) => /* @__PURE__ */ ne(e);
-async function ae({
+const re = (e) => /* @__PURE__ */ ie(e);
+async function ce({
   editor: e,
-  plan: n,
+  plan: o,
   pluginName: t,
   licenseKey: s,
   cleanup: a
 }) {
-  let o = "", i = !1;
-  const p = ee(), c = (l) => {
+  let n = "", i = !1;
+  const p = oe(), c = (l) => {
     console.warn("Cleanup plugin:", t, "Reason:", l), a();
   }, u = (l = {}) => {
     var w;
@@ -87,31 +87,31 @@ async function ae({
     if (!(g || l.license) || r)
       c(r || "Invalid license");
     else if (h) {
-      const d = O[n], f = O[h];
-      d > f && c({ pluginRequiredPlan: n, licensePlan: h });
+      const d = I[o], f = I[h];
+      d > f && c({ pluginRequiredPlan: o, licensePlan: h });
     }
   };
-  e.on(J, (l) => {
-    o = l == null ? void 0 : l.baseApiUrl, i = !0;
-  }), e.on(X, (l) => {
+  e.on(Q, (l) => {
+    n = l == null ? void 0 : l.baseApiUrl, i = !0;
+  }), e.on(ee, (l) => {
     u(l);
   }), setTimeout(async () => {
     if (!i) {
       if (p) return;
       if (s) {
-        const l = await ie({ licenseKey: s, pluginName: t, baseApiUrl: o });
+        const l = await le({ licenseKey: s, pluginName: t, baseApiUrl: n });
         l && u(l);
       } else
         c("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function ie(e) {
-  const { licenseKey: n, pluginName: t, baseApiUrl: s } = e;
+async function le(e) {
+  const { licenseKey: o, pluginName: t, baseApiUrl: s } = e;
   try {
-    return (await se({
+    return (await ae({
       baseApiUrl: s,
-      path: `/sdk/${n || "na"}`,
+      path: `/sdk/${o || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
@@ -122,32 +122,32 @@ async function ie(e) {
     return console.error("Error during SDK license check:", a), !1;
   }
 }
-const re = (e) => (n) => {
+const de = (e) => (o) => {
   var t;
-  return ((t = n.getAttribute) == null ? void 0 : t.call(n, q)) === e;
-}, ce = (...e) => (n, t) => e.some((s) => t.is(s)), K = (e, n, t) => {
-  const { doc: s = document } = t, a = t.target || s.head, o = a.querySelector(`style[${e}]`) || s.createElement("style");
-  o.setAttribute(e, "true"), o.innerHTML = n, !a.contains(o) && a.appendChild(o);
-}, le = "gjs-plg-", C = "data-gs-plg-", q = "data-type-role";
-function I(e, n, t) {
-  let s, a, o, i, p;
-  const c = n === void 0 ? 100 : n;
+  return ((t = o.getAttribute) == null ? void 0 : t.call(o, V)) === e;
+}, pe = (...e) => (o, t) => e.some((s) => t.is(s)), K = (e, o, t) => {
+  const { doc: s = document } = t, a = t.target || s.head, n = a.querySelector(`style[${e}]`) || s.createElement("style");
+  n.setAttribute(e, "true"), n.innerHTML = o, !a.contains(n) && a.appendChild(n);
+}, ge = "gjs-plg-", q = "data-gs-plg-", V = "data-type-role";
+function N(e, o, t) {
+  let s, a, n, i, p;
+  const c = o === void 0 ? 100 : o;
   function u() {
     const r = Date.now() - i;
-    r < c && r >= 0 ? s = setTimeout(u, c - r) : (s = null, p = e.apply(o, a), o = a = null);
+    r < c && r >= 0 ? s = setTimeout(u, c - r) : (s = null, p = e.apply(n, a), n = a = null);
   }
   const l = function() {
-    return o = this, a = arguments, i = Date.now(), s || (s = setTimeout(u, c)), p;
+    return n = this, a = arguments, i = Date.now(), s || (s = setTimeout(u, c)), p;
   };
   return l.clear = function() {
     s && (clearTimeout(s), s = null);
   }, l.flush = function() {
-    s && (p = e.apply(o, a), o = a = null, clearTimeout(s), s = null);
+    s && (p = e.apply(n, a), n = a = null, clearTimeout(s), s = null);
   }, l;
 }
 const A = "page-break";
 var m = /* @__PURE__ */ ((e) => (e.A5 = "a5", e.A5Portrait = "a5-portrait", e.A4 = "a4", e.A3 = "a3", e.B5 = "b5", e.B4 = "b4", e.letter = "letter", e.legal = "legal", e.ledger = "ledger", e))(m || {});
-function j(e, n) {
+function _(e, o) {
   const s = {
     mm: 3.7795275590551185,
     // 1mm ≈ 3.78px
@@ -160,40 +160,40 @@ function j(e, n) {
     pc: 16
     // 1pc ≈ 16px
   };
-  return s[n] ? e * s[n] : null;
+  return s[o] ? e * s[o] : null;
 }
-const de = (e, n) => {
-  const { name: t, id: s, width: a, height: o, unit: i } = e, { fixedHeight: p } = n, c = `${a}${i}`, u = `${o}${i}`;
+const ue = (e, o) => {
+  const { name: t, id: s, width: a, height: n, unit: i } = e, { fixedHeight: p } = o, c = `${a}${i}`, u = `${n}${i}`;
   return {
     id: s || t.toLowerCase().replace(/\s/g, "-"),
     name: `${t} (${c} x ${u})`,
-    sizeH: o,
+    sizeH: n,
     sizeW: a,
     sizeUnit: i,
     widthMedia: "",
     width: c,
-    minHeight: p ? "0" : `${j(o, i)}px`,
+    minHeight: p ? "0" : `${_(n, i)}px`,
     height: p ? u : void 0
   };
-}, _ = "page-breaks", S = "gjs-page-breaks-spot", D = (e) => e.type === _;
-function pe(e) {
-  const { Devices: n } = e, { height: t, minHeight: s } = n.getSelected().attributes, o = parseFloat(`${t && t !== "auto" ? t : s}`), i = e.getWrapper(), p = i == null ? void 0 : i.getEl(), c = [];
+}, H = "page-breaks", S = "gjs-page-breaks-spot", j = (e) => e.type === H;
+function he(e) {
+  const { Devices: o } = e, { height: t, minHeight: s } = o.getSelected().attributes, n = parseFloat(`${t && t !== "auto" ? t : s}`), i = e.getWrapper(), p = i == null ? void 0 : i.getEl(), c = [];
   if (!i || !p)
     return c;
   const u = p.getBoundingClientRect().height, r = i.findType(A).map((h) => h.getEl()).filter(Boolean).map((h) => ({ top: h.offsetTop, height: h.offsetHeight }));
   let g = 0;
   for (; g < u; ) {
-    const h = r.find((y) => y.top > g && y.top < g + o);
-    h ? (g = h.top + h.height, c.push(h.top)) : (g += o, g < u && c.push(g));
+    const h = r.find((y) => y.top > g && y.top < g + n);
+    h ? (g = h.top + h.height, c.push(h.top)) : (g += n, g < u && c.push(g));
   }
   return c;
 }
-function ge(e, n) {
+function fe(e, o) {
   const { Canvas: t } = e, s = t.events, a = e.events;
-  let o;
+  let n;
   const i = () => {
     K(
-      `${C}preset-printable-spots`,
+      `${q}preset-printable-spots`,
       `.${S} {
         position: absolute;
         left: 0;
@@ -216,28 +216,28 @@ function ge(e, n) {
       { target: window.document.head }
     );
   }, p = () => {
-    if (n.enablePageBreaksSpot === !1) return;
-    const d = { id: _, type: _, component: e.getWrapper() };
+    if (o.enablePageBreaksSpot === !1) return;
+    const d = { id: H, type: H, component: e.getWrapper() };
     return t.getSpots(d).pop() || t.addSpot(d);
   }, c = ({ spot: d }) => {
     const { spotEl: f } = d.attributes;
-    !D(d) || !f || !o || o.removeChild(f);
+    !j(d) || !f || !n || n.removeChild(f);
   }, u = ({ spot: d }) => {
-    if (!D(d) || !o) return;
+    if (!j(d) || !n) return;
     let { spotEl: f } = d.attributes;
-    f || (f = document.createElement("div"), f.className = `${S}__items`, d.set({ spotEl: f })), o.appendChild(f);
+    f || (f = document.createElement("div"), f.className = `${S}__items`, d.set({ spotEl: f })), n.appendChild(f);
   }, l = ({ spot: d }) => {
     const { spotEl: f, pageBreaks: x = [] } = d.attributes;
-    !D(d) || !f || !o || (Object.entries(d.getStyle()).forEach(([k, R]) => f.style.setProperty(k, R)), f.innerHTML = "", x.forEach((k, R) => {
-      const T = document.createElement("div");
-      T.setAttribute("data-page-number", `${R + 2}`), T.className = S, T.style.top = `${k}px`, f.appendChild(T);
+    !j(d) || !f || !n || (Object.entries(d.getStyle()).forEach(([L, $]) => f.style.setProperty(L, $)), f.innerHTML = "", x.forEach((L, $) => {
+      const E = document.createElement("div");
+      E.setAttribute("data-page-number", `${$ + 2}`), E.className = S, E.style.top = `${L}px`, f.appendChild(E);
     }));
-  }, r = I(() => {
+  }, r = N(() => {
     if (e.em.destroyed) return;
     const d = p();
-    d && d.set({ pageBreaks: pe(e), up: (d.attributes.up || 0) + 1 });
-  }, 150), g = I(r, 200), h = () => {
-    o = t.getSpotsEl(), p();
+    d && d.set({ pageBreaks: he(e), up: (d.attributes.up || 0) + 1 });
+  }, 150), g = N(r, 200), h = () => {
+    n = t.getSpotsEl(), p();
   }, y = () => {
     const d = p();
     d && d.set({ up: (d.attributes.up || 0) + 1 });
@@ -256,16 +256,16 @@ function ge(e, n) {
     w.forEach(([d, f]) => e.off(d, f)), r.clear(), g.clear();
   };
 }
-var H = /* @__PURE__ */ ((e) => (e.print = "presetPrintable:print", e))(H || {});
-const N = (e) => new Promise((n) => {
+var M = /* @__PURE__ */ ((e) => (e.print = "presetPrintable:print", e))(M || {});
+const F = (e) => new Promise((o) => {
   const t = document.createElement("iframe");
-  t.style.cssText = "position: absolute; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none;", t.srcdoc = e.content, t.onload = () => n(t), document.body.appendChild(t);
+  t.style.cssText = "position: absolute; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none;", t.srcdoc = e.content, t.onload = () => o(t), document.body.appendChild(t);
 });
-function ue(e, n) {
+function ve(e, o) {
   const { Commands: t, Pages: s } = e;
   return t.add(
-    H.print,
-    async (a, o, i = {}) => {
+    M.print,
+    async (a, n, i = {}) => {
       const p = {
         page: i.allPages ? void 0 : s.getSelected(),
         styles: "inline",
@@ -276,9 +276,9 @@ function ue(e, n) {
       }, u = (await t.run(z.projectFiles, p)).filter((g) => g.filename.endsWith(".html")), l = u.map((g) => g.content).join('<div style="break-before: page;"></div>'), r = [];
       if (i.separatePrints)
         for (const g of u)
-          r.push(await N(g));
+          r.push(await F(g));
       else
-        r.push(await N({ content: l, filename: "", mimeType: "" }));
+        r.push(await F({ content: l, filename: "", mimeType: "" }));
       for (const g of r) {
         const h = g.contentWindow;
         h.focus(), h.print();
@@ -286,33 +286,33 @@ function ue(e, n) {
       setTimeout(() => r.forEach((g) => g.remove()), 1e3);
     }
   ), t.add("presetPrintable:exp", async (a) => {
-    await U("https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"), await U("https://cdn.jsdelivr.net/npm/jspdf@3.0.0/dist/jspdf.umd.min.js");
-    const { Devices: o, Canvas: i } = a, { sizeW: p, sizeH: c, sizeUnit: u } = o.getSelected().attributes, l = i.getFrameEl().contentDocument, r = "px", g = [j(p, u), j(c, u)], h = new window.jspdf.jsPDF({ unit: r, format: g }), y = l.body;
+    await O("https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"), await O("https://cdn.jsdelivr.net/npm/jspdf@3.0.0/dist/jspdf.umd.min.js");
+    const { Devices: n, Canvas: i } = a, { sizeW: p, sizeH: c, sizeUnit: u } = n.getSelected().attributes, l = i.getFrameEl().contentDocument, r = "px", g = [_(p, u), _(c, u)], h = new window.jspdf.jsPDF({ unit: r, format: g }), y = l.body;
     h.html(y, { callback: (w) => w.save() });
   }), () => {
-    delete e.Commands.commands[H.print];
+    delete e.Commands.commands[M.print];
   };
 }
-function he(e, n) {
-  const { blockPageBreak: t = {} } = n, { Components: s, Blocks: a } = e, o = "Page Break", i = `${le}${A}`;
+function be(e, o) {
+  const { blockPageBreak: t = {} } = o, { Components: s, Blocks: a } = e, n = "Page Break", i = `${ge}${A}`;
   return s.addType(A, {
     block: t && {
-      label: o,
+      label: n,
       media: '<svg viewBox="0 0 24 24"><path d="M18 20H6v-2H4v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2h-2v2M14 2H6a2 2 0 0 0-2 2v8h2V4h8v4h4v4h2V8l-6-6m-3 14H8v-2h3v2m5 0h-3v-2h3v2M3 14h3v2H3v-2m18 2h-3v-2h3v2Z"/></svg>',
       category: "Extra",
       select: !0,
       ...t
     },
-    isComponent: re(A),
+    isComponent: de(A),
     model: {
       defaults: {
-        name: o,
+        name: n,
         classes: i,
-        attributes: { [q]: A },
+        attributes: { [V]: A },
         emptyState: !0,
         stylable: !1,
         droppable: !1,
-        draggable: ce("wrapper"),
+        draggable: pe("wrapper"),
         styles: `.${i} { break-before: page; }`,
         traits: []
       }
@@ -321,12 +321,12 @@ function he(e, n) {
     s.removeType(A), a.remove(A);
   };
 }
-const fe = "presetPrintable", ve = B.free, be = function(e, n = {}) {
-  var M;
+const me = "presetPrintable", ye = R.free, we = function(e, o = {}) {
+  var G;
   const t = {
     selectedDevice: m.A4,
-    ...n
-  }, { Canvas: s, Devices: a, Blocks: o } = e, i = s.events, p = e.events, c = t.selectedDevice || a.getConfig().default, u = [
+    ...o
+  }, { Canvas: s, Devices: a, Blocks: n } = e, i = s.events, p = e.events, c = t.selectedDevice || a.getConfig().default, u = [
     { id: m.A5, name: "A5", width: 148, height: 210, unit: "mm" },
     { id: m.A5Portrait, name: "A5 Portrait", width: 210, height: 148, unit: "mm" },
     { id: m.A4, name: "A4", width: 210, height: 297, unit: "mm" },
@@ -336,27 +336,27 @@ const fe = "presetPrintable", ve = B.free, be = function(e, n = {}) {
     { id: m.letter, name: "Letter", width: 8.5, height: 11, unit: "in" },
     { id: m.legal, name: "Legal", width: 8.5, height: 14, unit: "in" },
     { id: m.ledger, name: "Ledger", width: 11, height: 17, unit: "in" }
-  ], r = (((M = t.devices) == null ? void 0 : M.call(t, { items: u })) || u).map((v) => de(v, t));
+  ], r = (((G = t.devices) == null ? void 0 : G.call(t, { items: u })) || u).map((v) => ue(v, t));
   a.devices.reset(r);
   const g = c && a.get(c) || a.getAll().at(0);
-  a.select(g), ["map", "video"].forEach((v) => o.remove(v));
-  const y = () => {
-    const v = "page-rule", { rules: b } = e.Css, { width: E, height: P, minHeight: L } = a.getSelected().attributes, $ = P && P !== "auto" ? P : L;
-    (b.where({ id: v }).pop() || b.add(
+  a.select(g), ["map", "video"].forEach((v) => n.remove(v));
+  const y = (v = {}) => {
+    const b = "page-rule", { rules: P } = e.Css, { width: T, height: B, minHeight: k } = a.getSelected().attributes, Y = B && B !== "auto" ? B : k, D = P.where({ id: b }).pop(), J = D || P.add(
       {
-        id: v,
+        id: b,
         selectors: [],
         selectorsAdd: "@page"
       },
       { at: 0 }
-    )).setStyle({
-      size: `${E} ${$}`,
-      margin: "0"
+    );
+    (v.fromDeviceChange || !D) && J.addStyle({
+      size: `${T} ${Y}`,
+      ...!D && { margin: "0" }
     });
-  }, w = (v) => {
-    const b = v.document, { minHeight: E } = a.getSelected().attributes, L = `
-      ${!!parseFloat(`${E}`) ? `
-        [data-gjs-type="wrapper"] { min-height: ${E}; }
+  }, w = (v, b = {}) => {
+    const P = v.document, { minHeight: T } = a.getSelected().attributes, k = `
+      ${!!parseFloat(`${T}`) ? `
+        [data-gjs-type="wrapper"] { min-height: ${T}; }
       ` : `
         body {
           overflow: hidden;
@@ -368,24 +368,24 @@ const fe = "presetPrintable", ve = B.free, be = function(e, n = {}) {
         }
       `}
     `;
-    K(`${C}preset-printable`, L, { doc: b, target: b.head }), y();
+    K(`${q}preset-printable`, k, { doc: P, target: P.head }), y(b);
   };
   e.on(i.frameLoadBody, (v) => {
     const b = v.window;
     if (w(b), t.fixedHeight) {
-      const P = v.model.getComponent().getEl();
-      P == null || P.addEventListener("scroll", (L) => {
-        const $ = L.target;
-        $.scrollTop > 0 && $.scrollTo(0, 0);
+      const T = v.model.getComponent().getEl();
+      T == null || T.addEventListener("scroll", (B) => {
+        const k = B.target;
+        k.scrollTop > 0 && k.scrollTo(0, 0);
       });
     }
   }), e.on(a.events.select, () => {
     var b;
     const v = (b = s.getFrameEl().contentDocument) == null ? void 0 : b.defaultView;
-    v && w(v);
+    v && w(v, { fromDeviceChange: !0 });
   });
   const d = () => {
-    const b = e.Css.getRules().filter((E) => E.selectorsToString() === "body").pop();
+    const b = e.Css.getRules().filter((P) => P.selectorsToString() === "body").pop();
     b == null || b.addStyle({
       "margin-top": "",
       "margin-right": "",
@@ -395,21 +395,21 @@ const fe = "presetPrintable", ve = B.free, be = function(e, n = {}) {
     });
   }, f = [[p.projectLoad, d]];
   f.forEach(([v, b]) => e.on(v, b));
-  const x = ge(e, t), k = ue(e), R = he(e, t);
+  const x = fe(e, t), L = ve(e), $ = be(e, t);
   e.onReady(() => {
     e.UndoManager.clear();
   });
-  const T = () => {
-    f.forEach(([v, b]) => e.off(v, b)), x(), k(), R();
+  const E = () => {
+    f.forEach(([v, b]) => e.off(v, b)), x(), L(), $();
   };
-  e.on(p.destroy, T), ae({
+  e.on(p.destroy, E), ce({
     editor: e,
     licenseKey: t.licenseKey,
-    plan: ve,
-    pluginName: fe,
-    cleanup: T
+    plan: ye,
+    pluginName: me,
+    cleanup: E
   });
-}, ye = oe(be);
+}, Pe = re(we);
 export {
-  ye as default
+  Pe as default
 };

package/dist/presetPrintable/index.umd.js

@@ -1,11 +1,11 @@
-(function(B,k){typeof exports=="object"&&typeof module<"u"?module.exports=k():typeof define=="function"&&define.amd?define(k):(B=typeof globalThis<"u"?globalThis:B||self,B.StudioSdkPlugins_presetPrintable=k())})(this,function(){"use strict";const B="app.grapesjs.com",k="app-stage.grapesjs.com",O=[B,"app2.grapesjs.com",k,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],V="license:check:start",Y="license:check:end",J=()=>typeof window<"u",U=(e,n={})=>{const t=Q(e)?{id:e,src:e}:e;return new Promise((s,a)=>{var g,h;const{loadedScripts:o}=n,{id:i,src:p}=t,c=document.querySelector(`script[src="${p}"]`);if(c){if((g=n.onScript)==null||g.call(n,c),o&&!o.get(p)){c.addEventListener("load",()=>s(i)),c.addEventListener("error",()=>a(i));return}return s(i)}const u=window.define;window.define=void 0;const l=()=>{o==null||o.set(p,!0),window.define=u},r=document.createElement("script");r.src=p,r.onload=()=>{s(i),l()},r.onerror=()=>{a(i),l()},document.head.appendChild(r),(h=n.onScript)==null||h.call(n,r)})},X=({isDev:e,isStage:n})=>`${e?"":`https://${n?k:B}`}/api`,Z=()=>{const e=J()&&window.location.hostname;return!!e&&(O.includes(e)||O.some(n=>e.endsWith(n)))},Q=e=>typeof e=="string";async function ee({path:e,baseApiUrl:n,method:t="GET",headers:s={},params:a,body:o}){const p=`${n||X({isDev:!1,isStage:!1})}${e}`,c={method:t,headers:{"Content-Type":"application/json",...s}};o&&(c.body=JSON.stringify(o));const u=a?new URLSearchParams(a).toString():"",l=u?`?${u}`:"",r=await fetch(`${p}${l}`,c);if(!r.ok)throw new Error(`HTTP error! status: ${r.status}`);return r.json()}var R=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(R||{}),I=(e=>(e.toastAdd="studio:toastAdd",e.toastRemove="studio:toastRemove",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.clearPage="studio:clearPage",e.projectFiles="studio:projectFiles",e.validateCode="studio:validateCode",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.fontManagerOpen="studio:fontManagerOpen",e.menuFontLoad="studio:menuFontLoad",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e.dataSourceSetGlobalData="studio:dataSourceSetGlobalData",e.dataSourceSetImporter="studio:dataSourceSetImporter",e.dataSourceSetExporter="studio:dataSourceSetExporter",e.setDragAbsolute="studio:setDragAbsolute",e))(I||{});const N={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function te(e){const n=e;return n.init=t=>s=>e(s,t),n}const se=e=>te(e);async function ne({editor:e,plan:n,pluginName:t,licenseKey:s,cleanup:a}){let o="",i=!1;const p=Z(),c=l=>{console.warn("Cleanup plugin:",t,"Reason:",l),a()},u=(l={})=>{var w;const{error:r,sdkLicense:g}=l,h=(w=l.plan)==null?void 0:w.category;if(!(g||l.license)||r)c(r||"Invalid license");else if(h){const d=N[n],f=N[h];d>f&&c({pluginRequiredPlan:n,licensePlan:h})}};e.on(V,l=>{o=l==null?void 0:l.baseApiUrl,i=!0}),e.on(Y,l=>{u(l)}),setTimeout(async()=>{if(!i){if(p)return;if(s){const l=await oe({licenseKey:s,pluginName:t,baseApiUrl:o});l&&u(l)}else c("The `licenseKey` option not provided")}},2e3)}async function oe(e){const{licenseKey:n,pluginName:t,baseApiUrl:s}=e;try{return(await ee({baseApiUrl:s,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const ae=e=>n=>{var t;return((t=n.getAttribute)==null?void 0:t.call(n,z))===e},ie=(...e)=>(n,t)=>e.some(s=>t.is(s)),F=(e,n,t)=>{const{doc:s=document}=t,a=t.target||s.head,o=a.querySelector(`style[${e}]`)||s.createElement("style");o.setAttribute(e,"true"),o.innerHTML=n,!a.contains(o)&&a.appendChild(o)},re="gjs-plg-",W="data-gs-plg-",z="data-type-role";function K(e,n,t){let s,a,o,i,p;const c=n===void 0?100:n;function u(){const r=Date.now()-i;r<c&&r>=0?s=setTimeout(u,c-r):(s=null,p=e.apply(o,a),o=a=null)}const l=function(){return o=this,a=arguments,i=Date.now(),s||(s=setTimeout(u,c)),p};return l.clear=function(){s&&(clearTimeout(s),s=null)},l.flush=function(){s&&(p=e.apply(o,a),o=a=null,clearTimeout(s),s=null)},l}const T="page-break";var m=(e=>(e.A5="a5",e.A5Portrait="a5-portrait",e.A4="a4",e.A3="a3",e.B5="b5",e.B4="b4",e.letter="letter",e.legal="legal",e.ledger="ledger",e))(m||{});function _(e,n){const s={mm:3.7795275590551185,cm:37.79527559055118,in:96,pt:1.3333333333333333,pc:16};return s[n]?e*s[n]:null}const ce=(e,n)=>{const{name:t,id:s,width:a,height:o,unit:i}=e,{fixedHeight:p}=n,c=`${a}${i}`,u=`${o}${i}`;return{id:s||t.toLowerCase().replace(/\s/g,"-"),name:`${t} (${c} x ${u})`,sizeH:o,sizeW:a,sizeUnit:i,widthMedia:"",width:c,minHeight:p?"0":`${_(o,i)}px`,height:p?u:void 0}},j="page-breaks",x="gjs-page-breaks-spot",M=e=>e.type===j;function le(e){const{Devices:n}=e,{height:t,minHeight:s}=n.getSelected().attributes,o=parseFloat(`${t&&t!=="auto"?t:s}`),i=e.getWrapper(),p=i==null?void 0:i.getEl(),c=[];if(!i||!p)return c;const u=p.getBoundingClientRect().height,r=i.findType(T).map(h=>h.getEl()).filter(Boolean).map(h=>({top:h.offsetTop,height:h.offsetHeight}));let g=0;for(;g<u;){const h=r.find(y=>y.top>g&&y.top<g+o);h?(g=h.top+h.height,c.push(h.top)):(g+=o,g<u&&c.push(g))}return c}function de(e,n){const{Canvas:t}=e,s=t.events,a=e.events;let o;const i=()=>{F(`${W}preset-printable-spots`,`.${x} {
+(function(B,k){typeof exports=="object"&&typeof module<"u"?module.exports=k():typeof define=="function"&&define.amd?define(k):(B=typeof globalThis<"u"?globalThis:B||self,B.StudioSdkPlugins_presetPrintable=k())})(this,function(){"use strict";const B="app.grapesjs.com",k="app-stage.grapesjs.com",U=[B,"app2.grapesjs.com",k,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],Y="license:check:start",J="license:check:end",X=()=>typeof window<"u",I=(e,n={})=>{const t=ee(e)?{id:e,src:e}:e;return new Promise((s,a)=>{var g,h;const{loadedScripts:o}=n,{id:i,src:p}=t,c=document.querySelector(`script[src="${p}"]`);if(c){if((g=n.onScript)==null||g.call(n,c),o&&!o.get(p)){c.addEventListener("load",()=>s(i)),c.addEventListener("error",()=>a(i));return}return s(i)}const u=window.define;window.define=void 0;const l=()=>{o==null||o.set(p,!0),window.define=u},r=document.createElement("script");r.src=p,r.onload=()=>{s(i),l()},r.onerror=()=>{a(i),l()},document.head.appendChild(r),(h=n.onScript)==null||h.call(n,r)})},Z=({isDev:e,isStage:n})=>`${e?"":`https://${n?k:B}`}/api`,Q=()=>{const e=X()&&window.location.hostname;return!!e&&(U.includes(e)||U.some(n=>e.endsWith(n)))},ee=e=>typeof e=="string";async function te({path:e,baseApiUrl:n,method:t="GET",headers:s={},params:a,body:o}){const p=`${n||Z({isDev:!1,isStage:!1})}${e}`,c={method:t,headers:{"Content-Type":"application/json",...s}};o&&(c.body=JSON.stringify(o));const u=a?new URLSearchParams(a).toString():"",l=u?`?${u}`:"",r=await fetch(`${p}${l}`,c);if(!r.ok)throw new Error(`HTTP error! status: ${r.status}`);return r.json()}var R=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(R||{}),N=(e=>(e.toastAdd="studio:toastAdd",e.toastRemove="studio:toastRemove",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.dialogExportCode="studio:dialogExportCode",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.clearPage="studio:clearPage",e.projectFiles="studio:projectFiles",e.validateCode="studio:validateCode",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.fontManagerOpen="studio:fontManagerOpen",e.menuFontLoad="studio:menuFontLoad",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e.dataSourceSetGlobalData="studio:dataSourceSetGlobalData",e.dataSourceSetImporter="studio:dataSourceSetImporter",e.dataSourceSetExporter="studio:dataSourceSetExporter",e.setDragAbsolute="studio:setDragAbsolute",e))(N||{});const F={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function se(e){const n=e;return n.init=t=>s=>e(s,t),n}const ne=e=>se(e);async function oe({editor:e,plan:n,pluginName:t,licenseKey:s,cleanup:a}){let o="",i=!1;const p=Q(),c=l=>{console.warn("Cleanup plugin:",t,"Reason:",l),a()},u=(l={})=>{var w;const{error:r,sdkLicense:g}=l,h=(w=l.plan)==null?void 0:w.category;if(!(g||l.license)||r)c(r||"Invalid license");else if(h){const d=F[n],f=F[h];d>f&&c({pluginRequiredPlan:n,licensePlan:h})}};e.on(Y,l=>{o=l==null?void 0:l.baseApiUrl,i=!0}),e.on(J,l=>{u(l)}),setTimeout(async()=>{if(!i){if(p)return;if(s){const l=await ae({licenseKey:s,pluginName:t,baseApiUrl:o});l&&u(l)}else c("The `licenseKey` option not provided")}},2e3)}async function ae(e){const{licenseKey:n,pluginName:t,baseApiUrl:s}=e;try{return(await te({baseApiUrl:s,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const ie=e=>n=>{var t;return((t=n.getAttribute)==null?void 0:t.call(n,z))===e},re=(...e)=>(n,t)=>e.some(s=>t.is(s)),W=(e,n,t)=>{const{doc:s=document}=t,a=t.target||s.head,o=a.querySelector(`style[${e}]`)||s.createElement("style");o.setAttribute(e,"true"),o.innerHTML=n,!a.contains(o)&&a.appendChild(o)},ce="gjs-plg-",C="data-gs-plg-",z="data-type-role";function K(e,n,t){let s,a,o,i,p;const c=n===void 0?100:n;function u(){const r=Date.now()-i;r<c&&r>=0?s=setTimeout(u,c-r):(s=null,p=e.apply(o,a),o=a=null)}const l=function(){return o=this,a=arguments,i=Date.now(),s||(s=setTimeout(u,c)),p};return l.clear=function(){s&&(clearTimeout(s),s=null)},l.flush=function(){s&&(p=e.apply(o,a),o=a=null,clearTimeout(s),s=null)},l}const E="page-break";var m=(e=>(e.A5="a5",e.A5Portrait="a5-portrait",e.A4="a4",e.A3="a3",e.B5="b5",e.B4="b4",e.letter="letter",e.legal="legal",e.ledger="ledger",e))(m||{});function _(e,n){const s={mm:3.7795275590551185,cm:37.79527559055118,in:96,pt:1.3333333333333333,pc:16};return s[n]?e*s[n]:null}const le=(e,n)=>{const{name:t,id:s,width:a,height:o,unit:i}=e,{fixedHeight:p}=n,c=`${a}${i}`,u=`${o}${i}`;return{id:s||t.toLowerCase().replace(/\s/g,"-"),name:`${t} (${c} x ${u})`,sizeH:o,sizeW:a,sizeUnit:i,widthMedia:"",width:c,minHeight:p?"0":`${_(o,i)}px`,height:p?u:void 0}},j="page-breaks",D="gjs-page-breaks-spot",M=e=>e.type===j;function de(e){const{Devices:n}=e,{height:t,minHeight:s}=n.getSelected().attributes,o=parseFloat(`${t&&t!=="auto"?t:s}`),i=e.getWrapper(),p=i==null?void 0:i.getEl(),c=[];if(!i||!p)return c;const u=p.getBoundingClientRect().height,r=i.findType(E).map(h=>h.getEl()).filter(Boolean).map(h=>({top:h.offsetTop,height:h.offsetHeight}));let g=0;for(;g<u;){const h=r.find(y=>y.top>g&&y.top<g+o);h?(g=h.top+h.height,c.push(h.top)):(g+=o,g<u&&c.push(g))}return c}function pe(e,n){const{Canvas:t}=e,s=t.events,a=e.events;let o;const i=()=>{W(`${C}preset-printable-spots`,`.${D} {
         position: absolute;
         left: 0;
         width: 100%;
         border-top: 1px dashed var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue));
         color: var(--gs-theme-cl-prm-txt, var(--gjs-font-color));
       }
-      .${x}::after {
+      .${D}::after {
         background-color: var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight));
         content: attr(data-page-number);
         display: block;
@@ -16,9 +16,9 @@
         right: 0;
         transform: translate(100%, -50%);
       }
-      `,{target:window.document.head})},p=()=>{if(n.enablePageBreaksSpot===!1)return;const d={id:j,type:j,component:e.getWrapper()};return t.getSpots(d).pop()||t.addSpot(d)},c=({spot:d})=>{const{spotEl:f}=d.attributes;!M(d)||!f||!o||o.removeChild(f)},u=({spot:d})=>{if(!M(d)||!o)return;let{spotEl:f}=d.attributes;f||(f=document.createElement("div"),f.className=`${x}__items`,d.set({spotEl:f})),o.appendChild(f)},l=({spot:d})=>{const{spotEl:f,pageBreaks:G=[]}=d.attributes;!M(d)||!f||!o||(Object.entries(d.getStyle()).forEach(([L,S])=>f.style.setProperty(L,S)),f.innerHTML="",G.forEach((L,S)=>{const E=document.createElement("div");E.setAttribute("data-page-number",`${S+2}`),E.className=x,E.style.top=`${L}px`,f.appendChild(E)}))},r=K(()=>{if(e.em.destroyed)return;const d=p();d&&d.set({pageBreaks:le(e),up:(d.attributes.up||0)+1})},150),g=K(r,200),h=()=>{o=t.getSpotsEl(),p()},y=()=>{const d=p();d&&d.set({up:(d.attributes.up||0)+1})},w=[["component:input",r],["frame:scroll",y],[a.update,r],[s.spotAdd,u],[s.spotUpdate,l],[s.spotRemove,c],[s.frameLoadBody,h]];return w.forEach(([d,f])=>e.on(d,f)),e.onReady(()=>{i(),new ResizeObserver(y).observe(t.getElement().parentElement)}),()=>{w.forEach(([d,f])=>e.off(d,f)),r.clear(),g.clear()}}var H=(e=>(e.print="presetPrintable:print",e))(H||{});const C=e=>new Promise(n=>{const t=document.createElement("iframe");t.style.cssText="position: absolute; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none;",t.srcdoc=e.content,t.onload=()=>n(t),document.body.appendChild(t)});function pe(e,n){const{Commands:t,Pages:s}=e;return t.add(H.print,async(a,o,i={})=>{const p={page:i.allPages?void 0:s.getSelected(),styles:"inline",optionsHtml:{exporter:null}},u=(await t.run(I.projectFiles,p)).filter(g=>g.filename.endsWith(".html")),l=u.map(g=>g.content).join('<div style="break-before: page;"></div>'),r=[];if(i.separatePrints)for(const g of u)r.push(await C(g));else r.push(await C({content:l,filename:"",mimeType:""}));for(const g of r){const h=g.contentWindow;h.focus(),h.print()}setTimeout(()=>r.forEach(g=>g.remove()),1e3)}),t.add("presetPrintable:exp",async a=>{await U("https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"),await U("https://cdn.jsdelivr.net/npm/jspdf@3.0.0/dist/jspdf.umd.min.js");const{Devices:o,Canvas:i}=a,{sizeW:p,sizeH:c,sizeUnit:u}=o.getSelected().attributes,l=i.getFrameEl().contentDocument,r="px",g=[_(p,u),_(c,u)],h=new window.jspdf.jsPDF({unit:r,format:g}),y=l.body;h.html(y,{callback:w=>w.save()})}),()=>{delete e.Commands.commands[H.print]}}function ge(e,n){const{blockPageBreak:t={}}=n,{Components:s,Blocks:a}=e,o="Page Break",i=`${re}${T}`;return s.addType(T,{block:t&&{label:o,media:'<svg viewBox="0 0 24 24"><path d="M18 20H6v-2H4v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2h-2v2M14 2H6a2 2 0 0 0-2 2v8h2V4h8v4h4v4h2V8l-6-6m-3 14H8v-2h3v2m5 0h-3v-2h3v2M3 14h3v2H3v-2m18 2h-3v-2h3v2Z"/></svg>',category:"Extra",select:!0,...t},isComponent:ae(T),model:{defaults:{name:o,classes:i,attributes:{[z]:T},emptyState:!0,stylable:!1,droppable:!1,draggable:ie("wrapper"),styles:`.${i} { break-before: page; }`,traits:[]}}}),()=>{s.removeType(T),a.remove(T)}}const ue="presetPrintable",he=R.free;return se(function(e,n={}){var q;const t={selectedDevice:m.A4,...n},{Canvas:s,Devices:a,Blocks:o}=e,i=s.events,p=e.events,c=t.selectedDevice||a.getConfig().default,u=[{id:m.A5,name:"A5",width:148,height:210,unit:"mm"},{id:m.A5Portrait,name:"A5 Portrait",width:210,height:148,unit:"mm"},{id:m.A4,name:"A4",width:210,height:297,unit:"mm"},{id:m.A3,name:"A3",width:297,height:420,unit:"mm"},{id:m.B5,name:"B5",width:176,height:250,unit:"mm"},{id:m.B4,name:"B4",width:250,height:353,unit:"mm"},{id:m.letter,name:"Letter",width:8.5,height:11,unit:"in"},{id:m.legal,name:"Legal",width:8.5,height:14,unit:"in"},{id:m.ledger,name:"Ledger",width:11,height:17,unit:"in"}],r=(((q=t.devices)==null?void 0:q.call(t,{items:u}))||u).map(v=>ce(v,t));a.devices.reset(r);const g=c&&a.get(c)||a.getAll().at(0);a.select(g),["map","video"].forEach(v=>o.remove(v));const y=()=>{const v="page-rule",{rules:b}=e.Css,{width:A,height:P,minHeight:$}=a.getSelected().attributes,D=P&&P!=="auto"?P:$;(b.where({id:v}).pop()||b.add({id:v,selectors:[],selectorsAdd:"@page"},{at:0})).setStyle({size:`${A} ${D}`,margin:"0"})},w=v=>{const b=v.document,{minHeight:A}=a.getSelected().attributes,$=`
-      ${!!parseFloat(`${A}`)?`
-        [data-gjs-type="wrapper"] { min-height: ${A}; }
+      `,{target:window.document.head})},p=()=>{if(n.enablePageBreaksSpot===!1)return;const d={id:j,type:j,component:e.getWrapper()};return t.getSpots(d).pop()||t.addSpot(d)},c=({spot:d})=>{const{spotEl:f}=d.attributes;!M(d)||!f||!o||o.removeChild(f)},u=({spot:d})=>{if(!M(d)||!o)return;let{spotEl:f}=d.attributes;f||(f=document.createElement("div"),f.className=`${D}__items`,d.set({spotEl:f})),o.appendChild(f)},l=({spot:d})=>{const{spotEl:f,pageBreaks:G=[]}=d.attributes;!M(d)||!f||!o||(Object.entries(d.getStyle()).forEach(([$,x])=>f.style.setProperty($,x)),f.innerHTML="",G.forEach(($,x)=>{const A=document.createElement("div");A.setAttribute("data-page-number",`${x+2}`),A.className=D,A.style.top=`${$}px`,f.appendChild(A)}))},r=K(()=>{if(e.em.destroyed)return;const d=p();d&&d.set({pageBreaks:de(e),up:(d.attributes.up||0)+1})},150),g=K(r,200),h=()=>{o=t.getSpotsEl(),p()},y=()=>{const d=p();d&&d.set({up:(d.attributes.up||0)+1})},w=[["component:input",r],["frame:scroll",y],[a.update,r],[s.spotAdd,u],[s.spotUpdate,l],[s.spotRemove,c],[s.frameLoadBody,h]];return w.forEach(([d,f])=>e.on(d,f)),e.onReady(()=>{i(),new ResizeObserver(y).observe(t.getElement().parentElement)}),()=>{w.forEach(([d,f])=>e.off(d,f)),r.clear(),g.clear()}}var H=(e=>(e.print="presetPrintable:print",e))(H||{});const q=e=>new Promise(n=>{const t=document.createElement("iframe");t.style.cssText="position: absolute; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none;",t.srcdoc=e.content,t.onload=()=>n(t),document.body.appendChild(t)});function ge(e,n){const{Commands:t,Pages:s}=e;return t.add(H.print,async(a,o,i={})=>{const p={page:i.allPages?void 0:s.getSelected(),styles:"inline",optionsHtml:{exporter:null}},u=(await t.run(N.projectFiles,p)).filter(g=>g.filename.endsWith(".html")),l=u.map(g=>g.content).join('<div style="break-before: page;"></div>'),r=[];if(i.separatePrints)for(const g of u)r.push(await q(g));else r.push(await q({content:l,filename:"",mimeType:""}));for(const g of r){const h=g.contentWindow;h.focus(),h.print()}setTimeout(()=>r.forEach(g=>g.remove()),1e3)}),t.add("presetPrintable:exp",async a=>{await I("https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"),await I("https://cdn.jsdelivr.net/npm/jspdf@3.0.0/dist/jspdf.umd.min.js");const{Devices:o,Canvas:i}=a,{sizeW:p,sizeH:c,sizeUnit:u}=o.getSelected().attributes,l=i.getFrameEl().contentDocument,r="px",g=[_(p,u),_(c,u)],h=new window.jspdf.jsPDF({unit:r,format:g}),y=l.body;h.html(y,{callback:w=>w.save()})}),()=>{delete e.Commands.commands[H.print]}}function ue(e,n){const{blockPageBreak:t={}}=n,{Components:s,Blocks:a}=e,o="Page Break",i=`${ce}${E}`;return s.addType(E,{block:t&&{label:o,media:'<svg viewBox="0 0 24 24"><path d="M18 20H6v-2H4v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2h-2v2M14 2H6a2 2 0 0 0-2 2v8h2V4h8v4h4v4h2V8l-6-6m-3 14H8v-2h3v2m5 0h-3v-2h3v2M3 14h3v2H3v-2m18 2h-3v-2h3v2Z"/></svg>',category:"Extra",select:!0,...t},isComponent:ie(E),model:{defaults:{name:o,classes:i,attributes:{[z]:E},emptyState:!0,stylable:!1,droppable:!1,draggable:re("wrapper"),styles:`.${i} { break-before: page; }`,traits:[]}}}),()=>{s.removeType(E),a.remove(E)}}const he="presetPrintable",fe=R.free;return ne(function(e,n={}){var V;const t={selectedDevice:m.A4,...n},{Canvas:s,Devices:a,Blocks:o}=e,i=s.events,p=e.events,c=t.selectedDevice||a.getConfig().default,u=[{id:m.A5,name:"A5",width:148,height:210,unit:"mm"},{id:m.A5Portrait,name:"A5 Portrait",width:210,height:148,unit:"mm"},{id:m.A4,name:"A4",width:210,height:297,unit:"mm"},{id:m.A3,name:"A3",width:297,height:420,unit:"mm"},{id:m.B5,name:"B5",width:176,height:250,unit:"mm"},{id:m.B4,name:"B4",width:250,height:353,unit:"mm"},{id:m.letter,name:"Letter",width:8.5,height:11,unit:"in"},{id:m.legal,name:"Legal",width:8.5,height:14,unit:"in"},{id:m.ledger,name:"Ledger",width:11,height:17,unit:"in"}],r=(((V=t.devices)==null?void 0:V.call(t,{items:u}))||u).map(v=>le(v,t));a.devices.reset(r);const g=c&&a.get(c)||a.getAll().at(0);a.select(g),["map","video"].forEach(v=>o.remove(v));const y=(v={})=>{const b="page-rule",{rules:P}=e.Css,{width:T,height:L,minHeight:S}=a.getSelected().attributes,ve=L&&L!=="auto"?L:S,O=P.where({id:b}).pop(),be=O||P.add({id:b,selectors:[],selectorsAdd:"@page"},{at:0});(v.fromDeviceChange||!O)&&be.addStyle({size:`${T} ${ve}`,...!O&&{margin:"0"}})},w=(v,b={})=>{const P=v.document,{minHeight:T}=a.getSelected().attributes,S=`
+      ${!!parseFloat(`${T}`)?`
+        [data-gjs-type="wrapper"] { min-height: ${T}; }
       `:`
         body {
           overflow: hidden;
@@ -29,4 +29,4 @@
             height: 100dvh;
         }
       `}
-    `;F(`${W}preset-printable`,$,{doc:b,target:b.head}),y()};e.on(i.frameLoadBody,v=>{const b=v.window;if(w(b),t.fixedHeight){const P=v.model.getComponent().getEl();P==null||P.addEventListener("scroll",$=>{const D=$.target;D.scrollTop>0&&D.scrollTo(0,0)})}}),e.on(a.events.select,()=>{var b;const v=(b=s.getFrameEl().contentDocument)==null?void 0:b.defaultView;v&&w(v)});const d=()=>{const b=e.Css.getRules().filter(A=>A.selectorsToString()==="body").pop();b==null||b.addStyle({"margin-top":"","margin-right":"","margin-bottom":"","margin-left":"",margin:"0"})},f=[[p.projectLoad,d]];f.forEach(([v,b])=>e.on(v,b));const G=de(e,t),L=pe(e),S=ge(e,t);e.onReady(()=>{e.UndoManager.clear()});const E=()=>{f.forEach(([v,b])=>e.off(v,b)),G(),L(),S()};e.on(p.destroy,E),ne({editor:e,licenseKey:t.licenseKey,plan:he,pluginName:ue,cleanup:E})})});
+    `;W(`${C}preset-printable`,S,{doc:P,target:P.head}),y(b)};e.on(i.frameLoadBody,v=>{const b=v.window;if(w(b),t.fixedHeight){const T=v.model.getComponent().getEl();T==null||T.addEventListener("scroll",L=>{const S=L.target;S.scrollTop>0&&S.scrollTo(0,0)})}}),e.on(a.events.select,()=>{var b;const v=(b=s.getFrameEl().contentDocument)==null?void 0:b.defaultView;v&&w(v,{fromDeviceChange:!0})});const d=()=>{const b=e.Css.getRules().filter(P=>P.selectorsToString()==="body").pop();b==null||b.addStyle({"margin-top":"","margin-right":"","margin-bottom":"","margin-left":"",margin:"0"})},f=[[p.projectLoad,d]];f.forEach(([v,b])=>e.on(v,b));const G=pe(e,t),$=ge(e),x=ue(e,t);e.onReady(()=>{e.UndoManager.clear()});const A=()=>{f.forEach(([v,b])=>e.off(v,b)),G(),$(),x()};e.on(p.destroy,A),oe({editor:e,licenseKey:t.licenseKey,plan:fe,pluginName:he,cleanup:A})})});

package/dist/presetPrintable/types.d.ts

@@ -19,6 +19,9 @@ export interface CreateDevicePrintableProps {
     unit: string;
     id?: string;
 }
+export interface UpdatePrintStyleOptions {
+    fromDeviceChange?: boolean;
+}
 export interface SpotPageBreaksProps extends CanvasSpotProps {
     pageBreaks?: number[];
     spotEl?: HTMLElement;