@grapesjs/studio-sdk-plugins 1.0.18 → 1.0.19-rc.0

package/dist/canvasGridMode/index.umd.js

@@ -0,0 +1,26 @@
+(function(D,I){typeof exports=="object"&&typeof module<"u"?module.exports=I():typeof define=="function"&&define.amd?define(I):(D=typeof globalThis<"u"?globalThis:D||self,D.StudioSdkPlugins_canvasGridMode=I())})(this,function(){"use strict";const D="app.grapesjs.com",I="app-stage.grapesjs.com",U=[D,I,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],st="license:check:start",at="license:check:end",it=()=>typeof window<"u",lt=({isDev:t,isStage:e})=>`${t?"":`https://${e?I:D}`}/api`,ct=()=>{const t=it()&&window.location.hostname;return!!t&&(U.includes(t)||U.some(e=>t.endsWith(e)))};function Y(t){return typeof t=="function"}async function pt({path:t,baseApiUrl:e,method:r="GET",headers:o={},params:n,body:i}){const l=`${e||lt({isDev:!1,isStage:!1})}${t}`,c={method:r,headers:{"Content-Type":"application/json",...o}};i&&(c.body=JSON.stringify(i));const p=n?new URLSearchParams(n).toString():"",a=p?`?${p}`:"",d=await fetch(`${l}${a}`,c);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var _=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(_||{});const H={[_.free]:0,[_.startup]:10,[_.business]:20,[_.enterprise]:30};function dt(t){const e=t;return e.init=r=>o=>t(o,r),e}const ut=t=>dt(t);async function gt({editor:t,plan:e,pluginName:r,licenseKey:o,cleanup:n}){let i="",s=!1;const l=ct(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),n()},p=(a={})=>{var S;const{error:d,sdkLicense:u}=a,g=(S=a.plan)==null?void 0:S.category;if(!(u||a.license)||d)c(d||"Invalid license");else if(g){const f=H[e],b=H[g];f>b&&c({pluginRequiredPlan:e,licensePlan:g})}};t.on(st,a=>{i=a==null?void 0:a.baseApiUrl,s=!0}),t.on(at,a=>{p(a)}),setTimeout(async()=>{if(!s){if(l)return;if(o){const a=await mt({licenseKey:o,pluginName:r,baseApiUrl:i});a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function mt(t){const{licenseKey:e,pluginName:r,baseApiUrl:o}=t;try{return(await pt({baseApiUrl:o,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const F="canvasGridMode",z="component-grid-mode",N="grid-mode",W="gjs-drag-grid-spot",X=`${W}__grid-item`,q=`${W}__grid-target`,K=`${W}__snapped`,ft=`${W}__container`,yt=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",o="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",n=e.querySelector(`style[${t}]`)||e.createElement("style");n.setAttribute(t,"true"),n.innerHTML=`
+        .${X} {
+            outline: 2px solid ${o};
+            background: ${r};
+            outline-offset: -2px;
+            border-radius: 3px;
+            width: 100%;
+            height: 100%;
+            opacity: 0.1;
+        }
+        .${K} {
+            width: 100%;
+            height: 100%;
+            outline: 2px solid ${o};
+            outline-offset: -2px;
+            position: absolute;
+        }
+        .${q} {
+            position: absolute;
+            z-index: -1;
+            background: ${r};
+            outline: 1px solid ${o};
+            outline-offset: -1px;
+            opacity: 0.35;
+        }
+    `,e.head.appendChild(n)};function J(t){const{editor:e,type:r}=t,o=Ct(e,t.component),n=k(e,o.component);if(!$t(e,o,n,r))return{target:o,container:n,startScroll:B(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:N,component:n.component})}}function Q(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:o,shadowContainerEl:n,spotEl:i,target:s,container:l}=t,{Canvas:c}=e,p=e.config.stylePrefix;i==null||i.appendChild(n),n==null||n.appendChild(r),n==null||n.appendChild(o),ht(n,l),wt(r,s,l),St(o,s),bt(n,l.el),s.el.style.opacity="0";const a=c.getSpots().filter(d=>d.type!==N);e.em.stopDefault({preserveSelected:!0}),c.removeSpots(a),c.startAutoscroll(),c.getBody().classList.add(`${p}is__grabbing`)}function Z(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:o,target:n,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:c}=n;if(!i){const p=window.getComputedStyle(r);c.addStyle({"grid-area":p.gridArea,width:"",height:""})}n.el.style.opacity="",o.contains(r)&&(o==null||o.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:N}),e.select(c)}function ht(t,{rows:e,columns:r}){const o=[];for(let n=0;n<r.length;n++){o[n]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=X,s.style.gridArea=`${i+1} / ${n+1}`,o[n][i]=s,t.appendChild(s)}}return o}function wt(t,e,r){return t.className=q,t.style.top=`${e.offset.top-r.offset.top}px`,t.style.left=`${e.offset.left-r.offset.left}px`,t.style.width=`${e.offset.width+e.margin.left+e.margin.right}px`,t.style.height=`${e.offset.height+e.margin.top+e.margin.bottom}px`,t}function St(t,e){const r=et(e.el,e.computedStyles);return t.className=K,t.style.gridArea=`${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`,t}function bt(t,e){const r=window.getComputedStyle(e);t.className=ft,t.style.position="relative",t.style.display=r.display,t.style.gap=r.gap,t.style.padding=r.padding,t.style.border=r.border,t.style.gridTemplateColumns=r.gridTemplateColumns,t.style.gridTemplateRows=r.gridTemplateRows}function V(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function Ct(t,e){const r=V(t,e),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),margin:{top:parseFloat(n.marginTop),right:parseFloat(n.marginRight),bottom:parseFloat(n.marginBottom),left:parseFloat(n.marginLeft)},computedStyles:n}}function k(t,e){const r=e.parent(),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),computedStyles:n,padding:{top:parseFloat(n.paddingTop),right:parseFloat(n.paddingRight),bottom:parseFloat(n.paddingBottom),left:parseFloat(n.paddingLeft)},columns:n.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:n.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(n.columnGap),row:parseInt(n.rowGap)}}}function T(t,e,r,o,n=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+o)*n>r)return s;i+=o+t[s-1]}return t.length+1}function B(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function $t(t,e,r,o){const n=i=>t.em.logWarning(i);return o==="draggable"&&e.component.get(o)===!1?(n(`[${F}] The element is not ${o}`),!0):r.computedStyles.display!=="grid"?(n(`[${F}] The container does not have style display:grid`),!0):!1}function O(t,e,r={}){const o=V(t,e),n=o==null?void 0:o.parent(),i=n==null?void 0:n.getEl();if(!n||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return Y(s)?s({component:o,parent:n,isParentGrid:l}):l}const tt=t=>t.split(" ").map(e=>parseFloat(e));function et(t,e){const r=t.ownerDocument.defaultView,o=e||r.getComputedStyle(t),n=o.gridArea.split("/").some(w=>isNaN(parseInt(w.trim()))),i={isComputed:n,raw:o.gridArea};if(!n)return{...i,row:{start:parseInt(o.gridRowStart),end:parseInt(o.gridRowEnd)},column:{start:parseInt(o.gridColumnStart),end:parseInt(o.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),c=parseFloat(l.columnGap)||0,p=parseFloat(l.rowGap)||0,a=tt(l.gridTemplateColumns),d=tt(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,g=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),S=t.getBoundingClientRect(),f=(w,C,R,G,A)=>{let x=1,E=G+A;for(let P=0;P<C.length;P++){const M=C[P],L=E+M;if(w>=E&&w<L)return x;E=L+R,x++}return-1},b=f(S.left,a,c,h.left,u),v=f(S.right-1,a,c,h.left,u)+1,m=f(S.top,d,p,h.top,g),y=f(S.bottom-1,d,p,h.top,g)+1;return{...i,row:{start:m,end:y},column:{start:b,end:v}}}function vt(t){t.Commands.add(z,{stop(){},run(e,r,o={}){const n=J({editor:e,component:o.target,type:"draggable"});if(!n){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p,startScroll:a}=n;let{container:d}=n,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{Q({editor:e,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:d}),d=k(e,s.component)},10)},onEnd:(h,S,{cancelled:f})=>{clearTimeout(u),Z({editor:e,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:f}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:S})=>{const{scroll:f}=B(e),{columns:b,rows:v,gap:m,offset:y,padding:w}=d,{offset:C,margin:R}=s,G=C.top-y.top-w.top-R.top+S-a.top+f.top,A=C.left-y.left-w.left-R.left+h-a.left+f.left,x=Math.min(T(b,1,A,m.column,.5),b.length),E=Math.min(T(v,1,G,m.row,.5),v.length),P=Math.min(T(b,x,C.width,m.column)+1,b.length+1),M=Math.min(T(v,E,C.height,m.row)+1,v.length+1);c.style.gridArea=`${E} / ${x} / ${M} / ${P}`,p.style.top=`${G+w.top}px`,p.style.left=`${A+w.left}px`}}).start(o.event)}})}function Et(t,e){const r=J({editor:t,component:e.target,type:"resizable"});if(!r)return;const{onMove:o,onEnd:n}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p}=r;let{container:a}=r,d="",u;return{onStart:g=>{d=g.target.dataset.gjsHandler||"",u=setTimeout(()=>{Q({editor:t,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=k(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(g,h)=>{const{startDim:S,rectDim:f}=h.resizer,b=JSON.stringify(S)===JSON.stringify(f);clearTimeout(u),Z({editor:t,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:b}),n==null||n(g,h)},onMove:g=>{var rt;const h=g;if(((rt=h.target)==null?void 0:rt.nodeName)==="I")return;const{scroll:S}=B(t),f=et(c);let b=0,v=0,m=0,y=0;const w=s.margin.left,C=s.margin.top,R=s.margin.bottom,G=s.margin.right,{width:A,top:x,left:E,height:P}=s.offset,M=h.clientX,L=h.clientY,$={t:x-C,l:E-w,h:P+C+R,w:A+w+G};d.startsWith("t")?($.t=L-C,$.h=x+P+C+R-L):d.startsWith("b")&&($.h=L-x+C+R),d.endsWith("l")?($.l=M-w,$.w=E+A+w+G-M):d.endsWith("r")&&($.w=M-E+w+G),d.endsWith("l")&&(m=S.left,f.column.start=T(a.columns,1,$.l-a.offset.left-m-a.padding.left,a.gap.column,.5)),d.startsWith("t")&&(b=S.top,f.row.start=T(a.rows,1,$.t-a.offset.top+b-a.padding.top,a.gap.row,.5)),d.endsWith("r")&&(y=S.left,f.column.end=Math.max(T(a.columns,f.column.start,$.w-y,a.gap.column,.5),f.column.start+1)),d.startsWith("b")&&(v=S.top,f.row.end=Math.max(T(a.rows,f.row.start,$.h+v,a.gap.row,.5),f.row.start+1)),c.style.gridArea=`${f.row.start} / ${f.column.start} / ${f.row.end} / ${f.column.end}`,p.style.width=`${$.w+y+m}px`,p.style.height=`${$.h+v-b}px`,p.style.left=`${$.l-a.offset.left-m}px`,p.style.top=`${$.t-a.offset.top+b}px`,o==null||o(g)}}}const nt=["px","%","em","rem","vw","vh"],xt=(t,e)=>{const r=t.Styles.getSectors().find(o=>!!o.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},Tt=(t,e)=>xt(t,e),Rt=(t,{x:e,y:r,mergable:o}={})=>{const n={property:`${t}-x`,type:"integer",units:nt,...e},i={property:`${t}-y`,type:"integer",units:nt,...r};return{property:t,type:"composite",properties:[n,i],...o&&{fromStyle(s,{name:l,separator:c,property:p}){const[a,d]=p.getProperties(),[u,g]=(s[l]||"").split(c);return{[a.getId()]:s[a.getName()]||u||"",[d.getId()]:s[d.getName()]||g||u||""}},toStyle(s,{name:l,property:c}){const[p,a]=c.getProperties(),d=s[p.getId()],u=s[a.getId()];return{[l]:d===u?d:`${d} ${u}`}}}}},j={display:["grid"]};function Gt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,o=t.match(e);if(!o)return null;const n=parseInt(o[1],10),i=o[2];let s=i,l=i;const c=i.match(r);return c&&(s=c[1],l=c[2]),{total:n,min:s===l?"":s,max:l}}function Pt(t={}){let e="",r="",o="",n="";const i=S=>S.split("/").map(f=>f.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",c=t["grid-row"]||"",p=i(s),a=i(l),d=i(c),u=p.length,g=a.length,h=d.length;return u===4?(o=p[0],e=p[1],n=p[2],r=p[3]):u===3?(o=p[0],e=p[1],n=p[2]):u===2?(o=p[0],e=p[1]):u===1&&(o=p[0]),g===2?(e=a[0],r=a[1]):g===1&&(e=a[0]),h===2?(o=d[0],n=d[1]):h===1&&(o=d[0]),{columnStart:e,columnEnd:r,rowStart:o,rowEnd:n}}function ot(t){const{property:e,label:r}=t,o="1",n="1fr";return{property:e,label:r,type:"composite",requires:j,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:c}=s,[p,a,d]=c.getProperties(),u=i[l],g=Gt(u),h=(g==null?void 0:g.max)??n;return{[p.id]:(g==null?void 0:g.total)??o,[a.id]:(g==null?void 0:g.min)??"",[d.id]:h===n?"":h}},toStyle(i,{name:s,property:l}){const[c,p,a]=l.getProperties(),d=i[c.id],u=i[p.id],g=i[a.id]||n,h=u&&g?`minmax(${u}, ${g})`:g;return{[s]:`repeat(${d||o}, ${h})`}}}}function At(t,e){if(!e.styleableGrid)return;const{property:r,...o}=Tt(t,"display");if(!r)return;const n=r.getOption("grid"),i=o.sector;n||r.addOption({id:"grid",label:"Grid"}),i.addProperty(ot({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(ot({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:j,...Rt("gap",{x:{id:"grid-row-gap",label:"Row",property:"row-gap",min:0,default:"0"},y:{id:"grid-column-gap",label:"Column",property:"column-gap",min:0,default:"0"},mergable:!0})},{}),i.addProperty({type:"composite",property:"grid-area",label:"Grid area",requiresParent:j,generic:!0,properties:[{label:"Row start",property:"grid-row-start",type:"integer",default:"auto"},{label:"Row end",property:"grid-row-end",type:"integer",default:"auto"},{label:"Column start",property:"grid-column-start",type:"integer",default:"auto"},{label:"Column end",property:"grid-column-end",type:"integer",default:"auto"}],fromStyle(s){const l=Pt(s);return{"grid-column-start":s["grid-column-start"]||l.columnStart,"grid-column-end":s["grid-column-end"]||l.columnEnd,"grid-row-start":s["grid-row-start"]||l.rowStart,"grid-row-end":s["grid-row-end"]||l.rowEnd}},toStyle(s,{name:l}){const c=s["grid-row-start"]||"auto",p=s["grid-row-end"]||"auto",a=s["grid-column-start"]||"auto",d=s["grid-column-end"]||"auto";return{[l]:`${c} / ${a} / ${p} / ${d}`}}},{})}return ut(function(t,e={}){const r={itemResizable:!0,...e},{Canvas:o,Commands:n,Components:i}=t,{itemResizable:s}=r,l=o.events,c=n.events,p=i.events,a=`${c.runBeforeCommand}tlb-move`,d=`${c.runBeforeCommand}resize`;let u;vt(t);const g=({options:m})=>{O(t,m.target,r)&&(t.runCommand(z,{...m}),m.abort=!0)},h=({options:m})=>{O(t,m.target,r)&&Object.assign(m.options,Et(t,m))},S=()=>{const m=o.getSpots({type:N}).pop();if(!m)return;let y=m.attributes.spotEl;y||(y=document.createElement("div"),y.className=W,m.set({spotEl:y})),Object.entries(m.getStyle()).forEach(([w,C])=>y.style.setProperty(w,C)),u==null||u.appendChild(y)},f=({spot:m})=>{const y=m.attributes.spotEl;m.type!==N||!y||u==null||u.removeChild(y)};if(s){const m=y=>{const w=Y(s)?s({component:y}):s;return typeof w=="boolean"?w:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...w}};t.on(p.resizeInit,y=>{const{component:w}=y;if(O(t,w,r)){const C=m(w);y.resizable=C}})}const b=[[a,g],[d,h],[l.spot,S],[l.spotRemove,f]];b.forEach(([m,y])=>{t.on(m,y)}),t.onReady(()=>{u=o.getSpotsEl(),yt(),At(t,r)});const v=()=>{delete t.Commands.commands[z],b.forEach(([m,y])=>{t.off(m,y)})};gt({editor:t,licenseKey:r.licenseKey,plan:_.startup,pluginName:F,cleanup:v})})});

package/dist/canvasGridMode/styleManager.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from '../types';
+import { CanvasGridModeOptions } from './types';
+export declare function loadStyleManagerProperties(editor: Editor, opts: CanvasGridModeOptions): void;

package/dist/canvasGridMode/types.d.ts

@@ -0,0 +1,16 @@
+import { CanvasSpotProps, ResizerOptions } from 'grapesjs';
+import { CanvasGridModeOptions as CanvasGridModeOptionsSchema } from './typesSchema';
+import { Component } from '../types';
+export interface CanvasGridModeOptions extends Omit<CanvasGridModeOptionsSchema, 'enableGrid' | 'itemResizable'> {
+    enableGrid?: (props: {
+        component: Component;
+        parent: Component;
+        isParentGrid?: boolean;
+    }) => boolean;
+    itemResizable?: boolean | ((props: {
+        component: Component;
+    }) => boolean | ResizerOptions);
+}
+export interface SpotGridDragProps extends CanvasSpotProps {
+    spotEl?: HTMLElement;
+}

package/dist/canvasGridMode/typesSchema.d.ts

@@ -0,0 +1,36 @@
+import { SDKPluginOptions } from '../utils';
+export interface CanvasGridModeOptions extends SDKPluginOptions {
+    /**
+     * Provide a custom logic to enable the grid mode.
+     * @examples
+     * enableGrid: ({ component, isParentGrid }) => {
+     *  if (isParentGrid && component.is('image')) {
+     *   return true; // enable grid mode only for images
+     *  }
+     * }
+     */
+    enableGrid?: '__fn__';
+    /**
+     * Make grid items resizable when selected. Could also be a function for custom logic.
+     * @default true
+     * @examples
+     * itemResizable: ({ component }) => {
+     *    if (component.is('text')) {
+     *     // Make the text component resizable only on the right and left sides.
+     *     return { cr: true, cl: true };
+     *    } else if (component.is('image')) {
+     *     // Disable resizing for images
+     *     return false;
+     *    }
+     *
+     *    // Enable resizing for all other components
+     *    return true;
+     * }
+     */
+    itemResizable?: object;
+    /**
+     * Allow to edit grid properties in Style Manager.
+     * @default false
+     */
+    styleableGrid?: boolean;
+}

package/dist/canvasGridMode/utils.d.ts

@@ -0,0 +1,151 @@
+import { Component, Editor } from '../types';
+import { CanvasGridModeOptions, SpotGridDragProps } from './types';
+export declare const PLUGIN_NAME = "canvasGridMode";
+export declare const COMMAND_DRAG_GRID = "component-grid-mode";
+export declare const SPOT_TYPE_GRID = "grid-mode";
+export declare const clsSpotGridDrag = "gjs-drag-grid-spot";
+export declare const clsSpotGridDragCell = "gjs-drag-grid-spot__grid-item";
+export declare const clsSpotGridDragTarget = "gjs-drag-grid-spot__grid-target";
+export declare const clsSpotGridDragSnapped = "gjs-drag-grid-spot__snapped";
+export declare const clsSpotGridDragContainer = "gjs-drag-grid-spot__container";
+export declare const createDefaultSpotStyleEl: () => void;
+export declare function onGridDragInit(props: {
+    editor: Editor;
+    component: Component | Component[];
+    type: string;
+}): {
+    target: {
+        component: Component;
+        el: HTMLElement;
+        offset: {
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        };
+        margin: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        computedStyles: CSSStyleDeclaration;
+    };
+    container: {
+        component: Component;
+        el: HTMLElement;
+        offset: {
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        };
+        computedStyles: CSSStyleDeclaration;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        columns: number[];
+        rows: number[];
+        gap: {
+            column: number;
+            row: number;
+        };
+    };
+    startScroll: {
+        top: number;
+        left: number;
+    };
+    shadowContainerEl: HTMLDivElement;
+    shadowSnappedEl: HTMLDivElement;
+    shadowTargetEl: HTMLDivElement;
+    spot: import('grapesjs').CanvasSpot<SpotGridDragProps>;
+} | undefined;
+export declare function onGridDragStart(props: {
+    editor: Editor;
+    shadowTargetEl: HTMLElement;
+    shadowSnappedEl: HTMLElement;
+    shadowContainerEl: HTMLElement;
+    spotEl: HTMLElement | undefined;
+    target: ReturnType<typeof getTarget>;
+    container: ReturnType<typeof getContainer>;
+}): void;
+export declare function onGridDragEnd(props: {
+    editor: Editor;
+    shadowSnappedEl: HTMLElement;
+    shadowContainerEl: HTMLElement;
+    target: ReturnType<typeof getTarget>;
+    cancelled?: boolean;
+}): void;
+export declare function setShadowCells(containerEl: HTMLElement, { rows, columns }: {
+    rows: number[];
+    columns: number[];
+}): HTMLElement[][];
+export declare function setShadowTargetStyle(el: HTMLElement, target: ReturnType<typeof getTarget>, container: ReturnType<typeof getContainer>): HTMLElement;
+export declare function setShadowSnappedStyle(el: HTMLElement, target: ReturnType<typeof getTarget>): HTMLElement;
+export declare function setShadowContainerStyle(el: HTMLElement, containerEl: HTMLElement): void;
+export declare function findTarget(editor: Editor, target?: Component | Component[]): Component;
+export declare function getTarget(editor: Editor, target?: Component | Component[]): {
+    component: Component;
+    el: HTMLElement;
+    offset: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    computedStyles: CSSStyleDeclaration;
+};
+export declare function getContainer(editor: Editor, target: Component): {
+    component: Component;
+    el: HTMLElement;
+    offset: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    computedStyles: CSSStyleDeclaration;
+    padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    columns: number[];
+    rows: number[];
+    gap: {
+        column: number;
+        row: number;
+    };
+};
+export declare function getGridPosition(items: number[], start: number, minSize: number, gap: number, fraction?: number): number;
+export declare function getWindowScroll(editor: Editor): {
+    scroll: {
+        top: number;
+        left: number;
+    };
+};
+export declare function shouldTerminate(editor: Editor, target: ReturnType<typeof getTarget>, container: ReturnType<typeof getContainer>, prop: string): boolean;
+export declare function isGrid(editor: Editor, target?: Component | Component[], pluginOptions?: CanvasGridModeOptions): boolean;
+export declare function findComponentInGrid(editor: Editor, target: Component, opts?: CanvasGridModeOptions): Component | undefined;
+export declare function getGridItemArea(gridItemEl: HTMLElement, style?: CSSStyleDeclaration): {
+    row: {
+        start: number;
+        end: number;
+    };
+    column: {
+        start: number;
+        end: number;
+    };
+    isComputed: boolean;
+    raw: string;
+};

package/dist/googleFontsAssetProvider/index.cjs.js

@@ -1 +1 @@
-"use strict";var p=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(p||{}),b=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e))(b||{});const A="app.grapesjs.com",T="app-stage.grapesjs.com",v=[A,T,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],G="license:check:start",$="license:check:end",k=()=>typeof window<"u",x=({isDev:e,isStage:t})=>`${e?"":`https://${t?T:A}`}/api`,D=()=>{const e=k()&&window.location.hostname;return!!e&&(v.includes(e)||v.some(t=>e.endsWith(t)))};async function F({path:e,baseApiUrl:t,method:o="GET",headers:s={},params:n,body:i}){const l=`${t||x({isDev:!1,isStage:!1})}${e}`,c={method:o,headers:{"Content-Type":"application/json",...s}};i&&(c.body=JSON.stringify(i));const u=n?new URLSearchParams(n).toString():"",a=u?`?${u}`:"",d=await fetch(`${l}${a}`,c);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}const w={[p.free]:0,[p.startup]:10,[p.business]:20,[p.enterprise]:30};function U(e){const t=e;return t.init=o=>s=>e(s,o),t}const O=e=>U(e);async function M({editor:e,plan:t,pluginName:o,licenseKey:s,cleanup:n}){let i="",r=!1;const l=D(),c=a=>{console.warn("Cleanup plugin:",o,"Reason:",a),n()},u=(a={})=>{var P;const{error:d,sdkLicense:f}=a,g=(P=a.plan)==null?void 0:P.category;if(!(f||a.license)||d)c(d||"Invalid license");else if(g){const L=w[t],R=w[g];L>R&&c({pluginRequiredPlan:t,licensePlan:g})}};e.on(G,a=>{i=a==null?void 0:a.baseApiUrl,r=!0}),e.on($,a=>{u(a)}),setTimeout(async()=>{if(!r){if(l)return;if(s){const a=await B({licenseKey:s,pluginName:o,baseApiUrl:i});a&&u(a)}else c("The `licenseKey` option not provided")}},2e3)}async function B(e){const{licenseKey:t,pluginName:o,baseApiUrl:s}=e;try{return(await F({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:o}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const E=e=>{const{family:t,menu:o,axes:s}=e,n=!!s,i=Object.assign({},...e.variants.map(r=>{var a,d;let l,c;if(n){const f=s.find(g=>g.tag==="wght");if(f){const{start:g,end:y}=f;l=`${g} ${y}`}}return l||(l=((a=r.match(/\d+/))==null?void 0:a[0])??"400"),c=((d=r.match(/[a-zA-Z]+/))==null?void 0:d[0])==="italic"?"italic":void 0,{[r]:{family:t,source:e.files[r],variant:r,options:{style:c,weight:l}}}}));return{family:t,menuVariant:{family:`assetManagerMenu-${t}`,source:o,variant:"menu"},variants:i}},I=e=>({id:`${e.family}/${e.version}`,type:"font",src:e.menu,name:e.family,customData:{font:E(e),needsLoading:!0}}),W=e=>{if(e.customData.needsLoading){e.customData.needsLoading=!1;const{font:t}=e.customData,{family:o,source:s,options:n}=t.menuVariant,i=new FontFace(o,`url("${s}")`,n);document.fonts.add(i),i.load().catch(()=>{})}};let h;const j=e=>{const t=[];for(const o of Object.keys(e)){let s=e[o];s&&(Array.isArray(s)?t.push(...s.map(n=>[o,n.toString()])):(s=s.toString(),t.push([o,s])))}return new URLSearchParams(t)},N=e=>{const{apiKey:t,searchParams:o}=e,s=(n={})=>{const i="https://www.googleapis.com/webfonts/v1/webfonts",r=j(n);return`${i}?${r}`};return{id:"google-fonts",types:["font"],label:({editor:n})=>n.I18n.t("googleFontsAssetProvider.providerLabel"),search:{reloadOnInput:!1},async onLoad(){var u;if(h)return h;const n={key:t,sort:"alpha",subset:"latin",capability:["WOFF2","VF"]},i=o==null?void 0:o(),r={...n,...i},c=await(await fetch(s(r))).json();return(u=c.items)!=null&&u.length?(h=c.items.map(I),h):[]},itemLayout:n=>{const i=h.find(r=>r.id===n.assetProps.id);return W(i),{type:"column",onClick:()=>n.onSelect(i),htmlAttrs:{title:i.name},style:{borderWidth:"1px",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"text",content:i.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:i.customData.font.menuVariant.family,fontSize:"24px",paddingLeft:"8px",paddingRight:"8px"}}]}}}},K={googleFontsAssetProvider:{searchBtn:"Search on Google Fonts",modalTitle:"Select Font",providerLabel:"Google Fonts"}},_="googleFontsAssetProvider",V=function(e,t){const{i18n:o={}}=t,s=N(t);e.runCommand(b.assetProviderAdd,{provider:s}),e.I18n.addMessages({en:K,...o}),M({editor:e,licenseKey:t.licenseKey,plan:p.startup,pluginName:_,cleanup:()=>{e.runCommand(b.assetProviderRemove,{id:s.id})}})},H=O(V);module.exports=H;
+"use strict";var p=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(p||{}),b=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e))(b||{});const A="app.grapesjs.com",T="app-stage.grapesjs.com",v=[A,T,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],D="license:check:start",G="license:check:end",$=()=>typeof window<"u",k=({isDev:e,isStage:t})=>`${e?"":`https://${t?T:A}`}/api`,x=()=>{const e=$()&&window.location.hostname;return!!e&&(v.includes(e)||v.some(t=>e.endsWith(t)))};async function F({path:e,baseApiUrl:t,method:o="GET",headers:s={},params:n,body:a}){const l=`${t||k({isDev:!1,isStage:!1})}${e}`,c={method:o,headers:{"Content-Type":"application/json",...s}};a&&(c.body=JSON.stringify(a));const u=n?new URLSearchParams(n).toString():"",i=u?`?${u}`:"",g=await fetch(`${l}${i}`,c);if(!g.ok)throw new Error(`HTTP error! status: ${g.status}`);return g.json()}const w={[p.free]:0,[p.startup]:10,[p.business]:20,[p.enterprise]:30};function U(e){const t=e;return t.init=o=>s=>e(s,o),t}const O=e=>U(e);async function M({editor:e,plan:t,pluginName:o,licenseKey:s,cleanup:n}){let a="",r=!1;const l=x(),c=i=>{console.warn("Cleanup plugin:",o,"Reason:",i),n()},u=(i={})=>{var P;const{error:g,sdkLicense:f}=i,d=(P=i.plan)==null?void 0:P.category;if(!(f||i.license)||g)c(g||"Invalid license");else if(d){const L=w[t],R=w[d];L>R&&c({pluginRequiredPlan:t,licensePlan:d})}};e.on(D,i=>{a=i==null?void 0:i.baseApiUrl,r=!0}),e.on(G,i=>{u(i)}),setTimeout(async()=>{if(!r){if(l)return;if(s){const i=await B({licenseKey:s,pluginName:o,baseApiUrl:a});i&&u(i)}else c("The `licenseKey` option not provided")}},2e3)}async function B(e){const{licenseKey:t,pluginName:o,baseApiUrl:s}=e;try{return(await F({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:o}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const E=e=>{const{family:t,menu:o,axes:s}=e,n=!!s,a=Object.assign({},...e.variants.map(r=>{var i,g;let l,c;if(n){const f=s.find(d=>d.tag==="wght");if(f){const{start:d,end:y}=f;l=`${d} ${y}`}}return l||(l=((i=r.match(/\d+/))==null?void 0:i[0])??"400"),c=((g=r.match(/[a-zA-Z]+/))==null?void 0:g[0])==="italic"?"italic":void 0,{[r]:{family:t,source:e.files[r],variant:r,options:{style:c,weight:l}}}}));return{family:t,menuVariant:{family:`assetManagerMenu-${t}`,source:o,variant:"menu"},variants:a}},I=e=>({id:`${e.family}/${e.version}`,type:"font",src:e.menu,name:e.family,customData:{font:E(e),needsLoading:!0}}),W=e=>{if(e.customData.needsLoading){e.customData.needsLoading=!1;const{font:t}=e.customData,{family:o,source:s,options:n}=t.menuVariant,a=new FontFace(o,`url("${s}")`,n);document.fonts.add(a),a.load().catch(()=>{})}};let h;const j=e=>{const t=[];for(const o of Object.keys(e)){let s=e[o];s&&(Array.isArray(s)?t.push(...s.map(n=>[o,n.toString()])):(s=s.toString(),t.push([o,s])))}return new URLSearchParams(t)},N=e=>{const{apiKey:t,searchParams:o}=e,s=(n={})=>{const a="https://www.googleapis.com/webfonts/v1/webfonts",r=j(n);return`${a}?${r}`};return{id:"google-fonts",types:["font"],label:({editor:n})=>n.I18n.t("googleFontsAssetProvider.providerLabel"),search:{reloadOnInput:!1},async onLoad(){var u;if(h)return h;const n={key:t,sort:"alpha",subset:"latin",capability:["WOFF2","VF"]},a=o==null?void 0:o(),r={...n,...a},c=await(await fetch(s(r))).json();return(u=c.items)!=null&&u.length?(h=c.items.map(I),h):[]},itemLayout:n=>{const a=h.find(r=>r.id===n.assetProps.id);return W(a),{type:"column",onClick:()=>n.onSelect(a),htmlAttrs:{title:a.name},style:{borderWidth:"1px",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"text",content:a.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:a.customData.font.menuVariant.family,fontSize:"24px",paddingLeft:"8px",paddingRight:"8px"}}]}}}},K={googleFontsAssetProvider:{searchBtn:"Search on Google Fonts",modalTitle:"Select Font",providerLabel:"Google Fonts"}},_="googleFontsAssetProvider",V=function(e,t){const{i18n:o={}}=t,s=N(t);e.runCommand(b.assetProviderAdd,{provider:s}),e.I18n.addMessages({en:K,...o}),M({editor:e,licenseKey:t.licenseKey,plan:p.startup,pluginName:_,cleanup:()=>{e.runCommand(b.assetProviderRemove,{id:s.id})}})},H=O(V);module.exports=H;

package/dist/googleFontsAssetProvider/index.es.js

@@ -1,4 +1,4 @@
-var p = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(p || {}), b = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.projectFiles = "studio:projectFiles", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e))(b || {});
+var p = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(p || {}), b = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.dialogOpen = "studio:dialogOpen", e.dialogClose = "studio:dialogClose", e.sidebarLeftSet = "studio:sidebarLeft:set", e.sidebarLeftGet = "studio:sidebarLeft:get", e.sidebarLeftToggle = "studio:sidebarLeft:toggle", e.sidebarRightSet = "studio:sidebarRight:set", e.sidebarRightGet = "studio:sidebarRight:get", e.sidebarRightToggle = "studio:sidebarRight:toggle", e.sidebarTopSet = "studio:sidebarTop:set", e.sidebarTopGet = "studio:sidebarTop:get", e.sidebarTopToggle = "studio:sidebarTop:toggle", e.sidebarBottomSet = "studio:sidebarBottom:set", e.sidebarBottomGet = "studio:sidebarBottom:get", e.sidebarBottomToggle = "studio:sidebarBottom:toggle", e.symbolAdd = "studio:symbolAdd", e.symbolDetach = "studio:symbolDetach", e.symbolOverride = "studio:symbolOverride", e.symbolPropagateStyles = "studio:propagateStyles", e.getPagesConfig = "studio:getPagesConfig", e.setPagesConfig = "studio:setPagesConfig", e.getPageSettings = "studio:getPageSettings", e.setPageSettings = "studio:setPageSettings", e.projectFiles = "studio:projectFiles", e.canvasReload = "studio:canvasReload", e.getBlocksPanel = "studio:getBlocksPanel", e.setBlocksPanel = "studio:setBlocksPanel", e.getStateContextMenu = "studio:getStateContextMenu", e.setStateContextMenu = "studio:setStateContextMenu", e.contextMenuComponent = "studio:contextMenuComponent", e.layoutAdd = "studio:layoutAdd", e.layoutRemove = "studio:layoutRemove", e.layoutToggle = "studio:layoutToggle", e.layoutUpdate = "studio:layoutUpdate", e.layoutGet = "studio:layoutGet", e.layoutConfigGet = "studio:layoutConfigGet", e.layoutConfigSet = "studio:layoutConfigSet", e.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e.fontGet = "studio:fontGet", e.fontAdd = "studio:fontAdd", e.fontRemove = "studio:fontRemove", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e))(b || {});
 const A = "app.grapesjs.com", T = "app-stage.grapesjs.com", v = [
   A,
   T,
@@ -10,8 +10,8 @@ const A = "app.grapesjs.com", T = "app-stage.grapesjs.com", v = [
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], G = "license:check:start", $ = "license:check:end", k = () => typeof window < "u", x = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? T : A}`}/api`, D = () => {
-  const e = k() && window.location.hostname;
+], D = "license:check:start", G = "license:check:end", $ = () => typeof window < "u", k = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? T : A}`}/api`, x = () => {
+  const e = $() && window.location.hostname;
   return !!e && (v.includes(e) || v.some((t) => e.endsWith(t)));
 };
 async function F({
@@ -20,20 +20,20 @@ async function F({
   method: o = "GET",
   headers: s = {},
   params: n,
-  body: i
+  body: a
 }) {
-  const l = `${t || x({ isDev: !1, isStage: !1 })}${e}`, c = {
+  const l = `${t || k({ isDev: !1, isStage: !1 })}${e}`, c = {
     method: o,
     headers: {
       "Content-Type": "application/json",
       ...s
     }
   };
-  i && (c.body = JSON.stringify(i));
-  const u = n ? new URLSearchParams(n).toString() : "", a = u ? `?${u}` : "", d = await fetch(`${l}${a}`, c);
-  if (!d.ok)
-    throw new Error(`HTTP error! status: ${d.status}`);
-  return d.json();
+  a && (c.body = JSON.stringify(a));
+  const u = n ? new URLSearchParams(n).toString() : "", i = u ? `?${u}` : "", g = await fetch(`${l}${i}`, c);
+  if (!g.ok)
+    throw new Error(`HTTP error! status: ${g.status}`);
+  return g.json();
 }
 const w = {
   [p.free]: 0,
@@ -53,29 +53,29 @@ async function M({
   licenseKey: s,
   cleanup: n
 }) {
-  let i = "", r = !1;
-  const l = D(), c = (a) => {
-    console.warn("Cleanup plugin:", o, "Reason:", a), n();
-  }, u = (a = {}) => {
+  let a = "", r = !1;
+  const l = x(), c = (i) => {
+    console.warn("Cleanup plugin:", o, "Reason:", i), n();
+  }, u = (i = {}) => {
     var P;
-    const { error: d, sdkLicense: f } = a, g = (P = a.plan) == null ? void 0 : P.category;
-    if (!(f || a.license) || d)
-      c(d || "Invalid license");
-    else if (g) {
-      const L = w[t], R = w[g];
-      L > R && c({ pluginRequiredPlan: t, licensePlan: g });
+    const { error: g, sdkLicense: f } = i, d = (P = i.plan) == null ? void 0 : P.category;
+    if (!(f || i.license) || g)
+      c(g || "Invalid license");
+    else if (d) {
+      const L = w[t], R = w[d];
+      L > R && c({ pluginRequiredPlan: t, licensePlan: d });
     }
   };
-  e.on(G, (a) => {
-    i = a == null ? void 0 : a.baseApiUrl, r = !0;
-  }), e.on($, (a) => {
-    u(a);
+  e.on(D, (i) => {
+    a = i == null ? void 0 : i.baseApiUrl, r = !0;
+  }), e.on(G, (i) => {
+    u(i);
   }), setTimeout(async () => {
     if (!r) {
       if (l) return;
       if (s) {
-        const a = await B({ licenseKey: s, pluginName: o, baseApiUrl: i });
-        a && u(a);
+        const i = await B({ licenseKey: s, pluginName: o, baseApiUrl: a });
+        i && u(i);
       } else
         c("The `licenseKey` option not provided");
     }
@@ -98,19 +98,19 @@ async function B(e) {
   }
 }
 const E = (e) => {
-  const { family: t, menu: o, axes: s } = e, n = !!s, i = Object.assign(
+  const { family: t, menu: o, axes: s } = e, n = !!s, a = Object.assign(
     {},
     ...e.variants.map((r) => {
-      var a, d;
+      var i, g;
       let l, c;
       if (n) {
-        const f = s.find((g) => g.tag === "wght");
+        const f = s.find((d) => d.tag === "wght");
         if (f) {
-          const { start: g, end: y } = f;
-          l = `${g} ${y}`;
+          const { start: d, end: y } = f;
+          l = `${d} ${y}`;
         }
       }
-      return l || (l = ((a = r.match(/\d+/)) == null ? void 0 : a[0]) ?? "400"), c = ((d = r.match(/[a-zA-Z]+/)) == null ? void 0 : d[0]) === "italic" ? "italic" : void 0, {
+      return l || (l = ((i = r.match(/\d+/)) == null ? void 0 : i[0]) ?? "400"), c = ((g = r.match(/[a-zA-Z]+/)) == null ? void 0 : g[0]) === "italic" ? "italic" : void 0, {
         [r]: {
           family: t,
           source: e.files[r],
@@ -130,7 +130,7 @@ const E = (e) => {
       source: o,
       variant: "menu"
     },
-    variants: i
+    variants: a
   };
 }, I = (e) => ({
   id: `${e.family}/${e.version}`,
@@ -141,8 +141,8 @@ const E = (e) => {
 }), W = (e) => {
   if (e.customData.needsLoading) {
     e.customData.needsLoading = !1;
-    const { font: t } = e.customData, { family: o, source: s, options: n } = t.menuVariant, i = new FontFace(o, `url("${s}")`, n);
-    document.fonts.add(i), i.load().catch(() => {
+    const { font: t } = e.customData, { family: o, source: s, options: n } = t.menuVariant, a = new FontFace(o, `url("${s}")`, n);
+    document.fonts.add(a), a.load().catch(() => {
     });
   }
 };
@@ -156,8 +156,8 @@ const j = (e) => {
   return new URLSearchParams(t);
 }, N = (e) => {
   const { apiKey: t, searchParams: o } = e, s = (n = {}) => {
-    const i = "https://www.googleapis.com/webfonts/v1/webfonts", r = j(n);
-    return `${i}?${r}`;
+    const a = "https://www.googleapis.com/webfonts/v1/webfonts", r = j(n);
+    return `${a}?${r}`;
   };
   return {
     id: "google-fonts",
@@ -173,19 +173,19 @@ const j = (e) => {
         sort: "alpha",
         subset: "latin",
         capability: ["WOFF2", "VF"]
-      }, i = o == null ? void 0 : o(), r = {
+      }, a = o == null ? void 0 : o(), r = {
         ...n,
-        ...i
+        ...a
       }, c = await (await fetch(s(r))).json();
       return (u = c.items) != null && u.length ? (h = c.items.map(I), h) : [];
     },
     itemLayout: (n) => {
-      const i = h.find((r) => r.id === n.assetProps.id);
-      return W(i), {
+      const a = h.find((r) => r.id === n.assetProps.id);
+      return W(a), {
         type: "column",
-        onClick: () => n.onSelect(i),
+        onClick: () => n.onSelect(a),
         htmlAttrs: {
-          title: i.name
+          title: a.name
         },
         style: {
           borderWidth: "1px",
@@ -196,12 +196,12 @@ const j = (e) => {
         children: [
           {
             type: "text",
-            content: i.name,
+            content: a.name,
             style: {
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap",
-              fontFamily: i.customData.font.menuVariant.family,
+              fontFamily: a.customData.font.menuVariant.family,
               fontSize: "24px",
               paddingLeft: "8px",
               paddingRight: "8px"

package/dist/googleFontsAssetProvider/index.umd.js

@@ -1 +1 @@
-(function(l,f){typeof exports=="object"&&typeof module<"u"?module.exports=f():typeof define=="function"&&define.amd?define(f):(l=typeof globalThis<"u"?globalThis:l||self,l.StudioSdkPlugins_googleFontsAssetProvider=f())})(this,function(){"use strict";var l=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(l||{}),f=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e))(f||{});const y="app.grapesjs.com",P="app-stage.grapesjs.com",v=[y,P,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],L="license:check:start",R="license:check:end",x=()=>typeof window<"u",k=({isDev:e,isStage:t})=>`${e?"":`https://${t?P:y}`}/api`,G=()=>{const e=x()&&window.location.hostname;return!!e&&(v.includes(e)||v.some(t=>e.endsWith(t)))};async function $({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:o,body:i}){const u=`${t||k({isDev:!1,isStage:!1})}${e}`,c={method:n,headers:{"Content-Type":"application/json",...s}};i&&(c.body=JSON.stringify(i));const d=o?new URLSearchParams(o).toString():"",a=d?`?${d}`:"",g=await fetch(`${u}${a}`,c);if(!g.ok)throw new Error(`HTTP error! status: ${g.status}`);return g.json()}const w={[l.free]:0,[l.startup]:10,[l.business]:20,[l.enterprise]:30};function F(e){const t=e;return t.init=n=>s=>e(s,n),t}const D=e=>F(e);async function U({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:o}){let i="",r=!1;const u=G(),c=a=>{console.warn("Cleanup plugin:",n,"Reason:",a),o()},d=(a={})=>{var T;const{error:g,sdkLicense:b}=a,p=(T=a.plan)==null?void 0:T.category;if(!(b||a.license)||g)c(g||"Invalid license");else if(p){const _=w[t],K=w[p];_>K&&c({pluginRequiredPlan:t,licensePlan:p})}};e.on(L,a=>{i=a==null?void 0:a.baseApiUrl,r=!0}),e.on(R,a=>{d(a)}),setTimeout(async()=>{if(!r){if(u)return;if(s){const a=await O({licenseKey:s,pluginName:n,baseApiUrl:i});a&&d(a)}else c("The `licenseKey` option not provided")}},2e3)}async function O(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await $({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const M=e=>{const{family:t,menu:n,axes:s}=e,o=!!s,i=Object.assign({},...e.variants.map(r=>{var a,g;let u,c;if(o){const b=s.find(p=>p.tag==="wght");if(b){const{start:p,end:A}=b;u=`${p} ${A}`}}return u||(u=((a=r.match(/\d+/))==null?void 0:a[0])??"400"),c=((g=r.match(/[a-zA-Z]+/))==null?void 0:g[0])==="italic"?"italic":void 0,{[r]:{family:t,source:e.files[r],variant:r,options:{style:c,weight:u}}}}));return{family:t,menuVariant:{family:`assetManagerMenu-${t}`,source:n,variant:"menu"},variants:i}},B=e=>({id:`${e.family}/${e.version}`,type:"font",src:e.menu,name:e.family,customData:{font:M(e),needsLoading:!0}}),E=e=>{if(e.customData.needsLoading){e.customData.needsLoading=!1;const{font:t}=e.customData,{family:n,source:s,options:o}=t.menuVariant,i=new FontFace(n,`url("${s}")`,o);document.fonts.add(i),i.load().catch(()=>{})}};let h;const I=e=>{const t=[];for(const n of Object.keys(e)){let s=e[n];s&&(Array.isArray(s)?t.push(...s.map(o=>[n,o.toString()])):(s=s.toString(),t.push([n,s])))}return new URLSearchParams(t)},j=e=>{const{apiKey:t,searchParams:n}=e,s=(o={})=>{const i="https://www.googleapis.com/webfonts/v1/webfonts",r=I(o);return`${i}?${r}`};return{id:"google-fonts",types:["font"],label:({editor:o})=>o.I18n.t("googleFontsAssetProvider.providerLabel"),search:{reloadOnInput:!1},async onLoad(){var d;if(h)return h;const o={key:t,sort:"alpha",subset:"latin",capability:["WOFF2","VF"]},i=n==null?void 0:n(),r={...o,...i},c=await(await fetch(s(r))).json();return(d=c.items)!=null&&d.length?(h=c.items.map(B),h):[]},itemLayout:o=>{const i=h.find(r=>r.id===o.assetProps.id);return E(i),{type:"column",onClick:()=>o.onSelect(i),htmlAttrs:{title:i.name},style:{borderWidth:"1px",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"text",content:i.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:i.customData.font.menuVariant.family,fontSize:"24px",paddingLeft:"8px",paddingRight:"8px"}}]}}}},W={googleFontsAssetProvider:{searchBtn:"Search on Google Fonts",modalTitle:"Select Font",providerLabel:"Google Fonts"}},N="googleFontsAssetProvider";return D(function(e,t){const{i18n:n={}}=t,s=j(t);e.runCommand(f.assetProviderAdd,{provider:s}),e.I18n.addMessages({en:W,...n}),U({editor:e,licenseKey:t.licenseKey,plan:l.startup,pluginName:N,cleanup:()=>{e.runCommand(f.assetProviderRemove,{id:s.id})}})})});
+(function(l,f){typeof exports=="object"&&typeof module<"u"?module.exports=f():typeof define=="function"&&define.amd?define(f):(l=typeof globalThis<"u"?globalThis:l||self,l.StudioSdkPlugins_googleFontsAssetProvider=f())})(this,function(){"use strict";var l=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(l||{}),f=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e))(f||{});const y="app.grapesjs.com",P="app-stage.grapesjs.com",v=[y,P,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],L="license:check:start",R="license:check:end",x=()=>typeof window<"u",D=({isDev:e,isStage:t})=>`${e?"":`https://${t?P:y}`}/api`,k=()=>{const e=x()&&window.location.hostname;return!!e&&(v.includes(e)||v.some(t=>e.endsWith(t)))};async function G({path:e,baseApiUrl:t,method:o="GET",headers:s={},params:n,body:i}){const u=`${t||D({isDev:!1,isStage:!1})}${e}`,c={method:o,headers:{"Content-Type":"application/json",...s}};i&&(c.body=JSON.stringify(i));const d=n?new URLSearchParams(n).toString():"",a=d?`?${d}`:"",g=await fetch(`${u}${a}`,c);if(!g.ok)throw new Error(`HTTP error! status: ${g.status}`);return g.json()}const w={[l.free]:0,[l.startup]:10,[l.business]:20,[l.enterprise]:30};function $(e){const t=e;return t.init=o=>s=>e(s,o),t}const F=e=>$(e);async function U({editor:e,plan:t,pluginName:o,licenseKey:s,cleanup:n}){let i="",r=!1;const u=k(),c=a=>{console.warn("Cleanup plugin:",o,"Reason:",a),n()},d=(a={})=>{var T;const{error:g,sdkLicense:b}=a,p=(T=a.plan)==null?void 0:T.category;if(!(b||a.license)||g)c(g||"Invalid license");else if(p){const _=w[t],K=w[p];_>K&&c({pluginRequiredPlan:t,licensePlan:p})}};e.on(L,a=>{i=a==null?void 0:a.baseApiUrl,r=!0}),e.on(R,a=>{d(a)}),setTimeout(async()=>{if(!r){if(u)return;if(s){const a=await O({licenseKey:s,pluginName:o,baseApiUrl:i});a&&d(a)}else c("The `licenseKey` option not provided")}},2e3)}async function O(e){const{licenseKey:t,pluginName:o,baseApiUrl:s}=e;try{return(await G({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:o}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const M=e=>{const{family:t,menu:o,axes:s}=e,n=!!s,i=Object.assign({},...e.variants.map(r=>{var a,g;let u,c;if(n){const b=s.find(p=>p.tag==="wght");if(b){const{start:p,end:A}=b;u=`${p} ${A}`}}return u||(u=((a=r.match(/\d+/))==null?void 0:a[0])??"400"),c=((g=r.match(/[a-zA-Z]+/))==null?void 0:g[0])==="italic"?"italic":void 0,{[r]:{family:t,source:e.files[r],variant:r,options:{style:c,weight:u}}}}));return{family:t,menuVariant:{family:`assetManagerMenu-${t}`,source:o,variant:"menu"},variants:i}},B=e=>({id:`${e.family}/${e.version}`,type:"font",src:e.menu,name:e.family,customData:{font:M(e),needsLoading:!0}}),E=e=>{if(e.customData.needsLoading){e.customData.needsLoading=!1;const{font:t}=e.customData,{family:o,source:s,options:n}=t.menuVariant,i=new FontFace(o,`url("${s}")`,n);document.fonts.add(i),i.load().catch(()=>{})}};let h;const I=e=>{const t=[];for(const o of Object.keys(e)){let s=e[o];s&&(Array.isArray(s)?t.push(...s.map(n=>[o,n.toString()])):(s=s.toString(),t.push([o,s])))}return new URLSearchParams(t)},j=e=>{const{apiKey:t,searchParams:o}=e,s=(n={})=>{const i="https://www.googleapis.com/webfonts/v1/webfonts",r=I(n);return`${i}?${r}`};return{id:"google-fonts",types:["font"],label:({editor:n})=>n.I18n.t("googleFontsAssetProvider.providerLabel"),search:{reloadOnInput:!1},async onLoad(){var d;if(h)return h;const n={key:t,sort:"alpha",subset:"latin",capability:["WOFF2","VF"]},i=o==null?void 0:o(),r={...n,...i},c=await(await fetch(s(r))).json();return(d=c.items)!=null&&d.length?(h=c.items.map(B),h):[]},itemLayout:n=>{const i=h.find(r=>r.id===n.assetProps.id);return E(i),{type:"column",onClick:()=>n.onSelect(i),htmlAttrs:{title:i.name},style:{borderWidth:"1px",borderRadius:8,overflow:"hidden",cursor:"pointer"},children:[{type:"text",content:i.name,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:i.customData.font.menuVariant.family,fontSize:"24px",paddingLeft:"8px",paddingRight:"8px"}}]}}}},W={googleFontsAssetProvider:{searchBtn:"Search on Google Fonts",modalTitle:"Select Font",providerLabel:"Google Fonts"}},N="googleFontsAssetProvider";return F(function(e,t){const{i18n:o={}}=t,s=j(t);e.runCommand(f.assetProviderAdd,{provider:s}),e.I18n.addMessages({en:W,...o}),U({editor:e,licenseKey:t.licenseKey,plan:l.startup,pluginName:N,cleanup:()=>{e.runCommand(f.assetProviderRemove,{id:s.id})}})})});

package/dist/iconifyComponent/index.cjs.js

@@ -1,3 +1,3 @@
-"use strict";var L=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(L||{}),x=(e=>(e.Info="info",e.Error="error",e.Success="success",e.Warning="warning",e))(x||{}),f=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e))(f||{});const j={ratioDefault:!0,tc:!1,cl:!1,cr:!1,bc:!1},w=`<svg viewBox="0 0 24 24">
+"use strict";var L=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(L||{}),x=(e=>(e.Info="info",e.Error="error",e.Success="success",e.Warning="warning",e))(x||{}),f=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e))(f||{});const N={ratioDefault:!0,tc:!1,cl:!1,cr:!1,bc:!1},w=`<svg viewBox="0 0 24 24">
   <path d="M19 0H9C7.9 0 7 .9 7 2V18C7 19.1 7.9 20 9 20H19C20.1 20 21 19.1 21 18V2C21 .9 20.1 0 19 0M19 18H9V2H19V18M3 4V22C3 23.1 3.9 24 5 24H17V22H5V4H3M14 5L11 10L14 15L17 10L14 5Z" />
-</svg>`,R="layout-icon-picker",H="icons-layout-",_="icons-list-layout",$="gs-iconify-picker",A="__iconify_collection",B="https://api.iconify.design",I=new Map;let T;const D=({collectionId:e})=>`https://cdn.jsdelivr.net/npm/@iconify-json/${e}@latest/icons.json`;async function m({collectionId:e,editor:o}){try{if(I.has(e))return I.get(e);const t=await fetch(D({collectionId:e}));if(!t.ok)throw new Error(`Failed to fetch collection: ${t.statusText}`);const n=await t.json();return I.set(e,n),n}catch(t){console.error("Error fetching collection",t),o.runCommand(f.toastAdd,q());return}}async function G({collectionIds:e,editor:o}){try{if(T)return T;const t=e?`?prefixes=${e.join(",")}`:"",n=await fetch(`${B}/collections${t}`);if(!n.ok)throw new Error(`Failed to fetch collections: ${n.statusText}`);return T=await n.json(),T}catch(t){console.error("Error fetching collections",t),o.runCommand(f.toastAdd,C());return}}function P(){return{type:"button",label:"Open Icon Picker",name:"onActive",changeProp:!0,command(e){var o;(o=e.getSelected())==null||o.trigger("active")}}}async function W({collectionIds:e,editor:o,component:t}){const n=await G({collectionIds:e,editor:o});if(!n)return;const a=({icon:s,collectionId:c,iconId:i})=>{t.components(s),t.set({collectionId:c,iconId:i})},d=Object.entries(n).map(([s,c])=>({id:s,...c})).sort((s,c)=>s.name.localeCompare(c.name)),u=t.get("collectionId")??d[0].id;o.runCommand(f.layoutToggle,{id:R,placer:{type:"dialog",size:"l",title:"Select Icon"},header:!1,layout:{type:"column",style:{height:500,gap:10},children:[V({collectionsList:d,collectionId:u,editor:o,handleClick:a}),{id:_,type:"column",grow:!0}]}});const r=await m({collectionId:u,editor:o});r&&E({editor:o,collection:r,handleClick:a,collectionId:u})}function F({editor:e,collection:o}){e.em.set(A,o)}function K(e){return e.em.get(A)}function E(e){const{editor:o}=e,t={id:H,layout:Y(e),header:!1,style:{height:"100%"},placer:{type:"static",layoutId:_}};o.runCommand(f.layoutRemove,{id:t.id,force:!0}),setTimeout(()=>o.runCommand(f.layoutAdd,t),10)}function V(e){const{collectionsList:o,collectionId:t,editor:n,handleClick:a}=e,d=o.map(({id:u,name:r,total:s})=>({id:u,label:`${r} (${s})`})).sort((u,r)=>u.label.localeCompare(r.label));return{type:"column",style:{gap:10},className:`${$}__header`,children:[{type:"selectField",value:t,options:d,emptyState:"Select an icon collection",onChange:async({setState:u,value:r})=>{const s=await m({collectionId:r,editor:n});s&&(u({value:r}),F({editor:n,collection:s}),E({editor:n,collection:s,handleClick:a,collectionId:r}))}},{type:"inputField",value:"",placeholder:"Search icons inside collection...",editorEvents:{[`change:${A}`]:({setState:u})=>u({value:""})},onInput:({setState:u,value:r,editor:s})=>{const c=K(s);if(!c)return;const i=Object.fromEntries(Object.entries(c.icons).filter(([g])=>g.includes(r)));u({value:r}),E({editor:s,collection:c,handleClick:a,collectionId:r,collectionFiltered:{...c,icons:i}})}}]}}function Y({collection:e,collectionFiltered:o,handleClick:t}){const{height:n=24,width:a=24,icons:d,prefix:u}=o||e,r=Object.entries(d).map(([s,{body:c}])=>({name:s,body:c}),{});return{type:"column",className:`${$}__content`,style:{height:"100%"},children:{type:"virtualList",items:r,itemLayout:({item:s})=>[{type:"custom",render:c=>{const{editor:i,addEl:g,removeEl:h}=c,l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.setAttribute("xmlns","http://www.w3.org/2000/svg"),l.innerHTML=s.body,l.setAttribute("viewBox",`0 0 ${a} ${n}`);const{cssWidth:p,cssHeight:y}=z(a,n);l.style.cssText=`width: ${p}px; height: ${y}px; cursor: pointer;`,l.addEventListener("mouseover",()=>{l.style.border="2px solid currentColor",l.style.borderRadius="4px",l.style.padding="4px"}),l.addEventListener("mouseout",()=>{l.style.border="none"});const b=()=>{const v=l.cloneNode(!0);v.removeAttribute("style");const N=v.outerHTML;t({icon:N,collectionId:u,iconId:s.name}),i==null||i.runCommand(f.layoutRemove,{id:R})};return l.addEventListener("click",b),g(l),()=>{l.removeEventListener("click",b),h(l)}}}]}}}function z(e,o){const t=e/o;let n=48,a=48;return t>1?a=48/t:t<1&&(n=48*t),{cssWidth:n,cssHeight:a}}function C(){return{id:"toast-error-getCollections",header:"Error",content:"Error fetching collections",variant:x.Error}}function q(){return{...C(),id:"toast-error-getCollection",content:"Error fetching collection"}}const U="app.grapesjs.com",M="app-stage.grapesjs.com",k=[U,M,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],J="license:check:start",X="license:check:end",Z=()=>typeof window<"u",Q=({isDev:e,isStage:o})=>`${e?"":`https://${o?M:U}`}/api`,S=()=>{const e=Z()&&window.location.hostname;return!!e&&(k.includes(e)||k.some(o=>e.endsWith(o)))};async function ee({path:e,baseApiUrl:o,method:t="GET",headers:n={},params:a,body:d}){const r=`${o||Q({isDev:!1,isStage:!1})}${e}`,s={method:t,headers:{"Content-Type":"application/json",...n}};d&&(s.body=JSON.stringify(d));const c=a?new URLSearchParams(a).toString():"",i=c?`?${c}`:"",g=await fetch(`${r}${i}`,s);if(!g.ok)throw new Error(`HTTP error! status: ${g.status}`);return g.json()}const O={[L.free]:0,[L.startup]:10,[L.business]:20,[L.enterprise]:30};function te(e){const o=e;return o.init=t=>n=>e(n,t),o}const oe=e=>te(e);async function ne({editor:e,plan:o,pluginName:t,licenseKey:n,cleanup:a}){let d="",u=!1;const r=S(),s=i=>{console.warn("Cleanup plugin:",t,"Reason:",i),a()},c=(i={})=>{var y;const{error:g,sdkLicense:h}=i,l=(y=i.plan)==null?void 0:y.category;if(!(h||i.license)||g)s(g||"Invalid license");else if(l){const b=O[o],v=O[l];b>v&&s({pluginRequiredPlan:o,licensePlan:l})}};e.on(J,i=>{d=i==null?void 0:i.baseApiUrl,u=!0}),e.on(X,i=>{c(i)}),setTimeout(async()=>{if(!u){if(r)return;if(n){const i=await se({licenseKey:n,pluginName:t,baseApiUrl:d});i&&c(i)}else s("The `licenseKey` option not provided")}},2e3)}async function se(e){const{licenseKey:o,pluginName:t,baseApiUrl:n}=e;try{return(await ee({baseApiUrl:n,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const ie=(e,o)=>{var t;return!!((t=e==null?void 0:e.hasAttribute)!=null&&t.call(e,o))},ce="iconifyComponent",re=function(e,o={}){var l;const{Components:t,Blocks:n}=e,{collections:a,extendIconComponent:d=!0,licenseKey:u,block:r={}}=o,s="icon",c="iconify",i="Iconify",g="data-type-iconify",h={events:()=>({dblclick:"onActive"}),onActive(){W({collectionIds:a,editor:e,component:this.model})}};if(t.addType(c,{block:r&&{label:i,media:w,content:{type:c},category:"Extra",activate:!0,...r},isComponent:p=>ie(p,g),model:{defaults:{name:i,icon:w,droppable:!1,attributes:{[g]:!0},resizable:j,components:w,style:{width:"50px",height:"50px"},traits:[P()]},init(){this.listenTo(this.components(),"change add",this.disableLayers),this.disableLayers()},disableLayers(){this.components().forEach(p=>p.set({layerable:!1,locked:!0}))}},view:h}),d){const p=(l=t.getType(s))==null?void 0:l.model,[y,b,...v]=p.getDefaults().traits;t.addType(s,{model:{defaults:{traits:[y,b,P(),...v]}},view:h})}ne({editor:e,licenseKey:u,plan:L.startup,pluginName:ce,cleanup:()=>{n.remove(c),t.removeType(c)}})},le=oe(re);module.exports=le;
+</svg>`,R="layout-icon-picker",j="icons-layout-",_="icons-list-layout",$="gs-iconify-picker",A="__iconify_collection",H="https://api.iconify.design",I=new Map;let T;const B=({collectionId:e})=>`https://cdn.jsdelivr.net/npm/@iconify-json/${e}@latest/icons.json`;async function C({collectionId:e,editor:o}){try{if(I.has(e))return I.get(e);const t=await fetch(B({collectionId:e}));if(!t.ok)throw new Error(`Failed to fetch collection: ${t.statusText}`);const n=await t.json();return I.set(e,n),n}catch(t){console.error("Error fetching collection",t),o.runCommand(f.toastAdd,q());return}}async function G({collectionIds:e,editor:o}){try{if(T)return T;const t=e?`?prefixes=${e.join(",")}`:"",n=await fetch(`${H}/collections${t}`);if(!n.ok)throw new Error(`Failed to fetch collections: ${n.statusText}`);return T=await n.json(),T}catch(t){console.error("Error fetching collections",t),o.runCommand(f.toastAdd,D());return}}function P(){return{type:"button",label:"Open Icon Picker",name:"onActive",changeProp:!0,command(e){var o;(o=e.getSelected())==null||o.trigger("active")}}}async function W({collectionIds:e,editor:o,component:t}){const n=await G({collectionIds:e,editor:o});if(!n)return;const a=({icon:s,collectionId:c,iconId:i})=>{t.components(s),t.set({collectionId:c,iconId:i})},g=Object.entries(n).map(([s,c])=>({id:s,...c})).sort((s,c)=>s.name.localeCompare(c.name)),u=t.get("collectionId")??g[0].id;o.runCommand(f.layoutToggle,{id:R,placer:{type:"dialog",size:"l",title:"Select Icon"},header:!1,layout:{type:"column",style:{height:500,gap:10},children:[V({collectionsList:g,collectionId:u,editor:o,handleClick:a}),{id:_,type:"column",grow:!0}]}});const r=await C({collectionId:u,editor:o});r&&E({editor:o,collection:r,handleClick:a,collectionId:u})}function F({editor:e,collection:o}){e.em.set(A,o)}function K(e){return e.em.get(A)}function E(e){const{editor:o}=e,t={id:j,layout:Y(e),header:!1,style:{height:"100%"},placer:{type:"static",layoutId:_}};o.runCommand(f.layoutRemove,{id:t.id,force:!0}),setTimeout(()=>o.runCommand(f.layoutAdd,t),10)}function V(e){const{collectionsList:o,collectionId:t,editor:n,handleClick:a}=e,g=o.map(({id:u,name:r,total:s})=>({id:u,label:`${r} (${s})`})).sort((u,r)=>u.label.localeCompare(r.label));return{type:"column",style:{gap:10},className:`${$}__header`,children:[{type:"selectField",value:t,options:g,emptyState:"Select an icon collection",onChange:async({setState:u,value:r})=>{const s=await C({collectionId:r,editor:n});s&&(u({value:r}),F({editor:n,collection:s}),E({editor:n,collection:s,handleClick:a,collectionId:r}))}},{type:"inputField",value:"",placeholder:"Search icons inside collection...",editorEvents:{[`change:${A}`]:({setState:u})=>u({value:""})},onInput:({setState:u,value:r,editor:s})=>{const c=K(s);if(!c)return;const i=Object.fromEntries(Object.entries(c.icons).filter(([d])=>d.includes(r)));u({value:r}),E({editor:s,collection:c,handleClick:a,collectionId:r,collectionFiltered:{...c,icons:i}})}}]}}function Y({collection:e,collectionFiltered:o,handleClick:t}){const{height:n=24,width:a=24,icons:g,prefix:u}=o||e,r=Object.entries(g).map(([s,{body:c}])=>({name:s,body:c}),{});return{type:"column",className:`${$}__content`,style:{height:"100%"},children:{type:"virtualList",items:r,itemLayout:({item:s})=>[{type:"custom",render:c=>{const{editor:i,addEl:d,removeEl:h}=c,l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.setAttribute("xmlns","http://www.w3.org/2000/svg"),l.innerHTML=s.body,l.setAttribute("viewBox",`0 0 ${a} ${n}`);const{cssWidth:p,cssHeight:y}=z(a,n);l.style.cssText=`width: ${p}px; height: ${y}px; cursor: pointer;`,l.addEventListener("mouseover",()=>{l.style.border="2px solid currentColor",l.style.borderRadius="4px",l.style.padding="4px"}),l.addEventListener("mouseout",()=>{l.style.border="none"});const b=()=>{const v=l.cloneNode(!0);v.removeAttribute("style");const M=v.outerHTML;t({icon:M,collectionId:u,iconId:s.name}),i==null||i.runCommand(f.layoutRemove,{id:R})};return l.addEventListener("click",b),d(l),()=>{l.removeEventListener("click",b),h(l)}}}]}}}function z(e,o){const t=e/o;let n=48,a=48;return t>1?a=48/t:t<1&&(n=48*t),{cssWidth:n,cssHeight:a}}function D(){return{id:"toast-error-getCollections",header:"Error",content:"Error fetching collections",variant:x.Error}}function q(){return{...D(),id:"toast-error-getCollection",content:"Error fetching collection"}}const U="app.grapesjs.com",m="app-stage.grapesjs.com",k=[U,m,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],J="license:check:start",S="license:check:end",X=()=>typeof window<"u",Z=({isDev:e,isStage:o})=>`${e?"":`https://${o?m:U}`}/api`,Q=()=>{const e=X()&&window.location.hostname;return!!e&&(k.includes(e)||k.some(o=>e.endsWith(o)))};async function ee({path:e,baseApiUrl:o,method:t="GET",headers:n={},params:a,body:g}){const r=`${o||Z({isDev:!1,isStage:!1})}${e}`,s={method:t,headers:{"Content-Type":"application/json",...n}};g&&(s.body=JSON.stringify(g));const c=a?new URLSearchParams(a).toString():"",i=c?`?${c}`:"",d=await fetch(`${r}${i}`,s);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}const O={[L.free]:0,[L.startup]:10,[L.business]:20,[L.enterprise]:30};function te(e){const o=e;return o.init=t=>n=>e(n,t),o}const oe=e=>te(e);async function ne({editor:e,plan:o,pluginName:t,licenseKey:n,cleanup:a}){let g="",u=!1;const r=Q(),s=i=>{console.warn("Cleanup plugin:",t,"Reason:",i),a()},c=(i={})=>{var y;const{error:d,sdkLicense:h}=i,l=(y=i.plan)==null?void 0:y.category;if(!(h||i.license)||d)s(d||"Invalid license");else if(l){const b=O[o],v=O[l];b>v&&s({pluginRequiredPlan:o,licensePlan:l})}};e.on(J,i=>{g=i==null?void 0:i.baseApiUrl,u=!0}),e.on(S,i=>{c(i)}),setTimeout(async()=>{if(!u){if(r)return;if(n){const i=await se({licenseKey:n,pluginName:t,baseApiUrl:g});i&&c(i)}else s("The `licenseKey` option not provided")}},2e3)}async function se(e){const{licenseKey:o,pluginName:t,baseApiUrl:n}=e;try{return(await ee({baseApiUrl:n,path:`/sdk/${o||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const ie=(e,o)=>{var t;return!!((t=e==null?void 0:e.hasAttribute)!=null&&t.call(e,o))},ce="iconifyComponent",re=function(e,o={}){var l;const{Components:t,Blocks:n}=e,{collections:a,extendIconComponent:g=!0,licenseKey:u,block:r={}}=o,s="icon",c="iconify",i="Iconify",d="data-type-iconify",h={events:()=>({dblclick:"onActive"}),onActive(){W({collectionIds:a,editor:e,component:this.model})}};if(t.addType(c,{block:r&&{label:i,media:w,content:{type:c},category:"Extra",activate:!0,...r},isComponent:p=>ie(p,d),model:{defaults:{name:i,icon:w,droppable:!1,attributes:{[d]:!0},resizable:N,components:w,style:{width:"50px",height:"50px"},traits:[P()]},init(){this.listenTo(this.components(),"change add",this.disableLayers),this.disableLayers()},disableLayers(){this.components().forEach(p=>p.set({layerable:!1,locked:!0}))}},view:h}),g){const p=(l=t.getType(s))==null?void 0:l.model,[y,b,...v]=p.getDefaults().traits;t.addType(s,{model:{defaults:{traits:[y,b,P(),...v]}},view:h})}ne({editor:e,licenseKey:u,plan:L.startup,pluginName:ce,cleanup:()=>{n.remove(c),t.removeType(c)}})},le=oe(re);module.exports=le;