@grapesjs/studio-sdk-plugins 1.0.33-rc.1 → 1.0.33

package/dist/rendererReact/index.cjs.js

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

package/dist/rendererReact/index.es.js

@@ -1,10 +1,10 @@
 import { jsx as y } from "react/jsx-runtime";
-import { useState as N, useEffect as _, createElement as B, Fragment as T } from "react";
-import { createRoot as $ } from "react-dom/client";
-const I = "app.grapesjs.com", U = "app-stage.grapesjs.com", K = "app2.grapesjs.com", F = "app-stage2.grapesjs.com", P = [
-  I,
-  K,
+import { useState as R, useEffect as I, createElement as B, Fragment as T } from "react";
+import { createRoot as L } from "react-dom/client";
+const U = "app.grapesjs.com", W = "app-stage.grapesjs.com", K = "app2.grapesjs.com", F = "app-stage2.grapesjs.com", P = [
   U,
+  K,
+  W,
   F,
   "localhost",
   "127.0.0.1",
@@ -14,7 +14,11 @@ const I = "app.grapesjs.com", U = "app-stage.grapesjs.com", K = "app2.grapesjs.c
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], M = "license:check:start", V = "license:check:end", z = () => typeof window < "u", G = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? U : I}`}/api`, J = () => {
+], M = "license:check:start", V = "license:check:end", z = () => typeof window < "u", G = ({
+  isDev: e,
+  isStage: t,
+  isPlatform: n
+}) => `${e ? "" : `https://${t ? W : U}`}/${n ? "platform-api" : "api"}`, J = () => {
   const e = z() && window.location.hostname;
   return !!e && (P.includes(e) || P.some((t) => e.endsWith(t)));
 }, q = (e) => e.replace(/[A-Z]+(?![a-z])|[A-Z]/g, (t, n) => (n ? "-" : "") + t.toLowerCase()), x = (e) => typeof e == "string";
