@grapesjs/studio-sdk-plugins 1.0.13 → 1.0.14-rc.1

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

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

package/dist/canvasEmptyState/index.cjs.js

@@ -0,0 +1 @@
+"use strict";require("grapesjs");const I="app.grapesjs.com",M="app-stage.grapesjs.com",W=[I,M,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],$="license:check:start",N="license:check:end",D=()=>typeof window<"u",P=({isDev:e,isStage:t})=>`${e?"":`https://${t?M:I}`}/api`,R=()=>{const e=D()&&window.location.hostname;return!!e&&(W.includes(e)||W.some(t=>e.endsWith(t)))};function _(e){return typeof e=="function"}async function K({path:e,baseApiUrl:t,method:a="GET",headers:o={},params:i,body:u}){const v=`${t||P({isDev:!1,isStage:!1})}${e}`,p={method:a,headers:{"Content-Type":"application/json",...o}};u&&(p.body=JSON.stringify(u));const d=i?new URLSearchParams(i).toString():"",s=d?`?${d}`:"",c=await fetch(`${v}${s}`,p);if(!c.ok)throw new Error(`HTTP error! status: ${c.status}`);return c.json()}var w=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(w||{});const A={[w.free]:0,[w.startup]:10,[w.business]:20,[w.enterprise]:30};function O(e){const t=e;return t.init=a=>o=>e(o,a),t}const j=e=>O(e);async function q({editor:e,plan:t,pluginName:a,licenseKey:o,cleanup:i}){let u="",h=!1;const v=R(),p=s=>{console.warn("Cleanup plugin:",a,"Reason:",s),i()},d=(s={})=>{var C;const{error:c,sdkLicense:E}=s,y=(C=s.plan)==null?void 0:C.category;if(!(E||s.license)||c)p(c||"Invalid license");else if(y){const b=A[t],L=A[y];b>L&&p({pluginRequiredPlan:t,licensePlan:y})}};e.on($,s=>{u=s==null?void 0:s.baseApiUrl,h=!0}),e.on(N,s=>{d(s)}),setTimeout(async()=>{if(!h){if(v)return;if(o){const s=await x({licenseKey:o,pluginName:a,baseApiUrl:u});s&&d(s)}else p("The `licenseKey` option not provided")}},2e3)}async function x(e){const{licenseKey:t,pluginName:a,baseApiUrl:o}=e;try{return(await K({baseApiUrl:o,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:a}})).result||{}}catch(i){return console.error("Error during SDK license check:",i),!1}}const F="canvasEmptyState",G=function(e,t={}){const a=new WeakMap,o=new WeakMap,i=new WeakMap,u=new Set,h=new WeakMap,v={emptyStates:[],...t},p=(n,r)=>{let m=!1;const{isValid:f}=r;return Array.isArray(f)?m=f.some(l=>n.is(l)):_(f)?m=f({component:n,editor:e}):m=n.is(f),m},d=n=>{const r=a.get(n);a.delete(n),r==null||r()},s=n=>{n.views.forEach(r=>d(r)),i.delete(n)},c=n=>{if(!(!n||u.has(n)))try{u.add(n);const r=n.components().length>0,m=i.get(n);if(r&&m)s(n);else if(!r&&!m){const f=h.has(n)?h.get(n):v.emptyStates.find(l=>p(n,l));if(h.set(n,f),!f)return;n.views.forEach(l=>{const S=f.render({editor:e,component:n,componentView:l,mount:g=>{o.set(l,g),i.set(n,!0);const k=l.getChildrenContainer();k==null||k.appendChild(g)},unmount:()=>d(l)});a.set(l,()=>{S==null||S();const g=o.get(l);g==null||g.remove()})})}}finally{u.delete(n)}},E=n=>{i.has(n)&&s(n)},y=({model:n})=>{c(n.getComponent())},T=e.Components.events,C=`${T.update}:components`,b="component:mount",L=e.Canvas.events.frameLoadBody,U=T.removed||T.remove;e.on(C,c),e.on(b,c),e.on(U,E),e.on(L,y),q({editor:e,licenseKey:v.licenseKey,plan:w.startup,pluginName:F,cleanup:()=>{e.off(C,c),e.off(b,c),e.off(U,E),e.off(L,y)}})},H=j(G);module.exports=H;

