@grapesjs/studio-sdk-plugins 1.0.26 → 1.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/iconifyComponent/index.cjs.js +2 -2
- package/dist/iconifyComponent/index.es.js +185 -179
- package/dist/iconifyComponent/index.umd.js +2 -2
- package/dist/iconifyComponent/utils.d.ts +4 -0
- package/dist/index.cjs.js +43 -43
- package/dist/index.es.js +1584 -1578
- package/dist/index.umd.js +44 -44
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const _="app.grapesjs.com",R="app-stage.grapesjs.com",k=[_,R,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],B="license:check:start",H="license:check:end",F=()=>typeof window<"u",C=({isDev:e,isStage:t})=>`${e?"":`https://${t?R:_}`}/api`,W=()=>{const e=F()&&window.location.hostname;return!!e&&(k.includes(e)||k.some(t=>e.endsWith(t)))};async function K({path:e,baseApiUrl:t,method:o="GET",headers:s={},params:u,body:g}){const r=`${t||C({isDev:!1,isStage:!1})}${e}`,n={method:o,headers:{"Content-Type":"application/json",...s}};g&&(n.body=JSON.stringify(g));const c=u?new URLSearchParams(u).toString():"",i=c?`?${c}`:"",p=await fetch(`${r}${i}`,n);if(!p.ok)throw new Error(`HTTP error! status: ${p.status}`);return p.json()}var v=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(v||{}),D=(e=>(e.Info="info",e.Error="error",e.Success="success",e.Warning="warning",e))(D||{}),L=(e=>(e.toastAdd="studio:toastAdd",e.toastRemove="studio:toastRemove",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.fontManagerOpen="studio:fontManagerOpen",e.menuFontLoad="studio:menuFontLoad",e.toggleStateDataSource="studio:toggleStateDataSource",e.getStateDataSource="studio:getStateDataSource",e.dataSourceSetGlobalData="studio:dataSourceSetGlobalData",e.dataSourceSetImporter="studio:dataSourceSetImporter",e.dataSourceSetExporter="studio:dataSourceSetExporter",e.setDragAbsolute="studio:setDragAbsolute",e))(L||{});const O={[v.free]:0,[v.startup]:10,[v.business]:20,[v.enterprise]:30};function S(e){const t=e;return t.init=o=>s=>e(s,o),t}const V=e=>S(e);async function Y({editor:e,plan:t,pluginName:o,licenseKey:s,cleanup:u}){let g="",a=!1;const r=W(),n=i=>{console.warn("Cleanup plugin:",o,"Reason:",i),u()},c=(i={})=>{var y;const{error:p,sdkLicense:h}=i,l=(y=i.plan)==null?void 0:y.category;if(!(h||i.license)||p)n(p||"Invalid license");else if(l){const b=O[t],d=O[l];b>d&&n({pluginRequiredPlan:t,licensePlan:l})}};e.on(B,i=>{g=i==null?void 0:i.baseApiUrl,a=!0}),e.on(H,i=>{c(i)}),setTimeout(async()=>{if(!a){if(r)return;if(s){const i=await z({licenseKey:s,pluginName:o,baseApiUrl:g});i&&c(i)}else n("The `licenseKey` option not provided")}},2e3)}async function z(e){const{licenseKey:t,pluginName:o,baseApiUrl:s}=e;try{return(await K({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:o}})).result||{}}catch(u){return console.error("Error during SDK license check:",u),!1}}const q=(e,t)=>{var o;return!!((o=e==null?void 0:e.hasAttribute)!=null&&o.call(e,t))},J="iconifyComponent",m=v.startup,X={ratioDefault:!0,tc:!1,cl:!1,cr:!1,bc:!1},I=`<svg viewBox="0 0 24 24">
|
|
2
2
|
<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" />
|
|
3
|
-
</svg>`,$="layout-icon-picker",
|
|
3
|
+
</svg>`,$="layout-icon-picker",Z="icons-layout-",U="icons-list-layout",M="gs-iconify-picker",P="__iconify_collection",Q="https://api.iconify.design",E=new Map;let T;const ee=({collectionId:e})=>`https://cdn.jsdelivr.net/npm/@iconify-json/${e}@latest/icons.json`;async function N({collectionId:e,editor:t}){try{if(E.has(e))return E.get(e);const o=await fetch(ee({collectionId:e}));if(!o.ok)throw new Error(`Failed to fetch collection: ${o.statusText}`);const s=await o.json();return E.set(e,s),s}catch(o){console.error("Error fetching collection",o),t.runCommand(L.toastAdd,ce());return}}async function te({collectionIds:e,editor:t}){try{if(T)return T;const o=e?`?prefixes=${e.join(",")}`:"",s=await fetch(`${Q}/collections${o}`);if(!s.ok)throw new Error(`Failed to fetch collections: ${s.statusText}`);return T=await s.json(),T}catch(o){console.error("Error fetching collections",o),t.runCommand(L.toastAdd,j());return}}function x(){return{type:"button",label:"Open Icon Picker",name:"onActive",changeProp:!0,command(e){var t;(t=e.getSelected())==null||t.trigger("active")}}}async function oe({collectionIds:e,editor:t,component:o}){const s=await te({collectionIds:e,editor:t});if(!s)return;const u=({icon:n,collectionId:c,iconId:i})=>{o.components(n),o.set({collectionId:c,iconId:i})},g=Object.entries(s).map(([n,c])=>({id:n,...c})).sort((n,c)=>n.name.localeCompare(c.name)),a=o.get("collectionId")??g[0].id;t.runCommand(L.layoutToggle,{id:$,placer:{type:"dialog",size:"l",title:"Select Icon"},header:!1,layout:{type:"column",style:{height:500,gap:10},children:[se({collectionsList:g,collectionId:a,editor:t,handleClick:u}),{id:U,type:"column",grow:!0}]}});const r=await N({collectionId:a,editor:t});r&&(G({editor:t,collection:r}),A({editor:t,collection:r,handleClick:u,collectionId:a}))}function G({editor:e,collection:t}){e.em.set(P,t)}function ne(e){return e.em.get(P)}function A(e){const{editor:t}=e;t.runCommand(L.layoutUpdate,{id:Z,layout:ie(e),header:!1,style:{height:"100%"},placer:{type:"static",layoutId:U}})}function se(e){const{collectionsList:t,collectionId:o,editor:s,handleClick:u}=e,g=t.map(({id:a,name:r,total:n})=>({id:a,label:`${r} (${n})`})).sort((a,r)=>a.label.localeCompare(r.label));return{type:"column",style:{gap:10},className:`${M}__header`,children:[{type:"selectField",value:o,options:g,emptyState:"Select an icon collection",onChange:async({setState:a,value:r})=>{const n=await N({collectionId:r,editor:s});n&&(a({value:r}),G({editor:s,collection:n}),A({editor:s,collection:n,handleClick:u,collectionId:r}))}},{type:"inputField",value:"",placeholder:"Search icons inside collection...",editorEvents:{[`change:${P}`]:({setState:a})=>a({value:""})},onInput:({setState:a,value:r,editor:n})=>{const c=ne(n);if(!c)return;const i=Object.fromEntries(Object.entries(c.icons).filter(([p])=>p.includes(r)));a({value:r}),A({editor:n,collection:c,handleClick:u,collectionId:o,collectionFiltered:{...c,icons:i}})}}]}}function ie({collection:e,collectionFiltered:t,handleClick:o}){const{height:s=24,width:u=24,icons:g,prefix:a}=t||e,r=Object.entries(g).map(([n,c])=>({name:n,...c}),{});return{type:"column",className:`${M}__content`,style:{height:"100%"},children:{type:"virtualList",items:r,itemLayout:({item:n})=>({type:"custom",render:c=>{const{editor:i,addEl:p,removeEl:h}=c,l=document.createElementNS("http://www.w3.org/2000/svg","svg");l.setAttribute("xmlns","http://www.w3.org/2000/svg"),l.innerHTML=n.body;const f=n.width||u,y=n.height||s;l.setAttribute("viewBox",`0 0 ${f} ${y}`),l.style.cssText="width: 48px; height: 48px; cursor: pointer; border-radius: 4px; transition: padding 0.1s ease-in-out;";const b=[["click",()=>{const d=l.cloneNode(!0);d.removeAttribute("style");const w=d.outerHTML;o({icon:w,collectionId:a,iconId:n.name}),i==null||i.runCommand(L.layoutRemove,{id:$})}],["pointerover",()=>{l.style.border="2px solid currentColor",l.style.padding="4px"}],["pointerout",()=>{l.style.border="",l.style.padding=""}]];return b.forEach(([d,w])=>l.addEventListener(d,w)),p(l),()=>{b.forEach(([d,w])=>l.removeEventListener(d,w)),h(l)}}})}}}function j(){return{id:"toast-error-getCollections",header:"Error",content:"Error fetching collections",variant:D.Error}}function ce(){return{...j(),id:"toast-error-getCollection",content:"Error fetching collection"}}const re=function(e,t={}){var l;const{Components:o,Blocks:s}=e,{collections:u,extendIconComponent:g=!0,licenseKey:a,block:r={}}=t,n="icon",c="iconify",i="Iconify",p="data-type-iconify",h={events:()=>({dblclick:"onActive"}),onActive(){oe({collectionIds:u,editor:e,component:this.model})}};if(o.addType(c,{block:r&&{label:i,media:I,content:{type:c},category:"Extra",activate:!0,...r},isComponent:f=>q(f,p),model:{defaults:{name:i,icon:I,droppable:!1,attributes:{[p]:!0},resizable:X,components:I,style:{width:"50px",height:"50px"},traits:[x()]},init(){this.listenTo(this.components(),"change add",this.disableLayers),this.disableLayers()},disableLayers(){this.components().forEach(f=>f.set({layerable:!1,locked:!0}))}},view:h}),g){const f=(l=o.getType(n))==null?void 0:l.model,[y,b,...d]=f.getDefaults().traits;o.addType(n,{model:{defaults:{traits:[y,b,x(),...d]}},view:h})}Y({editor:e,licenseKey:a,plan:m,pluginName:J,cleanup:()=>{s.remove(c),o.removeType(c)}})},ae=V(re);module.exports=ae;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
1
|
+
const _ = "app.grapesjs.com", R = "app-stage.grapesjs.com", k = [
|
|
2
|
+
_,
|
|
3
3
|
R,
|
|
4
4
|
"localhost",
|
|
5
5
|
"127.0.0.1",
|
|
@@ -9,144 +9,144 @@ const x = "app.grapesjs.com", R = "app-stage.grapesjs.com", P = [
|
|
|
9
9
|
// For stackblitz.com demos
|
|
10
10
|
"-sandpack.codesandbox.io"
|
|
11
11
|
// For Sandpack demos
|
|
12
|
-
],
|
|
13
|
-
const e =
|
|
14
|
-
return !!e && (
|
|
12
|
+
], B = "license:check:start", H = "license:check:end", F = () => typeof window < "u", C = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? R : _}`}/api`, W = () => {
|
|
13
|
+
const e = F() && window.location.hostname;
|
|
14
|
+
return !!e && (k.includes(e) || k.some((t) => e.endsWith(t)));
|
|
15
15
|
};
|
|
16
|
-
async function
|
|
16
|
+
async function K({
|
|
17
17
|
path: e,
|
|
18
|
-
baseApiUrl:
|
|
19
|
-
method:
|
|
20
|
-
headers:
|
|
21
|
-
params:
|
|
18
|
+
baseApiUrl: t,
|
|
19
|
+
method: o = "GET",
|
|
20
|
+
headers: s = {},
|
|
21
|
+
params: u,
|
|
22
22
|
body: g
|
|
23
23
|
}) {
|
|
24
|
-
const r = `${
|
|
25
|
-
method:
|
|
24
|
+
const r = `${t || C({ isDev: !1, isStage: !1 })}${e}`, n = {
|
|
25
|
+
method: o,
|
|
26
26
|
headers: {
|
|
27
27
|
"Content-Type": "application/json",
|
|
28
|
-
...
|
|
28
|
+
...s
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
|
-
g && (
|
|
32
|
-
const c =
|
|
33
|
-
if (!
|
|
34
|
-
throw new Error(`HTTP error! status: ${
|
|
35
|
-
return
|
|
31
|
+
g && (n.body = JSON.stringify(g));
|
|
32
|
+
const c = u ? new URLSearchParams(u).toString() : "", i = c ? `?${c}` : "", p = await fetch(`${r}${i}`, n);
|
|
33
|
+
if (!p.ok)
|
|
34
|
+
throw new Error(`HTTP error! status: ${p.status}`);
|
|
35
|
+
return p.json();
|
|
36
36
|
}
|
|
37
|
-
var
|
|
38
|
-
const
|
|
39
|
-
[
|
|
40
|
-
[
|
|
41
|
-
[
|
|
42
|
-
[
|
|
37
|
+
var v = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(v || {}), D = /* @__PURE__ */ ((e) => (e.Info = "info", e.Error = "error", e.Success = "success", e.Warning = "warning", e))(D || {}), L = /* @__PURE__ */ ((e) => (e.toastAdd = "studio:toastAdd", e.toastRemove = "studio:toastRemove", 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.fontManagerOpen = "studio:fontManagerOpen", e.menuFontLoad = "studio:menuFontLoad", e.toggleStateDataSource = "studio:toggleStateDataSource", e.getStateDataSource = "studio:getStateDataSource", e.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", e.dataSourceSetImporter = "studio:dataSourceSetImporter", e.dataSourceSetExporter = "studio:dataSourceSetExporter", e.setDragAbsolute = "studio:setDragAbsolute", e))(L || {});
|
|
38
|
+
const O = {
|
|
39
|
+
[v.free]: 0,
|
|
40
|
+
[v.startup]: 10,
|
|
41
|
+
[v.business]: 20,
|
|
42
|
+
[v.enterprise]: 30
|
|
43
43
|
};
|
|
44
|
-
function
|
|
45
|
-
const
|
|
46
|
-
return
|
|
44
|
+
function S(e) {
|
|
45
|
+
const t = e;
|
|
46
|
+
return t.init = (o) => (s) => e(s, o), t;
|
|
47
47
|
}
|
|
48
|
-
const
|
|
49
|
-
async function
|
|
48
|
+
const V = (e) => /* @__PURE__ */ S(e);
|
|
49
|
+
async function Y({
|
|
50
50
|
editor: e,
|
|
51
|
-
plan:
|
|
52
|
-
pluginName:
|
|
53
|
-
licenseKey:
|
|
54
|
-
cleanup:
|
|
51
|
+
plan: t,
|
|
52
|
+
pluginName: o,
|
|
53
|
+
licenseKey: s,
|
|
54
|
+
cleanup: u
|
|
55
55
|
}) {
|
|
56
|
-
let g = "",
|
|
57
|
-
const r =
|
|
58
|
-
console.warn("Cleanup plugin:",
|
|
56
|
+
let g = "", a = !1;
|
|
57
|
+
const r = W(), n = (i) => {
|
|
58
|
+
console.warn("Cleanup plugin:", o, "Reason:", i), u();
|
|
59
59
|
}, c = (i = {}) => {
|
|
60
60
|
var y;
|
|
61
|
-
const { error:
|
|
62
|
-
if (!(h || i.license) ||
|
|
63
|
-
|
|
64
|
-
else if (
|
|
65
|
-
const b =
|
|
66
|
-
b >
|
|
61
|
+
const { error: p, sdkLicense: h } = i, l = (y = i.plan) == null ? void 0 : y.category;
|
|
62
|
+
if (!(h || i.license) || p)
|
|
63
|
+
n(p || "Invalid license");
|
|
64
|
+
else if (l) {
|
|
65
|
+
const b = O[t], d = O[l];
|
|
66
|
+
b > d && n({ pluginRequiredPlan: t, licensePlan: l });
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
|
-
e.on(
|
|
70
|
-
g = i == null ? void 0 : i.baseApiUrl,
|
|
69
|
+
e.on(B, (i) => {
|
|
70
|
+
g = i == null ? void 0 : i.baseApiUrl, a = !0;
|
|
71
71
|
}), e.on(H, (i) => {
|
|
72
72
|
c(i);
|
|
73
73
|
}), setTimeout(async () => {
|
|
74
|
-
if (!
|
|
74
|
+
if (!a) {
|
|
75
75
|
if (r) return;
|
|
76
|
-
if (
|
|
77
|
-
const i = await
|
|
76
|
+
if (s) {
|
|
77
|
+
const i = await z({ licenseKey: s, pluginName: o, baseApiUrl: g });
|
|
78
78
|
i && c(i);
|
|
79
79
|
} else
|
|
80
|
-
|
|
80
|
+
n("The `licenseKey` option not provided");
|
|
81
81
|
}
|
|
82
82
|
}, 2e3);
|
|
83
83
|
}
|
|
84
|
-
async function
|
|
85
|
-
const { licenseKey:
|
|
84
|
+
async function z(e) {
|
|
85
|
+
const { licenseKey: t, pluginName: o, baseApiUrl: s } = e;
|
|
86
86
|
try {
|
|
87
|
-
return (await
|
|
88
|
-
baseApiUrl:
|
|
89
|
-
path: `/sdk/${
|
|
87
|
+
return (await K({
|
|
88
|
+
baseApiUrl: s,
|
|
89
|
+
path: `/sdk/${t || "na"}`,
|
|
90
90
|
method: "POST",
|
|
91
91
|
params: {
|
|
92
92
|
d: window.location.hostname,
|
|
93
|
-
pn:
|
|
93
|
+
pn: o
|
|
94
94
|
}
|
|
95
95
|
})).result || {};
|
|
96
|
-
} catch (
|
|
97
|
-
return console.error("Error during SDK license check:",
|
|
96
|
+
} catch (u) {
|
|
97
|
+
return console.error("Error during SDK license check:", u), !1;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
-
const
|
|
101
|
-
var
|
|
102
|
-
return !!((
|
|
103
|
-
},
|
|
100
|
+
const q = (e, t) => {
|
|
101
|
+
var o;
|
|
102
|
+
return !!((o = e == null ? void 0 : e.hasAttribute) != null && o.call(e, t));
|
|
103
|
+
}, J = "iconifyComponent", m = v.startup, X = { ratioDefault: !0, tc: !1, cl: !1, cr: !1, bc: !1 }, I = `<svg viewBox="0 0 24 24">
|
|
104
104
|
<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" />
|
|
105
|
-
</svg>`, $ = "layout-icon-picker",
|
|
105
|
+
</svg>`, $ = "layout-icon-picker", Z = "icons-layout-", U = "icons-list-layout", M = "gs-iconify-picker", P = "__iconify_collection", Q = "https://api.iconify.design", E = /* @__PURE__ */ new Map();
|
|
106
106
|
let T;
|
|
107
|
-
const
|
|
108
|
-
async function N({ collectionId: e, editor:
|
|
107
|
+
const ee = ({ collectionId: e }) => `https://cdn.jsdelivr.net/npm/@iconify-json/${e}@latest/icons.json`;
|
|
108
|
+
async function N({ collectionId: e, editor: t }) {
|
|
109
109
|
try {
|
|
110
|
-
if (
|
|
111
|
-
const
|
|
112
|
-
if (!
|
|
113
|
-
const
|
|
114
|
-
return
|
|
115
|
-
} catch (
|
|
116
|
-
console.error("Error fetching collection",
|
|
110
|
+
if (E.has(e)) return E.get(e);
|
|
111
|
+
const o = await fetch(ee({ collectionId: e }));
|
|
112
|
+
if (!o.ok) throw new Error(`Failed to fetch collection: ${o.statusText}`);
|
|
113
|
+
const s = await o.json();
|
|
114
|
+
return E.set(e, s), s;
|
|
115
|
+
} catch (o) {
|
|
116
|
+
console.error("Error fetching collection", o), t.runCommand(L.toastAdd, ce());
|
|
117
117
|
return;
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
|
-
async function
|
|
120
|
+
async function te({ collectionIds: e, editor: t }) {
|
|
121
121
|
try {
|
|
122
122
|
if (T) return T;
|
|
123
|
-
const
|
|
124
|
-
if (!
|
|
125
|
-
return T = await
|
|
126
|
-
} catch (
|
|
127
|
-
console.error("Error fetching collections",
|
|
123
|
+
const o = e ? `?prefixes=${e.join(",")}` : "", s = await fetch(`${Q}/collections${o}`);
|
|
124
|
+
if (!s.ok) throw new Error(`Failed to fetch collections: ${s.statusText}`);
|
|
125
|
+
return T = await s.json(), T;
|
|
126
|
+
} catch (o) {
|
|
127
|
+
console.error("Error fetching collections", o), t.runCommand(L.toastAdd, j());
|
|
128
128
|
return;
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
|
-
function
|
|
131
|
+
function x() {
|
|
132
132
|
return {
|
|
133
133
|
type: "button",
|
|
134
134
|
label: "Open Icon Picker",
|
|
135
135
|
name: "onActive",
|
|
136
136
|
changeProp: !0,
|
|
137
137
|
command(e) {
|
|
138
|
-
var
|
|
139
|
-
(
|
|
138
|
+
var t;
|
|
139
|
+
(t = e.getSelected()) == null || t.trigger("active");
|
|
140
140
|
}
|
|
141
141
|
};
|
|
142
142
|
}
|
|
143
|
-
async function
|
|
144
|
-
const
|
|
145
|
-
if (!
|
|
146
|
-
const
|
|
147
|
-
|
|
148
|
-
}, g = Object.entries(
|
|
149
|
-
|
|
143
|
+
async function oe({ collectionIds: e, editor: t, component: o }) {
|
|
144
|
+
const s = await te({ collectionIds: e, editor: t });
|
|
145
|
+
if (!s) return;
|
|
146
|
+
const u = ({ icon: n, collectionId: c, iconId: i }) => {
|
|
147
|
+
o.components(n), o.set({ collectionId: c, iconId: i });
|
|
148
|
+
}, g = Object.entries(s).map(([n, c]) => ({ id: n, ...c })).sort((n, c) => n.name.localeCompare(c.name)), a = o.get("collectionId") ?? g[0].id;
|
|
149
|
+
t.runCommand(L.layoutToggle, {
|
|
150
150
|
id: $,
|
|
151
151
|
placer: { type: "dialog", size: "l", title: "Select Icon" },
|
|
152
152
|
header: !1,
|
|
@@ -156,40 +156,40 @@ async function te({ collectionIds: e, editor: o, component: t }) {
|
|
|
156
156
|
children: [
|
|
157
157
|
se({
|
|
158
158
|
collectionsList: g,
|
|
159
|
-
collectionId:
|
|
160
|
-
editor:
|
|
161
|
-
handleClick:
|
|
159
|
+
collectionId: a,
|
|
160
|
+
editor: t,
|
|
161
|
+
handleClick: u
|
|
162
162
|
}),
|
|
163
|
-
{ id:
|
|
163
|
+
{ id: U, type: "column", grow: !0 }
|
|
164
164
|
]
|
|
165
165
|
}
|
|
166
166
|
});
|
|
167
|
-
const r = await N({ collectionId:
|
|
168
|
-
r &&
|
|
169
|
-
editor:
|
|
167
|
+
const r = await N({ collectionId: a, editor: t });
|
|
168
|
+
r && (G({ editor: t, collection: r }), A({
|
|
169
|
+
editor: t,
|
|
170
170
|
collection: r,
|
|
171
|
-
handleClick:
|
|
172
|
-
collectionId:
|
|
173
|
-
});
|
|
171
|
+
handleClick: u,
|
|
172
|
+
collectionId: a
|
|
173
|
+
}));
|
|
174
174
|
}
|
|
175
|
-
function
|
|
176
|
-
e.em.set(
|
|
175
|
+
function G({ editor: e, collection: t }) {
|
|
176
|
+
e.em.set(P, t);
|
|
177
177
|
}
|
|
178
178
|
function ne(e) {
|
|
179
|
-
return e.em.get(
|
|
179
|
+
return e.em.get(P);
|
|
180
180
|
}
|
|
181
|
-
function
|
|
182
|
-
const { editor:
|
|
183
|
-
|
|
181
|
+
function A(e) {
|
|
182
|
+
const { editor: t } = e;
|
|
183
|
+
t.runCommand(L.layoutUpdate, {
|
|
184
|
+
id: Z,
|
|
184
185
|
layout: ie(e),
|
|
185
186
|
header: !1,
|
|
186
187
|
style: { height: "100%" },
|
|
187
|
-
placer: { type: "static", layoutId:
|
|
188
|
-
};
|
|
189
|
-
o.runCommand(f.layoutRemove, { id: t.id, force: !0 }), setTimeout(() => o.runCommand(f.layoutAdd, t), 10);
|
|
188
|
+
placer: { type: "static", layoutId: U }
|
|
189
|
+
});
|
|
190
190
|
}
|
|
191
191
|
function se(e) {
|
|
192
|
-
const { collectionsList:
|
|
192
|
+
const { collectionsList: t, collectionId: o, editor: s, handleClick: u } = e, g = t.map(({ id: a, name: r, total: n }) => ({ id: a, label: `${r} (${n})` })).sort((a, r) => a.label.localeCompare(r.label));
|
|
193
193
|
return {
|
|
194
194
|
type: "column",
|
|
195
195
|
style: { gap: 10 },
|
|
@@ -197,15 +197,15 @@ function se(e) {
|
|
|
197
197
|
children: [
|
|
198
198
|
{
|
|
199
199
|
type: "selectField",
|
|
200
|
-
value:
|
|
200
|
+
value: o,
|
|
201
201
|
options: g,
|
|
202
202
|
emptyState: "Select an icon collection",
|
|
203
|
-
onChange: async ({ setState:
|
|
204
|
-
const
|
|
205
|
-
|
|
206
|
-
editor:
|
|
207
|
-
collection:
|
|
208
|
-
handleClick:
|
|
203
|
+
onChange: async ({ setState: a, value: r }) => {
|
|
204
|
+
const n = await N({ collectionId: r, editor: s });
|
|
205
|
+
n && (a({ value: r }), G({ editor: s, collection: n }), A({
|
|
206
|
+
editor: s,
|
|
207
|
+
collection: n,
|
|
208
|
+
handleClick: u,
|
|
209
209
|
collectionId: r
|
|
210
210
|
}));
|
|
211
211
|
}
|
|
@@ -215,19 +215,19 @@ function se(e) {
|
|
|
215
215
|
value: "",
|
|
216
216
|
placeholder: "Search icons inside collection...",
|
|
217
217
|
editorEvents: {
|
|
218
|
-
[`change:${
|
|
218
|
+
[`change:${P}`]: ({ setState: a }) => a({ value: "" })
|
|
219
219
|
},
|
|
220
|
-
onInput: ({ setState:
|
|
221
|
-
const c = ne(
|
|
220
|
+
onInput: ({ setState: a, value: r, editor: n }) => {
|
|
221
|
+
const c = ne(n);
|
|
222
222
|
if (!c) return;
|
|
223
223
|
const i = Object.fromEntries(
|
|
224
|
-
Object.entries(c.icons).filter(([
|
|
224
|
+
Object.entries(c.icons).filter(([p]) => p.includes(r))
|
|
225
225
|
);
|
|
226
|
-
|
|
227
|
-
editor:
|
|
226
|
+
a({ value: r }), A({
|
|
227
|
+
editor: n,
|
|
228
228
|
collection: c,
|
|
229
|
-
handleClick:
|
|
230
|
-
collectionId:
|
|
229
|
+
handleClick: u,
|
|
230
|
+
collectionId: o,
|
|
231
231
|
collectionFiltered: { ...c, icons: i }
|
|
232
232
|
});
|
|
233
233
|
}
|
|
@@ -237,10 +237,10 @@ function se(e) {
|
|
|
237
237
|
}
|
|
238
238
|
function ie({
|
|
239
239
|
collection: e,
|
|
240
|
-
collectionFiltered:
|
|
241
|
-
handleClick:
|
|
240
|
+
collectionFiltered: t,
|
|
241
|
+
handleClick: o
|
|
242
242
|
}) {
|
|
243
|
-
const { height:
|
|
243
|
+
const { height: s = 24, width: u = 24, icons: g, prefix: a } = t || e, r = Object.entries(g).map(([n, c]) => ({ name: n, ...c }), {});
|
|
244
244
|
return {
|
|
245
245
|
type: "column",
|
|
246
246
|
className: `${M}__content`,
|
|
@@ -248,113 +248,119 @@ function ie({
|
|
|
248
248
|
children: {
|
|
249
249
|
type: "virtualList",
|
|
250
250
|
items: r,
|
|
251
|
-
itemLayout: ({ item:
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
251
|
+
itemLayout: ({ item: n }) => ({
|
|
252
|
+
type: "custom",
|
|
253
|
+
render: (c) => {
|
|
254
|
+
const { editor: i, addEl: p, removeEl: h } = c, l = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
255
|
+
l.setAttribute("xmlns", "http://www.w3.org/2000/svg"), l.innerHTML = n.body;
|
|
256
|
+
const f = n.width || u, y = n.height || s;
|
|
257
|
+
l.setAttribute("viewBox", `0 0 ${f} ${y}`), l.style.cssText = "width: 48px; height: 48px; cursor: pointer; border-radius: 4px; transition: padding 0.1s ease-in-out;";
|
|
258
|
+
const b = [
|
|
259
|
+
[
|
|
260
|
+
"click",
|
|
261
|
+
() => {
|
|
262
|
+
const d = l.cloneNode(!0);
|
|
263
|
+
d.removeAttribute("style");
|
|
264
|
+
const w = d.outerHTML;
|
|
265
|
+
o({ icon: w, collectionId: a, iconId: n.name }), i == null || i.runCommand(L.layoutRemove, { id: $ });
|
|
266
|
+
}
|
|
267
|
+
],
|
|
268
|
+
[
|
|
269
|
+
"pointerover",
|
|
270
|
+
() => {
|
|
271
|
+
l.style.border = "2px solid currentColor", l.style.padding = "4px";
|
|
272
|
+
}
|
|
273
|
+
],
|
|
274
|
+
[
|
|
275
|
+
"pointerout",
|
|
276
|
+
() => {
|
|
277
|
+
l.style.border = "", l.style.padding = "";
|
|
278
|
+
}
|
|
279
|
+
]
|
|
280
|
+
];
|
|
281
|
+
return b.forEach(([d, w]) => l.addEventListener(d, w)), p(l), () => {
|
|
282
|
+
b.forEach(([d, w]) => l.removeEventListener(d, w)), h(l);
|
|
283
|
+
};
|
|
273
284
|
}
|
|
274
|
-
|
|
285
|
+
})
|
|
275
286
|
}
|
|
276
287
|
};
|
|
277
288
|
}
|
|
278
|
-
function
|
|
279
|
-
const t = e / o;
|
|
280
|
-
let n = 48, l = 48;
|
|
281
|
-
return t > 1 ? l = 48 / t : t < 1 && (n = 48 * t), { cssWidth: n, cssHeight: l };
|
|
282
|
-
}
|
|
283
|
-
function U() {
|
|
289
|
+
function j() {
|
|
284
290
|
return {
|
|
285
291
|
id: "toast-error-getCollections",
|
|
286
292
|
header: "Error",
|
|
287
293
|
content: "Error fetching collections",
|
|
288
|
-
variant:
|
|
294
|
+
variant: D.Error
|
|
289
295
|
};
|
|
290
296
|
}
|
|
291
|
-
function
|
|
297
|
+
function ce() {
|
|
292
298
|
return {
|
|
293
|
-
...
|
|
299
|
+
...j(),
|
|
294
300
|
id: "toast-error-getCollection",
|
|
295
301
|
content: "Error fetching collection"
|
|
296
302
|
};
|
|
297
303
|
}
|
|
298
|
-
const
|
|
299
|
-
var
|
|
300
|
-
const { Components:
|
|
304
|
+
const re = function(e, t = {}) {
|
|
305
|
+
var l;
|
|
306
|
+
const { Components: o, Blocks: s } = e, { collections: u, extendIconComponent: g = !0, licenseKey: a, block: r = {} } = t, n = "icon", c = "iconify", i = "Iconify", p = "data-type-iconify", h = {
|
|
301
307
|
events: () => ({
|
|
302
308
|
dblclick: "onActive"
|
|
303
309
|
}),
|
|
304
310
|
onActive() {
|
|
305
|
-
|
|
311
|
+
oe({ collectionIds: u, editor: e, component: this.model });
|
|
306
312
|
}
|
|
307
313
|
};
|
|
308
|
-
if (
|
|
314
|
+
if (o.addType(c, {
|
|
309
315
|
block: r && {
|
|
310
316
|
label: i,
|
|
311
|
-
media:
|
|
317
|
+
media: I,
|
|
312
318
|
content: { type: c },
|
|
313
319
|
category: "Extra",
|
|
314
320
|
activate: !0,
|
|
315
321
|
...r
|
|
316
322
|
},
|
|
317
|
-
isComponent: (
|
|
323
|
+
isComponent: (f) => q(f, p),
|
|
318
324
|
model: {
|
|
319
325
|
defaults: {
|
|
320
326
|
name: i,
|
|
321
|
-
icon:
|
|
327
|
+
icon: I,
|
|
322
328
|
droppable: !1,
|
|
323
|
-
attributes: { [
|
|
324
|
-
resizable:
|
|
325
|
-
components:
|
|
329
|
+
attributes: { [p]: !0 },
|
|
330
|
+
resizable: X,
|
|
331
|
+
components: I,
|
|
326
332
|
style: { width: "50px", height: "50px" },
|
|
327
|
-
traits: [
|
|
333
|
+
traits: [x()]
|
|
328
334
|
},
|
|
329
335
|
init() {
|
|
330
336
|
this.listenTo(this.components(), "change add", this.disableLayers), this.disableLayers();
|
|
331
337
|
},
|
|
332
338
|
disableLayers() {
|
|
333
|
-
this.components().forEach((
|
|
339
|
+
this.components().forEach((f) => f.set({ layerable: !1, locked: !0 }));
|
|
334
340
|
}
|
|
335
341
|
},
|
|
336
342
|
view: h
|
|
337
343
|
}), g) {
|
|
338
|
-
const
|
|
339
|
-
|
|
344
|
+
const f = (l = o.getType(n)) == null ? void 0 : l.model, [y, b, ...d] = f.getDefaults().traits;
|
|
345
|
+
o.addType(n, {
|
|
340
346
|
model: {
|
|
341
347
|
defaults: {
|
|
342
|
-
traits: [y, b,
|
|
348
|
+
traits: [y, b, x(), ...d]
|
|
343
349
|
}
|
|
344
350
|
},
|
|
345
351
|
view: h
|
|
346
352
|
});
|
|
347
353
|
}
|
|
348
|
-
|
|
354
|
+
Y({
|
|
349
355
|
editor: e,
|
|
350
|
-
licenseKey:
|
|
351
|
-
plan:
|
|
352
|
-
pluginName:
|
|
356
|
+
licenseKey: a,
|
|
357
|
+
plan: m,
|
|
358
|
+
pluginName: J,
|
|
353
359
|
cleanup: () => {
|
|
354
|
-
|
|
360
|
+
s.remove(c), o.removeType(c);
|
|
355
361
|
}
|
|
356
362
|
});
|
|
357
|
-
},
|
|
363
|
+
}, ae = V(re);
|
|
358
364
|
export {
|
|
359
|
-
|
|
365
|
+
ae as default
|
|
360
366
|
};
|