@grapesjs/studio-sdk-plugins 1.0.19 → 1.0.20-rc.1

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

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

package/dist/rendererReact/index.cjs.js

@@ -0,0 +1 @@
+"use strict";const m=require("react/jsx-runtime"),h=require("react"),D=require("react-dom/client"),A="app.grapesjs.com",N="app-stage.grapesjs.com",x=[A,N,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],L="license:check:start",O="license:check:end",U=()=>typeof window<"u",j=({isDev:e,isStage:t})=>`${e?"":`https://${t?N:A}`}/api`,W=()=>{const e=U()&&window.location.hostname;return!!e&&(x.includes(e)||x.some(t=>e.endsWith(t)))};async function P({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:r,body:i}){const c=`${t||j({isDev:!1,isStage:!1})}${e}`,l={method:n,headers:{"Content-Type":"application/json",...s}};i&&(l.body=JSON.stringify(i));const u=r?new URLSearchParams(r).toString():"",a=u?`?${u}`:"",d=await fetch(`${c}${a}`,l);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var g=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(g||{});const R={[g.free]:0,[g.startup]:10,[g.business]:20,[g.enterprise]:30};function I(e){const t=e;return t.init=n=>s=>e(s,n),t}const K=e=>I(e);async function $({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:r}){let i="",o=!1;const c=W(),l=a=>{console.warn("Cleanup plugin:",n,"Reason:",a),r()},u=(a={})=>{var y;const{error:d,sdkLicense:p}=a,f=(y=a.plan)==null?void 0:y.category;if(!(p||a.license)||d)l(d||"Invalid license");else if(f){const w=R[t],v=R[f];w>v&&l({pluginRequiredPlan:t,licensePlan:f})}};e.on(L,a=>{i=a==null?void 0:a.baseApiUrl,o=!0}),e.on(O,a=>{u(a)}),setTimeout(async()=>{if(!o){if(c)return;if(s){const a=await V({licenseKey:s,pluginName:n,baseApiUrl:i});a&&u(a)}else l("The `licenseKey` option not provided")}},2e3)}async function V(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await P({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(r){return console.error("Error during SDK license check:",r),!1}}function E(e){const t={};let n=!1;for(const s in e)if(Object.prototype.hasOwnProperty.call(e,s)){const r=e[s];if(typeof r=="string"||typeof r=="number"){const i=s.includes("-")?s.replace(/-([a-z])/g,o=>o[1].toUpperCase()):s;t[i]=r,n=!0}}return n?t:void 0}function M(e){const t={};return e.split(";").forEach(n=>{if(!n.trim())return;const s=n.indexOf(":");if(s>0){const r=n.substring(0,s).trim(),i=n.substring(s+1).trim();if(r&&i){const o=r.replace(/-([a-z])/g,c=>c[1].toUpperCase());t[o]=i}}}),Object.keys(t).length>0?t:void 0}function q(e){if(e){if(typeof e=="object"&&!Array.isArray(e))return E(e);if(typeof e=="string"){let t=M(e);if(!t)try{const n=JSON.parse(e);typeof n=="object"&&n!==null&&!Array.isArray(n)&&(t=E(n))}catch(n){console.error("Failed to parse style string as JSON",n)}return t}if(Array.isArray(e)){const t={};return e.forEach(n=>{if(typeof n=="object"&&n!==null){const s=n.name||n.property,r=n.value;if(typeof s=="string"&&s&&r!==void 0&&r!==""){const i=s.replace(/-([a-z])/g,o=>o[1].toUpperCase());t[i]=r}}}),Object.keys(t).length>0?t:void 0}}}function z(e){return S[e]?S[e]:e.includes("-")?e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase()):e}function F(e){var s;const t={},n=((s=e.xmlns)==null?void 0:s.includes("svg"))||e.viewBox!==void 0||e.d!==void 0;for(const[r,i]of Object.entries(e))if(r==="style")t.style=q(i);else if(r.startsWith("data-"))t[r]=i;else{const o=z(r);n||J.has(o)||o.startsWith("svg")?t[o]=i:!B.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[`data-${r.toLowerCase()}`]=i:t[o]=i}return t}const B=new Set(["className","id","style","href","src","alt","title","target","rel","type","name","value","placeholder","onClick","onChange","onSubmit","onBlur","onFocus","disabled","readOnly","checked","selected","multiple","width","height","maxLength","min","max","step","rows","cols","autoComplete","autoFocus","required","spellCheck","tabIndex","aria-label","aria-labelledby","aria-describedby","role"]),J=new Set(["x","y","d","cx","cy","r","rx","ry","x1","x2","y1","y2","points","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","strokeDasharray","strokeOpacity","fillOpacity","fillRule","clipRule","transform","viewBox","preserveAspectRatio","pathLength","vectorEffect","dominantBaseline","alignmentBaseline","textAnchor","fontFamily","fontSize","fontStyle","fontWeight","textDecoration","baselineShift","opacity","mask","clipPath","overflow","pointerEvents"]),S={class:"className",for:"htmlFor","http-equiv":"httpEquiv","accept-charset":"acceptCharset","stroke-width":"strokeWidth","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","fill-rule":"fillRule","clip-rule":"clipRule","stroke-miterlimit":"strokeMiterlimit","stroke-dasharray":"strokeDasharray","stroke-opacity":"strokeOpacity","fill-opacity":"fillOpacity","font-family":"fontFamily","font-size":"fontSize","text-anchor":"textAnchor"};function G(e,t,n){const[s,r]=h.useState();return{connectDom:h.useCallback(o=>{if(!o)return;const c=Q(e,t,o,n);r(c)},[s]),view:s}}function H(e){const[t,n]=h.useState(0);return h.useEffect(()=>{if(!e)return()=>{};const s=()=>n(c=>c+1),{em:r}=e,o=`${r.Components.events.update}:components`;return e.on(o,s),()=>e.off(o,s)},[e]),t}function Q(e,t,n,s){var c;const{em:r,Components:i}=e;let o=t.getView();if((o==null?void 0:o.el)===n)return o;if(!o){const{ComponentView:l}=i,{draggableComponents:u}=i.config,a=t.attributes.type||"default",d=((c=i.getType(a))==null?void 0:c.view)||l,p={draggableComponents:u,frameView:s,em:r},f=d.extend({initComponents(){},_createElement(){return n},render(){return this._ensureElement(),this._setData(),this.renderAttributes(),this.postRender(),this}});o=new f({el:n,config:p,model:t})}return o.el=n,o.render(),o}function X(e,t){const{Components:n}=e,s=r=>{const{id:i,model:o}=r;n.addType(i,{model:{toJSON(...c){const l=o.prototype.toJSON.apply(this,c);return l.tagName=this.tagName,l}}})};n.getTypes().forEach(s),e.on("component:type:add",s),Object.entries(t.components||{}).forEach(([r,i])=>{var o;n.addType(r,{isComponent:c=>(c==null?void 0:c.tagName)===r,model:{defaults:{type:r,traits:i.props?i.props():[],...((o=i.model)==null?void 0:o.defaults)||{}}}})})}function T(e){var b;const{component:t,config:n,editor:s,frameView:r,onMount:i,tagName:o}=e,{connectDom:c,view:l}=G(s,t,r),u=H(t);h.useEffect(()=>{if(!l||!i)return;const C=setTimeout(()=>i(l));return()=>clearTimeout(C)},[l]);const a=t.get("type")||"default",d=t.content,p=(b=n.components)==null?void 0:b[a],f=(p==null?void 0:p.component)||o||t.tagName||"div",k=t.components(),y=k.length?k.map(C=>m.jsx(T,{component:C,config:n,editor:s,frameView:r},C.cid)):d,w=F(t.getAttributes()),v=p==null?void 0:p.editorRender;if(v)return m.jsx(v,{props:w,editor:s,component:t,connectDom:c,children:y});if(p!=null&&p.component)return m.jsx("gjs-wrapper",{ref:c,children:m.jsx(f,{...w,children:y})});if(t.isInstanceOf("textnode"))return d;const _=t.isInstanceOf("text")?u:void 0;return h.createElement(f,{...w,ref:c,key:_},t.get("void")?null:y)}const Y=e=>{var i;const{frame:t,window:n,onMount:s}=e,{root:r}=t;try{(i=n.__reactRoot)==null||i.unmount(),n.__reactRoot=void 0;const o=D.createRoot(n.document.body);o.render(m.jsx(Z,{...e,component:r,onMount:s})),n.__reactRoot=o}catch(o){console.error("Error setting up React renderer",o)}return r.getView()};function Z(e){const{editor:t,component:n,window:s,frameView:r,config:i,onMount:o}=e,c=s.document,l=i.wrapper||h.Fragment,u={editorProps:{doc:c,editor:t,frameView:r}},a=i.wrapper?u:{};return m.jsx(l,{...a,children:m.jsx(T,{tagName:"div",component:n,config:i,editor:t,frameView:r,onMount:o})})}const ee="rendererReact",te=function(e,t={}){e.Canvas.config.customRenderer=n=>Y({...n,config:t}),X(e,t),$({editor:e,licenseKey:t.licenseKey,plan:g.startup,pluginName:ee,cleanup:()=>{e.Canvas.config.customRenderer=void 0}})},ne=K(te);module.exports=ne;