@@ -29,7 +33,7 @@ async function Z({
   params: r,
   body: o
 }) {
-  const c = `${t || G({ isDev: !1, isStage: !1 })}${e}`, i = {
+  const a = `${t || G({ isDev: !1, isStage: !1 })}${e}`, i = {
     method: n,
     headers: {
       "Content-Type": "application/json",
@@ -37,17 +41,17 @@ async function Z({
     }
   };
   o && (i.body = JSON.stringify(o));
-  const f = r ? new URLSearchParams(r).toString() : "", l = f ? `?${f}` : "", d = await fetch(`${c}${l}`, i);
-  if (!d.ok)
-    throw new Error(`HTTP error! status: ${d.status}`);
-  return d.json();
+  const f = r ? new URLSearchParams(r).toString() : "", d = f ? `?${f}` : "", p = await fetch(`${a}${d}`, i);
+  if (!p.ok)
+    throw new Error(`HTTP error! status: ${p.status}`);
+  return p.json();
 }
-var v = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(v || {});
+var g = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(g || {});
 const O = {
-  [v.free]: 0,
-  [v.startup]: 10,
-  [v.business]: 20,
-  [v.enterprise]: 30
+  [g.free]: 0,
+  [g.startup]: 10,
+  [g.business]: 20,
+  [g.enterprise]: 30
 };
 function Q(e) {
   const t = e;
@@ -59,33 +63,34 @@ async function Y({
   plan: t,
   pluginName: n,
   licenseKey: s,
-  cleanup: r
+  onLicenseCheckResponse: r,
+  cleanup: o
 }) {
-  let o = "", a = !1;
-  const c = J(), i = (l) => {
-    console.warn("Cleanup plugin:", n, "Reason:", l), r();
-  }, f = (l = {}) => {
-    var h;
-    const { error: d, sdkLicense: m } = l, u = (h = l.plan) == null ? void 0 : h.category;
-    if (!(m || l.license) || d)
-      i(d || "Invalid license");
-    else if (u) {
-      const b = O[t], C = O[u];
-      b > C && i({ pluginRequiredPlan: t, licensePlan: u });
+  let c = "", a = !1;
+  const i = J(), f = (p) => {
+    console.warn("Cleanup plugin:", n, "Reason:", p), o();
+  }, d = (p = {}) => {
+    var C;
+    const { error: m, sdkLicense: u } = p, l = (C = p.plan) == null ? void 0 : C.category;
+    if (!(u || p.license) || m)
+      f(m || "Invalid license");
+    else if (l) {
+      const w = O[t], b = O[l];
+      w > b && f({ pluginRequiredPlan: t, licensePlan: l });
     }
   };
-  e.on(M, (l) => {
-    o = l == null ? void 0 : l.baseApiUrl, a = !0;
-  }), e.on(V, (l) => {
-    f(l);
+  e.on(M, (p) => {
+    c = p == null ? void 0 : p.baseApiUrl, a = !0;
+  }), e.on(V, (p) => {
+    r == null || r(p), d(p);
   }), setTimeout(async () => {
     if (!a) {
-      if (c) return;
+      if (i) return;
       if (s) {
-        const l = await ee({ licenseKey: s, pluginName: n, baseApiUrl: o });
-        l && f(l);
+        const p = await ee({ licenseKey: s, pluginName: n, baseApiUrl: c });
+        r == null || r(p), p && d(p);
       } else
-        i("The `licenseKey` option not provided");
+        f("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
@@ -122,14 +127,14 @@ const ne = (e, t) => {
       return { cmpConfig: r, type: s };
   }
 };
-function L(e) {
+function D(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, (a) => a[1].toUpperCase()) : s;
+        const o = s.includes("-") ? s.replace(/-([a-z])/g, (c) => c[1].toUpperCase()) : s;
         t[o] = r, n = !0;
       }
     }
@@ -143,8 +148,8 @@ function oe(e) {
     if (s > 0) {
       const r = n.substring(0, s).trim(), o = n.substring(s + 1).trim();
       if (r && o) {
-        const a = r.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
-        t[a] = o;
+        const c = r.replace(/-([a-z])/g, (a) => a[1].toUpperCase());
+        t[c] = o;
       }
     }
   }), Object.keys(t).length > 0 ? t : void 0;
@@ -152,13 +157,13 @@ function oe(e) {
 function se(e) {
   if (e) {
     if (typeof e == "object" && !Array.isArray(e))
-      return L(e);
+      return D(e);
     if (typeof e == "string") {
       let t = oe(e);
       if (!t)
         try {
           const n = JSON.parse(e);
-          typeof n == "object" && n !== null && !Array.isArray(n) && (t = L(n));
+          typeof n == "object" && n !== null && !Array.isArray(n) && (t = D(n));
         } catch (n) {
           console.error("Failed to parse style string as JSON", n);
         }
@@ -170,7 +175,7 @@ function se(e) {
         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, (a) => a[1].toUpperCase());
+            const o = s.replace(/-([a-z])/g, (c) => c[1].toUpperCase());
             t[o] = r;
           }
         }
@@ -179,9 +184,9 @@ function se(e) {
   }
 }
 function re(e) {
-  return D[e] ? D[e] : e.includes("-") ? e.replace(/-([a-z])/g, (t, n) => n.toUpperCase()) : e;
+  return _[e] ? _[e] : e.includes("-") ? e.replace(/-([a-z])/g, (t, n) => n.toUpperCase()) : e;
 }
-function ce(e) {
+function ae(e) {
   var n;
   const t = {};
   for (const [s, r] of Object.entries(e))
@@ -191,11 +196,11 @@ function ce(e) {
       t[s] = r;
     else {
       const o = re(s);
-      ((n = e.xmlns) == null ? void 0 : n.includes("svg")) || e.viewBox !== void 0 || e.d !== void 0 || ie.has(o) || o.startsWith("svg") ? t[o] = r : !ae.has(o) && !o.startsWith("on") && !o.startsWith("aria-") && !o.startsWith("data-") ? t[s] = r : t[o] = r;
+      ((n = e.xmlns) == null ? void 0 : n.includes("svg")) || e.viewBox !== void 0 || e.d !== void 0 || ie.has(o) || o.startsWith("svg") ? t[o] = r : !ce.has(o) && !o.startsWith("on") && !o.startsWith("aria-") && !o.startsWith("data-") ? t[s] = r : t[o] = r;
     }
   return t;
 }
-const ae = /* @__PURE__ */ new Set([
+const ce = /* @__PURE__ */ new Set([
   "className",
   "id",
   "style",
@@ -279,7 +284,7 @@ const ae = /* @__PURE__ */ new Set([
   "clipPath",
   "overflow",
   "pointerEvents"
-]), D = {
+]), _ = {
   class: "className",
   for: "htmlFor",
   "http-equiv": "httpEquiv",
@@ -296,60 +301,60 @@ const ae = /* @__PURE__ */ new Set([
   "font-family": "fontFamily",
   "font-size": "fontSize",
   "text-anchor": "textAnchor"
-}, R = (e) => (e == null ? void 0 : e.$$typeof) && typeof e.props == "object";
+}, E = (e) => (e == null ? void 0 : e.$$typeof) && typeof e.props == "object";
 function le(e) {
   return (t) => {
     const n = t.getContent();
-    R(n) && t.set({
-      content: w({ ...e, model: n }),
+    E(n) && t.set({
+      content: A({ ...e, model: n }),
       reactContent: n
     });
   };
 }
 const pe = (e) => (t) => {
   const n = t.component;
-  R(n) && (t.component = { components: w({ ...e, model: n }) });
+  E(n) && (t.component = { components: A({ ...e, model: n }) });
 };
-function w(e) {
+function A(e) {
   const { model: t, editor: n, config: s } = e;
-  if (R(t)) {
-    const r = t, o = {}, { type: a, props: c = {} } = r, { children: i, className: f, style: l, ...d } = c, m = (p) => ({ type: "textnode", content: p }), u = typeof a == "symbol";
-    if (H(a)) {
-      const p = ne(s, a);
-      o.type = p == null ? void 0 : p.type;
-    } else n.Components.getType(a) ? o.type = a : u || (o.tagName = a);
-    if (f && (o.classes = f), l && (o.style = te(l)), Array.isArray(i) ? o.components = i.map((p) => x(p) ? m(p) : w({ ...e, model: p })).filter(Boolean) : x(i) && (o.components = m(i)), Object.keys(d).length) {
-      const p = n.Parser.parserHtml.splitPropsFromAttr(d);
-      o.attributes = p.attrs, Object.assign(o, p.props);
+  if (E(t)) {
+    const r = t, o = {}, { type: c, props: a = {} } = r, { children: i, className: f, style: d, ...p } = a, m = (l) => ({ type: "textnode", content: l }), u = typeof c == "symbol";
+    if (H(c)) {
+      const l = ne(s, c);
+      o.type = l == null ? void 0 : l.type;
+    } else n.Components.getType(c) ? o.type = c : u || (o.tagName = c);
+    if (f && (o.classes = f), d && (o.style = te(d)), Array.isArray(i) ? o.components = i.map((l) => x(l) ? m(l) : A({ ...e, model: l })).filter(Boolean) : x(i) && (o.components = m(i)), Object.keys(p).length) {
+      const l = n.Parser.parserHtml.splitPropsFromAttr(p);
+      o.attributes = l.attrs, Object.assign(o, l.props);
     }
     return o;
   }
 }
 function fe(e) {
-  const { component: t } = e, [n, s] = N(0), [r, o] = N();
-  return _(() => {
+  const { component: t } = e, [n, s] = R(0), [r, o] = R();
+  return I(() => {
     if (!t) return () => {
     };
-    const c = () => s((p) => p + 1), i = () => {
-      [...t.views].forEach((h) => h.remove()), o(void 0);
-    }, { em: f } = t, l = f.Components.events, m = [...["components", "attributes", "classes"].map((p) => `${l.update}:${p}`), "rerender"].join(" "), u = [l.removed, "rerender"].join(" ");
-    return t.on(m, c), t.on(u, i), () => {
-      t.off(m, c), t.off(u, i), i();
+    const a = () => s((l) => l + 1), i = () => {
+      [...t.views].forEach((v) => v.remove()), o(void 0);
+    }, { em: f } = t, d = f.Components.events, m = [...["components", "attributes", "classes"].map((l) => `${d.update}:${l}`), "rerender"].join(" "), u = [d.removed, "rerender"].join(" ");
+    return t.on(m, a), t.on(u, i), () => {
+      t.off(m, a), t.off(u, i), i();
     };
-  }, [t]), { key: n, view: r, connectDom: (c) => {
-    if (!c) return;
-    const i = ue({ ...e, el: c });
+  }, [t]), { key: n, view: r, connectDom: (a) => {
+    if (!a) return;
+    const i = ue({ ...e, el: a });
     o(i);
   } };
 }
 function ue(e) {
   var i;
-  const { editor: t, component: n, el: s, frameView: r } = e, { em: o, Components: a } = t;
-  let c = n.getView(r.model);
-  if ((c == null ? void 0 : c.el) === s)
-    return c;
-  if (!c) {
-    const { ComponentView: f } = a, l = n.attributes.type || "default", d = ((i = a.getType(l)) == null ? void 0 : i.view) || f, m = { ...a.config, frameView: r, em: o }, u = d.extend({
+  const { editor: t, component: n, el: s, frameView: r } = e, { em: o, Components: c } = t;
+  let a = n.getView(r.model);
+  if ((a == null ? void 0 : a.el) === s)
+    return a;
+  if (!a) {
+    const { ComponentView: f } = c, d = n.attributes.type || "default", p = ((i = c.getType(d)) == null ? void 0 : i.view) || f, m = { ...c.config, frameView: r, em: o }, u = p.extend({
       initComponents() {
       },
       _createElement() {
@@ -360,21 +365,21 @@ function ue(e) {
       __clearAttributes() {
       },
       render() {
-        var p;
-        return this._ensureElement(), this._setData(), this.renderAttributes(), (p = this.updateSrc) == null || p.call(this), this;
+        var l;
+        return this._ensureElement(), this._setData(), this.renderAttributes(), (l = this.updateSrc) == null || l.call(this), this;
       }
     });
-    c = new u({ el: s, config: m, model: n });
+    a = new u({ el: s, config: m, model: n });
   }
-  return c.el = s, c.render(), c;
+  return a.el = s, a.render(), a;
 }
 function de(e, t) {
   const { Components: n } = e, s = (r) => {
-    const { id: o, model: a } = r;
+    const { id: o, model: c } = r;
     n.addType(o, {
       model: {
-        toJSON(...c) {
-          const i = a.prototype.toJSON.apply(this, c);
+        toJSON(...a) {
+          const i = c.prototype.toJSON.apply(this, a);
           return i.tagName = this.tagName, i;
         }
       }
@@ -382,92 +387,92 @@ function de(e, t) {
   };
   n.getTypes().forEach(s), e.on("component:type:add", s), Object.entries(t.components || {}).forEach(([r, o]) => {
     var m, u;
-    const { allowPropClassName: a, allowPropId: c, allowChildren: i } = o, f = !c && !a, l = () => ({
+    const { allowPropClassName: c, allowPropId: a, allowChildren: i } = o, f = !a && !c, d = () => ({
       disabled: f
-    }), d = () => ({
-      disableClasses: !a,
-      disableComponent: !c
+    }), p = () => ({
+      disableClasses: !c,
+      disableComponent: !a
     });
     n.addType(r, {
-      isComponent: (p) => (p == null ? void 0 : p.tagName) === r,
+      isComponent: (l) => (l == null ? void 0 : l.tagName) === r,
       model: {
         defaults: {
           type: r,
           traits: ((m = o.props) == null ? void 0 : m.call(o)) || [],
           droppable: !!i,
           stylable: !f,
-          styleManager: l,
-          selectorManager: d,
+          styleManager: d,
+          selectorManager: p,
           ...((u = o.model) == null ? void 0 : u.defaults) || {}
         }
       }
     });
   });
 }
-function W(e) {
-  var S;
-  const { component: t, config: n, editor: s, frameView: r, onMount: o, tagName: a, children: c } = e, { key: i, view: f, connectDom: l } = fe(e);
-  _(() => {
+function j(e) {
+  var N;
+  const { component: t, config: n, editor: s, frameView: r, onMount: o, tagName: c, children: a } = e, { key: i, view: f, connectDom: d } = fe(e);
+  I(() => {
     if (!f && !o) return;
-    const g = setTimeout(() => {
+    const h = setTimeout(() => {
       f && (o == null || o(f), setTimeout(() => f.postRender()));
     });
-    return () => clearTimeout(g);
+    return () => clearTimeout(h);
   }, [f]);
-  const d = t.get("type") || "default", m = t.content, u = (S = n.components) == null ? void 0 : S[d], p = (u == null ? void 0 : u.component) || a || t.tagName || "div", h = t.components(), b = h.length ? h.map((g) => /* @__PURE__ */ y(W, { component: g, config: n, editor: s, frameView: r }, g.cid)) : [m || void 0], C = ce(t.getAttributes()), A = u == null ? void 0 : u.editorRender, E = [...b, c].filter((g) => g ?? !1), k = E.length ? E : null;
-  if (A)
-    return /* @__PURE__ */ y(A, { props: C, editor: s, component: t, connectDom: l, children: k });
+  const p = t.get("type") || "default", m = t.content, u = (N = n.components) == null ? void 0 : N[p], l = (u == null ? void 0 : u.component) || c || t.tagName || "div", v = t.components(), C = v.length ? v.map((h) => /* @__PURE__ */ y(j, { component: h, config: n, editor: s, frameView: r }, h.cid)) : [m || void 0], w = ae(t.getAttributes()), b = u == null ? void 0 : u.editorRender, S = [...C, a].filter((h) => h ?? !1), k = S.length ? S : null;
+  if (b)
+    return /* @__PURE__ */ y(b, { props: w, editor: s, component: t, connectDom: d, children: k });
   if (u != null && u.component)
-    return /* @__PURE__ */ y("gjs-wrapper", { ref: l, style: u.wrapperStyle, children: /* @__PURE__ */ y(p, { ...C, children: k }) });
+    return /* @__PURE__ */ y("gjs-wrapper", { ref: d, style: u.wrapperStyle, children: /* @__PURE__ */ y(l, { ...w, children: k }) });
   if (t.isInstanceOf("textnode"))
     return m;
-  const j = t.isInstanceOf("text") ? i : void 0;
-  return /* @__PURE__ */ B(p, { ...C, ref: l, key: j }, t.get("void") ? null : k);
+  const $ = t.isInstanceOf("text") ? i : void 0;
+  return /* @__PURE__ */ B(l, { ...w, ref: d, key: $ }, t.get("void") ? null : k);
 }
 const me = (e) => {
-  const { frame: t, window: n, onMount: s, editor: r } = e, o = r.Canvas.events, { root: a } = t;
+  const { frame: t, window: n, onMount: s, editor: r } = e, o = r.Canvas.events, { root: c } = t;
   try {
-    const c = $(n.document.body);
-    c.render(/* @__PURE__ */ y(ye, { ...e, component: a, onMount: s }));
-    const i = () => c.unmount();
+    const a = L(n.document.body);
+    a.render(/* @__PURE__ */ y(ye, { ...e, component: c, onMount: s }));
+    const i = () => a.unmount();
     t.once(o.frameUnload, i), n.addEventListener("unload", i);
-  } catch (c) {
-    console.warn(c);
+  } catch (a) {
+    console.warn(a);
   }
-  return a.getView();
+  return c.getView();
 };
 function ye(e) {
-  const { editor: t, component: n, window: s, frameView: r, config: o, onMount: a } = e, c = s.document, i = o.rootComponent || T, f = o.rootComponent ? { editorProps: { doc: c, editor: t, frameView: r } } : {}, l = (o == null ? void 0 : o.bodyAfter) || T;
+  const { editor: t, component: n, window: s, frameView: r, config: o, onMount: c } = e, a = s.document, i = o.rootComponent || T, f = o.rootComponent ? { editorProps: { doc: a, editor: t, frameView: r } } : {}, d = (o == null ? void 0 : o.bodyAfter) || T;
   return /* @__PURE__ */ y(i, { ...f, children: /* @__PURE__ */ y(
-    W,
+    j,
     {
       tagName: "div",
       component: n,
       config: o,
       editor: t,
       frameView: r,
-      onMount: a,
-      children: /* @__PURE__ */ y(l, { ...f })
+      onMount: c,
+      children: /* @__PURE__ */ y(d, { ...f })
     }
   ) });
 }
-const he = "rendererReact", ge = v.startup, ve = function(e, t = {}) {
+const he = "rendererReact", ge = g.startup, ve = function(e, t = {}) {
   const { Blocks: n, Pages: s } = e, r = n.events, o = s.events;
-  e.Canvas.config.customRenderer = (c) => me({ ...c, config: t }), e.Components.config.processor = (c) => w({ model: c, editor: e, config: t }), de(e, t);
-  const a = [
+  e.Canvas.config.customRenderer = (a) => me({ ...a, config: t }), e.Components.config.processor = (a) => A({ model: a, editor: e, config: t }), de(e, t);
+  const c = [
     [r.add, le({ editor: e, config: t })],
     [o.addBefore, pe({ editor: e, config: t })]
   ];
-  a.forEach(([c, i]) => e.on(c, i)), Y({
+  c.forEach(([a, i]) => e.on(a, i)), Y({
     editor: e,
     licenseKey: t.licenseKey,
     plan: ge,
     pluginName: he,
     cleanup: () => {
-      e.Canvas.config.customRenderer = void 0, e.Components.config.processor = void 0, a.forEach(([c, i]) => e.off(c, i));
+      e.Canvas.config.customRenderer = void 0, e.Components.config.processor = void 0, c.forEach(([a, i]) => e.off(a, i));
     }
   });
-}, ke = X(ve);
+}, Ae = X(ve);
 export {
-  ke as default
+  Ae as default
 };

package/dist/rendererReact/index.js

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