@grapesjs/studio-sdk-plugins 1.0.29 → 1.0.30

package/dist/canvasScreenshot/index.cjs.d.ts

@@ -0,0 +1,3 @@
+import { CanvasScreenshotOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<CanvasScreenshotOptions>;
+export default _default;

package/dist/canvasScreenshot/index.cjs.js

@@ -0,0 +1 @@
+"use strict";const I="app.grapesjs.com",L="app-stage.grapesjs.com",C="app2.grapesjs.com",P="app-stage2.grapesjs.com",E=[I,C,L,P,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],N="license:check:start",A="license:check:end",D=()=>typeof window<"u",_=(e,n={})=>{const s=O(e)?{id:e,src:e}:e;return new Promise((c,d)=>{var m,h;const{loadedScripts:r}=n,{id:i,src:a}=s,l=document.querySelector(`script[src="${a}"]`);if(l){if((m=n.onScript)==null||m.call(n,l),r&&!r.get(a)){l.addEventListener("load",()=>c(i)),l.addEventListener("error",()=>d(i));return}return c(i)}const u=window.define;window.define=void 0;const t=()=>{r==null||r.set(a,!0),window.define=u},o=document.createElement("script");o.src=a,o.onload=()=>{c(i),t()},o.onerror=()=>{d(i),t()},document.head.appendChild(o),(h=n.onScript)==null||h.call(n,o)})},U=e=>{const n=e.map(s=>_(s));return Promise.allSettled(n)},W=async e=>{const n=window.define;window.define=void 0;const s=await U(e);return window.define=n,s},$=({isDev:e,isStage:n})=>`${e?"":`https://${n?L:I}`}/api`,k=()=>{const e=D()&&window.location.hostname;return!!e&&(E.includes(e)||E.some(n=>e.endsWith(n)))},O=e=>typeof e=="string";async function j({path:e,baseApiUrl:n,method:s="GET",headers:c={},params:d,body:r}){const a=`${n||$({isDev:!1,isStage:!1})}${e}`,l={method:s,headers:{"Content-Type":"application/json",...c}};r&&(l.body=JSON.stringify(r));const u=d?new URLSearchParams(d).toString():"",t=u?`?${u}`:"",o=await fetch(`${a}${t}`,l);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var p=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(p||{});const b={[p.free]:0,[p.startup]:10,[p.business]:20,[p.enterprise]:30};function R(e){const n=e;return n.init=s=>c=>e(c,s),n}const H=e=>R(e);async function K({editor:e,plan:n,pluginName:s,licenseKey:c,cleanup:d}){let r="",i=!1;const a=k(),l=t=>{console.warn("Cleanup plugin:",s,"Reason:",t),d()},u=(t={})=>{var f;const{error:o,sdkLicense:m}=t,h=(f=t.plan)==null?void 0:f.category;if(!(m||t.license)||o)l(o||"Invalid license");else if(h){const v=b[n],w=b[h];v>w&&l({pluginRequiredPlan:n,licensePlan:h})}};e.on(N,t=>{r=t==null?void 0:t.baseApiUrl,i=!0}),e.on(A,t=>{u(t)}),setTimeout(async()=>{if(!i){if(a)return;if(c){const t=await x({licenseKey:c,pluginName:s,baseApiUrl:r});t&&u(t)}else l("The `licenseKey` option not provided")}},2e3)}async function x(e){const{licenseKey:n,pluginName:s,baseApiUrl:c}=e;try{return(await j({baseApiUrl:c,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const G="canvasScreenshot",M=p.startup;var T=(e=>(e.screenshot="studioPlugin:screenshot",e))(T||{});const q=async e=>await W([{id:"html-to-image",src:e}]),B=async(e,n={},s={})=>{const{cdnScript:c}=s;if(!window.htmlToImage){if(!c)return;await q(c)}return new Promise((d,r)=>{(async()=>{try{const{canvasWidth:a,canvasHeight:l,width:u,height:t,type:o,quality:m,addOptions:h}=n,g={pixelRatio:1,width:u,height:t,canvasWidth:a,canvasHeight:l},f=(h==null?void 0:h(g))||g,w=await window.htmlToImage.toCanvas(e,f);w.toBlob(y=>{y?d({file:y,canvas:w}):r(new Error("Failed to create file from canvas"))},o,m)}catch(a){r(a)}})()})},S=T.screenshot,F=function(e,n={}){const{Commands:s,Canvas:c,Storage:d}=e,r=d.events.afterStore,i={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...n};s.add(S,async(u,t,o)=>{const{el:m,...h}=o;return await B(m,h,i)});const a=async()=>{var t;const u=c.getBody();if(!u)return e.log("Canvas element not found");try{const o=await e.runCommand(S,{el:u,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(t=i.screenshotOnSave)==null||t.call(i,{...o,editor:e})}catch(o){console.error("Screenshot error",o)}};i.screenshotOnSave&&e.on(r,a);const l=()=>{delete s.commands[S],e.off(r,a)};K({editor:e,licenseKey:n.licenseKey,plan:M,pluginName:G,cleanup:l})},J=H(F);module.exports=J;

package/dist/canvasScreenshot/index.d.ts

@@ -0,0 +1,3 @@
+import { CanvasScreenshotOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<CanvasScreenshotOptions>;
+export default _default;

package/dist/canvasScreenshot/index.es.d.ts

@@ -0,0 +1,3 @@
+import { CanvasScreenshotOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<CanvasScreenshotOptions>;
+export default _default;

package/dist/canvasScreenshot/index.es.js

@@ -0,0 +1,212 @@
+const I = "app.grapesjs.com", L = "app-stage.grapesjs.com", C = "app2.grapesjs.com", P = "app-stage2.grapesjs.com", E = [
+  I,
+  C,
+  L,
+  P,
+  "localhost",
+  "127.0.0.1",
+  ".local-credentialless.webcontainer.io",
+  // For stackblitz.com demos
+  ".local.webcontainer.io",
+  // For stackblitz.com demos
+  "-sandpack.codesandbox.io"
+  // For Sandpack demos
+], N = "license:check:start", A = "license:check:end", D = () => typeof window < "u", _ = (e, n = {}) => {
+  const s = O(e) ? { id: e, src: e } : e;
+  return new Promise((c, d) => {
+    var m, h;
+    const { loadedScripts: r } = n, { id: i, src: a } = s, l = document.querySelector(`script[src="${a}"]`);
+    if (l) {
+      if ((m = n.onScript) == null || m.call(n, l), r && !r.get(a)) {
+        l.addEventListener("load", () => c(i)), l.addEventListener("error", () => d(i));
+        return;
+      }
+      return c(i);
+    }
+    const u = window.define;
+    window.define = void 0;
+    const t = () => {
+      r == null || r.set(a, !0), window.define = u;
+    }, o = document.createElement("script");
+    o.src = a, o.onload = () => {
+      c(i), t();
+    }, o.onerror = () => {
+      d(i), t();
+    }, document.head.appendChild(o), (h = n.onScript) == null || h.call(n, o);
+  });
+}, U = (e) => {
+  const n = e.map((s) => _(s));
+  return Promise.allSettled(n);
+}, W = async (e) => {
+  const n = window.define;
+  window.define = void 0;
+  const s = await U(e);
+  return window.define = n, s;
+}, $ = ({ isDev: e, isStage: n }) => `${e ? "" : `https://${n ? L : I}`}/api`, k = () => {
+  const e = D() && window.location.hostname;
+  return !!e && (E.includes(e) || E.some((n) => e.endsWith(n)));
+}, O = (e) => typeof e == "string";
+async function j({
+  path: e,
+  baseApiUrl: n,
+  method: s = "GET",
+  headers: c = {},
+  params: d,
+  body: r
+}) {
+  const a = `${n || $({ isDev: !1, isStage: !1 })}${e}`, l = {
+    method: s,
+    headers: {
+      "Content-Type": "application/json",
+      ...c
+    }
+  };
+  r && (l.body = JSON.stringify(r));
+  const u = d ? new URLSearchParams(d).toString() : "", t = u ? `?${u}` : "", o = await fetch(`${a}${t}`, l);
+  if (!o.ok)
+    throw new Error(`HTTP error! status: ${o.status}`);
+  return o.json();
+}
+var p = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(p || {});
+const b = {
+  [p.free]: 0,
+  [p.startup]: 10,
+  [p.business]: 20,
+  [p.enterprise]: 30
+};
+function R(e) {
+  const n = e;
+  return n.init = (s) => (c) => e(c, s), n;
+}
+const H = (e) => /* @__PURE__ */ R(e);
+async function K({
+  editor: e,
+  plan: n,
+  pluginName: s,
+  licenseKey: c,
+  cleanup: d
+}) {
+  let r = "", i = !1;
+  const a = k(), l = (t) => {
+    console.warn("Cleanup plugin:", s, "Reason:", t), d();
+  }, u = (t = {}) => {
+    var f;
+    const { error: o, sdkLicense: m } = t, h = (f = t.plan) == null ? void 0 : f.category;
+    if (!(m || t.license) || o)
+      l(o || "Invalid license");
+    else if (h) {
+      const v = b[n], w = b[h];
+      v > w && l({ pluginRequiredPlan: n, licensePlan: h });
+    }
+  };
+  e.on(N, (t) => {
+    r = t == null ? void 0 : t.baseApiUrl, i = !0;
+  }), e.on(A, (t) => {
+    u(t);
+  }), setTimeout(async () => {
+    if (!i) {
+      if (a) return;
+      if (c) {
+        const t = await x({ licenseKey: c, pluginName: s, baseApiUrl: r });
+        t && u(t);
+      } else
+        l("The `licenseKey` option not provided");
+    }
+  }, 2e3);
+}
+async function x(e) {
+  const { licenseKey: n, pluginName: s, baseApiUrl: c } = e;
+  try {
+    return (await j({
+      baseApiUrl: c,
+      path: `/sdk/${n || "na"}`,
+      method: "POST",
+      params: {
+        d: window.location.hostname,
+        pn: s
+      }
+    })).result || {};
+  } catch (d) {
+    return console.error("Error during SDK license check:", d), !1;
+  }
+}
+const G = "canvasScreenshot", M = p.startup;
+var T = /* @__PURE__ */ ((e) => (e.screenshot = "studioPlugin:screenshot", e))(T || {});
+const q = async (e) => await W([{ id: "html-to-image", src: e }]), B = async (e, n = {}, s = {}) => {
+  const { cdnScript: c } = s;
+  if (!window.htmlToImage) {
+    if (!c) return;
+    await q(c);
+  }
+  return new Promise((d, r) => {
+    (async () => {
+      try {
+        const { canvasWidth: a, canvasHeight: l, width: u, height: t, type: o, quality: m, addOptions: h } = n, g = {
+          pixelRatio: 1,
+          width: u,
+          height: t,
+          canvasWidth: a,
+          canvasHeight: l
+        }, f = (h == null ? void 0 : h(g)) || g, w = await window.htmlToImage.toCanvas(e, f);
+        w.toBlob(
+          (y) => {
+            y ? d({
+              file: y,
+              canvas: w
+            }) : r(new Error("Failed to create file from canvas"));
+          },
+          o,
+          m
+        );
+      } catch (a) {
+        r(a);
+      }
+    })();
+  });
+}, S = T.screenshot, F = function(e, n = {}) {
+  const { Commands: s, Canvas: c, Storage: d } = e, r = d.events.afterStore, i = {
+    cdnScript: "https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",
+    ...n
+  };
+  s.add(S, async (u, t, o) => {
+    const { el: m, ...h } = o;
+    return await B(m, h, i);
+  });
+  const a = async () => {
+    var t;
+    const u = c.getBody();
+    if (!u)
+      return e.log("Canvas element not found");
+    try {
+      const o = await e.runCommand(S, {
+        el: u,
+        canvasWidth: 400,
+        // max element width for the screenshot
+        canvasHeight: 225,
+        // 675 * (400 / 1200)
+        width: 1200,
+        // Desktop size for the screenshot
+        height: 675,
+        //  1200 / (16/9) - 16:9 aspect ratio
+        type: "image/jpeg"
+      });
+      (t = i.screenshotOnSave) == null || t.call(i, { ...o, editor: e });
+    } catch (o) {
+      console.error("Screenshot error", o);
+    }
+  };
+  i.screenshotOnSave && e.on(r, a);
+  const l = () => {
+    delete s.commands[S], e.off(r, a);
+  };
+  K({
+    editor: e,
+    licenseKey: n.licenseKey,
+    plan: M,
+    pluginName: G,
+    cleanup: l
+  });
+}, J = H(F);
+export {
+  J as default
+};

package/dist/canvasScreenshot/index.umd.js

@@ -0,0 +1 @@
+(function(m,f){typeof exports=="object"&&typeof module<"u"?module.exports=f():typeof define=="function"&&define.amd?define(f):(m=typeof globalThis<"u"?globalThis:m||self,m.StudioSdkPlugins_canvasScreenshot=f())})(this,function(){"use strict";const m="app.grapesjs.com",f="app-stage.grapesjs.com",T=[m,"app2.grapesjs.com",f,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],P="license:check:start",A="license:check:end",N=()=>typeof window<"u",C=(e,n={})=>{const s=k(e)?{id:e,src:e}:e;return new Promise((c,d)=>{var p,h;const{loadedScripts:i}=n,{id:r,src:a}=s,l=document.querySelector(`script[src="${a}"]`);if(l){if((p=n.onScript)==null||p.call(n,l),i&&!i.get(a)){l.addEventListener("load",()=>c(r)),l.addEventListener("error",()=>d(r));return}return c(r)}const u=window.define;window.define=void 0;const t=()=>{i==null||i.set(a,!0),window.define=u},o=document.createElement("script");o.src=a,o.onload=()=>{c(r),t()},o.onerror=()=>{d(r),t()},document.head.appendChild(o),(h=n.onScript)==null||h.call(n,o)})},D=e=>{const n=e.map(s=>C(s));return Promise.allSettled(n)},_=async e=>{const n=window.define;window.define=void 0;const s=await D(e);return window.define=n,s},O=({isDev:e,isStage:n})=>`${e?"":`https://${n?f:m}`}/api`,U=()=>{const e=N()&&window.location.hostname;return!!e&&(T.includes(e)||T.some(n=>e.endsWith(n)))},k=e=>typeof e=="string";async function W({path:e,baseApiUrl:n,method:s="GET",headers:c={},params:d,body:i}){const a=`${n||O({isDev:!1,isStage:!1})}${e}`,l={method:s,headers:{"Content-Type":"application/json",...c}};i&&(l.body=JSON.stringify(i));const u=d?new URLSearchParams(d).toString():"",t=u?`?${u}`:"",o=await fetch(`${a}${t}`,l);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var w=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(w||{});const E={[w.free]:0,[w.startup]:10,[w.business]:20,[w.enterprise]:30};function $(e){const n=e;return n.init=s=>c=>e(c,s),n}const j=e=>$(e);async function R({editor:e,plan:n,pluginName:s,licenseKey:c,cleanup:d}){let i="",r=!1;const a=U(),l=t=>{console.warn("Cleanup plugin:",s,"Reason:",t),d()},u=(t={})=>{var g;const{error:o,sdkLicense:p}=t,h=(g=t.plan)==null?void 0:g.category;if(!(p||t.license)||o)l(o||"Invalid license");else if(h){const b=E[n],S=E[h];b>S&&l({pluginRequiredPlan:n,licensePlan:h})}};e.on(P,t=>{i=t==null?void 0:t.baseApiUrl,r=!0}),e.on(A,t=>{u(t)}),setTimeout(async()=>{if(!r){if(a)return;if(c){const t=await x({licenseKey:c,pluginName:s,baseApiUrl:i});t&&u(t)}else l("The `licenseKey` option not provided")}},2e3)}async function x(e){const{licenseKey:n,pluginName:s,baseApiUrl:c}=e;try{return(await W({baseApiUrl:c,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const M="canvasScreenshot",G=w.startup;var I=(e=>(e.screenshot="studioPlugin:screenshot",e))(I||{});const H=async e=>await _([{id:"html-to-image",src:e}]),K=async(e,n={},s={})=>{const{cdnScript:c}=s;if(!window.htmlToImage){if(!c)return;await H(c)}return new Promise((d,i)=>{(async()=>{try{const{canvasWidth:a,canvasHeight:l,width:u,height:t,type:o,quality:p,addOptions:h}=n,y={pixelRatio:1,width:u,height:t,canvasWidth:a,canvasHeight:l},g=(h==null?void 0:h(y))||y,S=await window.htmlToImage.toCanvas(e,g);S.toBlob(L=>{L?d({file:L,canvas:S}):i(new Error("Failed to create file from canvas"))},o,p)}catch(a){i(a)}})()})},v=I.screenshot;return j(function(e,n={}){const{Commands:s,Canvas:c,Storage:d}=e,i=d.events.afterStore,r={cdnScript:"https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js",...n};s.add(v,async(u,t,o)=>{const{el:p,...h}=o;return await K(p,h,r)});const a=async()=>{var t;const u=c.getBody();if(!u)return e.log("Canvas element not found");try{const o=await e.runCommand(v,{el:u,canvasWidth:400,canvasHeight:225,width:1200,height:675,type:"image/jpeg"});(t=r.screenshotOnSave)==null||t.call(r,{...o,editor:e})}catch(o){console.error("Screenshot error",o)}};r.screenshotOnSave&&e.on(i,a);const l=()=>{delete s.commands[v],e.off(i,a)};R({editor:e,licenseKey:n.licenseKey,plan:G,pluginName:M,cleanup:l})})});

package/dist/canvasScreenshot/shared.d.ts

@@ -0,0 +1,3 @@
+import { SdkPlanCategories } from '../utils';
+export declare const PLUGIN_NAME = "canvasScreenshot";
+export declare const PLUGIN_PLAN = SdkPlanCategories.startup;

package/dist/canvasScreenshot/types.d.ts

@@ -0,0 +1,61 @@
+import { Editor } from 'grapesjs';
+import { CanvasScreenshotOptions as CanvasScreenshotOptionsSchema } from './typesSchema';
+export interface CanvasScreenshotOptions extends Omit<CanvasScreenshotOptionsSchema, 'screenshotOnSave'> {
+    /**
+     * If this callback is provided, the screenshot will be taken automatically on each project save.
+     * @example
+     * screenshotOnSave: result => {
+     *  console.log('screenshotOnSave', result);
+     *  myUploadScreenshotFile(result.file);
+     * }
+     */
+    screenshotOnSave?: (props: ScreenshotResult) => void;
+}
+export interface ScreenshotElOptions {
+    /**
+     * Width in pixels to be applied to node before rendering.
+     */
+    width?: number;
+    /**
+     * Height in pixels to be applied to node before rendering.
+     */
+    height?: number;
+    /**
+     * Width of the canvas to be used for rendering.
+     */
+    canvasWidth?: number;
+    /**
+     * Height of the canvas to be used for rendering.
+     */
+    canvasHeight?: number;
+    /**
+     * A string indicating the image format.
+     * @default 'image/png'
+     */
+    type?: string;
+    /**
+     * A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp).
+     * A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     */
+    quality?: number;
+    /**
+     * Additional screenshot library options.
+     * @example
+     * addOptions: (defaultOptions) => ({
+     *   ...defaultOptions,
+     *   backgroundColor: '#fff',
+     * })
+     */
+    addOptions?: (defaultOptions: Record<string, any>) => Record<string, any>;
+}
+export interface ScreenshotResult {
+    editor: Editor;
+    file: Blob;
+    canvas: HTMLCanvasElement;
+}
+export interface CommandScreenshotOptions extends ScreenshotElOptions {
+    el: HTMLElement;
+}
+export declare enum StudioScreenshotCommands {
+    screenshot = "studioPlugin:screenshot"
+}

package/dist/canvasScreenshot/typesSchema.d.ts

@@ -0,0 +1,17 @@
+import { SDKPluginOptions } from '../utils';
+export interface CanvasScreenshotOptions extends SDKPluginOptions {
+    /**
+     * CDN URL of the screenshot library.
+     * @default 'https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.13/html-to-image.min.js'
+     */
+    cdnScript?: string;
+    /**
+     * If this callback is provided, the screenshot will be taken automatically on each project save.
+     * @examples
+     * screenshotOnSave: result => {
+     *  console.log('screenshotOnSave', result);
+     *  myUploadScreenshotFile(result.file);
+     * }
+     */
+    screenshotOnSave?: '__fn__';
+}

package/dist/canvasScreenshot/utils.d.ts

@@ -0,0 +1,3 @@
+import { CanvasScreenshotOptions, ScreenshotElOptions, ScreenshotResult } from './types';
+export declare const loadHtml2Image: (src: string) => Promise<PromiseSettledResult<string>[]>;
+export declare const screenshotEl: (el: HTMLElement, opt?: ScreenshotElOptions, pluginOptions?: CanvasScreenshotOptions) => Promise<Omit<ScreenshotResult, "editor"> | undefined>;

package/dist/index.cjs.d.ts

@@ -14,6 +14,7 @@ export { default as rteProseMirror } from './prosemirror';
 export { default as canvasEmptyState } from './canvasEmptyState';
 export { default as canvasFullSize } from './canvasFullSize';
 export { default as canvasGridMode } from './canvasGridMode';
+export { default as canvasScreenshot } from './canvasScreenshot';
 export { default as layoutSidebarButtons } from './layoutSidebarButtons';
 export { default as presetPrintable } from './presetPrintable';
 export { default as dataSourceEjs } from './dataSourceEjs';