@grapesjs/studio-sdk-plugins 1.0.25 → 1.0.26-rc.1

package/dist/rendererReact/index.js

@@ -0,0 +1 @@
+"use strict";const y=require("react/jsx-runtime"),g=require("react"),I=require("react-dom/client"),j="app.grapesjs.com",U="app-stage.grapesjs.com",N=[j,U,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],W="license:check:start",B="license:check:end",$=()=>typeof window<"u",F=({isDev:e,isStage:t})=>`${e?"":`https://${t?U:j}`}/api`,K=()=>{const e=$()&&window.location.hostname;return!!e&&(N.includes(e)||N.some(t=>e.endsWith(t)))},V=e=>e.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(t,n)=>(n?"-":"")+t.toLowerCase()),T=e=>typeof e=="string";function z(e){return typeof e=="function"}async function M({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:r,body:o}){const c=`${t||F({isDev:!1,isStage:!1})}${e}`,a={method:n,headers:{"Content-Type":"application/json",...s}};o&&(a.body=JSON.stringify(o));const u=r?new URLSearchParams(r).toString():"",l=u?`?${u}`:"",d=await fetch(`${c}${l}`,a);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var C=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(C||{});const P={[C.free]:0,[C.startup]:10,[C.business]:20,[C.enterprise]:30};function q(e){const t=e;return t.init=n=>s=>e(s,n),t}const J=e=>q(e);async function G({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:r}){let o="",i=!1;const c=K(),a=l=>{console.warn("Cleanup plugin:",n,"Reason:",l),r()},u=(l={})=>{var h;const{error:d,sdkLicense:m}=l,f=(h=l.plan)==null?void 0:h.category;if(!(m||l.license)||d)a(d||"Invalid license");else if(f){const k=P[t],w=P[f];k>w&&a({pluginRequiredPlan:t,licensePlan:f})}};e.on(W,l=>{o=l==null?void 0:l.baseApiUrl,i=!0}),e.on(B,l=>{u(l)}),setTimeout(async()=>{if(!i){if(c)return;if(s){const l=await H({licenseKey:s,pluginName:n,baseApiUrl:o});l&&u(l)}else a("The `licenseKey` option not provided")}},2e3)}async function H(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await M({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 Z(e){const t={};for(const n in e)if(Object.prototype.hasOwnProperty.call(e,n)){const s=V(n);t[s]=e[n]}return t}const Q=(e,t)=>{const n=e.components||{};for(const s in n){const r=n[s];if(r.component===t)return{cmpConfig:r,type:s}}};function O(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 o=s.includes("-")?s.replace(/-([a-z])/g,i=>i[1].toUpperCase()):s;t[o]=r,n=!0}}return n?t:void 0}function X(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(),o=n.substring(s+1).trim();if(r&&o){const i=r.replace(/-([a-z])/g,c=>c[1].toUpperCase());t[i]=o}}}),Object.keys(t).length>0?t:void 0}function Y(e){if(e){if(typeof e=="object"&&!Array.isArray(e))return O(e);if(typeof e=="string"){let t=X(e);if(!t)try{const n=JSON.parse(e);typeof n=="object"&&n!==null&&!Array.isArray(n)&&(t=O(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 o=s.replace(/-([a-z])/g,i=>i[1].toUpperCase());t[o]=r}}}),Object.keys(t).length>0?t:void 0}}}function ee(e){return L[e]?L[e]:e.includes("-")?e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase()):e}function te(e){var n;const t={};for(const[s,r]of Object.entries(e))if(s==="style")t.style=Y(r);else if(s.startsWith("data-"))t[s]=r;else{const o=ee(s);((n=e.xmlns)==null?void 0:n.includes("svg"))||e.viewBox!==void 0||e.d!==void 0||oe.has(o)||o.startsWith("svg")?t[o]=r:!ne.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[s]=r:t[o]=r}return t}const ne=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"]),oe=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"]),L={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"},E=e=>(e==null?void 0:e.$$typeof)&&typeof e.props=="object";function se(e){return t=>{const n=t.getContent();E(n)&&t.set({content:b({...e,model:n}),reactContent:n})}}const re=e=>t=>{const n=t.component;E(n)&&(t.component={components:b({...e,model:n})})};function b(e){const{model:t,editor:n,config:s}=e;if(E(t)){const r=t,o={},{type:i,props:c={}}=r,{children:a,className:u,style:l,...d}=c,m=p=>({type:"textnode",content:p}),f=typeof i=="symbol";if(z(i)){const p=Q(s,i);o.type=p==null?void 0:p.type}else n.Components.getType(i)?o.type=i:f||(o.tagName=i);if(u&&(o.classes=u),l&&(o.style=Z(l)),Array.isArray(a)?o.components=a.map(p=>T(p)?m(p):b({...e,model:p})).filter(Boolean):T(a)&&(o.components=m(a)),Object.keys(d).length){const p=n.Parser.parserHtml.splitPropsFromAttr(d);o.attributes=p.attrs,Object.assign(o,p.props)}return o}}function ce(e){const{component:t}=e,[n,s]=g.useState(0),[r,o]=g.useState();return g.useEffect(()=>{if(!t)return()=>{};const c=()=>s(p=>p+1),a=()=>{[...t.views].forEach(h=>h.remove()),o(void 0)},{em:u}=t,l=u.Components.events,m=[...["components","attributes","classes"].map(p=>`${l.update}:${p}`),"rerender"].join(" "),f=[l.removed,"rerender"].join(" ");return t.on(m,c),t.on(f,a),()=>{t.off(m,c),t.off(f,a),a()}},[t]),{key:n,view:r,connectDom:c=>{if(!c)return;const a=ie({...e,el:c});o(a)}}}function ie(e){var a;const{editor:t,component:n,el:s,frameView:r}=e,{em:o,Components:i}=t;let c=n.getView(r.model);if((c==null?void 0:c.el)===s)return c;if(!c){const{ComponentView:u}=i,l=n.attributes.type||"default",d=((a=i.getType(l))==null?void 0:a.view)||u,m={...i.config,frameView:r,em:o},f=d.extend({initComponents(){},_createElement(){return s},_removeElement(){},__clearAttributes(){},render(){var p;return this._ensureElement(),this._setData(),this.renderAttributes(),(p=this.updateSrc)==null||p.call(this),this}});c=new f({el:s,config:m,model:n})}return c.el=s,c.render(),c}function ae(e,t){const{Components:n}=e,s=r=>{const{id:o,model:i}=r;n.addType(o,{model:{toJSON(...c){const a=i.prototype.toJSON.apply(this,c);return a.tagName=this.tagName,a}}})};n.getTypes().forEach(s),e.on("component:type:add",s),Object.entries(t.components||{}).forEach(([r,o])=>{var m,f;const{allowPropClassName:i,allowPropId:c,allowChildren:a}=o,u=!c&&!i,l=()=>({disabled:u}),d=()=>({disableClasses:!i,disableComponent:!c});n.addType(r,{isComponent:p=>(p==null?void 0:p.tagName)===r,model:{defaults:{type:r,traits:((m=o.props)==null?void 0:m.call(o))||[],droppable:!!a,stylable:!u,styleManager:l,selectorManager:d,...((f=o.model)==null?void 0:f.defaults)||{}}}})})}function _(e){var x;const{component:t,config:n,editor:s,frameView:r,onMount:o,tagName:i,children:c}=e,{key:a,view:u,connectDom:l}=ce(e);g.useEffect(()=>{if(!u&&!o)return;const v=setTimeout(()=>{u&&(o==null||o(u),setTimeout(()=>u.postRender()))});return()=>clearTimeout(v)},[u]);const d=t.get("type")||"default",m=t.content,f=(x=n.components)==null?void 0:x[d],p=(f==null?void 0:f.component)||i||t.tagName||"div",h=t.components(),k=h.length?h.map(v=>y.jsx(_,{component:v,config:n,editor:s,frameView:r},v.cid)):[m||void 0],w=te(t.getAttributes()),A=f==null?void 0:f.editorRender,S=[...k,c].filter(v=>v??!1),R=S.length?S:null;if(A)return y.jsx(A,{props:w,editor:s,component:t,connectDom:l,children:R});if(f!=null&&f.component)return y.jsx("gjs-wrapper",{ref:l,style:f.wrapperStyle,children:y.jsx(p,{...w,children:R})});if(t.isInstanceOf("textnode"))return m;const D=t.isInstanceOf("text")?a:void 0;return g.createElement(p,{...w,ref:l,key:D},t.get("void")?null:R)}const le=e=>{const{frame:t,window:n,onMount:s,editor:r}=e,o=r.Canvas.events,{root:i}=t;try{const c=I.createRoot(n.document.body);c.render(y.jsx(pe,{...e,component:i,onMount:s}));const a=()=>c.unmount();t.once(o.frameUnload,a),n.addEventListener("unload",a)}catch(c){console.warn(c)}return i.getView()};function pe(e){const{editor:t,component:n,window:s,frameView:r,config:o,onMount:i}=e,c=s.document,a=o.rootComponent||g.Fragment,u=o.rootComponent?{editorProps:{doc:c,editor:t,frameView:r}}:{},l=(o==null?void 0:o.bodyAfter)||g.Fragment;return y.jsx(a,{...u,children:y.jsx(_,{tagName:"div",component:n,config:o,editor:t,frameView:r,onMount:i,children:y.jsx(l,{...u})})})}const ue="rendererReact",fe=C.startup,de=function(e,t={}){const{Blocks:n,Pages:s}=e,r=n.events,o=s.events;e.Canvas.config.customRenderer=c=>le({...c,config:t}),e.Components.config.processor=c=>b({model:c,editor:e,config:t}),ae(e,t);const i=[[r.add,se({editor:e,config:t})],[o.addBefore,re({editor:e,config:t})]];i.forEach(([c,a])=>e.on(c,a)),G({editor:e,licenseKey:t.licenseKey,plan:fe,pluginName:ue,cleanup:()=>{e.Canvas.config.customRenderer=void 0,e.Components.config.processor=void 0,i.forEach(([c,a])=>e.off(c,a))}})},me=J(de);module.exports=me;

