@grapesjs/studio-sdk-plugins 1.0.16 → 1.0.17

package/dist/layoutSidebarButtons/index.umd.js

@@ -1 +1 @@
-(function(b,f){typeof exports=="object"&&typeof module<"u"?module.exports=f():typeof define=="function"&&define.amd?define(f):(b=typeof globalThis<"u"?globalThis:b||self,b.StudioSdkPlugins_layoutSidebarButtons=f())})(this,function(){"use strict";var b=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(b||{}),f=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e))(f||{}),k=(e=>(e.layoutToggleId="studio:layoutToggle:",e.toggleBlocksPanel="studio:toggleBlocksPanel",e.pageSettingsUpdate="studio:pageSettingsUpdate",e))(k||{});const w="app.grapesjs.com",R="app-stage.grapesjs.com",M=[w,R,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],H="license:check:start",O="license:check:end",_=()=>typeof window<"u",N=({isDev:e,isStage:s})=>`${e?"":`https://${s?R:w}`}/api`,W=()=>{const e=_()&&window.location.hostname;return!!e&&(M.includes(e)||M.some(s=>e.endsWith(s)))};async function j({path:e,baseApiUrl:s,method:t="GET",headers:n={},params:a,body:c}){const y=`${s||N({isDev:!1,isStage:!1})}${e}`,g={method:t,headers:{"Content-Type":"application/json",...n}};c&&(g.body=JSON.stringify(c));const i=a?new URLSearchParams(a).toString():"",o=i?`?${i}`:"",l=await fetch(`${y}${o}`,g);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}const G={[b.free]:0,[b.startup]:10,[b.business]:20,[b.enterprise]:30};function S(e){const s=e;return s.init=t=>n=>e(n,t),s}const m=e=>S(e);async function C({editor:e,plan:s,pluginName:t,licenseKey:n,cleanup:a}){let c="",u=!1;const y=W(),g=o=>{console.warn("Cleanup plugin:",t,"Reason:",o),a()},i=(o={})=>{var p;const{error:l,sdkLicense:r}=o,d=(p=o.plan)==null?void 0:p.category;if(!(r||o.license)||l)g(l||"Invalid license");else if(d){const A=G[s],P=G[d];A>P&&g({pluginRequiredPlan:s,licensePlan:d})}};e.on(H,o=>{c=o==null?void 0:o.baseApiUrl,u=!0}),e.on(O,o=>{i(o)}),setTimeout(async()=>{if(!u){if(y)return;if(n){const o=await K({licenseKey:n,pluginName:t,baseApiUrl:c});o&&i(o)}else g("The `licenseKey` option not provided")}},2e3)}async function K(e){const{licenseKey:s,pluginName:t,baseApiUrl:n}=e;try{return(await j({baseApiUrl:n,path:`/sdk/${s||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}var h=(e=>(e.panelBlocks="panelBlocks",e.panelPagesLayers="panelPagesLayers",e.panelGlobalStyles="panelGlobalStyles",e.panelSidebarTabs="panelSidebarTabs",e.panelAssets="panelAssets",e))(h||{});const x="sidebarButtonsTarget",T=e=>{const{id:s,icon:t,label:n,tooltip:a,className:c,skipSelfClose:u,removeLayouts:y,layoutComponent:g,layoutCommand:i}=e,o=s;return{id:I(s),type:"button",icon:t,tooltip:n||a,className:c,editorEvents:{[`${k.layoutToggleId}${o}`]:({fromEvent:l,setState:r,editor:d})=>{r({active:l.isOpen}),setTimeout(()=>d.refresh({tools:!0}),20)}},onClick:({editor:l,state:r})=>{if(r.active&&u)return;const d=(i==null?void 0:i.placer)||{type:"static",layoutId:x},v={...d,skipCleanup:d.type==="static"},p=y||Object.keys(h).filter(P=>P!==o);U(l,{removeLayouts:p,layout:{placer:v}});const A={id:o,placer:d,header:(i==null?void 0:i.header)??{label:n,close:!u},layout:g,style:{width:250,height:"100%",borderRightWidth:1,...i==null?void 0:i.style}};l.runCommand(f.layoutToggle,A)}}},I=e=>`button__${e}`,U=(e,s={})=>{(s.removeLayouts||Object.keys(h)).forEach(n=>e.runCommand(f.layoutRemove,{id:n,layout:s.layout}))},L=(e,s,t)=>{const n=e.map(a=>{const c=T(a);return t!=null&&t.sidebarButton?t.sidebarButton({id:a.id,breakpoint:s,buttonProps:c,sidebarButtonProps:a,createSidebarButton:u=>T({...a,...u})}):c}).filter(Boolean);return t!=null&&t.sidebarButtons?t==null?void 0:t.sidebarButtons({breakpoint:s,sidebarButtons:n,createSidebarButton:a=>T({...a})}):n},B=(e,s,t,n)=>{var a;return((a=n==null?void 0:n.rootLayout)==null?void 0:a.call(n,{breakpoint:t,sidebarButtons:s,rootLayout:e,createSidebarButton:c=>T({...c})}))??e},E=e=>{const s=(e==null?void 0:e.breakpointTablet)??1024,t=(e==null?void 0:e.breakpointMobile)??768,n={},a=[{id:h.panelBlocks,icon:"plusBox",label:"Blocks",layoutComponent:{type:"panelBlocks"}},{id:h.panelPagesLayers,icon:"layers",label:"Pages & Layers",layoutComponent:{type:"panelPagesLayers"}},{id:h.panelGlobalStyles,icon:'<svg viewBox="0 0 24 24"> <path d="M20 14H6c-2.2 0-4 1.8-4 4s1.8 4 4 4h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2M6 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m.3-8L13 5.3a2 2 0 0 1 2.8 0l2.8 2.8c.8.8.8 2 0 2.8l-.9 1.1H6.3M2 13.5V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v1.5l-8 8Z"/></svg>',label:"Global Styles",layoutComponent:{type:"panelGlobalStyles"}},{id:h.panelAssets,icon:'<svg viewBox="0 0 24 24"><path d="M22,16V4A2,2 0 0,0 20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16M11,12L13.03,14.71L16,11L20,16H8M2,6V20A2,2 0 0,0 4,22H18V20H4V6" /></svg>',label:"Assets",layoutComponent:{type:"panelAssets",content:{itemsPerRow:2,header:{addUrl:!1}},style:{padding:7},onSelect:({assetProps:o,editor:l})=>{var v;const r=l.getSelected(),d={type:"image",src:o.src};if(r!=null&&r.is("image"))return r.set("src",o.src);if(r&&l.Components.canMove(r,d)){const p=r.append(d)[0];p&&l.select(p)}else if(!r){const p=(v=l.getWrapper())==null?void 0:v.append(d)[0];p&&l.select(p)}}}}],c=[...a,{id:h.panelSidebarTabs,layoutCommand:{header:!1},icon:'<svg viewBox="0 0 24 24"><path d="M17.5 12a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 17.5 9a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-3-4A1.5 1.5 0 0 1 13 6.5 1.5 1.5 0 0 1 14.5 5 1.5 1.5 0 0 1 16 6.5 1.5 1.5 0 0 1 14.5 8m-5 0A1.5 1.5 0 0 1 8 6.5 1.5 1.5 0 0 1 9.5 5 1.5 1.5 0 0 1 11 6.5 1.5 1.5 0 0 1 9.5 8m-3 4A1.5 1.5 0 0 1 5 10.5 1.5 1.5 0 0 1 6.5 9 1.5 1.5 0 0 1 8 10.5 1.5 1.5 0 0 1 6.5 12M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 1.5 1.5 0 0 0 1.5-1.5c0-.4-.2-.7-.4-1-.2-.3-.4-.6-.4-1a1.5 1.5 0 0 1 1.5-1.5H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8Z"/></svg>',label:"Styles & Props",layoutComponent:{type:"panelSidebarTabs"}}],u={id:x,type:"column",style:{overflow:"hidden"}},y={type:"sidebarLeft",resizable:!1,style:{padding:"10px 5px",alignItems:"center",width:45,gap:10},children:[]},g={type:"canvasSidebarTop",sidebarTop:{leftContainer:{buttons:[]}}};if(s){const o=L(c,s,e);n[s]=B({type:"row",style:{height:"100%"},children:[{...y,children:o},u,g]},o,s,e)}if(t){const o=c.map(r=>({...r,layoutCommand:{placer:{type:"absolute",position:"left"},style:{height:"calc(100% - 40px)"}}})),l=L(o,t,e);n[t]=B({type:"column",style:{height:"100%"},children:[{type:"sidebarTop",leftContainer:{buttons:[]}},{type:"canvas"},{type:"sidebarBottom",style:{padding:"0 5px",alignItems:"center",gap:10,minHeight:39},children:l}]},l,t,e)}const i=L(a,0,e);return{default:B({type:"row",style:{height:"100%"},children:[{...y,children:i},u,g,{type:"sidebarRight"}]},i,0,e),responsive:n}},$="layoutSidebarButtons",D=m(function(e,s={}){const{Commands:t}=e,n=t.events,a={...s};(()=>{if(e.runCommand(f.layoutConfigGet)||a.skipLayoutConfig===!0)return;const y=E(a);e.runCommand(f.layoutConfigSet,{...y})})(),t.add(`${$}:toggleButton`,(u,y,g={})=>{const i=document.getElementById(I(g.id));i==null||i.click()}),e.on(`${n.runCommand}core:preview`,()=>{U(e)}),C({editor:e,licenseKey:a.licenseKey,plan:b.startup,pluginName:$,cleanup:()=>{e.runCommand(f.layoutConfigSet)}})});return D.createLayoutConfig=e=>E(e),D});
+(function(h,v){typeof exports=="object"&&typeof module<"u"?module.exports=v():typeof define=="function"&&define.amd?define(v):(h=typeof globalThis<"u"?globalThis:h||self,h.StudioSdkPlugins_layoutSidebarButtons=v())})(this,function(){"use strict";var h=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(h||{}),v=(e=>(e.toastAdd="studio:toastAdd",e.dialogOpen="studio:dialogOpen",e.dialogClose="studio:dialogClose",e.sidebarLeftSet="studio:sidebarLeft:set",e.sidebarLeftGet="studio:sidebarLeft:get",e.sidebarLeftToggle="studio:sidebarLeft:toggle",e.sidebarRightSet="studio:sidebarRight:set",e.sidebarRightGet="studio:sidebarRight:get",e.sidebarRightToggle="studio:sidebarRight:toggle",e.sidebarTopSet="studio:sidebarTop:set",e.sidebarTopGet="studio:sidebarTop:get",e.sidebarTopToggle="studio:sidebarTop:toggle",e.sidebarBottomSet="studio:sidebarBottom:set",e.sidebarBottomGet="studio:sidebarBottom:get",e.sidebarBottomToggle="studio:sidebarBottom:toggle",e.symbolAdd="studio:symbolAdd",e.symbolDetach="studio:symbolDetach",e.symbolOverride="studio:symbolOverride",e.symbolPropagateStyles="studio:propagateStyles",e.getPagesConfig="studio:getPagesConfig",e.setPagesConfig="studio:setPagesConfig",e.getPageSettings="studio:getPageSettings",e.setPageSettings="studio:setPageSettings",e.projectFiles="studio:projectFiles",e.canvasReload="studio:canvasReload",e.getBlocksPanel="studio:getBlocksPanel",e.setBlocksPanel="studio:setBlocksPanel",e.getStateContextMenu="studio:getStateContextMenu",e.setStateContextMenu="studio:setStateContextMenu",e.contextMenuComponent="studio:contextMenuComponent",e.layoutAdd="studio:layoutAdd",e.layoutRemove="studio:layoutRemove",e.layoutToggle="studio:layoutToggle",e.layoutUpdate="studio:layoutUpdate",e.layoutGet="studio:layoutGet",e.layoutConfigGet="studio:layoutConfigGet",e.layoutConfigSet="studio:layoutConfigSet",e.getStateTheme="studio:getStateTheme",e.setStateTheme="studio:setStateTheme",e.assetProviderGet="studio:assetProviderGet",e.assetProviderAdd="studio:assetProviderAdd",e.assetProviderRemove="studio:assetProviderRemove",e.fontGet="studio:fontGet",e.fontAdd="studio:fontAdd",e.fontRemove="studio:fontRemove",e))(v||{}),A=(e=>(e.layoutToggleId="studio:layoutToggle:",e.toggleBlocksPanel="studio:toggleBlocksPanel",e.pageSettingsUpdate="studio:pageSettingsUpdate",e))(A||{});const k="app.grapesjs.com",w="app-stage.grapesjs.com",R=[k,w,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],D="license:check:start",H="license:check:end",O=()=>typeof window<"u",_=({isDev:e,isStage:t})=>`${e?"":`https://${t?w:k}`}/api`,N=()=>{const e=O()&&window.location.hostname;return!!e&&(R.includes(e)||R.some(t=>e.endsWith(t)))};async function W({path:e,baseApiUrl:t,method:a="GET",headers:l={},params:c,body:b}){const y=`${t||_({isDev:!1,isStage:!1})}${e}`,r={method:a,headers:{"Content-Type":"application/json",...l}};b&&(r.body=JSON.stringify(b));const n=c?new URLSearchParams(c).toString():"",s=n?`?${n}`:"",g=await fetch(`${y}${s}`,r);if(!g.ok)throw new Error(`HTTP error! status: ${g.status}`);return g.json()}const M={[h.free]:0,[h.startup]:10,[h.business]:20,[h.enterprise]:30};function j(e){const t=e;return t.init=a=>l=>e(l,a),t}const S=e=>j(e);async function m({editor:e,plan:t,pluginName:a,licenseKey:l,cleanup:c}){let b="",f=!1;const y=N(),r=s=>{console.warn("Cleanup plugin:",a,"Reason:",s),c()},n=(s={})=>{var i;const{error:g,sdkLicense:L}=s,o=(i=s.plan)==null?void 0:i.category;if(!(L||s.license)||g)r(g||"Invalid license");else if(o){const p=M[t],d=M[o];p>d&&r({pluginRequiredPlan:t,licensePlan:o})}};e.on(D,s=>{b=s==null?void 0:s.baseApiUrl,f=!0}),e.on(H,s=>{n(s)}),setTimeout(async()=>{if(!f){if(y)return;if(l){const s=await C({licenseKey:l,pluginName:a,baseApiUrl:b});s&&n(s)}else r("The `licenseKey` option not provided")}},2e3)}async function C(e){const{licenseKey:t,pluginName:a,baseApiUrl:l}=e;try{return(await W({baseApiUrl:l,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:a}})).result||{}}catch(c){return console.error("Error during SDK license check:",c),!1}}var T=(e=>(e.panelBlocks="panelBlocks",e.panelPagesLayers="panelPagesLayers",e.panelGlobalStyles="panelGlobalStyles",e.panelSidebarTabs="panelSidebarTabs",e.panelAssets="panelAssets",e))(T||{});const G="sidebarButtonsTarget",P=e=>{const{id:t,icon:a,label:l,tooltip:c,className:b,skipSelfClose:f,removeLayouts:y,layoutComponent:r,layoutCommand:n}=e,s=t;return{id:I(t),type:"button",icon:a,tooltip:l||c,className:b,editorEvents:{[`${A.layoutToggleId}${s}`]:({fromEvent:g,setState:L,editor:o})=>{L({active:g.isOpen}),setTimeout(()=>o.refresh({tools:!0}),20)}},onClick:({editor:g,state:L})=>{if(L.active&&f)return;const o=(n==null?void 0:n.placer)||{type:"static",layoutId:G},u={...o,skipCleanup:o.type==="static"},i=y||Object.keys(T).filter(d=>d!==s);x(g,{removeLayouts:i,layout:{placer:u}});const p={id:s,placer:o,header:(n==null?void 0:n.header)??{label:l,close:!f},layout:r,style:{width:280,height:"100%",borderRightWidth:1,...n==null?void 0:n.style}};g.runCommand(v.layoutToggle,p)}}},I=e=>`button__${e}`,x=(e,t={})=>{(t.removeLayouts||Object.keys(T)).forEach(l=>e.runCommand(v.layoutRemove,{id:l,layout:t.layout}))},U=e=>{const t=(e==null?void 0:e.breakpointTablet)??1024,a=(e==null?void 0:e.breakpointMobile)??768,l={breakpointTablet:t,breakpointMobile:a},c={},b=[{id:T.panelBlocks,icon:"plusBox",label:"Blocks",layoutComponent:{type:"panelBlocks"}},{id:T.panelPagesLayers,icon:"layers",label:"Pages & Layers",layoutComponent:{type:"panelPagesLayers"}},{id:T.panelGlobalStyles,icon:'<svg viewBox="0 0 24 24"> <path d="M20 14H6c-2.2 0-4 1.8-4 4s1.8 4 4 4h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2M6 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m.3-8L13 5.3a2 2 0 0 1 2.8 0l2.8 2.8c.8.8.8 2 0 2.8l-.9 1.1H6.3M2 13.5V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v1.5l-8 8Z"/></svg>',label:"Global Styles",layoutComponent:{type:"panelGlobalStyles"}},{id:T.panelAssets,icon:'<svg viewBox="0 0 24 24"><path d="M22,16V4A2,2 0 0,0 20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16M11,12L13.03,14.71L16,11L20,16H8M2,6V20A2,2 0 0,0 4,22H18V20H4V6" /></svg>',label:"Assets",layoutComponent:{type:"panelAssets",content:{itemsPerRow:2,header:{addUrl:!1}},style:{padding:7},onSelect:({assetProps:o,editor:u})=>{var d;const i=u.getSelected(),p={type:"image",src:o.src};if(i!=null&&i.is("image"))return i.set("src",o.src);if(i&&u.Components.canMove(i,p)){const B=i.append(p)[0];B&&u.select(B)}else if(!i){const B=(d=u.getWrapper())==null?void 0:d.append(p)[0];B&&u.select(B)}}}}],f=[...b,{id:T.panelSidebarTabs,layoutCommand:{header:!1},icon:'<svg viewBox="0 0 24 24"><path d="M17.5 12a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 17.5 9a1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-3-4A1.5 1.5 0 0 1 13 6.5 1.5 1.5 0 0 1 14.5 5 1.5 1.5 0 0 1 16 6.5 1.5 1.5 0 0 1 14.5 8m-5 0A1.5 1.5 0 0 1 8 6.5 1.5 1.5 0 0 1 9.5 5 1.5 1.5 0 0 1 11 6.5 1.5 1.5 0 0 1 9.5 8m-3 4A1.5 1.5 0 0 1 5 10.5 1.5 1.5 0 0 1 6.5 9 1.5 1.5 0 0 1 8 10.5 1.5 1.5 0 0 1 6.5 12M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 1.5 1.5 0 0 0 1.5-1.5c0-.4-.2-.7-.4-1-.2-.3-.4-.6-.4-1a1.5 1.5 0 0 1 1.5-1.5H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8Z"/></svg>',label:"Styles & Props",layoutComponent:{type:"panelSidebarTabs"}}],y={id:G,type:"column",style:{overflow:"hidden"}},r={type:"sidebarLeft",resizable:!1,style:{padding:"10px 5px",alignItems:"center",width:45,gap:10},children:[]},n={type:"canvasSidebarTop",sidebarTop:{leftContainer:{buttons:[]}}},s=(o,u)=>{const i=o.map(d=>{const B=P(d);return e!=null&&e.sidebarButton?e.sidebarButton({id:d.id,buttonIds:T,breakpoint:u,buttonProps:B,sidebarButtonProps:d,...l,createSidebarButton:K=>P({...d,...K})}):B}).filter(Boolean);return(e!=null&&e.sidebarButtons?e==null?void 0:e.sidebarButtons({buttonIds:T,breakpoint:u,sidebarButtons:i,...l,createSidebarButton:d=>P({...d})}):i).filter(Boolean)},g=(o,u,i)=>{var p;return((p=e==null?void 0:e.rootLayout)==null?void 0:p.call(e,{breakpoint:i,sidebarButtons:u,rootLayout:o,layoutSidebarLeft:r,layoutSidebarTarget:y,...l,createSidebarButton:d=>P({...d})}))??o};if(t){const o=s(f,t);c[t]=g({type:"row",style:{height:"100%"},children:[{...r,children:o},y,n]},o,t)}if(a){const o=f.map(i=>({...i,layoutCommand:{placer:{type:"absolute",position:"left"},style:{height:"calc(100% - 40px)"}}})),u=s(o,a);c[a]=g({type:"column",style:{height:"100%"},children:[{type:"sidebarTop",leftContainer:{buttons:[]}},{type:"canvas"},{type:"sidebarBottom",style:{padding:"0 5px",alignItems:"center",gap:10,minHeight:39},children:u}]},u,a)}const L=s(b,0);return{default:g({type:"row",style:{height:"100%"},children:[{...r,children:L},y,n,{type:"sidebarRight"}]},L,0),responsive:c}},E="layoutSidebarButtons",$=S(function(e,t={}){const{Commands:a}=e,l=a.events,c={...t};(()=>{if(e.runCommand(v.layoutConfigGet)||c.skipLayoutConfig===!0)return;const y=U(c);e.runCommand(v.layoutConfigSet,{...y})})(),a.add(`${E}:toggleButton`,(f,y,r)=>{const n=document.getElementById(I(r==null?void 0:r.id));n==null||n.click()}),e.on(`${l.runCommand}core:preview`,()=>{x(e)}),m({editor:e,licenseKey:c.licenseKey,plan:h.free,pluginName:E,cleanup:()=>{e.runCommand(v.layoutConfigSet)}})});return $.createLayoutConfig=e=>U(e),$});

package/dist/layoutSidebarButtons/types.d.ts

@@ -1,4 +1,4 @@
-import { LayoutCommandProps, LayoutConfig, RootLayoutConfig, StudioLayoutButtonConfigProps, StudioLayoutComponentsConfigProps } from '../types';
+import { LayoutCommandProps, LayoutConfig, RootLayoutConfig, StudioLayoutButtonConfigProps, StudioLayoutComponentsConfigProps, StudioLayoutSidebarLeftConfigProps } from '../types';
 import { PluginWithInit } from '../utils';
 import { LayoutSidebarButtonsOptions as LayoutSidebarButtonsOptionsSchema } from './typesSchema';
 export interface LayoutSidebarButtonsOptions extends Omit<LayoutSidebarButtonsOptionsSchema, 'sidebarButton' | 'rootLayout' | 'sidebarButtons'> {
@@ -32,33 +32,39 @@ export interface LayoutSidebarButtonsOptions extends Omit<LayoutSidebarButtonsOp
      */
     skipLayoutConfig?: boolean;
 }
+export interface BreakpointProps extends Required<Pick<LayoutSidebarButtonsOptionsSchema, 'breakpointTablet' | 'breakpointMobile'>> {
+}
 export type SidebarButtonResult = StudioLayoutComponentsConfigProps | undefined | null | false;
 export type CreateSidebarButtonFn = (props: SidebarButtonProps) => StudioLayoutButtonConfigProps;
 export type SidebarButtonFn = (props: {
     id: string;
+    buttonIds: typeof SidebarButtonIds;
     breakpoint: number;
     sidebarButtonProps: SidebarButtonProps;
     buttonProps: StudioLayoutButtonConfigProps;
     createSidebarButton: (props: Partial<SidebarButtonProps>) => StudioLayoutButtonConfigProps;
-}) => SidebarButtonResult;
+} & BreakpointProps) => SidebarButtonResult;
 export type SidebarButtonsFn = (props: {
+    buttonIds: typeof SidebarButtonIds;
     breakpoint: number;
-    sidebarButtons: SidebarButtonResult[];
+    sidebarButtons: StudioLayoutComponentsConfigProps[];
     createSidebarButton: CreateSidebarButtonFn;
-}) => SidebarButtonResult[];
+} & BreakpointProps) => SidebarButtonResult[];
 export type CustomRootLayoutFn = (props: {
     breakpoint: number;
-    sidebarButtons: SidebarButtonResult[];
+    sidebarButtons: StudioLayoutComponentsConfigProps[];
     rootLayout: RootLayoutConfig;
+    layoutSidebarTarget: RootLayoutConfig;
+    layoutSidebarLeft: StudioLayoutSidebarLeftConfigProps;
     createSidebarButton: CreateSidebarButtonFn;
-}) => RootLayoutConfig;
+} & BreakpointProps) => RootLayoutConfig;
 export interface SidebarButtonProps {
     id: string;
     icon: string;
     label?: string;
     className?: string;
     layoutComponent: StudioLayoutComponentsConfigProps;
-    layoutCommand?: Partial<LayoutCommandProps>;
+    layoutCommand?: Partial<Pick<LayoutCommandProps, 'style' | 'placer' | 'header'>>;
     tooltip?: string;
     skipSelfClose?: boolean;
     removeLayouts?: string[];

package/dist/layoutSidebarButtons/typesSchema.d.ts

@@ -2,26 +2,26 @@ import { SDKPluginOptions } from '../utils';
 export interface LayoutSidebarButtonsOptions extends SDKPluginOptions {
     /**
      * Extend each sidebar button per breakpoint.
-     * @example
+     * @examples
      * sidebarButton: ({ id, buttonProps, breakpoint, createSidebarButton }) => ({
-     *  ...buttonProps,
-     * // custom icon for panelBlocks button
-     * icon: buttonProps.id === 'panelBlocks' ? '<svg ...>' : buttonProps.icon,
+     *   ...buttonProps,
+     *   // custom icon for panelBlocks button
+     *   icon: buttonProps.id === 'panelBlocks' ? '<svg ...>' : buttonProps.icon,
      * })
      */
     sidebarButton?: '__fn__';
     /**
      * Add or filter the resultant buttons per breakpoint.
-     * @example
+     * @examples
      * sidebarButtons: ({ breakpoint, sidebarButtons, createSidebarButton }) => {
-     *  // Add a new button for the default layout
-     *  return !breakpoint ? [...sidebarButtons, createSidebarButton({...})] sidebarButtons;
+     *   // Add a new button for the default layout
+     *   return !breakpoint ? [...sidebarButtons, createSidebarButton({...})] sidebarButtons;
      * }
      */
     sidebarButtons?: '__fn__';
     /**
      * Customize the resultant root layout per breakpoint.
-     * @example
+     * @examples
      * rootLayout({ breakpoint, rootLayout, sidebarButtons, createSidebarButton }) {
      *  if (breakpoint === 768) {
      *    return {

package/dist/types.d.ts

@@ -6,7 +6,7 @@ export { StudioCommands, StudioEvents } from '@studio/editor/src/plugins/global/
 export type { AssetProvider, InputAssetProps } from '@studio/editor/src/typeConfigs/assets';
 export type { Font, FontAssetProps, FontFaceArgs } from '@studio/editor/src/typeConfigs/fonts';
 export type { LayoutCommandProps, LayoutConfig, RootLayoutConfig } from '@studio/editor/src/typeConfigs/layout';
-export type { StudioLayoutButtonConfigProps, StudioLayoutCanvasSidebarTopConfigProps } from '@studio/editor/src/typeConfigs/layoutComponents';
+export type { StudioLayoutButtonConfigProps, StudioLayoutSidebarLeftConfigProps, StudioLayoutCanvasSidebarTopConfigProps } from '@studio/editor/src/typeConfigs/layoutComponents';
 export { ThemeValue } from '@studio/editor/src/typeConfigs/shared';
 export type { RteCustomToolbarProps } from '@studio/editor/src/typeConfigs/shared';
 export { ProjectType } from '@studio/editor/src/utils/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grapesjs/studio-sdk-plugins",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },