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

package/dist/canvasGridMode/commands/moveCommand.d.ts

@@ -0,0 +1,2 @@
+import { Editor } from 'grapesjs';
+export default function moveCommand(editor: Editor): void;

package/dist/canvasGridMode/commands/resizeCommand.d.ts

@@ -0,0 +1,6 @@
+import { CommandOptions, Editor } from 'grapesjs';
+export default function resizeCommand(editor: Editor, options: CommandOptions): {
+    onStart: (ev: Event) => void;
+    onEnd: (__: Event, opts: import('grapesjs').CallbackOptions) => void;
+    onMove: (ev: Event) => void;
+} | undefined;

package/dist/canvasGridMode/commands/updateCommand.d.ts

@@ -0,0 +1,2 @@
+import { Editor, Component } from '../../types';
+export default function updateCommand(editor: Editor, target: Component): void;

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

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

package/dist/canvasGridMode/index.cjs.js

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

package/dist/canvasGridMode/index.d.ts

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

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

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