package/dist/rendererReact/index.umd.js

@@ -1 +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}})})});
+(function(m,h){typeof exports=="object"&&typeof module<"u"?module.exports=h(require("react/jsx-runtime"),require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react","react-dom/client"],h):(m=typeof globalThis<"u"?globalThis:m||self,m.StudioSdkPlugins_rendererReact=h(m.jsxRuntime,m.React,m.ReactDOMClient))})(this,function(m,h,I){"use strict";const A="app.grapesjs.com",R="app-stage.grapesjs.com",x=[A,R,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],j="license:check:start",W="license:check:end",B=()=>typeof window<"u",$=({isDev:e,isStage:t})=>`${e?"":`https://${t?R:A}`}/api`,F=()=>{const e=B()&&window.location.hostname;return!!e&&(x.includes(e)||x.some(t=>e.endsWith(t)))},K=e=>e.replace(/[A-Z]+(?![a-z])|[A-Z]/g,(t,n)=>(n?"-":"")+t.toLowerCase()),T=e=>typeof e=="string";function V(e){return typeof e=="function"}async function z({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:r,body:o}){const c=`${t||$({isDev:!1,isStage:!1})}${e}`,a={method:n,headers:{"Content-Type":"application/json",...s}};o&&(a.body=JSON.stringify(o));const d=r?new URLSearchParams(r).toString():"",l=d?`?${d}`:"",u=await fetch(`${c}${l}`,a);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.json()}var v=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(v||{});const N={[v.free]:0,[v.startup]:10,[v.business]:20,[v.enterprise]:30};function M(e){const t=e;return t.init=n=>s=>e(s,n),t}const q=e=>M(e);async function J({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:r}){let o="",i=!1;const c=F(),a=l=>{console.warn("Cleanup plugin:",n,"Reason:",l),r()},d=(l={})=>{var g;const{error:u,sdkLicense:y}=l,f=(g=l.plan)==null?void 0:g.category;if(!(y||l.license)||u)a(u||"Invalid license");else if(f){const E=N[t],w=N[f];E>w&&a({pluginRequiredPlan:t,licensePlan:f})}};e.on(j,l=>{o=l==null?void 0:l.baseApiUrl,i=!0}),e.on(W,l=>{d(l)}),setTimeout(async()=>{if(!i){if(c)return;if(s){const l=await G({licenseKey:s,pluginName:n,baseApiUrl:o});l&&d(l)}else a("The `licenseKey` option not provided")}},2e3)}async function G(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await z({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 H(e){const t={};for(const n in e)if(Object.prototype.hasOwnProperty.call(e,n)){const s=K(n);t[s]=e[n]}return t}const Z=(e,t)=>{const n=e.components||{};for(const s in n){const r=n[s];if(r.component===t)return{cmpConfig:r,type:s}}};function P(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 o=s.includes("-")?s.replace(/-([a-z])/g,i=>i[1].toUpperCase()):s;t[o]=r,n=!0}}return n?t:void 0}function Q(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(),o=n.substring(s+1).trim();if(r&&o){const i=r.replace(/-([a-z])/g,c=>c[1].toUpperCase());t[i]=o}}}),Object.keys(t).length>0?t:void 0}function X(e){if(e){if(typeof e=="object"&&!Array.isArray(e))return P(e);if(typeof e=="string"){let t=Q(e);if(!t)try{const n=JSON.parse(e);typeof n=="object"&&n!==null&&!Array.isArray(n)&&(t=P(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 o=s.replace(/-([a-z])/g,i=>i[1].toUpperCase());t[o]=r}}}),Object.keys(t).length>0?t:void 0}}}function Y(e){return O[e]?O[e]:e.includes("-")?e.replace(/-([a-z])/g,(t,n)=>n.toUpperCase()):e}function ee(e){var n;const t={};for(const[s,r]of Object.entries(e))if(s==="style")t.style=X(r);else if(s.startsWith("data-"))t[s]=r;else{const o=Y(s);((n=e.xmlns)==null?void 0:n.includes("svg"))||e.viewBox!==void 0||e.d!==void 0||ne.has(o)||o.startsWith("svg")?t[o]=r:!te.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[s]=r:t[o]=r}return t}const te=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"]),ne=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"]),O={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"},b=e=>(e==null?void 0:e.$$typeof)&&typeof e.props=="object";function oe(e){return t=>{const n=t.getContent();b(n)&&t.set({content:k({...e,model:n}),reactContent:n})}}const se=e=>t=>{const n=t.component;b(n)&&(t.component={components:k({...e,model:n})})};function k(e){const{model:t,editor:n,config:s}=e;if(b(t)){const r=t,o={},{type:i,props:c={}}=r,{children:a,className:d,style:l,...u}=c,y=p=>({type:"textnode",content:p}),f=typeof i=="symbol";if(V(i)){const p=Z(s,i);o.type=p==null?void 0:p.type}else n.Components.getType(i)?o.type=i:f||(o.tagName=i);if(d&&(o.classes=d),l&&(o.style=H(l)),Array.isArray(a)?o.components=a.map(p=>T(p)?y(p):k({...e,model:p})).filter(Boolean):T(a)&&(o.components=y(a)),Object.keys(u).length){const p=n.Parser.parserHtml.splitPropsFromAttr(u);o.attributes=p.attrs,Object.assign(o,p.props)}return o}}function re(e){const{component:t}=e,[n,s]=h.useState(0),[r,o]=h.useState();return h.useEffect(()=>{if(!t)return()=>{};const c=()=>s(p=>p+1),a=()=>{[...t.views].forEach(g=>g.remove()),o(void 0)},{em:d}=t,l=d.Components.events,y=[...["components","attributes","classes"].map(p=>`${l.update}:${p}`),"rerender"].join(" "),f=[l.removed,"rerender"].join(" ");return t.on(y,c),t.on(f,a),()=>{t.off(y,c),t.off(f,a),a()}},[t]),{key:n,view:r,connectDom:c=>{if(!c)return;const a=ce({...e,el:c});o(a)}}}function ce(e){var a;const{editor:t,component:n,el:s,frameView:r}=e,{em:o,Components:i}=t;let c=n.getView(r.model);if((c==null?void 0:c.el)===s)return c;if(!c){const{ComponentView:d}=i,l=n.attributes.type||"default",u=((a=i.getType(l))==null?void 0:a.view)||d,y={...i.config,frameView:r,em:o},f=u.extend({initComponents(){},_createElement(){return s},_removeElement(){},__clearAttributes(){},render(){var p;return this._ensureElement(),this._setData(),this.renderAttributes(),(p=this.updateSrc)==null||p.call(this),this}});c=new f({el:s,config:y,model:n})}return c.el=s,c.render(),c}function ie(e,t){const{Components:n}=e,s=r=>{const{id:o,model:i}=r;n.addType(o,{model:{toJSON(...c){const a=i.prototype.toJSON.apply(this,c);return a.tagName=this.tagName,a}}})};n.getTypes().forEach(s),e.on("component:type:add",s),Object.entries(t.components||{}).forEach(([r,o])=>{var y,f;const{allowPropClassName:i,allowPropId:c,allowChildren:a}=o,d=!c&&!i,l=()=>({disabled:d}),u=()=>({disableClasses:!i,disableComponent:!c});n.addType(r,{isComponent:p=>(p==null?void 0:p.tagName)===r,model:{defaults:{type:r,traits:((y=o.props)==null?void 0:y.call(o))||[],droppable:!!a,stylable:!d,styleManager:l,selectorManager:u,...((f=o.model)==null?void 0:f.defaults)||{}}}})})}function L(e){var U;const{component:t,config:n,editor:s,frameView:r,onMount:o,tagName:i,children:c}=e,{key:a,view:d,connectDom:l}=re(e);h.useEffect(()=>{if(!d&&!o)return;const C=setTimeout(()=>{d&&(o==null||o(d),setTimeout(()=>d.postRender()))});return()=>clearTimeout(C)},[d]);const u=t.get("type")||"default",y=t.content,f=(U=n.components)==null?void 0:U[u],p=(f==null?void 0:f.component)||i||t.tagName||"div",g=t.components(),E=g.length?g.map(C=>m.jsx(L,{component:C,config:n,editor:s,frameView:r},C.cid)):[y||void 0],w=ee(t.getAttributes()),_=f==null?void 0:f.editorRender,D=[...E,c].filter(C=>C??!1),S=D.length?D:null;if(_)return m.jsx(_,{props:w,editor:s,component:t,connectDom:l,children:S});if(f!=null&&f.component)return m.jsx("gjs-wrapper",{ref:l,style:f.wrapperStyle,children:m.jsx(p,{...w,children:S})});if(t.isInstanceOf("textnode"))return y;const fe=t.isInstanceOf("text")?a:void 0;return h.createElement(p,{...w,ref:l,key:fe},t.get("void")?null:S)}const ae=e=>{const{frame:t,window:n,onMount:s,editor:r}=e,o=r.Canvas.events,{root:i}=t;try{const c=I.createRoot(n.document.body);c.render(m.jsx(le,{...e,component:i,onMount:s}));const a=()=>c.unmount();t.once(o.frameUnload,a),n.addEventListener("unload",a)}catch(c){console.warn(c)}return i.getView()};function le(e){const{editor:t,component:n,window:s,frameView:r,config:o,onMount:i}=e,c=s.document,a=o.rootComponent||h.Fragment,d=o.rootComponent?{editorProps:{doc:c,editor:t,frameView:r}}:{},l=(o==null?void 0:o.bodyAfter)||h.Fragment;return m.jsx(a,{...d,children:m.jsx(L,{tagName:"div",component:n,config:o,editor:t,frameView:r,onMount:i,children:m.jsx(l,{...d})})})}const pe="rendererReact",de=v.startup;return q(function(e,t={}){const{Blocks:n,Pages:s}=e,r=n.events,o=s.events;e.Canvas.config.customRenderer=c=>ae({...c,config:t}),e.Components.config.processor=c=>k({model:c,editor:e,config:t}),ie(e,t);const i=[[r.add,oe({editor:e,config:t})],[o.addBefore,se({editor:e,config:t})]];i.forEach(([c,a])=>e.on(c,a)),J({editor:e,licenseKey:t.licenseKey,plan:de,pluginName:pe,cleanup:()=>{e.Canvas.config.customRenderer=void 0,e.Components.config.processor=void 0,i.forEach(([c,a])=>e.off(c,a))}})})});

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

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

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

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

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

