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

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

@@ -1,10 +1,2 @@
-(function(f,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(f=typeof globalThis<"u"?globalThis:f||self,i(f.StudioSdkPlugins_rendererReactProject={},f.jsxRuntime,f.React))})(this,function(f,i,A){"use strict";function W(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 E={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 w(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 O(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 D(s){if(s){if(typeof s=="object"&&!Array.isArray(s))return w(s);if(typeof s=="string"){let t=O(s);if(!t)try{const e=JSON.parse(s);typeof e=="object"&&e!==null&&!Array.isArray(e)&&(t=w(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 I(s){return P[s]?P[s]:s.includes("-")?s.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()):s}function M(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=D(r);else if(a.startsWith("data-"))t[a]=r;else{const n=I(a);e||R.has(n)||n.startsWith("svg")?t[n]=r:!B.has(n)&&!n.startsWith("on")&&!n.startsWith("aria-")&&!n.startsWith("data-")?t[`data-${a.toLowerCase()}`]=r:t[n]=r}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"]),R=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"]),P={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=function s(t){var $;const{component:e,config:o,children:a,parentId:r,index:n}=t;if(!e)return null;const l=e.getType()||"",d=e.getContent();if(l==="textnode")return d;const u=($=o.components)==null?void 0:$[l],c=(u==null?void 0:u.component)||e.getTagName()||"div",h=e.getAttributes(),{key:y,nodeId:j}=W(e,r,n),v=!!(u!=null&&u.component),b=v?h:M(h);v&&Object.keys(b).forEach(C=>{const g=b[C];typeof g=="string"&&!isNaN(Number(g))&&g.trim()!==""&&(b[C]=Number(g))});const N=e.getComponents(),T=[...N.length?N.map((C,g)=>i.jsx(s,{config:o,component:C,parentId:y,index:g},`${C.getId()}-${g}`)):[d],a],F={...b,...j?{id:j}:{}};return v?i.jsx(c,{...F,children:T},y):A.createElement(c,{...F,key:y},e.isVoid()?null:T)};class k{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 k(t))}getHead(){return this.data.head?new k(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 z{constructor(t){this.data=t}getComponent(){return this.data.component?new k(this.data.component):null}getWidth(){return this.data.width||""}getHeight(){return this.data.height||""}}class L{constructor(t){this.data=t}getId(){return this.data.id}getName(){return this.data.name||""}getFrames(){return(this.data.frames||[]).map(t=>new z(t))}}class q{constructor(t){this.assets=t}getAll(){return this.assets}}class U{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(c=>typeof c=="string"&&!c.startsWith(".")&&!c.startsWith("#")&&!c.startsWith("[")&&!c.startsWith(":")&&!c.startsWith(">")&&!c.startsWith("*")&&!c.startsWith("@")?"."+c:c),d=r.state,u=d?l.map(c=>`${c.trim()}:${d}`).join(", "):l.join(""),p=Object.entries(r.style).map(([c,h])=>`  ${c}: ${h};`).join(`
-`);return p?`${u} {
-${p}
-}`:""},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 G{constructor(t){this.symbols=t}getAll(){return this.symbols}}class J{constructor(t){this.list=t}getAll(){return this.list}}class V{constructor(t){this.pages=t.map(e=>new L(e))}getAll(){return this.pages}}class _{constructor(t){this.assetManager=new q(t.assets||[]),this.cssComposer=new U(t.styles||[]),this.pages=new V(t.pages||[]),this.symbols=new G(t.symbols||[]),this.dataSources=new J(t.dataSources||[])}getAssetManager(){return this.assetManager}getCssComposer(){return this.cssComposer}getPages(){return this.pages}getSymbols(){return this.symbols}getDataSources(){return this.dataSources}}function x(s,t){if(s.getId()===t)return s;for(const e of s.getComponents()){const o=x(e,t);if(o)return o}return null}function H(s){var p;const{config:t,root:e,css:o}=s,a=t.wrapper||A.Fragment,r=e.getHead(),n=(p=e.getDocEl)==null?void 0:p.call(e),l=e.getAttributes().doctype||"<!DOCTYPE html>",d=(n==null?void 0:n.tagName)||"html",{skipDocType:u}=t;return i.jsxs(i.Fragment,{children:[u!==void 0&&!u&&l,i.jsxs(d,{children:[i.jsx(S,{component:r,config:t,children:i.jsx("style",{children:`${o}`})}),i.jsx(a,{children:i.jsx(S,{component:e,config:t})})]})]})}function m(s,t){const e=s?typeof s=="function"?s(t):s:"An error occurred";return i.jsx(i.Fragment,{children:i.jsx("html",{children:i.jsx("body",{children:e})})})}const K=({projectJson:s,config:t={},pageId:e,componentId:o})=>{var c;const a=new _(s),r=a.getCssComposer().getCssAsString(),n=a.getPages().getAll(),l={...E,...t.errors};if(!n.length)return m(l.noPagesFound,{projectJson:s});const d=e?n.find(h=>h.getName()===e):n[0];if(!d)return m(l.pageNotFound,{pageId:e});const u=d.getFrames();if(!u.length)return m(l.noFramesFound,{page:d});const p=(c=u[0])==null?void 0:c.getComponent();if(!p)return m(l.missingRootComponent,{frame:u[0]});if(o){const h=x(p,o);if(!h)return m(l.componentNotFound,{componentId:o});if(h){const y=t.wrapper||A.Fragment;return i.jsxs(i.Fragment,{children:[i.jsx("style",{children:`${r}`}),i.jsx(y,{children:i.jsx(S,{component:h,config:t})})]})}return null}return i.jsx(H,{config:t,root:p,css:r})};f.GrapesJSProject=K,f.RenderProjectComponent=S,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
+(function(d,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],a):(d=typeof globalThis<"u"?globalThis:d||self,a(d.StudioSdkPlugins_rendererReactProject={},d.jsxRuntime,d.React))})(this,function(d,a,y){"use strict";var g=(s=>(s.NoPagesFound="noPagesFound",s.PageNotFound="pageNotFound",s.NoFramesFound="noFramesFound",s.MissingRootComponent="missingRootComponent",s.ComponentNotFound="componentNotFound",s))(g||{});function k(s){const{config:t,errorType:e}=s,r=t==null?void 0:t.errorComponent;return r?a.jsx(r,{...s}):a.jsxs("div",{children:["Error: ",e]})}function b(s){const t={};let e=!1;for(const r in s)if(Object.prototype.hasOwnProperty.call(s,r)){const n=s[r];if(typeof n=="string"||typeof n=="number"){const o=r.includes("-")?r.replace(/-([a-z])/g,i=>i[1].toUpperCase()):r;t[o]=n,e=!0}}return e?t:void 0}function O(s){const t={};return s.split(";").forEach(e=>{if(!e.trim())return;const r=e.indexOf(":");if(r>0){const n=e.substring(0,r).trim(),o=e.substring(r+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 D(s){if(s){if(typeof s=="object"&&!Array.isArray(s))return b(s);if(typeof s=="string"){let t=O(s);if(!t)try{const e=JSON.parse(s);typeof e=="object"&&e!==null&&!Array.isArray(e)&&(t=b(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 r=e.name||e.property,n=e.value;if(typeof r=="string"&&r&&n!==void 0&&n!==""){const o=r.replace(/-([a-z])/g,i=>i[1].toUpperCase());t[o]=n}}}),Object.keys(t).length>0?t:void 0}}}function W(s){return N[s]?N[s]:s.includes("-")?s.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()):s}function B(s){var e;const t={};for(const[r,n]of Object.entries(s))if(r==="style")t.style=D(n);else if(r.startsWith("data-"))t[r]=n;else{const o=W(r);((e=s.xmlns)==null?void 0:e.includes("svg"))||s.viewBox!==void 0||s.d!==void 0||I.has(o)||o.startsWith("svg")?t[o]=n:!M.has(o)&&!o.startsWith("on")&&!o.startsWith("aria-")&&!o.startsWith("data-")?t[r]=n:t[o]=n}return t}const M=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"]),I=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"]),N={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 z(s,t,e){const{id:r,type:n}=s,o=r||void 0;let i;return r?i=r: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 F=function s(t){var T;const{component:e,config:r,children:n,parentId:o,index:i}=t;if(!e)return null;const{type:l,content:c}=e;if(l==="textnode")return c;const u=(T=r==null?void 0:r.components)==null?void 0:T[l],f=(u==null?void 0:u.component)||e.tagName||"div",h=e.attributes,{key:S,nodeId:$}=z(e,o,i),j=!!(u!=null&&u.component),C=B(h);j&&Object.keys(C).forEach(A=>{const p=C[A];typeof p=="string"&&!isNaN(Number(p))&&p.trim()!==""&&(C[A]=Number(p))});const{components:w}=e,R=[...w.length?w.map((A,p)=>a.jsx(s,{config:r,component:A,parentId:S,index:p},`${A.id}-${p}`)):[c],n],E={...C,...$?{id:$}:{}};return j?a.jsx(f,{...E,children:R},S):y.createElement(f,{...E,key:S},e.isVoid?null:R)};function L(s){var c;const{config:t,root:e,css:r}=s,n=(t==null?void 0:t.rootComponent)||y.Fragment,o=((c=e.docEl)==null?void 0:c.tagName)||"html",i=(t==null?void 0:t.headAfter)||y.Fragment,l=(t==null?void 0:t.bodyAfter)||y.Fragment;return a.jsx(o,{children:a.jsxs(n,{children:[a.jsxs(F,{component:e.head,config:t,children:[a.jsx("style",{children:`${r}`}),a.jsx(i,{})]}),a.jsx(F,{component:e,config:t,children:a.jsx(l,{})})]})})}class v{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 r(n,o){return Object.prototype.hasOwnProperty.call(n,o)}return r(t,"id")||(t.id=this.id),t}get content(){return this.data.content||""}get components(){return(this.data.components||[]).map(t=>new v(t))}get head(){return new v(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 _{constructor(t){this.data=t}get component(){return this.data.component?new v(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 _(t))}}function x(s){const t=/(-?\d*\.?\d+)\w{0,}/.exec(s);return t?parseFloat(t[1]):Number.MAX_VALUE}class q{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:r}=t,n=e?`@${e}`:r?"@media":"";return n+(r&&n?` ${r}`:"")}selectorsToString(t,e={}){const r=[],{state:n,selectorsAdd:o,selectors:i=[]}=t,l=i.map(u=>this.getFromSelectorName(u)).join(""),c=n&&!e.skipState?`:${n}`:"";return l&&r.push(`${l}${c}`),o&&!e.skipAdd&&r.push(o),r.join(", ")}getFromSelectorName(t=""){return`${t.startsWith("#")?"":"."}${t}`}styleToString(t={}){const e=[],{style:r={},important:n}=t;for(const o in r){const i=Array.isArray(n)?n.indexOf(o)>=0:n;if(o.substring(0,2)==="__")continue;const c=r[o];(Array.isArray(c)?c:[c]).forEach(m=>{const f=`${m}${i?" !important":""}`;f&&e.push(`${o}:${f};`)})}return e.join("")}getDeclaration(t){const{singleAtRule:e}=t,r=this.selectorsToString(t),n=this.styleToString(t);let o="";return(r||e)&&n&&(o=e?n:`${r}{${n}}`),o}buildFromRule(t){let e="";const r=this.selectorsToString(t),{selectorsAdd:n,singleAtRule:o}=t;if(r||n||o){const i=this.getDeclaration(t);i&&(e+=i)}return e}sortMediaObject(t={}){const e=[];for(const r in t){const n=t[r];e.push({key:r,value:n})}return e.sort((r,n)=>{const o=[r.key,n.key].every(c=>c.indexOf("min-width")!==-1),i=o?r.key:n.key,l=o?n.key:r.key;return x(i)-x(l)})}getCssAsString(){if(!this.rules||!this.rules.length)return"";const{rules:t}=this,e={},r=[];return t.forEach(n=>{const o=this.getAtRule(n);if(o){const i=e[o];i?i.push(n):e[o]=[n];return}r.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?r.push(`${i}{${u}}`):o+=u}),o&&r.push(`${i}{${o}}`)}),r.join(`
+`)}}class V{constructor(t){this.list=t}getAll(){return this.list}}class J{constructor(t){this.pages=t.map(e=>new U(e))}getAll(){return this.pages}}class K{constructor(t){this.Css=new q(t.styles||[]),this.Pages=new J(t.pages||[]),this.DataSources=new V(t.dataSources||[])}}function P(s,t){if(s.id===t)return s;for(const e of s.components){const r=P(e,t);if(r)return r}return null}const G=function(s){var f;const{projectData:t,config:e={},pageId:r,componentId:n}=s,o=new K(t),i=o.Css.getCssAsString(),l=o.Pages.getAll();if(!l.length)return a.jsx(k,{...s,errorType:g.NoPagesFound});const c=r?l.find(h=>h.id===r):l[0];if(!c)return a.jsx(k,{...s,errorType:g.PageNotFound});const{frames:u}=c;if(!u.length)return a.jsx(k,{...s,errorType:g.NoFramesFound});const m=(f=u[0])==null?void 0:f.component;if(!m)return a.jsx(k,{...s,errorType:g.MissingRootComponent});if(n){const h=P(m,n);if(!h)return a.jsx(k,{...s,errorType:g.ComponentNotFound});if(h){const S=e.rootComponent||y.Fragment;return a.jsxs(S,{children:[a.jsx("style",{children:`${i}`}),a.jsx(F,{component:h,config:e})]})}return null}return a.jsx(L,{config:e,root:m,css:i})};d.RenderProject=G,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

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

@@ -1,23 +1,13 @@
+import { CssRuleProperties } from 'grapesjs';
 export interface Asset {
     type?: string;
     src?: string;
     unitDim?: string;
     height?: number;
     width?: number;
-    [key: string]: any;
-}
-export interface Rule {
-    selectors?: string[] | string;
-    style?: Record<string, any>;
-    mediaText?: string;
-    atRuleType?: string;
-    state?: string;
-    group?: string;
-    wrapper?: number;
-    [key: string]: any;
 }
-export interface SymbolData {
-    [key: string]: any;
+export interface Rule extends Omit<CssRuleProperties, 'selectors'> {
+    selectors?: string[];
 }
 export interface DataSource {
     [key: string]: any;
@@ -30,6 +20,7 @@ export interface DocElDefinition {
     tagName?: string;
     [key: string]: any;
 }
+type AtRules = Record<string, Rule[]>;
 export interface ComponentDefinition {
     id?: string;
     type?: string;
@@ -62,58 +53,54 @@ export interface ProjectDefinition {
     assets?: Asset[];
     styles?: Rule[];
     pages?: PageDefinition[];
-    symbols?: SymbolData[];
     dataSources?: DataSource[];
     [key: string]: any;
 }
 export declare class ComponentNode {
     private data;
     constructor(data: ComponentDefinition);
-    getId(): string | undefined;
-    getType(): string | undefined;
-    getTagName(): string;
-    isVoid(): boolean;
-    getAttributes(): Record<string, any>;
-    getStyle(): Record<string, any>;
-    getContent(): string;
-    getComponents(): ComponentNode[];
-    getHead(): ComponentNode | null;
-    getDocEl(): DocElDefinition | undefined;
-    getClasses(): string[];
-    hasClass(className: string): boolean;
+    get id(): string | undefined;
+    get type(): string;
+    get tagName(): string;
+    get isVoid(): boolean;
+    get attributes(): Record<string, any>;
+    get content(): string;
+    get components(): ComponentNode[];
+    get head(): ComponentNode;
+    get docEl(): DocElDefinition | undefined;
+    get classes(): string[];
 }
 export declare class Frame {
     private data;
     constructor(data: FrameDefinition);
-    getComponent(): ComponentNode | null;
-    getWidth(): string;
-    getHeight(): string;
+    get component(): ComponentNode | null;
 }
 export declare class Page {
     private data;
     constructor(data: PageDefinition);
-    getId(): string | undefined;
-    getName(): string;
-    getFrames(): Frame[];
-}
-export declare class AssetManager {
-    private assets;
-    constructor(assets: Asset[]);
-    getAll(): Asset[];
+    get id(): string;
+    get frames(): Frame[];
 }
 export declare class CssComposer {
     private rules;
     constructor(rules: Rule[]);
     getAll(): Rule[];
     getRulesByGroup(g: string): Rule[];
-    getWrapperRules(): Rule[];
+    getAtRule(rule: Rule): string;
+    selectorsToString(rule: Rule, opts?: {
+        skipState?: boolean;
+        skipAdd?: boolean;
+    }): string;
+    getFromSelectorName(selector?: string): string;
+    styleToString(rule?: Rule): string;
+    getDeclaration(rule: Rule): string;
+    buildFromRule(rule: Rule): string;
+    sortMediaObject(items?: AtRules): {
+        key: string;
+        value: Rule[];
+    }[];
     getCssAsString(): string;
 }
-export declare class SymbolsManager {
-    private symbols;
-    constructor(symbols: SymbolData[]);
-    getAll(): SymbolData[];
-}
 export declare class DataSourceManager {
     private list;
     constructor(list: DataSource[]);
@@ -125,16 +112,10 @@ export declare class Pages {
     getAll(): Page[];
 }
 export declare class Editor {
-    private assetManager;
-    private cssComposer;
-    private pages;
-    private symbols;
-    private dataSources;
+    Css: CssComposer;
+    Pages: Pages;
+    DataSources: DataSourceManager;
     constructor(data: ProjectDefinition);
-    getAssetManager(): AssetManager;
-    getCssComposer(): CssComposer;
-    getPages(): Pages;
-    getSymbols(): SymbolsManager;
-    getDataSources(): DataSourceManager;
 }
 export declare function findComponentById(root: ComponentNode, id: string): ComponentNode | null;
+export {};

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

@@ -1,8 +1,22 @@
 import { ProjectData } from 'grapesjs';
-import { CustomRendererReactConfig } from '../shared/types';
-export interface GrapesJSProjectProps {
-    projectJson: ProjectData;
-    config?: CustomRendererReactConfig;
+import { ReactNode } from 'react';
+import { RendererReactOptions } from '../shared/types';
+import { ComponentNode } from './parser/parser';
+export interface RenderCommonProps {
+    config?: RendererReactOptions;
+}
+export interface RenderProjectProps extends RenderCommonProps {
+    projectData: ProjectData;
     pageId?: string;
     componentId?: string;
 }
+export interface RenderPageProps extends RenderCommonProps {
+    root: ComponentNode;
+    css: string;
+}
+export interface RenderComponentProps extends RenderCommonProps {
+    component: ComponentNode;
+    children?: ReactNode;
+    parentId?: string;
+    index?: number;
+}

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

@@ -3,14 +3,3 @@ export declare function getComponentId(component: ComponentNode, parentId?: stri
     key: string;
     nodeId: string | undefined;
 };
-export declare const defaultErrors: {
-    noPagesFound: () => string;
-    pageNotFound: ({ pageId }: {
-        pageId?: string;
-    }) => string;
-    noFramesFound: () => string;
-    missingRootComponent: () => string;
-    componentNotFound: ({ componentId }: {
-        componentId: string;
-    }) => string;
-};

package/dist/rendererReact/shared/shared.d.ts

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

package/dist/rendererReact/shared/types.d.ts

@@ -1,49 +1,155 @@
-import { Component, ComponentDefinitionDefined, Editor, ObjectAny } from 'grapesjs';
-export interface ComponentConfig {
-    component: React.ComponentType<any>;
-    props?: () => Array<{
-        type: string;
-        name: string;
-        label: string;
-        value: any;
-    }>;
+import { Component, ComponentDefinitionDefined, CustomRendererProps, Editor, TraitProperties } from 'grapesjs';
+import { ComponentType, ReactElement, ReactNode, Ref, CSSProperties } from 'react';
+import { RenderProjectProps } from '../rendererProject/types';
+import { ComponentConfigSchema, ErrorType, RendererReactOptionsSchema } from '../typesSchema';
+declare module 'grapesjs' {
+    interface BlockProperties {
+        content?: ContentType | (() => ContentType) | ReactElement<any, any>;
+    }
+}
+export type EditorRenderProps = (props: {
+    props: Record<string, any>;
+    children: ReactNode;
+    editor: Editor;
+    component: Component;
+    connectDom: Ref<any>;
+}) => ReactElement;
+export interface ComponentConfig extends Omit<ComponentConfigSchema, 'component' | 'props' | 'model' | 'wrapperStyle' | 'editorRender'> {
+    /**
+     * React Component
+     * @example
+     * component: ({ id, className, children, title, ...rest }) => {
+     *   return (
+     *    <div id={id} className={className} {...rest}>
+     *      <h1>{title}</h1>
+     *      {children}
+     *    </div>
+     *   )
+     * }
+     */
+    component: ComponentType<any>;
+    /**
+     * Return an array of properties in a shape of GrapesJS traits.
+     * @example
+     * props: () => [
+     *  {
+     *    type: 'text',
+     *    name: 'title',
+     *    label: 'Title',
+     *  }
+     * ]
+     */
+    props?: () => TraitProperties[];
+    /**
+     * GrapesJS component model definition.
+     * @example
+     * model: {
+     *  defaults: {
+     *    draggable: false,
+     *  }
+     * }
+     */
     model?: ComponentDefinitionDefined;
-    editorRender?: (props: {
-        props: any;
-        children: React.ReactNode;
-        editor: Editor;
-        component: Component;
-        connectDom: (element: HTMLElement) => void;
-    }) => React.ReactElement;
+    /**
+     * Allows you to customize the style of the wrapper element around your React component.
+     *
+     * In the editor, all React components are automatically wrapped in a container element.
+     * This wrapper enables editing features like drag & drop, selection, and more.
+     *
+     * For most cases, styling the wrapper is sufficient. If you need deeper customization
+     * (e.g., changing the wrapper element type or structure), use the `editorRender` option instead.
+     *
+     * @example
+     * wrapperStyle: { display: 'block' }
+     */
+    wrapperStyle?: CSSProperties;
+    /**
+     * Custom render function for displaying the component inside the editor canvas.
+     *
+     * Use this when you want full control over how the component appears in the editor,
+     * including custom wrappers, helper elements, or injected behavior.
+     *
+     * The `connectDom` function must be passed to the element that should be treated as the
+     * component root (for selection, dragging, etc.).
+     *
+     * @example
+     * component: MyComponent,
+     * editorRender: ({ connectDom, editor, component, children, props }) => {
+     *  return (
+     *    <div ref={connectDom}>
+     *      <div>Custom render of the component in the editor canvas</div>
+     *      <MyComponent {...props}>{children}</MyComponent>
+     *    </div>
+     *  )
+     * }
+     */
+    editorRender?: EditorRenderProps;
+}
+export interface RenderErrorProps extends RenderProjectProps {
+    errorType: ErrorType;
+}
+export interface EditorProps {
+    doc: Document;
+    editor: Editor;
+    frameView: CustomRendererProps['frameView'];
 }
-export interface ErrorParams {
-    noPagesFound: ObjectAny;
-    pageNotFound: {
-        pageId?: string;
-    };
-    noFramesFound: ObjectAny;
-    missingRootComponent: ObjectAny;
-    componentNotFound: {
-        componentId: string;
-    };
+export interface WithEditorProps {
+    /**
+     * Properties passed only during the rendering in the editor.
+     */
+    editorProps?: EditorProps;
 }
-export type ErrorHandler<T extends keyof ErrorParams> = React.ReactNode | ((params: ErrorParams[T]) => React.ReactNode);
-export type ErrorRenderers = {
-    [K in keyof ErrorParams]?: ErrorHandler<K>;
-};
-export interface WrapperProps {
-    children?: React.ReactNode;
-    editorProps?: {
-        doc: Document;
-        editor: unknown;
-        frameView: unknown;
-    };
+export interface RootComponentProps extends WithEditorProps {
+    children?: ReactNode;
 }
-export interface CustomRendererReactConfig {
-    components?: {
-        [key: string]: ComponentConfig;
-    };
-    errors?: ErrorRenderers;
-    wrapper?: React.ComponentType<WrapperProps>;
-    skipDocType?: boolean;
+export interface RendererReactOptions extends Omit<RendererReactOptionsSchema, 'components' | 'errorComponent' | 'rootComponent' | 'headAfter' | 'bodyAfter'> {
+    /**
+     * Map of custom components.
+     * @example
+     * components: {
+     *  MyComponent: {
+     *   allowPropId: true,
+     *   allowPropClassName: true,
+     *   allowChildren: true,
+     *   component: ({ id, className, children, title, ...rest }) => {
+     *     return (
+     *        <div id={id} className={className} {...rest}>
+     *          <h1>{title}</h1>
+     *          {children}
+     *        </div>
+     *      )
+     *   },
+     *  }
+     * }
+     */
+    components?: Record<string, ComponentConfig>;
+    /**
+     * Custom error component.
+     * This is used when, for example, you're trying to render a page with an invalid id.
+     * @example
+     * errorComponent: ({ errorType }) => <div>Error: {errorType}</div>
+     */
+    errorComponent?: ComponentType<RenderErrorProps>;
+    /**
+     * Custom root component that wraps the entire rendered project.
+     * Usually used to provide a layout or context for the entire application.
+     * @example
+     * rootComponent: ({ children }) => <div>{children}</div>
+     */
+    rootComponent?: ComponentType<RootComponentProps>;
+    /**
+     * Custom react component to append at the end of the `<head>` element.
+     * @example
+     * headAfter: () => (<>
+     *  <meta/>
+     *  <script src="path/to/analytics.js"></script>
+     * </>)
+     */
+    headAfter?: ComponentType<WithEditorProps>;
+    /**
+     * Custom react component to append at the end of the `<body>` element.
+     * @example
+     * bodyAfter: () => <div>Powered by MyApp</div>
+     */
+    bodyAfter?: ComponentType<WithEditorProps>;
 }

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

@@ -1,2 +1,8 @@
+import { RendererReactOptions } from './types';
+export declare function fromCamelCaseToKebab(style: Record<string, string | number>): Record<string, string | number>;
+export declare const getComponentConfig: (config: RendererReactOptions, reactComponent: React.ComponentType<any>) => {
+    cmpConfig: import('./types').ComponentConfig;
+    type: string;
+} | undefined;
 export declare function normalizeStyleObject(styleObj: any): React.CSSProperties | undefined;
-export declare function transformAttributes(attrs: Record<string, any>): Record<string, any>;
+export declare function attrsToReactProps(attrs: Record<string, any>): Record<string, any>;

package/dist/rendererReact/types.d.ts

@@ -1,21 +1,18 @@
-import { CanvasConfig } from 'grapesjs';
-import { createRoot } from 'react-dom/client';
-import { CustomRendererReactConfig } from './shared/types';
-import { ReactRendererPluginOptionsSchema } from './typesSchema';
+import { CustomRendererProps } from 'grapesjs';
+import { RenderCanvasComponentProps } from './rendererCanvas/RenderCanvasComponent';
+import { RendererReactOptions } from './shared/types';
 declare global {
-    interface Window {
-        __reactRoot?: ReturnType<typeof createRoot>;
-    }
     namespace JSX {
         interface IntrinsicElements {
             'gjs-wrapper': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
-type CustomRenderer = Parameters<Required<CanvasConfig>['customRenderer']>[0];
-export interface CustomRendererProps extends CustomRenderer {
-    config: ReactRendererPluginOptions;
+export type * from './shared/types';
+export type { RendererReactOptions } from './shared/types';
+export interface CustomRendererPropsWithConfig extends CustomRendererProps {
+    config: RendererReactOptions;
 }
-export interface ReactRendererPluginOptions extends Omit<ReactRendererPluginOptionsSchema, 'components' | 'errors' | 'wrapper'>, CustomRendererReactConfig {
+export interface RenderRootProps extends Omit<RenderCanvasComponentProps, 'component'>, Pick<CustomRendererPropsWithConfig, 'window'> {
+    component: CustomRendererProps['frame']['root'];
 }
-export {};