package/dist/rendererReact/index.d.ts

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

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

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

package/dist/rendererReact/index.es.js

@@ -0,0 +1,405 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as A, useCallback as L, useEffect as x, createElement as O, Fragment as U } from "react";
+import { createRoot as W } from "react-dom/client";
+const N = "app.grapesjs.com", T = "app-stage.grapesjs.com", b = [
+  N,
+  T,
+  "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
+], P = "license:check:start", I = "license:check:end", K = () => typeof window < "u", j = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? T : N}`}/api`, $ = () => {
+  const e = K() && window.location.hostname;
+  return !!e && (b.includes(e) || b.some((t) => e.endsWith(t)));
+};
+async function V({
+  path: e,
+  baseApiUrl: t,
+  method: n = "GET",
+  headers: s = {},
+  params: r,
+  body: i
+}) {
+  const c = `${t || j({ isDev: !1, isStage: !1 })}${e}`, l = {
+    method: n,
+    headers: {
+      "Content-Type": "application/json",
+      ...s
+    }
+  };
+  i && (l.body = JSON.stringify(i));
+  const u = r ? new URLSearchParams(r).toString() : "", a = u ? `?${u}` : "", d = await fetch(`${c}${a}`, l);
+  if (!d.ok)
+    throw new Error(`HTTP error! status: ${d.status}`);
+  return d.json();
+}
+var y = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(y || {});
+const R = {
+  [y.free]: 0,
+  [y.startup]: 10,
+  [y.business]: 20,
+  [y.enterprise]: 30
+};
+function M(e) {
+  const t = e;
+  return t.init = (n) => (s) => e(s, n), t;
+}
+const z = (e) => /* @__PURE__ */ M(e);
+async function F({
+  editor: e,
+  plan: t,
+  pluginName: n,
+  licenseKey: s,
+  cleanup: r
+}) {
+  let i = "", o = !1;
+  const c = $(), l = (a) => {
+    console.warn("Cleanup plugin:", n, "Reason:", a), r();
+  }, u = (a = {}) => {
+    var h;
+    const { error: d, sdkLicense: p } = a, f = (h = a.plan) == null ? void 0 : h.category;
+    if (!(p || a.license) || d)
+      l(d || "Invalid license");
+    else if (f) {
+      const g = R[t], w = R[f];
+      g > w && l({ pluginRequiredPlan: t, licensePlan: f });
+    }
+  };
+  e.on(P, (a) => {
+    i = a == null ? void 0 : a.baseApiUrl, o = !0;
+  }), e.on(I, (a) => {
+    u(a);
+  }), setTimeout(async () => {
+    if (!o) {
+      if (c) return;
+      if (s) {
+        const a = await B({ licenseKey: s, pluginName: n, baseApiUrl: i });
+        a && u(a);
+      } else
+        l("The `licenseKey` option not provided");
+    }
+  }, 2e3);
+}
+async function B(e) {
+  const { licenseKey: t, pluginName: n, baseApiUrl: s } = e;
+  try {
+    return (await V({
+      baseApiUrl: s,
+      path: `/sdk/${t || "na"}`,
+      method: "POST",
+      params: {
+        d: window.location.hostname,
+        pn: n
+      }
+    })).result || {};
+  } catch (r) {
+    return console.error("Error during SDK license check:", r), !1;
+  }
+}
+function E(e) {
+  const t = {};
+  let n = !1;
+  for (const s in e)
+    if (Object.prototype.hasOwnProperty.call(e, s)) {
+      const r = e[s];
+      if (typeof r == "string" || typeof r == "number") {
+        const i = s.includes("-") ? s.replace(/-([a-z])/g, (o) => o[1].toUpperCase()) : s;
+        t[i] = r, n = !0;
+      }
+    }
+  return n ? t : void 0;
+}
+function J(e) {
+  const t = {};
+  return e.split(";").forEach((n) => {
+    if (!n.trim()) return;
+    const s = n.indexOf(":");
+    if (s > 0) {
+      const r = n.substring(0, s).trim(), i = n.substring(s + 1).trim();
+      if (r && i) {
+        const o = r.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
+        t[o] = i;
+      }
+    }
+  }), Object.keys(t).length > 0 ? t : void 0;
+}
+function q(e) {
+  if (e) {
+    if (typeof e == "object" && !Array.isArray(e))
+      return E(e);
+    if (typeof e == "string") {
+      let t = J(e);
+      if (!t)
+        try {
+          const n = JSON.parse(e);
+          typeof n == "object" && n !== null && !Array.isArray(n) && (t = E(n));
+        } catch (n) {
+          console.error("Failed to parse style string as JSON", n);
+        }
+      return t;
+    }
+    if (Array.isArray(e)) {
+      const t = {};
+      return e.forEach((n) => {
+        if (typeof n == "object" && n !== null) {
+          const s = n.name || n.property, r = n.value;
+          if (typeof s == "string" && s && r !== void 0 && r !== "") {
+            const i = s.replace(/-([a-z])/g, (o) => o[1].toUpperCase());
+            t[i] = r;
+          }
+        }
+      }), Object.keys(t).length > 0 ? t : void 0;
+    }
+  }
+}
+function G(e) {
+  return S[e] ? S[e] : e.includes("-") ? e.replace(/-([a-z])/g, (t, n) => n.toUpperCase()) : e;
+}
+function H(e) {
+  var s;
+  const t = {}, n = ((s = e.xmlns) == null ? void 0 : s.includes("svg")) || e.viewBox !== void 0 || e.d !== void 0;
+  for (const [r, i] of Object.entries(e))
+    if (r === "style")
+      t.style = q(i);
+    else if (r.startsWith("data-"))
+      t[r] = i;
+    else {
+      const o = G(r);
+      n || X.has(o) || o.startsWith("svg") ? t[o] = i : !Q.has(o) && !o.startsWith("on") && !o.startsWith("aria-") && !o.startsWith("data-") ? t[`data-${r.toLowerCase()}`] = i : t[o] = i;
+    }
+  return t;
+}
+const Q = /* @__PURE__ */ new Set([
+  "className",
+  "id",
+  "style",
+  "href",
+  "src",
+  "alt",
+  "title",
+  "target",
+  "rel",
+  "type",
+  "name",
+  "value",
+  "placeholder",
+  "onClick",
+  "onChange",
+  "onSubmit",
+  "onBlur",
+  "onFocus",
+  "disabled",
+  "readOnly",
+  "checked",
+  "selected",
+  "multiple",
+  "width",
+  "height",
+  "maxLength",
+  "min",
+  "max",
+  "step",
+  "rows",
+  "cols",
+  "autoComplete",
+  "autoFocus",
+  "required",
+  "spellCheck",
+  "tabIndex",
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "role"
+]), X = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "d",
+  "cx",
+  "cy",
+  "r",
+  "rx",
+  "ry",
+  "x1",
+  "x2",
+  "y1",
+  "y2",
+  "points",
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeDasharray",
+  "strokeOpacity",
+  "fillOpacity",
+  "fillRule",
+  "clipRule",
+  "transform",
+  "viewBox",
+  "preserveAspectRatio",
+  "pathLength",
+  "vectorEffect",
+  "dominantBaseline",
+  "alignmentBaseline",
+  "textAnchor",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "textDecoration",
+  "baselineShift",
+  "opacity",
+  "mask",
+  "clipPath",
+  "overflow",
+  "pointerEvents"
+]), S = {
+  class: "className",
+  for: "htmlFor",
+  "http-equiv": "httpEquiv",
+  "accept-charset": "acceptCharset",
+  "stroke-width": "strokeWidth",
+  "stroke-linecap": "strokeLinecap",
+  "stroke-linejoin": "strokeLinejoin",
+  "fill-rule": "fillRule",
+  "clip-rule": "clipRule",
+  "stroke-miterlimit": "strokeMiterlimit",
+  "stroke-dasharray": "strokeDasharray",
+  "stroke-opacity": "strokeOpacity",
+  "fill-opacity": "fillOpacity",
+  "font-family": "fontFamily",
+  "font-size": "fontSize",
+  "text-anchor": "textAnchor"
+};
+function Y(e, t, n) {
+  const [s, r] = A();
+  return {
+    connectDom: L(
+      (o) => {
+        if (!o) return;
+        const c = ee(e, t, o, n);
+        r(c);
+      },
+      [s]
+    ),
+    view: s
+  };
+}
+function Z(e) {
+  const [t, n] = A(0);
+  return x(() => {
+    if (!e) return () => {
+    };
+    const s = () => n((c) => c + 1), { em: r } = e, o = `${r.Components.events.update}:components`;
+    return e.on(o, s), () => e.off(o, s);
+  }, [e]), t;
+}
+function ee(e, t, n, s) {
+  var c;
+  const { em: r, Components: i } = e;
+  let o = t.getView();
+  if ((o == null ? void 0 : o.el) === n)
+    return o;
+  if (!o) {
+    const { ComponentView: l } = i, { draggableComponents: u } = i.config, a = t.attributes.type || "default", d = ((c = i.getType(a)) == null ? void 0 : c.view) || l, p = { draggableComponents: u, frameView: s, em: r }, f = d.extend({
+      initComponents() {
+      },
+      _createElement() {
+        return n;
+      },
+      render() {
+        return this._ensureElement(), this._setData(), this.renderAttributes(), this.postRender(), this;
+      }
+    });
+    o = new f({ el: n, config: p, model: t });
+  }
+  return o.el = n, o.render(), o;
+}
+function te(e, t) {
+  const { Components: n } = e, s = (r) => {
+    const { id: i, model: o } = r;
+    n.addType(i, {
+      model: {
+        toJSON(...c) {
+          const l = o.prototype.toJSON.apply(this, c);
+          return l.tagName = this.tagName, l;
+        }
+      }
+    });
+  };
+  n.getTypes().forEach(s), e.on("component:type:add", s), Object.entries(t.components || {}).forEach(([r, i]) => {
+    var o;
+    n.addType(r, {
+      isComponent: (c) => (c == null ? void 0 : c.tagName) === r,
+      model: {
+        defaults: {
+          type: r,
+          traits: i.props ? i.props() : [],
+          ...((o = i.model) == null ? void 0 : o.defaults) || {}
+        }
+      }
+    });
+  });
+}
+function _(e) {
+  var k;
+  const { component: t, config: n, editor: s, frameView: r, onMount: i, tagName: o } = e, { connectDom: c, view: l } = Y(s, t, r), u = Z(t);
+  x(() => {
+    if (!l || !i) return;
+    const v = setTimeout(() => i(l));
+    return () => clearTimeout(v);
+  }, [l]);
+  const a = t.get("type") || "default", d = t.content, p = (k = n.components) == null ? void 0 : k[a], f = (p == null ? void 0 : p.component) || o || t.tagName || "div", C = t.components(), h = C.length ? C.map((v) => /* @__PURE__ */ m(_, { component: v, config: n, editor: s, frameView: r }, v.cid)) : d, g = H(t.getAttributes()), w = p == null ? void 0 : p.editorRender;
+  if (w)
+    return /* @__PURE__ */ m(w, { props: g, editor: s, component: t, connectDom: c, children: h });
+  if (p != null && p.component)
+    return /* @__PURE__ */ m("gjs-wrapper", { ref: c, children: /* @__PURE__ */ m(f, { ...g, children: h }) });
+  if (t.isInstanceOf("textnode"))
+    return d;
+  const D = t.isInstanceOf("text") ? u : void 0;
+  return /* @__PURE__ */ O(f, { ...g, ref: c, key: D }, t.get("void") ? null : h);
+}
+const ne = (e) => {
+  var i;
+  const { frame: t, window: n, onMount: s } = e, { root: r } = t;
+  try {
+    (i = n.__reactRoot) == null || i.unmount(), n.__reactRoot = void 0;
+    const o = W(n.document.body);
+    o.render(/* @__PURE__ */ m(oe, { ...e, component: r, onMount: s })), n.__reactRoot = o;
+  } catch (o) {
+    console.error("Error setting up React renderer", o);
+  }
+  return r.getView();
+};
+function oe(e) {
+  const { editor: t, component: n, window: s, frameView: r, config: i, onMount: o } = e, c = s.document, l = i.wrapper || U, u = { editorProps: { doc: c, editor: t, frameView: r } }, a = i.wrapper ? u : {};
+  return /* @__PURE__ */ m(l, { ...a, children: /* @__PURE__ */ m(
+    _,
+    {
+      tagName: "div",
+      component: n,
+      config: i,
+      editor: t,
+      frameView: r,
+      onMount: o
+    }
+  ) });
+}
+const se = "rendererReact", re = function(e, t = {}) {
+  e.Canvas.config.customRenderer = (n) => ne({ ...n, config: t }), te(e, t), F({
+    editor: e,
+    licenseKey: t.licenseKey,
+    plan: y.startup,
+    pluginName: se,
+    cleanup: () => {
+      e.Canvas.config.customRenderer = void 0;
+    }
+  });
+}, le = z(re);
+export {
+  le as default
+};