@@ -1,9 +1,29 @@
-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;
+import { Block, Component, ComponentProperties, ComponentView, Editor, PageProperties } from 'grapesjs';
+import { RendererReactOptions } from '../shared/types';
+import { CustomRendererPropsWithConfig } from '../types';
+interface UseCanvasRenderProps extends Pick<CustomRendererPropsWithConfig, 'editor' | 'frameView'> {
+    component: Component;
+}
+export declare function manageReactBlockContent(props: {
+    editor: Editor;
+    config: RendererReactOptions;
+}): (block: Block) => void;
+export declare const manageReactPageContent: (props: {
+    editor: Editor;
+    config: RendererReactOptions;
+}) => (pageProps: PageProperties) => void;
+export declare function processReactElements(opts: {
+    model: Record<string, any>;
+    editor: Editor;
+    config: RendererReactOptions;
+}): ComponentProperties | undefined;
+export declare function useCanvasRender(props: UseCanvasRenderProps): {
+    key: number;
     view: ComponentView<Component> | undefined;
+    connectDom: (el: HTMLElement) => void;
 };
-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;
+export declare function bindComponentToElement(props: UseCanvasRenderProps & {
+    el: HTMLElement;
+}): ComponentView<Component>;
+export declare function registerComponents(editor: Editor, config: RendererReactOptions): void;
+export {};

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