package/dist/canvasEmptyState/index.d.ts

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

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

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

package/dist/canvasEmptyState/index.es.js

@@ -0,0 +1,166 @@
+import "grapesjs";
+const I = "app.grapesjs.com", M = "app-stage.grapesjs.com", W = [
+  I,
+  M,
+  "localhost",
+  "127.0.0.1",
+  ".local-credentialless.webcontainer.io",
+  // For stackblitz.com demos
+  ".local.webcontainer.io",
+  // For stackblitz.com demos
+  "-sandpack.codesandbox.io"
+  // For Sandpack demos
+], $ = "license:check:start", N = "license:check:end", D = () => typeof window < "u", P = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? M : I}`}/api`, R = () => {
+  const e = D() && window.location.hostname;
+  return !!e && (W.includes(e) || W.some((t) => e.endsWith(t)));
+};
+function _(e) {
+  return typeof e == "function";
+}
+async function K({
+  path: e,
+  baseApiUrl: t,
+  method: a = "GET",
+  headers: o = {},
+  params: i,
+  body: u
+}) {
+  const v = `${t || P({ isDev: !1, isStage: !1 })}${e}`, p = {
+    method: a,
+    headers: {
+      "Content-Type": "application/json",
+      ...o
+    }
+  };
+  u && (p.body = JSON.stringify(u));
+  const d = i ? new URLSearchParams(i).toString() : "", s = d ? `?${d}` : "", c = await fetch(`${v}${s}`, p);
+  if (!c.ok)
+    throw new Error(`HTTP error! status: ${c.status}`);
+  return c.json();
+}
+var w = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(w || {});
+const A = {
+  [w.free]: 0,
+  [w.startup]: 10,
+  [w.business]: 20,
+  [w.enterprise]: 30
+};
+function O(e) {
+  const t = e;
+  return t.init = (a) => (o) => e(o, a), t;
+}
+const j = (e) => /* @__PURE__ */ O(e);
+async function x({
+  editor: e,
+  plan: t,
+  pluginName: a,
+  licenseKey: o,
+  cleanup: i
+}) {
+  let u = "", h = !1;
+  const v = R(), p = (s) => {
+    console.warn("Cleanup plugin:", a, "Reason:", s), i();
+  }, d = (s = {}) => {
+    var C;
+    const { error: c, sdkLicense: E } = s, y = (C = s.plan) == null ? void 0 : C.category;
+    if (!(E || s.license) || c)
+      p(c || "Invalid license");
+    else if (y) {
+      const b = A[t], L = A[y];
+      b > L && p({ pluginRequiredPlan: t, licensePlan: y });
+    }
+  };
+  e.on($, (s) => {
+    u = s == null ? void 0 : s.baseApiUrl, h = !0;
+  }), e.on(N, (s) => {
+    d(s);
+  }), setTimeout(async () => {
+    if (!h) {
+      if (v) return;
+      if (o) {
+        const s = await F({ licenseKey: o, pluginName: a, baseApiUrl: u });
+        s && d(s);
+      } else
+        p("The `licenseKey` option not provided");
+    }
+  }, 2e3);
+}
+async function F(e) {
+  const { licenseKey: t, pluginName: a, baseApiUrl: o } = e;
+  try {
+    return (await K({
+      baseApiUrl: o,
+      path: `/sdk/${t || "na"}`,
+      method: "POST",
+      params: {
+        d: window.location.hostname,
+        pn: a
+      }
+    })).result || {};
+  } catch (i) {
+    return console.error("Error during SDK license check:", i), !1;
+  }
+}
+const G = "canvasEmptyState", H = function(e, t = {}) {
+  const a = /* @__PURE__ */ new WeakMap(), o = /* @__PURE__ */ new WeakMap(), i = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new WeakMap(), v = {
+    emptyStates: [],
+    ...t
+  }, p = (n, r) => {
+    let m = !1;
+    const { isValid: f } = r;
+    return Array.isArray(f) ? m = f.some((l) => n.is(l)) : _(f) ? m = f({ component: n, editor: e }) : m = n.is(f), m;
+  }, d = (n) => {
+    const r = a.get(n);
+    a.delete(n), r == null || r();
+  }, s = (n) => {
+    n.views.forEach((r) => d(r)), i.delete(n);
+  }, c = (n) => {
+    if (!(!n || u.has(n)))
+      try {
+        u.add(n);
+        const r = n.components().length > 0, m = i.get(n);
+        if (r && m)
+          s(n);
+        else if (!r && !m) {
+          const f = h.has(n) ? h.get(n) : v.emptyStates.find((l) => p(n, l));
+          if (h.set(n, f), !f) return;
+          n.views.forEach((l) => {
+            const S = f.render({
+              editor: e,
+              component: n,
+              componentView: l,
+              mount: (g) => {
+                o.set(l, g), i.set(n, !0);
+                const k = l.getChildrenContainer();
+                k == null || k.appendChild(g);
+              },
+              unmount: () => d(l)
+            });
+            a.set(l, () => {
+              S == null || S();
+              const g = o.get(l);
+              g == null || g.remove();
+            });
+          });
+        }
+      } finally {
+        u.delete(n);
+      }
+  }, E = (n) => {
+    i.has(n) && s(n);
+  }, y = ({ model: n }) => {
+    c(n.getComponent());
+  }, T = e.Components.events, C = `${T.update}:components`, b = "component:mount", L = e.Canvas.events.frameLoadBody, U = T.removed || T.remove;
+  e.on(C, c), e.on(b, c), e.on(U, E), e.on(L, y), x({
+    editor: e,
+    licenseKey: v.licenseKey,
+    plan: w.startup,
+    pluginName: G,
+    cleanup: () => {
+      e.off(C, c), e.off(b, c), e.off(U, E), e.off(L, y);
+    }
+  });
+}, B = j(H);
+export {
+  B as default
+};