package/dist/rendererReact/index.umd.js

@@ -0,0 +1 @@
+(function(p,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("react/jsx-runtime"),require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react","react-dom/client"],d):(p=typeof globalThis<"u"?globalThis:p||self,p.StudioSdkPlugins_rendererReact=d(p.jsxRuntime,p.React,p.ReactDOMClient))})(this,function(p,d,_){"use strict";const b="app.grapesjs.com",S="app-stage.grapesjs.com",E=[b,S,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],D="license:check:start",O="license:check:end",L=()=>typeof window<"u",U=({isDev:e,isStage:t})=>`${e?"":`https://${t?S:b}`}/api`,P=()=>{const e=L()&&window.location.hostname;return!!e&&(E.includes(e)||E.some(t=>e.endsWith(t)))};async function W({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:r,body:i}){const c=`${t||U({isDev:!1,isStage:!1})}${e}`,l={method:n,headers:{"Content-Type":"application/json",...s}};i&&(l.body=JSON.stringify(i));const f=r?new URLSearchParams(r).toString():"",a=f?`?${f}`:"",m=await fetch(`${c}${a}`,l);if(!m.ok)throw new Error(`HTTP error! status: ${m.status}`);return m.json()}var y=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(y||{});const x={[y.free]:0,[y.startup]:10,[y.business]:20,[y.enterprise]:30};function j(e){const t=e;return t.init=n=>s=>e(s,n),t}const I=e=>j(e);async function K({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:r}){let i="",o=!1;const c=P(),l=a=>{console.warn("Cleanup plugin:",n,"Reason:",a),r()},f=(a={})=>{var g;const{error:m,sdkLicense:u}=a,h=(g=a.plan)==null?void 0:g.category;if(!(u||a.license)||m)l(m||"Invalid license");else if(h){const w=x[t],v=x[h];w>v&&l({pluginRequiredPlan:t,licensePlan:h})}};e.on(D,a=>{i=a==null?void 0:a.baseApiUrl,o=!0}),e.on(O,a=>{f(a)}),setTimeout(async()=>{if(!o){if(c)return;if(s){const a=await $({licenseKey:s,pluginName:n,baseApiUrl:i});a&&f(a)}else l("The `licenseKey` option not provided")}},2e3)}async function $(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await W({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(r){return console.error("Error during SDK license check:",r),!1}}function R(e){const t={};let n=!1;for(const s in e)if(Object.prototype.hasOwnProperty.call(e,s)){const r=e[s];if(typeof r=="string"||typeof r=="number"){const i=s.includes("-")?s.replace(/-([a-z])/g,o=>o[1].toUpperCase()):s;t[i]=r,n=!0}}return n?t:void 0}function M(e){const t={};return e.split(";").forEach(n=>{if(!n.trim())return;const s=n.indexOf(":");if(s>0){const r=n.substring(0,s).trim(),i=n.substring(s+1).trim();if(r&&i){const o=r.replace(/-([a-z])/g,c=>c[1].toUpperCase());t[o]=i}}}),Object.keys(t).length>0?t:void 0}function V(e){if(e){if(typeof e=="object"&&!Array.isArray(e))return R(e);if(typeof e=="string"){let t=M(e);if(!t)try{const n=JSON.parse(e);typeof n=="object"&&n!==null&&!Array.isArray(n)&&(t=R(n))}catch(n){console.error("Failed to parse style string as JSON",n)}return t}if(Array.isArray(e)){const t={};return e.forEach(n=>{if(typeof n=="object"&&n!==null){const s=n.name||n.property,r=n.value;if(typeof s=="string"&&s&&r!==void 0&&r!==""){const i=s.replace(/-([a-z])/g,o=>o[1].toUpperCase());t[i]=r}}}),Object.keys(t).length>0?t:void 0}}}function q(e){return A[e]?A[e]:e.includes("-")?e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase()):e}function z(e){var s;const t={},n=((s=e.xmlns)==null?void 0:s.includes("svg"))||e.viewBox!==void 0||e.d!==void 0;for(const[r,i]of Object.entries(e))if(r==="style")t.style=V(i);else if(r.startsWith("data-"))t[r]=i;else{const o=q(r);n||B.has(o)||o.startsWith("svg")?t[o]=i:!F.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[`data-${r.toLowerCase()}`]=i:t[o]=i}return t}const F=new Set(["className","id","style","href","src","alt","title","target","rel","type","name","value","placeholder","onClick","onChange","onSubmit","onBlur","onFocus","disabled","readOnly","checked","selected","multiple","width","height","maxLength","min","max","step","rows","cols","autoComplete","autoFocus","required","spellCheck","tabIndex","aria-label","aria-labelledby","aria-describedby","role"]),B=new Set(["x","y","d","cx","cy","r","rx","ry","x1","x2","y1","y2","points","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","strokeDasharray","strokeOpacity","fillOpacity","fillRule","clipRule","transform","viewBox","preserveAspectRatio","pathLength","vectorEffect","dominantBaseline","alignmentBaseline","textAnchor","fontFamily","fontSize","fontStyle","fontWeight","textDecoration","baselineShift","opacity","mask","clipPath","overflow","pointerEvents"]),A={class:"className",for:"htmlFor","http-equiv":"httpEquiv","accept-charset":"acceptCharset","stroke-width":"strokeWidth","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","fill-rule":"fillRule","clip-rule":"clipRule","stroke-miterlimit":"strokeMiterlimit","stroke-dasharray":"strokeDasharray","stroke-opacity":"strokeOpacity","fill-opacity":"fillOpacity","font-family":"fontFamily","font-size":"fontSize","text-anchor":"textAnchor"};function J(e,t,n){const[s,r]=d.useState();return{connectDom:d.useCallback(o=>{if(!o)return;const c=H(e,t,o,n);r(c)},[s]),view:s}}function G(e){const[t,n]=d.useState(0);return d.useEffect(()=>{if(!e)return()=>{};const s=()=>n(c=>c+1),{em:r}=e,o=`${r.Components.events.update}:components`;return e.on(o,s),()=>e.off(o,s)},[e]),t}function H(e,t,n,s){var c;const{em:r,Components:i}=e;let o=t.getView();if((o==null?void 0:o.el)===n)return o;if(!o){const{ComponentView:l}=i,{draggableComponents:f}=i.config,a=t.attributes.type||"default",m=((c=i.getType(a))==null?void 0:c.view)||l,u={draggableComponents:f,frameView:s,em:r},h=m.extend({initComponents(){},_createElement(){return n},render(){return this._ensureElement(),this._setData(),this.renderAttributes(),this.postRender(),this}});o=new h({el:n,config:u,model:t})}return o.el=n,o.render(),o}function Q(e,t){const{Components:n}=e,s=r=>{const{id:i,model:o}=r;n.addType(i,{model:{toJSON(...c){const l=o.prototype.toJSON.apply(this,c);return l.tagName=this.tagName,l}}})};n.getTypes().forEach(s),e.on("component:type:add",s),Object.entries(t.components||{}).forEach(([r,i])=>{var o;n.addType(r,{isComponent:c=>(c==null?void 0:c.tagName)===r,model:{defaults:{type:r,traits:i.props?i.props():[],...((o=i.model)==null?void 0:o.defaults)||{}}}})})}function N(e){var T;const{component:t,config:n,editor:s,frameView:r,onMount:i,tagName:o}=e,{connectDom:c,view:l}=J(s,t,r),f=G(t);d.useEffect(()=>{if(!l||!i)return;const C=setTimeout(()=>i(l));return()=>clearTimeout(C)},[l]);const a=t.get("type")||"default",m=t.content,u=(T=n.components)==null?void 0:T[a],h=(u==null?void 0:u.component)||o||t.tagName||"div",k=t.components(),g=k.length?k.map(C=>p.jsx(N,{component:C,config:n,editor:s,frameView:r},C.cid)):m,w=z(t.getAttributes()),v=u==null?void 0:u.editorRender;if(v)return p.jsx(v,{props:w,editor:s,component:t,connectDom:c,children:g});if(u!=null&&u.component)return p.jsx("gjs-wrapper",{ref:c,children:p.jsx(h,{...w,children:g})});if(t.isInstanceOf("textnode"))return m;const ee=t.isInstanceOf("text")?f:void 0;return d.createElement(h,{...w,ref:c,key:ee},t.get("void")?null:g)}const X=e=>{var i;const{frame:t,window:n,onMount:s}=e,{root:r}=t;try{(i=n.__reactRoot)==null||i.unmount(),n.__reactRoot=void 0;const o=_.createRoot(n.document.body);o.render(p.jsx(Y,{...e,component:r,onMount:s})),n.__reactRoot=o}catch(o){console.error("Error setting up React renderer",o)}return r.getView()};function Y(e){const{editor:t,component:n,window:s,frameView:r,config:i,onMount:o}=e,c=s.document,l=i.wrapper||d.Fragment,f={editorProps:{doc:c,editor:t,frameView:r}},a=i.wrapper?f:{};return p.jsx(l,{...a,children:p.jsx(N,{tagName:"div",component:n,config:i,editor:t,frameView:r,onMount:o})})}const Z="rendererReact";return I(function(e,t={}){e.Canvas.config.customRenderer=n=>X({...n,config:t}),Q(e,t),K({editor:e,licenseKey:t.licenseKey,plan:y.startup,pluginName:Z,cleanup:()=>{e.Canvas.config.customRenderer=void 0}})})});

package/dist/rendererReact/rendererCanvas/RenderCanvasComponent.d.ts

@@ -0,0 +1,9 @@
+import { Component, ComponentView } from 'grapesjs';
+import { CustomRendererProps } from '../types';
+export interface RenderCanvasComponentProps extends Pick<CustomRendererProps, 'editor' | 'frameView' | 'config'> {
+    tagName?: string;
+    component: Component;
+    onMount?: (view: ComponentView) => void;
+}
+declare function RenderCanvasComponent(propsCmp: RenderCanvasComponentProps): string | import("react/jsx-runtime").JSX.Element;
+export default RenderCanvasComponent;

package/dist/rendererReact/rendererCanvas/customRenderer.d.ts

@@ -0,0 +1,2 @@
+import { CustomRendererProps } from '../types';
+export declare const customRenderer: (props: CustomRendererProps) => import('grapesjs').ComponentView<import('grapesjs').Component>;

package/dist/rendererReact/rendererCanvas/util.d.ts

@@ -0,0 +1,9 @@
+import { Component, ComponentView, Editor } from 'grapesjs';
+import { CustomRendererReactConfig } from '../shared/types';
+export declare function useConnectDom(editor: Editor, component: Component, frameView: unknown): {
+    connectDom: (el: HTMLElement) => void;
+    view: ComponentView<Component> | undefined;
+};
+export declare function useComponentUpdate(component: Component): number;
+export declare function bindComponentToElement(editor: Editor, component: Component, el: HTMLElement, frameView: unknown): ComponentView<Component>;
+export declare function registerComponents(editor: Editor, config: CustomRendererReactConfig): void;

package/dist/rendererReact/rendererProject/GrapesJSProject.d.ts

@@ -0,0 +1,3 @@
+import { GrapesJSProjectProps } from './types';
+export declare const GrapesJSProject: React.FC<GrapesJSProjectProps>;
+export default GrapesJSProject;

package/dist/rendererReact/rendererProject/RenderProjectComponent.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ComponentNode } from './parser/parser';
+import { CustomRendererReactConfig } from '../shared/types';
+interface RenderProjectComponentProps {
+    component: ComponentNode;
+    config: CustomRendererReactConfig;
+    children?: ReactNode;
+    parentId?: string;
+    index?: number;
+}
+export declare const RenderProjectComponent: (props: RenderProjectComponentProps) => string | import("react/jsx-runtime").JSX.Element | null;
+export default RenderProjectComponent;

package/dist/rendererReact/rendererProject/index.cjs.d.ts

@@ -0,0 +1,3 @@
+export { GrapesJSProject } from './GrapesJSProject';
+export { RenderProjectComponent } from './RenderProjectComponent';
+export * from './types';

package/dist/rendererReact/rendererProject/index.cjs.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("react");function T(s,t,e){const o=s.getId(),a=s.getType(),r=o||void 0;let n;return o?n=o:t?n=`${t}-${e??0}`:a==="head"?n="gjs-head":t==="gjs-head"?n=`${t}-${e??0}`:n=`gjs-${a}`,{key:n,nodeId:r}}const $={noPagesFound:()=>"No pages found in project",pageNotFound:({pageId:s=""})=>`Page not found: ${s}`,noFramesFound:()=>"No frames found in page",missingRootComponent:()=>"Missing root component",componentNotFound:({componentId:s=""})=>`Component not found: ${s}`};function N(s){const t={};let e=!1;for(const o in s)if(Object.prototype.hasOwnProperty.call(s,o)){const a=s[o];if(typeof a=="string"||typeof a=="number"){const r=o.includes("-")?o.replace(/-([a-z])/g,n=>n[1].toUpperCase()):o;t[r]=a,e=!0}}return e?t:void 0}function W(s){const t={};return s.split(";").forEach(e=>{if(!e.trim())return;const o=e.indexOf(":");if(o>0){const a=e.substring(0,o).trim(),r=e.substring(o+1).trim();if(a&&r){const n=a.replace(/-([a-z])/g,l=>l[1].toUpperCase());t[n]=r}}}),Object.keys(t).length>0?t:void 0}function E(s){if(s){if(typeof s=="object"&&!Array.isArray(s))return N(s);if(typeof s=="string"){let t=W(s);if(!t)try{const e=JSON.parse(s);typeof e=="object"&&e!==null&&!Array.isArray(e)&&(t=N(e))}catch(e){console.error("Failed to parse style string as JSON",e)}return t}if(Array.isArray(s)){const t={};return s.forEach(e=>{if(typeof e=="object"&&e!==null){const o=e.name||e.property,a=e.value;if(typeof o=="string"&&o&&a!==void 0&&a!==""){const r=o.replace(/-([a-z])/g,n=>n[1].toUpperCase());t[r]=a}}}),Object.keys(t).length>0?t:void 0}}}function O(s){return R[s]?R[s]:s.includes("-")?s.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()):s}function D(s){var o;const t={},e=((o=s.xmlns)==null?void 0:o.includes("svg"))||s.viewBox!==void 0||s.d!==void 0;for(const[a,r]of Object.entries(s))if(a==="style")t.style=E(r);else if(a.startsWith("data-"))t[a]=r;else{const n=O(a);e||M.has(n)||n.startsWith("svg")?t[n]=r:!I.has(n)&&!n.startsWith("on")&&!n.startsWith("aria-")&&!n.startsWith("data-")?t[`data-${a.toLowerCase()}`]=r:t[n]=r}return t}const I=new Set(["className","id","style","href","src","alt","title","target","rel","type","name","value","placeholder","onClick","onChange","onSubmit","onBlur","onFocus","disabled","readOnly","checked","selected","multiple","width","height","maxLength","min","max","step","rows","cols","autoComplete","autoFocus","required","spellCheck","tabIndex","aria-label","aria-labelledby","aria-describedby","role"]),M=new Set(["x","y","d","cx","cy","r","rx","ry","x1","x2","y1","y2","points","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","strokeDasharray","strokeOpacity","fillOpacity","fillRule","clipRule","transform","viewBox","preserveAspectRatio","pathLength","vectorEffect","dominantBaseline","alignmentBaseline","textAnchor","fontFamily","fontSize","fontStyle","fontWeight","textDecoration","baselineShift","opacity","mask","clipPath","overflow","pointerEvents"]),R={class:"className",for:"htmlFor","http-equiv":"httpEquiv","accept-charset":"acceptCharset","stroke-width":"strokeWidth","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","fill-rule":"fillRule","clip-rule":"clipRule","stroke-miterlimit":"strokeMiterlimit","stroke-dasharray":"strokeDasharray","stroke-opacity":"strokeOpacity","fill-opacity":"fillOpacity","font-family":"fontFamily","font-size":"fontSize","text-anchor":"textAnchor"},x=function s(t){var P;const{component:e,config:o,children:a,parentId:r,index:n}=t;if(!e)return null;const l=e.getType()||"",p=e.getContent();if(l==="textnode")return p;const u=(P=o.components)==null?void 0:P[l],i=(u==null?void 0:u.component)||e.getTagName()||"div",h=e.getAttributes(),{key:f,nodeId:k}=T(e,r,n),b=!!(u!=null&&u.component),C=b?h:D(h);b&&Object.keys(C).forEach(m=>{const g=C[m];typeof g=="string"&&!isNaN(Number(g))&&g.trim()!==""&&(C[m]=Number(g))});const A=e.getComponents(),v=[...A.length?A.map((m,g)=>c.jsx(s,{config:o,component:m,parentId:f,index:g},`${m.getId()}-${g}`)):[p],a],w={...C,...k?{id:k}:{}};return b?c.jsx(i,{...w,children:v},f):S.createElement(i,{...w,key:f},e.isVoid()?null:v)};class j{constructor(t){this.data=t}getId(){var t;return(t=this.data.attributes)==null?void 0:t.id}getType(){return this.data.type||"default"}getTagName(){const t=this.getType();return t==="svg"?"svg":t==="image"?"img":t==="linkBox"||t==="link"?"a":t==="head"?"head":t==="wrapper"?"body":this.data.tagName||""}isVoid(){return this.getTagName()==="img"?!0:!!this.data.void}getAttributes(){const t={...this.data.attributes},e=this.getClasses();e.length&&(t.class=e.join(" "));function o(a,r){return Object.prototype.hasOwnProperty.call(a,r)}return o(t,"id")||(t.id=this.getId()),t}getStyle(){return this.data.style||{}}getContent(){return this.data.content||""}getComponents(){return(this.data.components||[]).map(t=>new j(t))}getHead(){return this.data.head?new j(this.data.head):null}getDocEl(){return this.data.docEl}getClasses(){return(this.data.classes||[]).map(e=>typeof e=="string"?e:e.name)}hasClass(t){return this.getClasses().includes(t)}}class B{constructor(t){this.data=t}getComponent(){return this.data.component?new j(this.data.component):null}getWidth(){return this.data.width||""}getHeight(){return this.data.height||""}}class z{constructor(t){this.data=t}getId(){return this.data.id}getName(){return this.data.name||""}getFrames(){return(this.data.frames||[]).map(t=>new B(t))}}class L{constructor(t){this.assets=t}getAll(){return this.assets}}class q{constructor(t){this.rules=t}getAll(){return this.rules}getRulesByGroup(t){return this.rules.filter(e=>e.group===t)}getWrapperRules(){return this.rules.filter(t=>t.wrapper===1)}getCssAsString(){if(!this.rules||!this.rules.length)return"";const t=r=>{if(!r||!r.selectors||!r.style)return"";let n=r.selectors;if(typeof n=="string")n=[n];else if(!Array.isArray(n))return"";const l=n.map(i=>typeof i=="string"&&!i.startsWith(".")&&!i.startsWith("#")&&!i.startsWith("[")&&!i.startsWith(":")&&!i.startsWith(">")&&!i.startsWith("*")&&!i.startsWith("@")?"."+i:i),p=r.state,u=p?l.map(i=>`${i.trim()}:${p}`).join(", "):l.join(""),d=Object.entries(r.style).map(([i,h])=>`  ${i}: ${h};`).join(`
+`);return d?`${u} {
+${d}
+}`:""},e=[],o={};this.rules.forEach(r=>{if(!r||!r.selectors||!r.style)return;const n=r.atRuleType&&r.mediaText?`@${r.atRuleType} ${r.mediaText}`:r.mediaText?`@media ${r.mediaText}`:null;n?(o[n]||(o[n]=[]),o[n].push(r)):e.push(r)});let a=e.map(r=>t(r)).join(`
+`);return Object.keys(o).forEach(r=>{const n=o[r].map(l=>t(l)).join(`
+  `);n&&(a+=`
+
+${r} {
+  ${n}
+}`)}),a}}class U{constructor(t){this.symbols=t}getAll(){return this.symbols}}class G{constructor(t){this.list=t}getAll(){return this.list}}class J{constructor(t){this.pages=t.map(e=>new z(e))}getAll(){return this.pages}}class V{constructor(t){this.assetManager=new L(t.assets||[]),this.cssComposer=new q(t.styles||[]),this.pages=new J(t.pages||[]),this.symbols=new U(t.symbols||[]),this.dataSources=new G(t.dataSources||[])}getAssetManager(){return this.assetManager}getCssComposer(){return this.cssComposer}getPages(){return this.pages}getSymbols(){return this.symbols}getDataSources(){return this.dataSources}}function F(s,t){if(s.getId()===t)return s;for(const e of s.getComponents()){const o=F(e,t);if(o)return o}return null}function H(s){var d;const{config:t,root:e,css:o}=s,a=t.wrapper||S.Fragment,r=e.getHead(),n=(d=e.getDocEl)==null?void 0:d.call(e),l=e.getAttributes().doctype||"<!DOCTYPE html>",p=(n==null?void 0:n.tagName)||"html",{skipDocType:u}=t;return c.jsxs(c.Fragment,{children:[u!==void 0&&!u&&l,c.jsxs(p,{children:[c.jsx(x,{component:r,config:t,children:c.jsx("style",{children:`${o}`})}),c.jsx(a,{children:c.jsx(x,{component:e,config:t})})]})]})}function y(s,t){const e=s?typeof s=="function"?s(t):s:"An error occurred";return c.jsx(c.Fragment,{children:c.jsx("html",{children:c.jsx("body",{children:e})})})}const K=({projectJson:s,config:t={},pageId:e,componentId:o})=>{var i;const a=new V(s),r=a.getCssComposer().getCssAsString(),n=a.getPages().getAll(),l={...$,...t.errors};if(!n.length)return y(l.noPagesFound,{projectJson:s});const p=e?n.find(h=>h.getName()===e):n[0];if(!p)return y(l.pageNotFound,{pageId:e});const u=p.getFrames();if(!u.length)return y(l.noFramesFound,{page:p});const d=(i=u[0])==null?void 0:i.getComponent();if(!d)return y(l.missingRootComponent,{frame:u[0]});if(o){const h=F(d,o);if(!h)return y(l.componentNotFound,{componentId:o});if(h){const f=t.wrapper||S.Fragment;return c.jsxs(c.Fragment,{children:[c.jsx("style",{children:`${r}`}),c.jsx(f,{children:c.jsx(x,{component:h,config:t})})]})}return null}return c.jsx(H,{config:t,root:d,css:r})};exports.GrapesJSProject=K;exports.RenderProjectComponent=x;

package/dist/rendererReact/rendererProject/index.d.ts

@@ -0,0 +1,3 @@
+export { GrapesJSProject } from './GrapesJSProject';
+export { RenderProjectComponent } from './RenderProjectComponent';
+export * from './types';

package/dist/rendererReact/rendererProject/index.es.d.ts

@@ -0,0 +1,3 @@
+export { GrapesJSProject } from './GrapesJSProject';
+export { RenderProjectComponent } from './RenderProjectComponent';
+export * from './types';