@@ -0,0 +1,2 @@
+import { RenderComponentProps } from './types';
+export declare const RenderComponent: (props: RenderComponentProps) => string | import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,2 @@
+import { RenderErrorProps } from '../shared/types';
+export declare function RenderError(props: RenderErrorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { RenderPageProps } from './types';
+export declare function RenderPage(props: RenderPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { RenderProjectProps } from './types';
+export declare const RenderProject: (props: RenderProjectProps) => import("react/jsx-runtime").JSX.Element | null;
+export default RenderProject;

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

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

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

@@ -1,10 +1,2 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),k=require("react");var m=(r=>(r.NoPagesFound="noPagesFound",r.PageNotFound="pageNotFound",r.NoFramesFound="noFramesFound",r.MissingRootComponent="missingRootComponent",r.ComponentNotFound="componentNotFound",r))(m||{});function x(r){const{config:t,errorType:e}=r,s=t==null?void 0:t.errorComponent;return s?a.jsx(s,{...r}):a.jsxs("div",{children:["Error: ",e]})}function P(r){const t={};let e=!1;for(const s in r)if(Object.prototype.hasOwnProperty.call(r,s)){const n=r[s];if(typeof n=="string"||typeof n=="number"){const o=s.includes("-")?s.replace(/-([a-z])/g,i=>i[1].toUpperCase()):s;t[o]=n,e=!0}}return e?t:void 0}function O(r){const t={};return r.split(";").forEach(e=>{if(!e.trim())return;const s=e.indexOf(":");if(s>0){const n=e.substring(0,s).trim(),o=e.substring(s+1).trim();if(n&&o){const i=n.replace(/-([a-z])/g,l=>l[1].toUpperCase());t[i]=o}}}),Object.keys(t).length>0?t:void 0}function T(r){if(r){if(typeof r=="object"&&!Array.isArray(r))return P(r);if(typeof r=="string"){let t=O(r);if(!t)try{const e=JSON.parse(r);typeof e=="object"&&e!==null&&!Array.isArray(e)&&(t=P(e))}catch(e){console.error("Failed to parse style string as JSON",e)}return t}if(Array.isArray(r)){const t={};return r.forEach(e=>{if(typeof e=="object"&&e!==null){const s=e.name||e.property,n=e.value;if(typeof s=="string"&&s&&n!==void 0&&n!==""){const o=s.replace(/-([a-z])/g,i=>i[1].toUpperCase());t[o]=n}}}),Object.keys(t).length>0?t:void 0}}}function D(r){return $[r]?$[r]:r.includes("-")?r.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()):r}function W(r){var e;const t={};for(const[s,n]of Object.entries(r))if(s==="style")t.style=T(n);else if(s.startsWith("data-"))t[s]=n;else{const o=D(s);((e=r.xmlns)==null?void 0:e.includes("svg"))||r.viewBox!==void 0||r.d!==void 0||M.has(o)||o.startsWith("svg")?t[o]=n:!B.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[s]=n:t[o]=n}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"]),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"]),$={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 I(r,t,e){const{id:s,type:n}=r,o=s||void 0;let i;return s?i=s:t?i=`${t}-${e??0}`:n==="head"?i="gjs-head":t==="gjs-head"?i=`${t}-${e??0}`:i=`gjs-${n}`,{key:i,nodeId:o}}const v=function r(t){var N;const{component:e,config:s,children:n,parentId:o,index:i}=t;if(!e)return null;const{type:l,content:c}=e;if(l==="textnode")return c;const u=(N=s==null?void 0:s.components)==null?void 0:N[l],d=(u==null?void 0:u.component)||e.tagName||"div",h=e.attributes,{key:g,nodeId:j}=I(e,o,i),C=!!(u!=null&&u.component),A=W(h);C&&Object.keys(A).forEach(y=>{const p=A[y];typeof p=="string"&&!isNaN(Number(p))&&p.trim()!==""&&(A[y]=Number(p))});const{components:R}=e,b=[...R.length?R.map((y,p)=>a.jsx(r,{config:s,component:y,parentId:g,index:p},`${y.id}-${p}`)):[c],n],F={...A,...j?{id:j}:{}};return C?a.jsx(d,{...F,children:b},g):k.createElement(d,{...F,key:g},e.isVoid?null:b)};function z(r){var c;const{config:t,root:e,css:s}=r,n=(t==null?void 0:t.rootComponent)||k.Fragment,o=((c=e.docEl)==null?void 0:c.tagName)||"html",i=(t==null?void 0:t.headAfter)||k.Fragment,l=(t==null?void 0:t.bodyAfter)||k.Fragment;return a.jsx(o,{children:a.jsxs(n,{children:[a.jsxs(v,{component:e.head,config:t,children:[a.jsx("style",{children:`${s}`}),a.jsx(i,{})]}),a.jsx(v,{component:e,config:t,children:a.jsx(l,{})})]})})}class S{constructor(t){this.data=t}get id(){var t;return(t=this.data.attributes)==null?void 0:t.id}get type(){return this.data.type||"default"}get tagName(){const{type:t}=this;return t==="svg"?"svg":t==="image"?"img":t==="linkBox"||t==="link"?"a":t==="head"?"head":t==="wrapper"?"body":this.data.tagName||""}get isVoid(){return this.tagName==="img"?!0:!!this.data.void}get attributes(){const t={...this.data.attributes},{classes:e}=this;e.length&&(t.class=e.join(" "));function s(n,o){return Object.prototype.hasOwnProperty.call(n,o)}return s(t,"id")||(t.id=this.id),t}get content(){return this.data.content||""}get components(){return(this.data.components||[]).map(t=>new S(t))}get head(){return new S(this.data.head||{tagName:"head"})}get docEl(){return this.data.docEl}get classes(){return(this.data.classes||[]).map(e=>typeof e=="string"?e:e.name)}}class L{constructor(t){this.data=t}get component(){return this.data.component?new S(this.data.component):null}}class U{constructor(t){this.data=t}get id(){return this.data.id}get frames(){return(this.data.frames||[]).map(t=>new L(t))}}function w(r){const t=/(-?\d*\.?\d+)\w{0,}/.exec(r);return t?parseFloat(t[1]):Number.MAX_VALUE}class _{constructor(t){this.rules=t}getAll(){return this.rules}getRulesByGroup(t){return this.rules.filter(e=>e.group===t)}getAtRule(t){const{atRuleType:e,mediaText:s}=t,n=e?`@${e}`:s?"@media":"";return n+(s&&n?` ${s}`:"")}selectorsToString(t,e={}){const s=[],{state:n,selectorsAdd:o,selectors:i=[]}=t,l=i.map(u=>this.getFromSelectorName(u)).join(""),c=n&&!e.skipState?`:${n}`:"";return l&&s.push(`${l}${c}`),o&&!e.skipAdd&&s.push(o),s.join(", ")}getFromSelectorName(t=""){return`${t.startsWith("#")?"":"."}${t}`}styleToString(t={}){const e=[],{style:s={},important:n}=t;for(const o in s){const i=Array.isArray(n)?n.indexOf(o)>=0:n;if(o.substring(0,2)==="__")continue;const c=s[o];(Array.isArray(c)?c:[c]).forEach(f=>{const d=`${f}${i?" !important":""}`;d&&e.push(`${o}:${d};`)})}return e.join("")}getDeclaration(t){const{singleAtRule:e}=t,s=this.selectorsToString(t),n=this.styleToString(t);let o="";return(s||e)&&n&&(o=e?n:`${s}{${n}}`),o}buildFromRule(t){let e="";const s=this.selectorsToString(t),{selectorsAdd:n,singleAtRule:o}=t;if(s||n||o){const i=this.getDeclaration(t);i&&(e+=i)}return e}sortMediaObject(t={}){const e=[];for(const s in t){const n=t[s];e.push({key:s,value:n})}return e.sort((s,n)=>{const o=[s.key,n.key].every(c=>c.indexOf("min-width")!==-1),i=o?s.key:n.key,l=o?n.key:s.key;return w(i)-w(l)})}getCssAsString(){if(!this.rules||!this.rules.length)return"";const{rules:t}=this,e={},s=[];return t.forEach(n=>{const o=this.getAtRule(n);if(o){const i=e[o];i?i.push(n):e[o]=[n];return}s.push(this.buildFromRule(n))}),this.sortMediaObject(e).forEach(n=>{let o="";const i=n.key;n.value.forEach(c=>{const u=this.buildFromRule(c);c.singleAtRule?s.push(`${i}{${u}}`):o+=u}),o&&s.push(`${i}{${o}}`)}),s.join(`
+`)}}class q{constructor(t){this.list=t}getAll(){return this.list}}class V{constructor(t){this.pages=t.map(e=>new U(e))}getAll(){return this.pages}}class J{constructor(t){this.Css=new _(t.styles||[]),this.Pages=new V(t.pages||[]),this.DataSources=new q(t.dataSources||[])}}function E(r,t){if(r.id===t)return r;for(const e of r.components){const s=E(e,t);if(s)return s}return null}const K=function(r){var d;const{projectData:t,config:e={},pageId:s,componentId:n}=r,o=new J(t),i=o.Css.getCssAsString(),l=o.Pages.getAll();if(!l.length)return a.jsx(x,{...r,errorType:m.NoPagesFound});const c=s?l.find(h=>h.id===s):l[0];if(!c)return a.jsx(x,{...r,errorType:m.PageNotFound});const{frames:u}=c;if(!u.length)return a.jsx(x,{...r,errorType:m.NoFramesFound});const f=(d=u[0])==null?void 0:d.component;if(!f)return a.jsx(x,{...r,errorType:m.MissingRootComponent});if(n){const h=E(f,n);if(!h)return a.jsx(x,{...r,errorType:m.ComponentNotFound});if(h){const g=e.rootComponent||k.Fragment;return a.jsxs(g,{children:[a.jsx("style",{children:`${i}`}),a.jsx(v,{component:h,config:e})]})}return null}return a.jsx(z,{config:e,root:f,css:i})};exports.RenderProject=K;

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

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

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

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