package/dist/canvasEmptyState/index.umd.js

@@ -0,0 +1 @@
+(function(y,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("grapesjs")):typeof define=="function"&&define.amd?define(["grapesjs"],g):(y=typeof globalThis<"u"?globalThis:y||self,y.StudioSdkPlugins_canvasEmptyState=g())})(this,function(){"use strict";const y="app.grapesjs.com",g="app-stage.grapesjs.com",A=[y,g,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],$="license:check:start",N="license:check:end",P=()=>typeof window<"u",D=({isDev:e,isStage:t})=>`${e?"":`https://${t?g:y}`}/api`,_=()=>{const e=P()&&window.location.hostname;return!!e&&(A.includes(e)||A.some(t=>e.endsWith(t)))};function j(e){return typeof e=="function"}async function R({path:e,baseApiUrl:t,method:o="GET",headers:a={},params:i,body:u}){const w=`${t||D({isDev:!1,isStage:!1})}${e}`,p={method:o,headers:{"Content-Type":"application/json",...a}};u&&(p.body=JSON.stringify(u));const d=i?new URLSearchParams(i).toString():"",s=d?`?${d}`:"",c=await fetch(`${w}${s}`,p);if(!c.ok)throw new Error(`HTTP error! status: ${c.status}`);return c.json()}var v=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(v||{});const I={[v.free]:0,[v.startup]:10,[v.business]:20,[v.enterprise]:30};function K(e){const t=e;return t.init=o=>a=>e(a,o),t}const x=e=>K(e);async function O({editor:e,plan:t,pluginName:o,licenseKey:a,cleanup:i}){let u="",h=!1;const w=_(),p=s=>{console.warn("Cleanup plugin:",o,"Reason:",s),i()},d=(s={})=>{var S;const{error:c,sdkLicense:T}=s,C=(S=s.plan)==null?void 0:S.category;if(!(T||s.license)||c)p(c||"Invalid license");else if(C){const L=I[t],k=I[C];L>k&&p({pluginRequiredPlan:t,licensePlan:C})}};e.on($,s=>{u=s==null?void 0:s.baseApiUrl,h=!0}),e.on(N,s=>{d(s)}),setTimeout(async()=>{if(!h){if(w)return;if(a){const s=await q({licenseKey:a,pluginName:o,baseApiUrl:u});s&&d(s)}else p("The `licenseKey` option not provided")}},2e3)}async function q(e){const{licenseKey:t,pluginName:o,baseApiUrl:a}=e;try{return(await R({baseApiUrl:a,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:o}})).result||{}}catch(i){return console.error("Error during SDK license check:",i),!1}}const F="canvasEmptyState";return x(function(e,t={}){const o=new WeakMap,a=new WeakMap,i=new WeakMap,u=new Set,h=new WeakMap,w={emptyStates:[],...t},p=(n,r)=>{let m=!1;const{isValid:f}=r;return Array.isArray(f)?m=f.some(l=>n.is(l)):j(f)?m=f({component:n,editor:e}):m=n.is(f),m},d=n=>{const r=o.get(n);o.delete(n),r==null||r()},s=n=>{n.views.forEach(r=>d(r)),i.delete(n)},c=n=>{if(!(!n||u.has(n)))try{u.add(n);const r=n.components().length>0,m=i.get(n);if(r&&m)s(n);else if(!r&&!m){const f=h.has(n)?h.get(n):w.emptyStates.find(l=>p(n,l));if(h.set(n,f),!f)return;n.views.forEach(l=>{const U=f.render({editor:e,component:n,componentView:l,mount:E=>{a.set(l,E),i.set(n,!0);const W=l.getChildrenContainer();W==null||W.appendChild(E)},unmount:()=>d(l)});o.set(l,()=>{U==null||U();const E=a.get(l);E==null||E.remove()})})}}finally{u.delete(n)}},T=n=>{i.has(n)&&s(n)},C=({model:n})=>{c(n.getComponent())},b=e.Components.events,S=`${b.update}:components`,L="component:mount",k=e.Canvas.events.frameLoadBody,M=b.removed||b.remove;e.on(S,c),e.on(L,c),e.on(M,T),e.on(k,C),O({editor:e,licenseKey:w.licenseKey,plan:v.startup,pluginName:F,cleanup:()=>{e.off(S,c),e.off(L,c),e.off(M,T),e.off(k,C)}})})});

package/dist/canvasEmptyState/types.d.ts

@@ -0,0 +1,3 @@
+import { CanvasEmptyStateOptions as CanvasEmptyStateOptionsSchema } from './typesSchema';
+export interface CanvasEmptyStateOptions extends CanvasEmptyStateOptionsSchema {
+}

package/dist/canvasEmptyState/typesSchema.d.ts

@@ -0,0 +1,44 @@
+import { Editor, Component, ComponentView } from 'grapesjs';
+import { SDKPluginOptions } from '../utils';
+export interface CanvasEmptyStateOptions extends SDKPluginOptions {
+    /**
+     * Empty state types to render.
+     * @examples
+     * [
+     *  {
+     *    isValid: 'componentA',// check for valid componet type, as a string...
+     *    isValid: ['componentA', 'componentB'], // ...as an array of component types...
+     *    isValid: ({ component }) => component.is('componentA'), // ...or as a function
+     *    // Render function to run when the component is empty
+     *    render: ({ editor, component, mount, unmount }) => {
+     *      const container = document.createElement('div');
+     *      // ...
+     *      window.addEventListener('someGlobalEvent', onSomeEvent);
+     *      mount(container);
+     *      // Clean up function
+     *      return () => {
+     *        unmount(container);
+     *        window.removeEventListener('someGlobalEvent', onSomeEvent);
+     *      }
+     *    },
+     *  }
+     * ]
+     */
+    emptyStates?: EmptyStateProps[];
+}
+export interface EmptyStateProps {
+    isValid: string | string[] | ((props: {
+        component: Component;
+        editor: Editor;
+    }) => boolean);
+    render: (props: EmptyStateRenderProps) => void | CleanUpFn;
+}
+type CleanUpFn = () => void;
+interface EmptyStateRenderProps {
+    editor: Editor;
+    component: Component;
+    componentView: ComponentView;
+    mount: (el: HTMLElement) => void;
+    unmount: (el: HTMLElement) => void;
+}
+export {};

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

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

package/dist/iconifyComponent/index.cjs.js

@@ -0,0 +1,3 @@
+"use strict";require("grapesjs");var L=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(L||{}),O=(e=>(e.Info="info",e.Error="error",e.Success="success",e.Warning="warning",e))(O||{}),h=(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.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e))(h||{});const H={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>`,x="layout-icon-picker",U="icons-layout-",C="icons-list-layout",R="gs-iconify-picker",P="__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 _({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(h.toastAdd,z());return}}async function W({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(h.toastAdd,$());return}}function A(){return{type:"button",label:"Open Icon Picker",name:"onActive",changeProp:!0,command(e){var o;(o=e.getSelected())==null||o.trigger("active")}}}async function F({collectionIds:e,editor:o,component:t}){const n=await W({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(h.layoutToggle,{id:x,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:C,type:"column",grow:!0}]}});const r=await _({collectionId:u,editor:o});r&&E({editor:o,collection:r,handleClick:a,collectionId:u})}function G({editor:e,collection:o}){e.em.set(P,o)}function K(e){return e.em.get(P)}function E(e){const{editor:o}=e,t={id:U,layout:Y(e),header:!1,style:{height:"100%"},placer:{type:"static",layoutId:C}};o.runCommand(h.layoutRemove,{id:t.id,force:!0}),setTimeout(()=>o.runCommand(h.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:`${R}__header`,children:[{type:"selectField",value:t,options:d,emptyState:"Select an icon collection",onChange:async({setState:u,value:r})=>{const s=await _({collectionId:r,editor:n});s&&(u({value:r}),G({editor:n,collection:s}),E({editor:n,collection:s,handleClick:a,collectionId:r}))}},{type:"inputField",value:"",placeholder:"Search icons inside collection...",editorEvents:{[`change:${P}`]:({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:`${R}__content`,style:{height:"100%"},children:{type:"virtualList",items:r,itemLayout:({item:s})=>[{type:"custom",render:c=>{const{editor:i,addEl:g,removeEl:f}=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}=q(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 j=v.outerHTML;t({icon:j,collectionId:u,iconId:s.name}),i==null||i.runCommand(h.layoutRemove,{id:x})};return l.addEventListener("click",b),g(l),()=>{l.removeEventListener("click",b),f(l)}}}]}}}function q(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 $(){return{id:"toast-error-getCollections",header:"Error",content:"Error fetching collections",variant:O.Error}}function z(){return{...$(),id:"toast-error-getCollection",content:"Error fetching collection"}}const M="app.grapesjs.com",N="app-stage.grapesjs.com",k=[M,N,"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?N:M}`}/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 m={[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:f}=i,l=(y=i.plan)==null?void 0:y.category;if(!(f||i.license)||g)s(g||"Invalid license");else if(l){const b=m[o],v=m[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",f={events:()=>({dblclick:"onActive"}),onActive(){F({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:H,components:w,style:{width:"50px",height:"50px"},traits:[A()]},init(){this.listenTo(this.components(),"change add",this.disableLayers),this.disableLayers()},disableLayers(){this.components().forEach(p=>p.set({layerable:!1,locked:!0}))}},view:f}),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,A(),...v]}},view:f})}ne({editor:e,licenseKey:u,plan:L.startup,pluginName:ce,cleanup:()=>{n.remove(c),t.removeType(c)}})},le=oe(re);module.exports=le;

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

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

package/dist/iconifyComponent/index.es.js

@@ -0,0 +1,361 @@
+import "grapesjs";
+var L = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(L || {}), O = /* @__PURE__ */ ((e) => (e.Info = "info", e.Error = "error", e.Success = "success", e.Warning = "warning", e))(O || {}), h = /* @__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.getStateTheme = "studio:getStateTheme", e.setStateTheme = "studio:setStateTheme", e.assetProviderGet = "studio:assetProviderGet", e.assetProviderAdd = "studio:assetProviderAdd", e.assetProviderRemove = "studio:assetProviderRemove", e))(h || {});
+const H = { 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>`, x = "layout-icon-picker", U = "icons-layout-", C = "icons-list-layout", R = "gs-iconify-picker", P = "__iconify_collection", B = "https://api.iconify.design", I = /* @__PURE__ */ new Map();
+let T;
+const D = ({ collectionId: e }) => `https://cdn.jsdelivr.net/npm/@iconify-json/${e}@latest/icons.json`;
+async function _({ 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(h.toastAdd, q());
+    return;
+  }
+}
+async function W({ 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(h.toastAdd, $());
+    return;
+  }
+}
+function m() {
+  return {
+    type: "button",
+    label: "Open Icon Picker",
+    name: "onActive",
+    changeProp: !0,
+    command(e) {
+      var o;
+      (o = e.getSelected()) == null || o.trigger("active");
+    }
+  };
+}
+async function F({ collectionIds: e, editor: o, component: t }) {
+  const n = await W({ 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(h.layoutToggle, {
+    id: x,
+    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: C, type: "column", grow: !0 }
+      ]
+    }
+  });
+  const r = await _({ collectionId: u, editor: o });
+  r && E({
+    editor: o,
+    collection: r,
+    handleClick: a,
+    collectionId: u
+  });
+}
+function G({ editor: e, collection: o }) {
+  e.em.set(P, o);
+}
+function K(e) {
+  return e.em.get(P);
+}
+function E(e) {
+  const { editor: o } = e, t = {
+    id: U,
+    layout: Y(e),
+    header: !1,
+    style: { height: "100%" },
+    placer: { type: "static", layoutId: C }
+  };
+  o.runCommand(h.layoutRemove, { id: t.id, force: !0 }), setTimeout(() => o.runCommand(h.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: `${R}__header`,
+    children: [
+      {
+        type: "selectField",
+        value: t,
+        options: d,
+        emptyState: "Select an icon collection",
+        onChange: async ({ setState: u, value: r }) => {
+          const s = await _({ collectionId: r, editor: n });
+          s && (u({ value: r }), G({ editor: n, collection: s }), E({
+            editor: n,
+            collection: s,
+            handleClick: a,
+            collectionId: r
+          }));
+        }
+      },
+      {
+        type: "inputField",
+        value: "",
+        placeholder: "Search icons inside collection...",
+        editorEvents: {
+          [`change:${P}`]: ({ 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: `${R}__content`,
+    style: { height: "100%" },
+    children: {
+      type: "virtualList",
+      items: r,
+      itemLayout: ({ item: s }) => [
+        {
+          type: "custom",
+          render: (c) => {
+            const { editor: i, addEl: g, removeEl: f } = 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 j = v.outerHTML;
+              t({ icon: j, collectionId: u, iconId: s.name }), i == null || i.runCommand(h.layoutRemove, { id: x });
+            };
+            return l.addEventListener("click", b), g(l), () => {
+              l.removeEventListener("click", b), f(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 $() {
+  return {
+    id: "toast-error-getCollections",
+    header: "Error",
+    content: "Error fetching collections",
+    variant: O.Error
+  };
+}
+function q() {
+  return {
+    ...$(),
+    id: "toast-error-getCollection",
+    content: "Error fetching collection"
+  };
+}
+const M = "app.grapesjs.com", N = "app-stage.grapesjs.com", A = [
+  M,
+  N,
+  "localhost",
+  "127.0.0.1",
+  ".local-credentialless.webcontainer.io",
+  // For stackblitz.com demos
+  ".local.webcontainer.io",
+  // For stackblitz.com demos
+  "-sandpack.codesandbox.io"
+  // For Sandpack demos
+], J = "license:check:start", X = "license:check:end", Z = () => typeof window < "u", Q = ({ isDev: e, isStage: o }) => `${e ? "" : `https://${o ? N : M}`}/api`, S = () => {
+  const e = Z() && window.location.hostname;
+  return !!e && (A.includes(e) || A.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 k = {
+  [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) => /* @__PURE__ */ 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: f } = i, l = (y = i.plan) == null ? void 0 : y.category;
+    if (!(f || i.license) || g)
+      s(g || "Invalid license");
+    else if (l) {
+      const b = k[o], v = k[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", f = {
+    events: () => ({
+      dblclick: "onActive"
+    }),
+    onActive() {
+      F({ 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: H,
+        components: w,
+        style: { width: "50px", height: "50px" },
+        traits: [m()]
+      },
+      init() {
+        this.listenTo(this.components(), "change add", this.disableLayers), this.disableLayers();
+      },
+      disableLayers() {
+        this.components().forEach((p) => p.set({ layerable: !1, locked: !0 }));
+      }
+    },
+    view: f
+  }), 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, m(), ...v]
+        }
+      },
+      view: f
+    });
+  }
+  ne({
+    editor: e,
+    licenseKey: u,
+    plan: L.startup,
+    pluginName: ce,
+    cleanup: () => {
+      n.remove(c), t.removeType(c);
+    }
+  });
+}, ae = oe(re);
+export {
+  ae as default
+};