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

package/dist/flexComponent/index.umd.js

@@ -0,0 +1,33 @@
+(function(T,L){typeof exports=="object"&&typeof module<"u"?module.exports=L(require("grapesjs")):typeof define=="function"&&define.amd?define(["grapesjs"],L):(T=typeof globalThis<"u"?globalThis:T||self,T.StudioSdkPlugins_flexComponent=L())})(this,function(){"use strict";const T="app.grapesjs.com",L="app-stage.grapesjs.com",oe=[T,L,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],Se="license:check:start",be="license:check:end",Ce=()=>typeof window<"u",Pe=({isDev:n,isStage:e})=>`${n?"":`https://${e?L:T}`}/api`,ze=()=>{const n=Ce()&&window.location.hostname;return!!n&&(oe.includes(n)||oe.some(e=>n.endsWith(e)))};function xe(n){return typeof n=="function"}async function we({path:n,baseApiUrl:e,method:t="GET",headers:s={},params:i,body:a}){const l=`${e||Pe({isDev:!1,isStage:!1})}${n}`,c={method:t,headers:{"Content-Type":"application/json",...s}};a&&(c.body=JSON.stringify(a));const f=i?new URLSearchParams(i).toString():"",p=f?`?${f}`:"",u=await fetch(`${l}${p}`,c);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.json()}var $=(n=>(n.free="free",n.startup="startup",n.business="business",n.enterprise="enterprise",n))($||{}),re=(n=>(n.web="web",n.email="email",n))(re||{});const ce={[$.free]:0,[$.startup]:10,[$.business]:20,[$.enterprise]:30};function ve(n){const e=n;return e.init=t=>s=>n(s,t),e}const Ie=n=>ve(n);async function Re({editor:n,plan:e,pluginName:t,licenseKey:s,cleanup:i}){let a="",o=!1;const l=ze(),c=p=>{console.warn("Cleanup plugin:",t,"Reason:",p),i()},f=(p={})=>{var S;const{error:u,sdkLicense:g}=p,v=(S=p.plan)==null?void 0:S.category;if(!(g||p.license)||u)c(u||"Invalid license");else if(v){const I=ce[e],R=ce[v];I>R&&c({pluginRequiredPlan:e,licensePlan:v})}};n.on(Se,p=>{a=p==null?void 0:p.baseApiUrl,o=!0}),n.on(be,p=>{f(p)}),setTimeout(async()=>{if(!o){if(l)return;if(s){const p=await Ee({licenseKey:s,pluginName:t,baseApiUrl:a});p&&f(p)}else c("The `licenseKey` option not provided")}},2e3)}async function Ee(n){const{licenseKey:e,pluginName:t,baseApiUrl:s}=n;try{return(await we({baseApiUrl:s,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(i){return console.error("Error during SDK license check:",i),!1}}const le=n=>e=>{var t;return((t=e.getAttribute)==null?void 0:t.call(e,J))===n},Ge=(...n)=>e=>n.some(t=>e.is(t)),Te=(...n)=>(e,t)=>n.some(s=>t.is(s)),pe="gjs-plg-",J="data-type-role",B=class B{constructor(e){this.config=e}getSize(e){var t;return(t=this.config)!=null&&t.getSize?this.config.getSize(e):ne(e.componentColumn,B.CSS_FLEX_BASIS)}setSize(e){var t;if((t=this.config)!=null&&t.setSize)this.config.setSize(e);else{const{componentColumn:s,sizeValue:i,partial:a}=e;s.addStyle({[B.CSS_FLEX_BASIS]:i},{partial:a})}}};B.CSS_FLEX_BASIS="flex-basis";let q=B;const D=class D{constructor(e){this.config=e}isGapSupported(){return!0}getGap(e){var t;return(t=this.config)!=null&&t.getGap?this.config.getGap(e):ne(e.componentRow,D.CSS_GAP)}setGap(e){var t;if((t=this.config)!=null&&t.setGap)this.config.setGap(e);else{const{componentRow:s,gapValue:i,partial:a}=e;s.addStyle({[D.CSS_GAP]:i},{partial:a})}}};D.CSS_GAP="gap";let Z=D;const U=class U{constructor(e){this.config=e}getParentSize(e){var a;if((a=this.config)!=null&&a.getParentSize)return this.config.getParentSize(e);const{componentRow:t,isVertical:s}=e,i=t.getEl();return i?s?i.clientHeight:i.clientWidth:0}isLayoutVertical(e){var s;if((s=this.config)!=null&&s.isParentVertical)return this.config.isParentVertical(e);const t=ne(e.componentRow,U.CSS_FLEX_DIRECTION,!0);return t==="column"||t==="column-reverse"}};U.CSS_FLEX_DIRECTION="flex-direction";let Q=U;const k=class k{constructor(e){this.config=e}getSize(e){var s;if((s=this.config)!=null&&s.getSize)return this.config.getSize(e);const t=e.componentColumn;if(t.is(k.MJML_COLUMN_TYPE)){const a=t.getAttributes().width;if(a&&(a.includes("%")||!isNaN(parseFloat(a))))return parseFloat(a);const o=t.parent();return 100/(o?o.components().length:1)}return 0}setSize(e){var t;if((t=this.config)!=null&&t.setSize)this.config.setSize(e);else{const{componentColumn:s,sizeValue:i,partial:a}=e;s.is(k.MJML_COLUMN_TYPE)&&s.addAttributes({width:`${parseFloat(i)}%`},{partial:a})}}};k.MJML_COLUMN_TYPE="mj-column";let ee=k;const W=class W{constructor(e){this.config=e}isGapSupported(){return!1}getGap(e){var s;if((s=this.config)!=null&&s.getGap)return this.config.getGap(e);const{componentRow:t}=e;if(t.is(W.MJML_SECTION_TYPE)){const i=t.getAttributes();if(i&&i.padding)return parseInt(i.padding,10)||0}return 0}setGap(e){var t,s;(s=(t=this.config)==null?void 0:t.setGap)==null||s.call(t,e)}};W.MJML_SECTION_TYPE="mj-section";let te=W;class Le{constructor(e){this.config=e}getParentSize(e){var o;if((o=this.config)!=null&&o.getParentSize)return this.config.getParentSize(e);const{componentRow:t,isVertical:s}=e,i=t.getEl();if(!i)return 0;let a=i;if(i.tagName!=="TABLE"){const l=i.querySelectorAll("table");l.length&&(a=l[0])}return s?a.clientHeight:a.clientWidth}isLayoutVertical(e){var t;return(t=this.config)!=null&&t.isParentVertical?this.config.isParentVertical(e):!1}}class H{constructor(){this.handlerCache=new Map}static getInstance(){return H.instance||(H.instance=new H),H.instance}getHandlers(e){const t=`${e.projectType}-${e.disableGapHandler?"nogap":"gap"}`;return this.handlerCache.has(t)||(A(e)?this.handlerCache.set(t,{sizeHandler:new ee(e),gapHandler:new te(e),parentSizeHandler:new Le(e)}):this.handlerCache.set(t,{sizeHandler:new q(e),gapHandler:new Z(e),parentSizeHandler:new Q(e)})),this.handlerCache.get(t)}}function G(n){return H.getInstance().getHandlers(n)}const de=n=>{n.style.display="none"},ue=n=>{n.style.display="block"},j=n=>+parseFloat(`${n}`).toFixed(2),A=n=>n.projectType===re.email,O=(n,e)=>{const t=n.Canvas.getFramesEl();t&&(t.style.pointerEvents=e?"none":"")},$e=n=>n?["top","bottom"]:["left","right"],He=n=>{const e=n.parent();return e?e.components().models.indexOf(n)===0:!1},Ae=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.indexOf(n)===t.length-1},Ve=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.length>1&&n.index()===t.length-1},Me=(n,e,t,s)=>{const a=n+(t?e==="top"?-1:e==="bottom"?1:0:e==="left"?-1:e==="right"?1:0);return a>=0&&a<s?a:-1},X=n=>n==="top"||n==="bottom",je=(n,e)=>!!(He(n)&&(e==="left"||e==="top")||Ae(n)&&(e==="right"||e==="bottom")),Ne=n=>{const e=n.parent();return e?e.components().models.length>1:!1},he=(n,e)=>n==="right"||n==="bottom"?e>0:e<0,ne=(n,e,t=!1)=>{const s=!t,i=n.getEl();if(!i)return s?0:"";const o=window.getComputedStyle(i)[e]||"";if(s){let l;return typeof o=="string"?(l=parseFloat(o.replace(/[^-\d.]/g,"")),isNaN(l)&&(l=0)):l=Number(o)||0,l}return o},fe=(n,e,t)=>{const s=se({componentRow:n,isVertical:e},t),i=n.components().models;return s*(i.length-1)},N=(n,e)=>G(e).parentSizeHandler.isLayoutVertical({componentRow:n}),_=(n,e)=>G(e).sizeHandler.getSize(n),se=(n,e)=>{if(e!=null&&e.disableGapHandler)return 0;const{gapHandler:t,parentSizeHandler:s}=G(e);if(!t.isGapSupported())return 0;const i=t.getGap(n),a=s.getParentSize(n);return i/100*a},ie=(n,e)=>G(e).parentSizeHandler.getParentSize(n),F=(n,e)=>{G(e).sizeHandler.setSize(n)},ge=(n,e)=>{const t=_(n,e);F({...n,sizeValue:`${t}%`,partial:!1},e)},me=(n,e)=>{if(e!=null&&e.disableGapHandler)return;const{gapHandler:t}=G(e);t.isGapSupported()&&t.setGap(n)},_e=(n,e)=>{const t=n.getStyle().gap;if(!t)return;const s=n.components().models,i={componentRow:n,isVertical:N(n,e)};s.map(a=>ge({...i,componentColumn:a},e)),me({...i,gapValue:String(t),partial:!1},e)};function Fe(n,e){const{Blocks:t}=n,{typeColumn:s,typeRow:i,blocks:a}=e;if(a===!1||A(e))return;const o=u=>({type:i,components:u.map(g=>({type:s,style:{"flex-basis":`${g}%`}}))}),l=u=>`<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
+      ${u.map(g=>`<div style="flex-basis: ${g}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
+    </div>`,c=(u,g)=>({id:`flex-row-${g.join("-")}`,label:u,category:"Layout",select:!0,full:!0,attributes:{class:"gs-block-item__flex gs-utl-w-full"},media:l(g),content:o(g)}),f=[c("1 Column",[100]),c("2 Columns 50/50",[50,50]),c("2 Columns 25/75",[25,75]),c("2 Columns 75/25",[75,25]),c("3 Columns",[33.33,33.33,33.33]),c("3 Columns 50/25/25",[50,25,25]),c("3 Columns 25/50/25",[25,50,25]),c("3 Columns 25/25/50",[25,25,50]),c("4 Columns",[25,25,25,25]),c("5 Columns",[20,20,20,20,20])],p=xe(a)?a({blocks:f}):f;return p.forEach(u=>t.add(u.id,u)),()=>{p.forEach(u=>t.remove(u.id))}}const Be=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeColumn:a}=e,o=`${pe}${i}`,c=!!i&&!!t.getType(i)&&!a;if(!(!i||c||A(e)))return t.addType(i,{isComponent:le(i),model:{defaults:{name:"Column",resizable:!1,emptyState:!0,classes:o,icon:'<svg viewBox="0 0 24 24"><path d="M14.5 2.3A1.8 1.8 0 0 0 12.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8zm-8 0A1.8 1.8 0 0 0 4.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',draggable:Te(s),attributes:{[J]:i},styles:`
+          .${o} {
+            flex-grow: 1;
+          }
+        `}}}),()=>{t.removeType(i)}},De=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeRow:a}=e,o=`${pe}${s}`,c=!!s&&!!t.getType(s)&&!a;if(!(!s||c||A(e)))return t.addType(s,{isComponent:le(s),model:{defaults:{name:"Row",classes:o,icon:'<svg viewBox="0 0 24 24"><path d="M4 4.8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3A1.8 1.8 0 0 0 20 4.7zm0 8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',emptyState:{styleIn:"width: 100%"},attributes:{[J]:s},droppable:Ge(i),traits:[{type:"checkbox",name:"snap",label:"Enable Snap",default:e.snapEnabled,changeProp:!0},{type:"number",name:"snap-divisions",label:"Snap Divisions",min:1,max:12,step:1,default:e.snapDivisions,changeProp:!0}],resizable:{tl:0,tc:0,tr:0,cl:0,bl:0,br:0},styles:`
+          .${o} {
+            display: flex;
+            align-items: stretch;
+            flex-wrap: nowrap;
+          }
+        `}}}),()=>{t.removeType(s)}};class ke{constructor(){this.resizableChildTypes=new Set,this.gapAdjustableParentTypes=new Set,this.typeRelationships=new Map}registerResizableChild(e){this.resizableChildTypes.add(e)}registerGapAdjustableParent(e){this.gapAdjustableParentTypes.add(e)}registerTypeRelationship(e,t){this.typeRelationships.has(e)||this.typeRelationships.set(e,new Set),this.typeRelationships.get(e).add(t),this.registerResizableChild(t),this.registerGapAdjustableParent(e)}isResizableChild(e){return this.resizableChildTypes.has(e.get("type"))}isGapAdjustableParent(e){return this.gapAdjustableParentTypes.has(e.get("type"))}isValidRelationship(e,t){const s=e.get("type"),i=t.get("type");return this.typeRelationships.has(s)?this.typeRelationships.get(s).has(i):!1}}class Oe{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s,this.resizeState=new WeakMap}getState(e){return this.resizeState.has(e)||this.resizeState.set(e,{}),this.resizeState.get(e)}clearState(e){return this.resizeState.delete(e)}startResize(e,t,s){const{opts:i}=this,a=this.getState(e);a.direction=t,a.startX=s.clientX,a.startY=s.clientY,a.resizing=!0,a.lastSnappedPercent=void 0;const o=e.parent();if(!o||!this.registry.isValidRelationship(o,e))return;a.snapEnabled=o.get("snap")??i.snapEnabled,a.snapDivisions=o.get("snap-divisions")??i.snapDivisions??12;const l=o.components().models,c=l.findIndex(g=>g.cid===e.cid),f=N(o,i),p=Me(c,t,f,l.length);p!==-1&&(a.adjacentIdx=p);const u={componentColumn:e,componentRow:o,isVertical:f};if(a.startPercent=_(u,i),typeof a.adjacentIdx<"u"){const g=l[a.adjacentIdx];a.neighborStartPercent=_({...u,componentColumn:g},i)}}updateResizeByDelta(e,t,s){const i=this.getState(e),a=e.parent();!i.resizing||!a||(i.snapEnabled?this.updateSnapResize(e,t,s):this.updateContinuesResize(e,t,s))}finishResize(e){const t=e.parent(),s=t==null?void 0:t.components().models,i={componentRow:t,isVertical:!!t&&N(t,this.opts)};s==null||s.forEach(a=>ge({...i,componentColumn:a},this.opts)),this.clearState(e)}updateContinuesResize(e,t,s){const i=this.getState(e),a=e.parent(),{opts:o}=this;if(!a)return;const l=o.minItemPercent??0,c=X(t),f=ie({componentRow:a,isVertical:c},o),p=fe(a,c,this.opts),g=100-p/f*100,v=s/(f-p)*g,{startPercent:P=0,neighborStartPercent:S=0}=i,I={componentRow:a,isVertical:c,componentColumn:e,partial:!0},R=he(t,s)?P+Math.abs(v):P-Math.abs(v);if(typeof i.adjacentIdx<"u"){const z=a.components().models[i.adjacentIdx],x=P+S,b=x-l,r=Math.min(b,Math.max(l,R)),d=x-r;F({...I,sizeValue:`${j(r)}%`},o),F({...I,componentColumn:z,sizeValue:`${j(d)}%`},o)}else{const z=Math.max(l,Math.min(g,R));F({...I,sizeValue:`${j(z)}%`},o)}}updateSnapResize(e,t,s){const i=this.getState(e),a=e.parent(),o=X(t),l=ie({componentRow:a,isVertical:o},this.opts),c=fe(a,o,this.opts),f=l-c,p=s/f*100,u=he(t,s),{startPercent:g=0,snapDivisions:v=12}=i,P=u?g+Math.abs(p):g-Math.abs(p),S=100/v,I=Math.floor(P/S)*S,R=Math.ceil(P/S)*S,z=Math.abs(R-P),x=Math.abs(P-I),b=S*.2,C=z<x?R:I;if(C>0&&C<100&&(z<b||x<b)&&i.lastSnappedPercent!==C){i.lastSnappedPercent=C;let m=Math.abs(C-g)/100*f;(u&&(t==="left"||t==="top")||!u&&(t==="right"||t==="bottom"))&&(m=-m),this.updateContinuesResize(e,t,m)}else z>=b&&x>=b&&(i.lastSnappedPercent=void 0)}}class Xe{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s}updateGapByDelta(e,t,s,i){if(!this.registry.isGapAdjustableParent(e))return;const{opts:a}=this,o=Math.max(0,s+t),l=ie({componentRow:e,isVertical:i},a),c=o/l*100,f=e.components().models,p=f.length-1,u={componentRow:e,isVertical:i},g=f.reduce((b,C)=>b+_({...u,componentColumn:C},a),0),P=100-c*p,S=a.minItemPercent||5;if(P<S*f.length)return;const R=100-p*c,z=g-R,x={componentRow:e,isVertical:i,partial:!0};f.map(b=>{const C=_({...u,componentColumn:b},a),r=C-C/g*z;F({...x,componentColumn:b,sizeValue:`${j(r)}%`},a)}),me({...x,gapValue:`${j(c)}%`},a)}finishGapAdjust(e){_e(e,this.opts)}}class Ye{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s,this.resizeHandler=new Oe(e,t,s),this.gapHandler=new Xe(e,t,s)}startResize(e,t,s){this.resizeHandler.startResize(e,t,s)}updateResizeByDelta(e,t,s){this.resizeHandler.updateResizeByDelta(e,t,s)}finishResize(e){this.resizeHandler.finishResize(e)}updateGapByDelta(e,t,s,i){this.gapHandler.updateGapByDelta(e,t,s,i)}finishGapAdjust(e){this.gapHandler.finishGapAdjust(e)}canResize(e){const t=e.parent();return t?this.registry.isValidRelationship(t,e):!1}canAdjustGap(e){return this.registry.isGapAdjustableParent(e)}}const Y="gs-flex-spots",ye=`${Y}__handle-size`,Ue=`${Y}__handle-gap`;function We(n,e){const{Canvas:t}=n,s="flex-resize-spot";let i,a,o,l,c=null,f=null;const p=new ke,u=new Ye(n,p,e),g=()=>{var r;i=document.createElement("div"),i.className=Y,i.style.display="none",a=document.createElement("div"),a.className=`${Y}__handles`,a.style.position="absolute",a.style.pointerEvents="none",a.style.zIndex="21",o={left:document.createElement("div"),right:document.createElement("div"),top:document.createElement("div"),bottom:document.createElement("div")},Object.entries(o).forEach(([d,m])=>{const y=d,h=X(y);m.className=`${ye} ${ye}-${y} gjs-resizer-h gjs-cv-unscale`,m.style.cssText=`
+        pointer-events: all;
+        position: absolute;
+        z-index: 1;
+        cursor: ${h?"ns-resize":"ew-resize"};
+        ${h?"left: 50%;":"top: 50%;"}
+        ${y==="left"?"left: 0px;":""}
+        ${y==="right"?"right: 0px;":""}
+        ${y==="top"?"top: 0px;":""}
+        ${y==="bottom"?"bottom: 0px;":""}
+      `,m.addEventListener("pointerdown",v(y)),a.appendChild(m)}),!e.disableGapHandler&&!A(e)&&(l=document.createElement("div"),l.className=Ue,l.style.cssText=`
+        position: absolute;
+        background-color: #3b97e3;
+        border-width: 2px;
+        border-radius: 9999px;
+        border-color: #fff;
+        box-sizing: content-box;
+        pointer-events: all;
+        max-width: 3rem;
+        max-height: 3rem;
+      `,l.addEventListener("pointerdown",P()),a.appendChild(l)),i.append(a),(r=t.getSpotsEl())==null||r.appendChild(i)},v=r=>d=>{if(!c)return;O(n,!0),d.stopPropagation(),d.preventDefault(),u.startResize(c,r,d);const m=d.clientX,y=d.clientY;d.target.setPointerCapture(d.pointerId);const h=V=>{const E=n.Canvas.getZoomMultiplier(),M=(V.clientX-m)*E,K=(V.clientY-y)*E,ae=X(r)?K:M;u.updateResizeByDelta(c,r,ae)},w=()=>{O(n,!1),u.finishResize(c),d.target.releasePointerCapture(d.pointerId),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",w)};document.addEventListener("pointermove",h),document.addEventListener("pointerup",w)},P=()=>r=>{if(!f)return;const d=f;O(n,!0),r.stopPropagation(),r.preventDefault();const m=N(d,e),y=se({componentRow:d,isVertical:m},e),h=r.clientX,w=r.clientY;r.target.setPointerCapture(r.pointerId);const V=M=>{const K=n.Canvas.getZoomMultiplier(),ae=m?(M.clientY-w)*K:(M.clientX-h)*K;u.updateGapByDelta(d,ae,y,m)},E=()=>{O(n,!1),u.finishGapAdjust(d),r.target.releasePointerCapture(r.pointerId),document.removeEventListener("pointermove",V),document.removeEventListener("pointerup",E)};document.addEventListener("pointermove",V),document.addEventListener("pointerup",E)},S=r=>{const d=r.component;if(!d||!i||(c=d,f=d.parent(),!f))return;const m=f;ue(i);const y=r.getStyle();a&&Object.assign(a.style,y);const h=N(m,e),w=$e(h);if(Object.values(o).forEach(de),w.forEach(E=>{if(je(d,E))return;const M=o[E];ue(M)}),G(e).gapHandler.isGapSupported()&&l&&Ne(d)){const E=se({componentRow:m,isVertical:h},e);I(E,h,Ve(d))}},I=(r,d,m=!1)=>{const y=e.gapHandleSize,h=l.style;if(d){h.height=`${y}px`;const w=l.offsetHeight;m?(h.top=`-${(r+w)/2}px`,h.bottom=""):(h.bottom=`-${(r+w)/2}px`,h.top=""),h.width="50%",h.left="50%",h.transform="translateX(-50%)",h.cursor="row-resize"}else{h.width=`${y}px`;const w=l.offsetWidth;m?(h.left=`-${(r+w)/2}px`,h.right=""):(h.right=`-${(r+w)/2}px`,h.left=""),h.height="50%",h.top="50%",h.transform="translateY(-50%)",h.cursor="col-resize"}},R=()=>{i&&(de(i),c=null,f=null)},z=()=>{t.removeSpots({type:s});const r=n.getSelected(),d=r==null?void 0:r.parent();r&&d&&p.isValidRelationship(d,r)?t.addSpot({type:s,component:r}):R()},x=()=>{const r=t.getSpots().filter(d=>d.type===s)[0];r&&S(r)},b=(r,d)=>{p.registerTypeRelationship(r,d)};n.onReady(()=>{g(),A(e)?b("mj-section","mj-column"):b(e.typeRow,e.typeColumn)});const C="component:toggled";return n.on(t.events.spot,x),n.on(C,z),()=>{n.off(t.events.spot,x),n.off(C,z)}}const Ke="flexComponent";return Ie(function(n,e={}){const t={typeRow:"flex-row",typeColumn:"flex-column",gapHandleSize:3,snapDivisions:12,minItemPercent:5,...e},s=[De(n,t),Be(n,t)],i=We(n,t),a=Fe(n,t);Re({editor:n,licenseKey:t.licenseKey,plan:$.startup,pluginName:Ke,cleanup:()=>{s.forEach(o=>o==null?void 0:o()),i(),a==null||a()}})})});

package/dist/flexComponent/resizeDecorator.d.ts

@@ -0,0 +1,50 @@
+import { Component, Editor } from '../types';
+import { FlexComponentOptions, ResizeDirection } from './types';
+export declare class ComponentHandlerRegistry {
+    private resizableChildTypes;
+    private gapAdjustableParentTypes;
+    private typeRelationships;
+    registerResizableChild(childType: string): void;
+    registerGapAdjustableParent(parentType: string): void;
+    registerTypeRelationship(parentType: string, childType: string): void;
+    isResizableChild(component: Component): boolean;
+    isGapAdjustableParent(component: Component): boolean;
+    isValidRelationship(parent: Component, child: Component): boolean;
+}
+export declare class ResizeHandler {
+    private editor;
+    private registry;
+    private opts;
+    private resizeState;
+    constructor(editor: Editor, registry: ComponentHandlerRegistry, opts: FlexComponentOptions);
+    private getState;
+    private clearState;
+    startResize(componentColumn: Component, direction: ResizeDirection, event: MouseEvent): void;
+    updateResizeByDelta(component: Component, direction: ResizeDirection, delta: number): void;
+    finishResize(column: Component): void;
+    updateContinuesResize(componentColumn: Component, direction: ResizeDirection, delta: number): void;
+    updateSnapResize(componentColumn: Component, direction: ResizeDirection, delta: number): void;
+}
+export declare class GapHandler {
+    private editor;
+    private registry;
+    private opts;
+    constructor(editor: Editor, registry: ComponentHandlerRegistry, opts: FlexComponentOptions);
+    updateGapByDelta(componentRow: Component, delta: number, initialGapInPx: number, isVertical: boolean): void;
+    finishGapAdjust(parentComponent: Component): void;
+}
+export declare class ComponentHandler {
+    private editor;
+    private registry;
+    private opts;
+    private resizeHandler;
+    private gapHandler;
+    constructor(editor: Editor, registry: ComponentHandlerRegistry, opts: FlexComponentOptions);
+    startResize(component: Component, direction: ResizeDirection, event: MouseEvent): void;
+    updateResizeByDelta(component: Component, direction: ResizeDirection, delta: number): void;
+    finishResize(component: Component): void;
+    updateGapByDelta(parentComponent: Component, delta: number, initialGapInPx: number, isVertical: boolean): void;
+    finishGapAdjust(parentComponent: Component): void;
+    canResize(component: Component): boolean;
+    canAdjustGap(component: Component): boolean;
+}

package/dist/flexComponent/spots.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from '../types';
+import { FlexComponentOptions } from './types';
+export default function loadSpots(editor: Editor, opts: FlexComponentOptions): () => void;

package/dist/flexComponent/types.d.ts

@@ -0,0 +1,32 @@
+import { BlockProperties, Component } from '../types';
+import { FlexComponentOptions as FlexComponentOptionsSchema } from './typesSchema';
+export interface FlexComponentOptions extends Omit<FlexComponentOptionsSchema, 'blocks' | 'getSize' | 'getGap' | 'getParentSize' | 'isParentVertical' | 'setSize' | 'setGap'> {
+    blocks?: false | ((props: {
+        blocks: BlockProperties[];
+    }) => BlockProperties[]);
+    getSize?: (props: FlexGetSizeFnProps) => number;
+    getGap?: (props: FlexGetGapFnProps) => number;
+    getParentSize?: (props: FlexGetParentSizeFnProps) => number;
+    isParentVertical?: (props: FlexIsParentVerticalFnProps) => boolean;
+    setSize?: (props: FlexSetSizeFnProps) => void;
+    setGap?: (opts: FlexSetGapFnProps) => void;
+}
+export interface FlexGetSizeFnProps {
+    componentColumn: Component;
+    componentRow: Component;
+    isVertical: boolean;
+}
+export interface FlexGetParentSizeFnProps extends Omit<FlexGetSizeFnProps, 'componentColumn'> {
+}
+export interface FlexIsParentVerticalFnProps extends Omit<FlexGetParentSizeFnProps, 'isVertical'> {
+}
+export interface FlexGetGapFnProps extends Omit<FlexGetSizeFnProps, 'componentColumn'> {
+}
+export interface FlexSetSizeFnProps extends FlexGetSizeFnProps {
+    sizeValue: string;
+    partial: boolean;
+}
+export interface FlexSetGapFnProps extends Omit<FlexSetSizeFnProps, 'sizeValue' | 'componentColumn' | 'isVertical'> {
+    gapValue: string;
+}
+export type ResizeDirection = 'left' | 'right' | 'top' | 'bottom';

package/dist/flexComponent/typesSchema.d.ts

@@ -0,0 +1,112 @@
+import { ProjectType } from '@studio/editor/src/utils/types';
+import { SDKPluginOptions } from '../utils';
+export interface FlexComponentOptions extends SDKPluginOptions {
+    /**
+     * Filter default layout blocks. Pass `false` to avoid adding layout blocks.
+     * @examples
+     * ({ blocks }) => {
+     *  // Remove the 1 Column block
+     *  return blocks.filter(block => block.label !== '1 Column');
+     * }
+     */
+    blocks?: 'Block';
+    /**
+     * Default component type for row.
+     * @default 'flex-row'
+     */
+    typeRow?: string;
+    /**
+     * Default component type for column.
+     * @default 'flex-column'
+     */
+    typeColumn?: string;
+    /**
+     * Indicate if the existant `typeRow` component has to be extended.
+     * @default false
+     */
+    extendTypeRow?: boolean;
+    /**
+     * Indicate if the existant `typeColumn` component has to be extended.
+     * @default false
+     */
+    extendTypeColumn?: boolean;
+    /**
+     * Minimum item percent size in percentage.
+     * @default 5
+     */
+    minItemPercent?: number;
+    /**
+     * Enable snapping by default.
+     * @default false
+     */
+    snapEnabled?: boolean;
+    /**
+     * Default divisions for snapping.
+     * @default 12
+     */
+    snapDivisions?: number;
+    /**
+     * Disable gap handler.
+     * @default false
+     */
+    disableGapHandler?: boolean;
+    /**
+     * Gap size in px.
+     * @default 3
+     */
+    gapHandleSize?: number;
+    /**
+     * If you're using `email` project type in Studio SDK, you can set this option to `email` to active column resizing.
+     * @default 'web'
+     * @example "email"
+     */
+    projectType?: `${ProjectType}`;
+    /**
+     * Provide a custom handler for getting the column size.
+     * @examples
+     * ({ componentColumn }) => {
+     *  return parseInt(componentColumn.getStyle()['flex-basis'], 10);
+     * }
+     */
+    getSize?: '__fn__';
+    /**
+     * Provide a custom handler for getting the gap size.
+     * @examples
+     * ({ component }) => {
+     *  return parseInt(component.getStyle()['gap'], 10);
+     * }
+     */
+    getGap?: '__fn__';
+    /**
+     * Provide a custom handler for getting the parent size.
+     * @examples
+     * ({ component, isVertical }) => {
+     *  return component.getEl().clientWidth || 0;
+     * }
+     */
+    getParentSize?: '__fn__';
+    /**
+     * Provide a custom handler for checking if the parent layout is in vertical layout.
+     * @examples
+     * ({ component }) => {
+     *  return true;
+     * }
+     */
+    isParentVertical?: '__fn__';
+    /**
+     * Provide a custom handler for setting the column size.
+     * @examples
+     * ({ component, sizeValue, partial }) => {
+     *  component.addStyle({ 'flex-basis': sizeValue }, { partial });
+     * }
+     */
+    setSize?: '__fn__';
+    /**
+     * Provide a custom handler for setting the gap size.
+     * @examples
+     * ({ component, gapValue, partial }) => {
+     *  component.addStyle({ gap: gapValue }, { partial });
+     * }
+     */
+    setGap?: '__fn__';
+}

package/dist/flexComponent/utils.d.ts

@@ -0,0 +1,63 @@
+import { Component, Editor } from '../types';
+import { ResizeDirection, FlexComponentOptions, FlexGetSizeFnProps, FlexGetGapFnProps, FlexGetParentSizeFnProps, FlexSetSizeFnProps, FlexSetGapFnProps } from './types';
+export declare const hideEl: (el: HTMLElement) => void;
+export declare const showEl: (el: HTMLElement) => void;
+export declare const toFixedFloat: (num: number) => number;
+export declare const isProjectEmail: (opts: FlexComponentOptions) => boolean;
+export declare const disableFrameInteraction: (editor: Editor, disable: boolean) => void;
+export declare const getResizeHandlesForLayout: (isParentVerticalLayout: boolean) => ResizeDirection[];
+export declare const isFirstItemInParent: (component: Component) => boolean;
+export declare const isLastItemInParent: (component: Component) => boolean;
+export declare const isLastItemInParentWithSiblings: (component: Component) => boolean;
+export declare const findNeighborIndex: (currentIndex: number, direction: ResizeDirection, isParentVerticalLayout: boolean, childCount: number) => number;
+export declare const adjustChildrenCount: (parent: Component, targetCount: number) => void;
+export declare const isVerticalResize: (direction: ResizeDirection) => boolean;
+export declare const shouldHideHandle: (column: Component, direction: ResizeDirection) => boolean;
+export declare const shouldShowGapAdjustHandle: (column: Component) => boolean;
+export declare const isGrowing: (direction: ResizeDirection, delta: number) => boolean;
+export declare const getCSSPropertyValue: <T extends string | number = string>(component: Component, property: string, isString?: boolean) => T;
+export declare const getSpaceConsumedByNonChildrenInPx: (componentRow: Component, isVertical: boolean, config: FlexComponentOptions) => number;
+export declare const isParentVerticalLayout: (componentRow: Component, config: FlexComponentOptions) => boolean;
+export declare const getSizeValue: (props: FlexGetSizeFnProps, config: FlexComponentOptions) => number;
+export declare const getGapInPx: (props: FlexGetGapFnProps, config: FlexComponentOptions) => number;
+export declare const getParentSizeInPx: (props: FlexGetParentSizeFnProps, config: FlexComponentOptions) => number;
+export declare const applyComponentSize: (props: FlexSetSizeFnProps, config: FlexComponentOptions) => void;
+export declare const commitComponentSize: (props: FlexGetSizeFnProps, config: FlexComponentOptions) => void;
+export declare const applyGapSize: (props: FlexSetGapFnProps, config: FlexComponentOptions) => void;
+export declare const commitGapSize: (componentRow: Component, config: FlexComponentOptions) => void;
+/**
+ * Applies a ratio-based layout to an existing layout component
+ * @param layoutComponent The parent layout component
+ * @param ratioString A string like "3-3-3" or "2-6-4" representing child element ratios
+ * @param gapValue The gap size (default: 2%)
+ * @param config Optional configuration for style application
+ */
+export declare function applyLayoutRatio(props: {
+    component: Component;
+    ratio: string;
+    gap: number;
+    config: FlexComponentOptions;
+}): void;
+/**
+ * Apply a preset layout from predefined options
+ * @param layoutComponent The parent layout component
+ * @param preset One of the predefined layout presets
+ * @param config Optional configuration for style application
+ */
+export declare function applyPresetLayout(props: {
+    component: Component;
+    preset: string;
+    config: FlexComponentOptions;
+}): void;
+export declare function calculateAndApplySizes(props: {
+    component: Component;
+    ratios: number[];
+    gap: number;
+    config: FlexComponentOptions;
+}): void;
+export declare function createEqualColumns({ count, ...rest }: {
+    component: Component;
+    count: number;
+    gap: number;
+    config: FlexComponentOptions;
+}): void;

package/dist/googleFontsAssetProvider/index.cjs.js

@@ -1 +1 @@
-"use strict";require("grapesjs");var d=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(d||{}),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.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e))(f||{});const v="app.grapesjs.com",w="app-stage.grapesjs.com",y=[v,w,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],R="license:check:start",k="license:check:end",$=()=>typeof window<"u",x=({isDev:e,isStage:t})=>`${e?"":`https://${t?w:v}`}/api`,D=()=>{const e=$()&&window.location.hostname;return!!e&&(y.includes(e)||y.some(t=>e.endsWith(t)))};async function M({path:e,baseApiUrl:t,method:s="GET",headers:o={},params:n,body:a}){const p=`${t||x({isDev:!1,isStage:!1})}${e}`,c={method:s,headers:{"Content-Type":"application/json",...o}};a&&(c.body=JSON.stringify(a));const l=n?new URLSearchParams(n).toString():"",i=l?`?${l}`:"",g=await fetch(`${p}${i}`,c);if(!g.ok)throw new Error(`HTTP error! status: ${g.status}`);return g.json()}const P={[d.free]:0,[d.startup]:10,[d.business]:20,[d.enterprise]:30};function O(e){const t=e;return t.init=s=>o=>e(o,s),t}const U=e=>O(e);async function B({editor:e,plan:t,pluginName:s,licenseKey:o,cleanup:n}){let a="",r=!1;const p=D(),c=i=>{console.warn("Cleanup plugin:",s,"Reason:",i),n()},l=(i={})=>{var b;const{error:g,sdkLicense:L}=i,h=(b=i.plan)==null?void 0:b.category;if(!(L||i.license)||g)c(g||"Invalid license");else if(h){const A=P[t],F=P[h];A>F&&c({pluginRequiredPlan:t,licensePlan:h})}};e.on(R,i=>{a=i==null?void 0:i.baseApiUrl,r=!0}),e.on(k,i=>{l(i)}),setTimeout(async()=>{if(!r){if(p)return;if(o){const i=await E({licenseKey:o,pluginName:s,baseApiUrl:a});i&&l(i)}else c("The `licenseKey` option not provided")}},2e3)}async function E(e){const{licenseKey:t,pluginName:s,baseApiUrl:o}=e;try{return(await M({baseApiUrl:o,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:s}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}let u;const G=e=>{const t=[];for(const s of Object.keys(e)){let o=e[s];o&&(Array.isArray(o)?t.push(...o.map(n=>[s,n.toString()])):(o=o.toString(),t.push([s,o])))}return new URLSearchParams(t)},I=e=>({id:`${e.family}/${e.version}`,src:e.menu,name:e.family,customData:{font:e,needsLoading:!0}}),T=e=>`assetManagerMenu-${e.family}`,W=e=>{if(e.customData.needsLoading){e.customData.needsLoading=!1;const t=e.customData.font,s=new FontFace(T(t),`url(${t.menu})`);document.fonts.add(s),s.load().catch(()=>{})}},N=e=>{const{apiKey:t,searchParams:s}=e,o=(n={})=>{const a="https://www.googleapis.com/webfonts/v1/webfonts",r=G(n);return`${a}?${r}`};return{id:"google-fonts",types:["font"],label:({editor:n})=>n.I18n.t("googleFontsAssetProvider.providerLabel"),search:{reloadOnInput:!1},async onLoad(){var l;if(u)return u;const n={key:t,sort:"alpha",subset:"latin",capability:["WOFF2","VF"]},a=s==null?void 0:s(),r={...n,...a},c=await(await fetch(o(r))).json();return(l=c.items)!=null&&l.length?(u=c.items.map(I),u):[]},itemLayout:n=>{const a=u.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:T(a.customData.font),fontSize:"24px",paddingLeft:"8px",paddingRight:"8px"}}]}}}},j={googleFontsAssetProvider:{searchBtn:"Search on Google Fonts",modalTitle:"Select Font",providerLabel:"Google Fonts"}},K="googleFontsAssetProvider",_=function(e,t){const{i18n:s={}}=t,o=N(t);e.runCommand(f.assetProviderAdd,{provider:o}),e.I18n.addMessages({en:j,...s}),B({editor:e,licenseKey:t.licenseKey,plan:d.startup,pluginName:K,cleanup:()=>{e.runCommand(f.assetProviderRemove,{id:o.id})}})},q=U(_);module.exports=q;
+"use strict";require("grapesjs");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.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"],$="license:check:start",k="license:check:end",x=()=>typeof window<"u",D=({isDev:e,isStage:t})=>`${e?"":`https://${t?T:A}`}/api`,F=()=>{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:n="GET",headers:s={},params:o,body:i}){const l=`${t||D({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}`:"",u=await fetch(`${l}${a}`,c);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.json()}const w={[p.free]:0,[p.startup]:10,[p.business]:20,[p.enterprise]:30};function O(e){const t=e;return t.init=n=>s=>e(s,n),t}const M=e=>O(e);async function U({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:o}){let i="",r=!1;const l=F(),c=a=>{console.warn("Cleanup plugin:",n,"Reason:",a),o()},d=(a={})=>{var P;const{error:u,sdkLicense:f}=a,g=(P=a.plan)==null?void 0:P.category;if(!(f||a.license)||u)c(u||"Invalid license");else if(g){const L=w[t],R=w[g];L>R&&c({pluginRequiredPlan:t,licensePlan:g})}};e.on($,a=>{i=a==null?void 0:a.baseApiUrl,r=!0}),e.on(k,a=>{d(a)}),setTimeout(async()=>{if(!r){if(l)return;if(s){const a=await B({licenseKey:s,pluginName:n,baseApiUrl:i});a&&d(a)}else c("The `licenseKey` option not provided")}},2e3)}async function B(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await G({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(o){return console.error("Error during SDK license check:",o),!1}}const E=e=>{const{family:t,menu:n,axes:s}=e,o=!!s,i=Object.assign({},...e.variants.map(r=>{var a,u;let l,c;if(o){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=((u=r.match(/[a-zA-Z]+/))==null?void 0:u[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:n,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:n,source:s,options:o}=t.menuVariant,i=new FontFace(n,`url("${s}")`,o);document.fonts.add(i),i.load().catch(()=>{})}};let h;const j=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)},m=e=>{const{apiKey:t,searchParams:n}=e,s=(o={})=>{const i="https://www.googleapis.com/webfonts/v1/webfonts",r=j(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(I),h):[]},itemLayout:o=>{const i=h.find(r=>r.id===o.assetProps.id);return W(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"}}]}}}},N={googleFontsAssetProvider:{searchBtn:"Search on Google Fonts",modalTitle:"Select Font",providerLabel:"Google Fonts"}},K="googleFontsAssetProvider",_=function(e,t){const{i18n:n={}}=t,s=m(t);e.runCommand(b.assetProviderAdd,{provider:s}),e.I18n.addMessages({en:N,...n}),U({editor:e,licenseKey:t.licenseKey,plan:p.startup,pluginName:K,cleanup:()=>{e.runCommand(b.assetProviderRemove,{id:s.id})}})},V=M(_);module.exports=V;