@silexlabs/silex 3.0.0-alpha.60 → 3.0.0-alpha.61

package/dist/client/css/admin.css

@@ -4029,10 +4029,11 @@ form.silex-form .silex-form__group.col2 {
   bottom: 0;
   left: 35px;
   right: 15%;
-  border-top: 1px solid #dee2e6;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  height: 30px;
 }
 
 .silex-main {
@@ -4268,7 +4269,7 @@ iframe.enable-squeeze.silex-squeeze-left {
   top: 40px;
   width: 13%;
   min-width: 150px;
-  height: calc(100% - 40px);
+  height: calc(100% - 40px - 30px);
   background-color: #575757;
 }
 .gjs-pn-project-bar-container:not(.gjs-hidden) {

package/dist/client/js/main.js

@@ -97,7 +97,7 @@ var silex;(()=>{var t={357:function(t){var e;"undefined"!=typeof globalThis?glob
                 ><span>${e.text}</span></div>
               `))}
           </header>
-        `,r),document.body.appendChild(r),t.on("load",(()=>{n.view.el.appendChild(r)}))),t.Commands.add(e.command,{run(){e.link&&window.open(e.link),e.attributes.containerClassName&&(n.set("visible",!0),r.classList.remove("gjs-hidden"),t.Canvas.getFrameEl().classList.add("silex-squeeze-left"))},stop(){e.attributes.containerClassName&&(n.set("visible",!1),r.classList.add("gjs-hidden"),t.Canvas.getFrameEl().classList.remove("silex-squeeze-left"))}})})),t.on("load device:select page",(()=>{!function(){const e=n.view.el,r=t.Canvas.getFrameEl();r.classList.remove("enable-squeeze"),setTimeout((()=>{const t=r.getClientRects()[0]?.left,n=e.getClientRects()[0]?.right;t<n||!n?r.classList.add("enable-squeeze"):r.classList.remove("enable-squeeze")}),400),n.get("visible")?r.classList.add("silex-squeeze-left"):r.classList.remove("silex-squeeze-left")}()}))},Nn=document.createElement("div");let In;const Dn="open-settings";let $n="v3";const Rn=nt.plugins.add("settings-dialog",((t,e)=>{try{$n="3.0.0-alpha.60"}catch(t){}console.info("Silex version:",$n),t.Commands.add(Dn,{run:(e,n,{page:r})=>{In=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n.set("active",0),t.stopCommand(Dn)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r),we(ne`
+        `,r),document.body.appendChild(r),t.on("load",(()=>{n.view.el.appendChild(r)}))),t.Commands.add(e.command,{run(){e.link&&window.open(e.link),e.attributes.containerClassName&&(n.set("visible",!0),r.classList.remove("gjs-hidden"),t.Canvas.getFrameEl().classList.add("silex-squeeze-left"))},stop(){e.attributes.containerClassName&&(n.set("visible",!1),r.classList.add("gjs-hidden"),t.Canvas.getFrameEl().classList.remove("silex-squeeze-left"))}})})),t.on("load device:select page",(()=>{!function(){const e=n.view.el,r=t.Canvas.getFrameEl();r.classList.remove("enable-squeeze"),setTimeout((()=>{const t=r.getClientRects()[0]?.left,n=e.getClientRects()[0]?.right;t<n||!n?r.classList.add("enable-squeeze"):r.classList.remove("enable-squeeze")}),400),n.get("visible")?r.classList.add("silex-squeeze-left"):r.classList.remove("silex-squeeze-left")}()}))},Nn=document.createElement("div");let In;const Dn="open-settings";let $n="v3";const Rn=nt.plugins.add("settings-dialog",((t,e)=>{try{$n="3.0.0-alpha.61"}catch(t){}console.info("Silex version:",$n),t.Commands.add(Dn,{run:(e,n,{page:r})=>{In=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n.set("active",0),t.stopCommand(Dn)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r),we(ne`
     <p>The page settings will override site settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
     <form class="silex-form">
       <h2>General settings</h2>
@@ -319,4 +319,4 @@ var silex;(()=>{var t={357:function(t){var e;"undefined"!=typeof globalThis?glob
           @click=${()=>this.editor.Commands.stop(Zn)}
         >Close</button>
       </footer>
-    `}}displayPending(t,e){this.errorMessage=null,this.renderDialog(t,e)}displayError(t,e,n){console.info(t),this.errorMessage=t,this.renderDialog(e,n)}async closeDialog(){this.isOpen=!1,this.renderDialog(null,null),this.sender&&this.sender.set("active",0),this.sender=null}async toggleDialog(){this.isOpen?this.closeDialog():this.openDialog()}async openDialog(){this.isOpen=!0;const t=this.editor.Panels.getPanel("options")?.view.el.querySelector(".publish-button");if(t){const e=t.getBoundingClientRect(),n=450,r=20,o=50;this.move({left:e.right-n-r,top:e.bottom+10,width:n,minHeight:o})}else console.error("Unable to find publish button");this.renderDialog(null,hr.STATUS_NONE)}}var er;function nr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}!function(t){t.STARTUP_START="silex:startup:start",t.STARTUP_END="silex:startup:end",t.GRAPESJS_START="silex:grapesjs:start",t.GRAPESJS_END="silex:grapesjs:end",t.PUBLISH_START="silex:publish:start",t.PUBLISH_DATA="silex:publish:data",t.PUBLISH_END="silex:publish:end",t.PUBLISH_ERROR="silex:publish:error",t.PUBLISH_LOGIN_START="silex:publish:login:start",t.PUBLISH_LOGIN_END="silex:publish:login:end",t.ASSET_WRITE_END="silex:asset:write:end",t.WRITE_END="silex:write:end"}(er||(er={}));const rr="tmp-pre-publication-transformer-tohtml",or="tmp-pre-publication-transformer-src",ir="tmp-pre-publication-transformer-inline-css",sr="tmp-pre-publication-transformer-href",ar="tmp-pre-publication-transformer-tocss";function lr(t,e){const n=e["background-image"],r=n?.match(/url\(["']?(.*?)["']?\)/)?.pop();return r?{...e,"background-image":`url(${cr(t,r,$.ASSET)})`}:e}function cr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPermalink?e.transformPermalink(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}function ur(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPath?e.transformPath(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}const pr="publish",dr="publish-login",fr="publish-logout";var hr;function gr(t,e){t.PublicationManager=new mr(t,e)}function vr(t){switch(t){case H.IN_PROGRESS:return hr.STATUS_PENDING;case H.ERROR:return hr.STATUS_ERROR;case H.SUCCESS:return hr.STATUS_SUCCESS}throw new Error(`Unknown job status ${t}`)}!function(t){t.STATUS_NONE="STATUS_NONE",t.STATUS_PENDING="STATUS_PENDING",t.STATUS_ERROR="STATUS_ERROR",t.STATUS_SUCCESS="STATUS_SUCCESS",t.STATUS_LOGGED_OUT="STATUS_AUTH_ERROR"}(hr||(hr={}));class mr{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=hr.STATUS_NONE;constructor(t,e){this.editor=t,this.options={appendTo:"options",...e},t.on("storage:start:store",(t=>{t.publication=this.settings})),t.on("storage:end:load",(t=>{this.settings=t.publication??{},ze({type:R.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=hr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(pr,(()=>this.startPublication())),t.Commands.add(dr,((t,e,n)=>this.goLogin(n))),t.Commands.add(fr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new tr(t,{appendTo:this.options.appendTo}):console.info("PublicationUi is disabled because no appendTo option is set")}async goLogin(t){this.settings={},this.status=hr.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${f}${h}${y}?connectorId=${e}&type=${n}`,"_blank"),new Promise((e=>{const n=async e=>{const r=e.data;"login"===r?.type&&(window.removeEventListener("message",n),r.error?(this.status=hr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(er.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=hr.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await We({type:R.HOSTING,connectorId:this.settings.connector.connectorId}),this.settings={},this.dialog&&this.dialog.displayPending(this.job,this.status)}catch(t){console.error("logout error",t),this.status=hr.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async startPublication(){if(this.status===hr.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=hr.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(er.PUBLISH_START);const t=this.editor.getModel().get("user");if(!t)throw new Error("User not logged in to a storage connector");if(!this.settings.connector?.connectorId)throw new Error("User not logged in to a hosting connector");const e=this.options.websiteId,n=t.storage.connectorId;this.setPublicationTransformers();const r=this.editor.getProjectData(),o=this.editor.getModel().get("settings"),i=(await this.getHtmlFiles(o)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:$.HTML},{path:t.cssPath,content:t.css,type:$.CSS}])).concat(r.assets.map((t=>{const e=t.src.replace(/^\/assets/,""),n=ur(this.editor,e,$.ASSET),r=cr(this.editor,e,$.ASSET);return{...t,path:n,src:r,type:$.ASSET}}))),s={...r,settings:o,publication:this.settings,files:i};this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>{try{return e.pages[r],n.transformFile?n.transformFile(t)??t:t}catch(e){return console.error("Publication transformer: error transforming file",t,e),t}}))),e.files)}(this.editor,s),this.editor.trigger(er.PUBLISH_DATA,s);try{const[t,r]=await qe({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:s,options:this.settings.options});this.job=r,this.status=vr(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=hr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=hr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(er.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(er.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return this.editor.Pages.getAll().map((e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=qn(e.get("name")),s=`/css/${i}.css`,a=`/${i}.html`,l=cr(this.editor,s,$.CSS),c=ur(this.editor,s,$.CSS),u=ur(this.editor,a,$.HTML);return{html:`\n      <!DOCTYPE html>\n      <html lang="${r("lang")}">\n      <head>\n      <link rel="stylesheet" href="${l}" />\n      ${t?.head||""}\n      ${n?.head||""}\n      <title>${r("title")}</title>\n      <link rel="icon" href="${r("favicon")}" />\n      ${["description","og:title","og:description","og:image"].map((t=>`<meta property="${t}" content="${r(t)}"/>`)).join("\n")}\n      </head>\n      ${this.editor.getHtml({component:o})}\n      </html>\n      `,css:this.editor.getCss({component:o}),cssPath:c,htmlPath:u}}))}async trackProgress(){try{this.job=await Ge({jobId:this.job.jobId}),this.status=vr(this.job.status)}catch(t){return this.status=hr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(er.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(er.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===H.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(er.PUBLISH_END,{success:this.job.status===H.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");nr(t,(n=>{if(n.get(rr))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[rr]=n.toHTML;const o=n.getStyle.bind(n);n[ir]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[sr]=i,n.set("attributes",{...n.get("attributes"),href:cr(t,i,$.HTML)})),n.get("attributes").src){n[or]=n.get("attributes").src;const e=cr(t,n.get("attributes").src,$.ASSET);n.set("attributes",{...n.get("attributes"),src:e})}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>{try{return e.renderComponent?e.renderComponent(n,(()=>t))??t:t}catch(e){return console.error("Publication transformer: error rendering component",n,e),t}}),r()),n.getStyle=()=>lr(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[ar])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[ar]=n.getStyle,n.getStyle=()=>{try{const n=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,r)??t:t})),lr(t,r()));return n}catch(t){return console.error("Publication transformer: error rendering style",n,t),r()}}}}))}(this.editor)}resetPublicationTransformers(){!function(t){nr(t,(t=>{t[rr]&&(t.toHTML=t[rr],delete t[rr]),t[ir]&&(t.getStyle=t[ir],delete t[ir]),t[or]&&(t.set("attributes",{...t.get("attributes"),src:t[or]}),delete t[or]),t[sr]&&(t.set("attributes",{...t.get("attributes"),href:t[sr]}),delete t[sr])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[ar]&&(t.getStyle=t[ar],delete t[ar])}))}(this.editor)}}const yr=[{name:"./project-bar",value:Ln},{name:"./settings",value:Rn},{name:"@silexlabs/grapesjs-fonts",value:He()},{name:"./new-page-dialog",value:Mn},{name:"./page-panel",value:Cn},{name:"grapesjs-blocks-basic",value:it()},{name:"./blocks",value:(t,e)=>{const n="container";t.BlockManager.add(n,{label:"Container",category:"Basics",attributes:{class:"container-png"},content:{type:n,style:{"min-height":"100px"}}}),t.DomComponents.addType(n,{})}},{name:"./semantic",value:zn},{name:"./rich-text",value:Wn},{name:"grapesjs-style-filter",value:at()},{name:"grapesjs-plugin-forms",value:ct()},{name:"grapesjs-custom-code",value:pt()},{name:"./internal-links",value:Yn},{name:"@silexlabs/grapesjs-ui-suggest-classes",value:ft()},{name:"./symbolDialogs",value:Ve},{name:"@silexlabs/grapesjs-symbols",value:Ie},{name:"./PublicationManager",value:gr},{name:"./storage",value:t=>{function e(e){const n="string"==typeof e?JSON.parse(e):e;if(console.error("Error with loading or saving website or uploading asset",n,n instanceof N),!(n instanceof N))return t.Modal.open({title:"Error",content:`An error occured.<br>${n.message}`});switch(console.error("ApiError",n.httpStatusCode,n.message),n.httpStatusCode){case 404:return t.Modal.open({title:"Website not found",content:`This website could not be found.<br><hr>${n.message}`});case 403:return t.Modal.open({title:"Access denied",content:`You are not allowed to access this website.<br><hr>${n.message}`});case 401:return void t.trigger(pn);default:return t.Modal.open({title:"Error",content:`An error occured.<br>${n.message}`})}}t.Storage.add("connector",{async load(e){try{const i=await dn(t)??await fn(t,R.STORAGE,e.connectorId);if(i){const t=await Je({websiteId:e.id,connectorId:i.storage.connectorId});return t.assets&&(t.assets=(n=t.assets,r=e.id,o=i.storage.connectorId,n.map((t=>({...t,src:V(t.src,r,o)}))))),t.pages&&(t.pages=function(t,e,n){return t.map((t=>({...t,frames:t.frames.map((t=>({...t,component:z(t.component,e,n)})))})))}(t.pages,e.id,i.storage.connectorId)),t.styles&&(t.styles=function(t,e,n){const r=/url\((["']?)([^"']+?)\1\)/g;return t.map((t=>{if(t.style&&t.style["background-image"]){const o=[...t.style["background-image"].matchAll(r)].map((t=>V(t[2],e,n)));return{...t,style:{...t.style,"background-image":o.map((t=>`url('${t}')`)).join(", ")}}}return t}))}(t.styles,e.id,i.storage.connectorId)),t}return new Promise(((n,r)=>{t.once(cn,(async()=>{try{t.StorageManager.setAutosave(!1);const r=await t.Storage.load(e);t.StorageManager.setAutosave(!0),n(r)}catch(t){console.error("connectorPlugin load error",t),r(t)}})),t.Commands.run(sn)}))}catch(t){throw console.error("connectorPlugin load error",t),t}var n,r,o},async store(e,n){try{if(await dn(t)){const r=await dn(t);e.assets=e.assets.map((t=>({...t,src:U(t.src)}))),e.pages=e.pages.map((t=>({...t,frames:t.frames.map((t=>({...t,component:W(t.component)})))}))),e.styles=function(t){const e=/url\((["']?)([^"']+?)\1\)/g;return t.map((t=>{if(t.style&&t.style["background-image"]){const n=[...t.style["background-image"].matchAll(e)].map((t=>U(t[2])));return{...t,style:{...t.style,"background-image":n.map((t=>`url('${t}')`)).join(", ")}}}return t}))}(e.styles),await Xe({websiteId:n.id,connectorId:r.storage.connectorId,data:e})}else t.once(cn,(()=>t.Storage.save(n))),t.Commands.run(sn)}catch(t){throw console.error("connectorPlugin store error",t),t}}}),t.on("storage:error:load",(t=>{e(t)})),t.on("storage:error:store",(t=>{e(t)})),t.on("asset:upload:end",(e=>{t.store()})),t.on("asset:upload:error",(t=>{e(t)}))}},{name:"./LoginDialog",value:vn},{name:"@silexlabs/grapesjs-loading",value:$e()},{name:"./breadcrumbs",value:function(t,e){let n;var r;function o(){let e=t.getSelected()??t.Pages.getSelected().getMainComponent();if(!n)return;for(n.innerHTML="";e;){const t=i(e);n.prepend(t),console.log(e,e.tagName),e=e.parent()}const r=document.createElement("span");r.innerHTML="<h3>Selection:&nbsp;</h3>",n.prepend(r)}function i(e){const n=document.createElement("span");return e.model,n.onclick=()=>{t.select(e)},n.classList.add("breadcrumb"),n.innerHTML=`<span>${e.get("tagName")}${e.getClasses().length?`.${e.getClasses().join(".")}`:""}</span>`,n}r=t=>{n=document.createElement("div"),n.id="breadcrumbs-container",t.prepend(n);const e=document.createElement("style");e.innerHTML='\n      #breadcrumbs-container {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding: 0 10px;\n        font-size: 12px;\n        color: #999;\n      }\n      #breadcrumbs-container h3 {\n        margin: 0;\n      }\n      #breadcrumbs-container .breadcrumb {\n        margin: 5px;\n        font-size: large;\n        line-height: 1;\n        cursor: pointer;\n      }\n      #breadcrumbs-container .breadcrumb span {\n        text-decoration: underline;\n      }\n      #breadcrumbs-container .breadcrumb::after {\n        content: "➔";\n        margin-left: 10px;\n      }\n\n      #breadcrumbs-container .breadcrumb:last-child::after {\n        content: "";\n      }\n    ',t.prepend(e),o()},mn?r(mn):bn.push(r),t.on("component:selected style",(()=>o()))}},{name:"./footer",value:function(t,e){const n=t.Panels.addPanel({id:"footer",visible:!0,buttons:[{id:"myNewButton",className:"someClass",command:"someCommand",attributes:{title:"Some title"},active:!1}]});setTimeout((()=>{mn=n.view?.el,bn.forEach((t=>t(mn))),bn=[]}))}}];yr.filter((t=>"function"!=typeof t.value)).forEach((t=>{throw new Error(`Plugin ${t.name} could not be loaded correctly (${t.value})`)}));const br="Containers",wr="Components";function _r(t,e,n){return{container:"#gjs",height:"100%",showOffsets:!0,showDevices:!0,layerManager:{appendTo:".layer-manager-container"},blockManager:{appendTo:".block-manager-container"},assetManager:{upload:`${n}${f}${S}${j}/?websiteId=${t}${e?`&connectorId=${e}`:""}`},storageManager:{autoload:!1,type:"connector",options:{connector:{id:t,connectorId:e}}},cssIcons:"/css/all.min.css",plugins:yr.map((t=>t.value)),pluginsOpts:{[it()]:{blocks:["text","image","video","map"],category:br},[Ln]:{panels:[{id:"dash",className:"logo",attributes:{title:"Go to your dashboard"},link:"/",command:"open-dash"},{id:"block-manager-btn",className:"block-manager-btn fa fa-fw fa-plus",attributes:{title:"Blocks",containerClassName:"block-manager-container"},command:"open-blocks"},{id:"symbols-btn",className:"symbols-btn fa-regular fa-gem",attributes:{title:"Symbols",containerClassName:"symbols-list-container"},command:"open-symbols",buttons:[{id:"symbol-create-button",className:"pages__add-page fa-solid fa-plus",label:"Create symbol from selection",command:Fe}]},{id:"page-panel-btn",className:"page-panel-btn fa fa-fw fa-file",attributes:{title:"Pages",containerClassName:"page-panel-container"},command:wn,buttons:[{className:"pages__add-page fa fa-file",command:_n,text:"+"}]},{id:"layer-manager-btn",className:"layer-manager-btn fa-solid fa-layer-group",attributes:{title:"Layers",containerClassName:"layer-manager-container"},command:"open-layers"},{id:"font-dialog-btn",className:"font-manager-btn fa-solid fa-font",attributes:{title:"Fonts"},command:Re.cmdOpenFonts},{id:"settings-dialog-btn",className:"page-panel-btn fa-solid fa-gears",attributes:{title:"Settings"},command:Dn},{id:"spacer",attributes:{},className:"project-bar-spacer"},{id:"logout-button",className:"page-panel-btn fa fa-fw fa-sign-out",attributes:{title:"Sign out"},command:an}]},[gr]:{appendTo:"options",websiteId:t},[Cn]:{cmdOpenNewPageDialog:jn,cmdOpenSettings:Dn,appendTo:".page-panel-container"},[ft()]:{enableCount:!1,enablePerformance:!1},[Yn]:{onError:t=>console.warn("Links errors:",t)},[pt()]:{blockLabel:"HTML",blockCustomCode:{category:wr}},[Ie]:{appendTo:".symbols-list-container"},[He()]:{api_key:"AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc"},[vn]:{id:t}}}}let xr;async function Cr(t){if(xr)throw new Error("Grapesjs editor already created");return new Promise(((e,n)=>{try{xr=rt().init(t)}catch(t){console.error("Error initializing GrapesJs with plugins:",yr,t),n(t)}["text"].forEach((t=>xr.Blocks.get(t)?.set("category","Basics"))),["image","video"].forEach((t=>xr.Blocks.get(t)?.set("category","Media"))),["map"].forEach((t=>xr.Blocks.get(t)?.set("category","Components"))),xr.Blocks.render([]),xr.Commands.add("gjs-open-import-webpage",function(t,e){const n=t.getConfig("stylePrefix"),r=t.Modal,o=t.CodeManager.getViewer("CodeMirror").clone(),i=document.createElement("div"),s=e.modalImportLabel,a=e.modalImportContent;let l=o.editor;const c=document.createElement("button");return c.type="button",c.innerHTML=e.modalImportButton,c.className=`${n}btn-prim ${n}btn-import`,c.onclick=e=>{t.setComponents(l.getValue().trim()),r.close()},o.set({codeName:"htmlmixed",theme:"hopscotch",readOnly:0,...e.importViewerOptions}),{run(u){if(!l){const t=document.createElement("textarea");if(s){const t=document.createElement("div");t.className=`${n}import-label`,t.innerHTML=s,i.appendChild(t)}i.appendChild(t),i.appendChild(c),o.init(t),l=o.editor}r.setTitle(e.modalImportTitle),r.setContent(i);const p="function"==typeof a?a(t):a;o.setContent(p||""),r.open().getModel().once("change:open",(()=>t.stopCommand(this.id))),l.refresh()},stop(){r.close()}}}(xr,{modalImportLabel:"",modalImportContent:"Paste a web page HTML code here.",modalImportButton:"Import",modalImportTitle:"Import from website"})),xr.on("load",(()=>{xr.Panels.getPanel("views").buttons.remove("open-blocks"),xr.Panels.getPanel("views").buttons.remove("open-layers"),xr.Panels.getPanel("views").view.el.firstChild.style.justifyContent="initial",xr.Panels.getPanel("options").buttons.remove("export-template"),xr.BlockManager.render(null),xr.StyleManager.addProperty("extra",{extend:"filter"}),e(xr)}))}))}function Sr(){return xr}class Or extends et{api=o;websiteId=new URL(location.href).searchParams.get("id")??u;storageId=new URL(location.href).searchParams.get("connectorId");lang=new URL(location.href).searchParams.get("lang")??p;rootUrl=window.location.origin;debug=!1;grapesJsConfig;clientConfigUrl=`${this.rootUrl}/${d}`;initGrapesConfig(){this.grapesJsConfig=_r(this.websiteId,this.storageId,this.rootUrl)}getEditor(){return Sr()}publicationTransformers=[];addPublicationTransformers(t){Array.isArray(t)||(t=[t]),t.forEach((t=>{!function(t){const e=["renderComponent","renderCssRule","transformFile","transformPermalink","transformPath"];Object.keys(t).forEach((t=>{if(!e.includes(t))throw new Error(`Publication transformer: unknown property ${t}`)})),e.forEach((e=>{if("function"!=typeof t[e]&&void 0!==t[e])throw new Error(`Publication transformer: ${e} must be a function`)}))}(t)})),this.publicationTransformers=this.publicationTransformers.concat(t)}}async function Tr(t={}){const e=new Or;Object.assign(e,t),e.addPublicationTransformers(B),await e.addPlugin(e.clientConfigUrl,{}),e.debug&&console.warn("Silex starting in debug mode.",{config:e}),e.emit(er.STARTUP_START),e.initGrapesConfig(),e.emit(er.GRAPESJS_START);try{await Cr(e.grapesJsConfig)}catch(t){throw console.error("Error starting Silex",t),t}const n=Sr();n.getModel().set("config",e),e.emit(er.GRAPESJS_END,{editor:n}),n.I18n.setLocale(e.lang),n.StorageManager.setAutosave(!1);try{await n.load(null)}catch(t){t.httpStatusCode}finally{setTimeout((()=>{n.editor.set("changesCount",0),n.StorageManager.setAutosave(!0),document.querySelector(".silex-loader").classList.add("silex-dialog-hide"),document.querySelector("#gjs").classList.remove("silex-dialog-hide"),e.emit(er.STARTUP_END,{editor:n,config:e})}),100)}}console.info("\nSilex client loaded\n")})(),silex=r})();
+    `}}displayPending(t,e){this.errorMessage=null,this.renderDialog(t,e)}displayError(t,e,n){console.info(t),this.errorMessage=t,this.renderDialog(e,n)}async closeDialog(){this.isOpen=!1,this.renderDialog(null,null),this.sender&&this.sender.set("active",0),this.sender=null}async toggleDialog(){this.isOpen?this.closeDialog():this.openDialog()}async openDialog(){this.isOpen=!0;const t=this.editor.Panels.getPanel("options")?.view.el.querySelector(".publish-button");if(t){const e=t.getBoundingClientRect(),n=450,r=20,o=50;this.move({left:e.right-n-r,top:e.bottom+10,width:n,minHeight:o})}else console.error("Unable to find publish button");this.renderDialog(null,hr.STATUS_NONE)}}var er;function nr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}!function(t){t.STARTUP_START="silex:startup:start",t.STARTUP_END="silex:startup:end",t.GRAPESJS_START="silex:grapesjs:start",t.GRAPESJS_END="silex:grapesjs:end",t.PUBLISH_START="silex:publish:start",t.PUBLISH_DATA="silex:publish:data",t.PUBLISH_END="silex:publish:end",t.PUBLISH_ERROR="silex:publish:error",t.PUBLISH_LOGIN_START="silex:publish:login:start",t.PUBLISH_LOGIN_END="silex:publish:login:end",t.ASSET_WRITE_END="silex:asset:write:end",t.WRITE_END="silex:write:end"}(er||(er={}));const rr="tmp-pre-publication-transformer-tohtml",or="tmp-pre-publication-transformer-src",ir="tmp-pre-publication-transformer-inline-css",sr="tmp-pre-publication-transformer-href",ar="tmp-pre-publication-transformer-tocss";function lr(t,e){const n=e["background-image"],r=n?.match(/url\(["']?(.*?)["']?\)/)?.pop();return r?{...e,"background-image":`url(${cr(t,r,$.ASSET)})`}:e}function cr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPermalink?e.transformPermalink(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}function ur(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPath?e.transformPath(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}const pr="publish",dr="publish-login",fr="publish-logout";var hr;function gr(t,e){t.PublicationManager=new mr(t,e)}function vr(t){switch(t){case H.IN_PROGRESS:return hr.STATUS_PENDING;case H.ERROR:return hr.STATUS_ERROR;case H.SUCCESS:return hr.STATUS_SUCCESS}throw new Error(`Unknown job status ${t}`)}!function(t){t.STATUS_NONE="STATUS_NONE",t.STATUS_PENDING="STATUS_PENDING",t.STATUS_ERROR="STATUS_ERROR",t.STATUS_SUCCESS="STATUS_SUCCESS",t.STATUS_LOGGED_OUT="STATUS_AUTH_ERROR"}(hr||(hr={}));class mr{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=hr.STATUS_NONE;constructor(t,e){this.editor=t,this.options={appendTo:"options",...e},t.on("storage:start:store",(t=>{t.publication=this.settings})),t.on("storage:end:load",(t=>{this.settings=t.publication??{},ze({type:R.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=hr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(pr,(()=>this.startPublication())),t.Commands.add(dr,((t,e,n)=>this.goLogin(n))),t.Commands.add(fr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new tr(t,{appendTo:this.options.appendTo}):console.info("PublicationUi is disabled because no appendTo option is set")}async goLogin(t){this.settings={},this.status=hr.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${f}${h}${y}?connectorId=${e}&type=${n}`,"_blank"),new Promise((e=>{const n=async e=>{const r=e.data;"login"===r?.type&&(window.removeEventListener("message",n),r.error?(this.status=hr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(er.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=hr.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await We({type:R.HOSTING,connectorId:this.settings.connector.connectorId}),this.settings={},this.dialog&&this.dialog.displayPending(this.job,this.status)}catch(t){console.error("logout error",t),this.status=hr.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async startPublication(){if(this.status===hr.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=hr.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(er.PUBLISH_START);const t=this.editor.getModel().get("user");if(!t)throw new Error("User not logged in to a storage connector");if(!this.settings.connector?.connectorId)throw new Error("User not logged in to a hosting connector");const e=this.options.websiteId,n=t.storage.connectorId;this.setPublicationTransformers();const r=this.editor.getProjectData(),o=this.editor.getModel().get("settings"),i=(await this.getHtmlFiles(o)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:$.HTML},{path:t.cssPath,content:t.css,type:$.CSS}])).concat(r.assets.map((t=>{const e=t.src.replace(/^\/assets/,""),n=ur(this.editor,e,$.ASSET),r=cr(this.editor,e,$.ASSET);return{...t,path:n,src:r,type:$.ASSET}}))),s={...r,settings:o,publication:this.settings,files:i};this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>{try{return e.pages[r],n.transformFile?n.transformFile(t)??t:t}catch(e){return console.error("Publication transformer: error transforming file",t,e),t}}))),e.files)}(this.editor,s),this.editor.trigger(er.PUBLISH_DATA,s);try{const[t,r]=await qe({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:s,options:this.settings.options});this.job=r,this.status=vr(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=hr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=hr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(er.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(er.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return this.editor.Pages.getAll().map((e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=qn(e.get("name")),s=`/css/${i}.css`,a=`/${i}.html`,l=cr(this.editor,s,$.CSS),c=ur(this.editor,s,$.CSS),u=ur(this.editor,a,$.HTML);return{html:`\n      <!DOCTYPE html>\n      <html lang="${r("lang")}">\n      <head>\n      <link rel="stylesheet" href="${l}" />\n      ${t?.head||""}\n      ${n?.head||""}\n      <title>${r("title")}</title>\n      <link rel="icon" href="${r("favicon")}" />\n      ${["description","og:title","og:description","og:image"].map((t=>`<meta property="${t}" content="${r(t)}"/>`)).join("\n")}\n      </head>\n      ${this.editor.getHtml({component:o})}\n      </html>\n      `,css:this.editor.getCss({component:o}),cssPath:c,htmlPath:u}}))}async trackProgress(){try{this.job=await Ge({jobId:this.job.jobId}),this.status=vr(this.job.status)}catch(t){return this.status=hr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(er.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(er.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===H.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(er.PUBLISH_END,{success:this.job.status===H.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");nr(t,(n=>{if(n.get(rr))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[rr]=n.toHTML;const o=n.getStyle.bind(n);n[ir]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[sr]=i,n.set("attributes",{...n.get("attributes"),href:cr(t,i,$.HTML)})),n.get("attributes").src){n[or]=n.get("attributes").src;const e=cr(t,n.get("attributes").src,$.ASSET);n.set("attributes",{...n.get("attributes"),src:e})}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>{try{return e.renderComponent?e.renderComponent(n,(()=>t))??t:t}catch(e){return console.error("Publication transformer: error rendering component",n,e),t}}),r()),n.getStyle=()=>lr(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[ar])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[ar]=n.getStyle,n.getStyle=()=>{try{const n=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,r)??t:t})),lr(t,r()));return n}catch(t){return console.error("Publication transformer: error rendering style",n,t),r()}}}}))}(this.editor)}resetPublicationTransformers(){!function(t){nr(t,(t=>{t[rr]&&(t.toHTML=t[rr],delete t[rr]),t[ir]&&(t.getStyle=t[ir],delete t[ir]),t[or]&&(t.set("attributes",{...t.get("attributes"),src:t[or]}),delete t[or]),t[sr]&&(t.set("attributes",{...t.get("attributes"),href:t[sr]}),delete t[sr])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[ar]&&(t.getStyle=t[ar],delete t[ar])}))}(this.editor)}}const yr=[{name:"./project-bar",value:Ln},{name:"./settings",value:Rn},{name:"@silexlabs/grapesjs-fonts",value:He()},{name:"./new-page-dialog",value:Mn},{name:"./page-panel",value:Cn},{name:"grapesjs-blocks-basic",value:it()},{name:"./blocks",value:(t,e)=>{const n="container";t.BlockManager.add(n,{label:"Container",category:"Basics",attributes:{class:"container-png"},content:{type:n,style:{"min-height":"100px"}}}),t.DomComponents.addType(n,{})}},{name:"./semantic",value:zn},{name:"./rich-text",value:Wn},{name:"grapesjs-style-filter",value:at()},{name:"grapesjs-plugin-forms",value:ct()},{name:"grapesjs-custom-code",value:pt()},{name:"./internal-links",value:Yn},{name:"@silexlabs/grapesjs-ui-suggest-classes",value:ft()},{name:"./symbolDialogs",value:Ve},{name:"@silexlabs/grapesjs-symbols",value:Ie},{name:"./PublicationManager",value:gr},{name:"./storage",value:t=>{function e(e){const n="string"==typeof e?JSON.parse(e):e;if(console.error("Error with loading or saving website or uploading asset",n,n instanceof N),!(n instanceof N))return t.Modal.open({title:"Error",content:`An error occured.<br>${n.message}`});switch(console.error("ApiError",n.httpStatusCode,n.message),n.httpStatusCode){case 404:return t.Modal.open({title:"Website not found",content:`This website could not be found.<br><hr>${n.message}`});case 403:return t.Modal.open({title:"Access denied",content:`You are not allowed to access this website.<br><hr>${n.message}`});case 401:return void t.trigger(pn);default:return t.Modal.open({title:"Error",content:`An error occured.<br>${n.message}`})}}t.Storage.add("connector",{async load(e){try{const i=await dn(t)??await fn(t,R.STORAGE,e.connectorId);if(i){const t=await Je({websiteId:e.id,connectorId:i.storage.connectorId});return t.assets&&(t.assets=(n=t.assets,r=e.id,o=i.storage.connectorId,n.map((t=>({...t,src:V(t.src,r,o)}))))),t.pages&&(t.pages=function(t,e,n){return t.map((t=>({...t,frames:t.frames.map((t=>({...t,component:z(t.component,e,n)})))})))}(t.pages,e.id,i.storage.connectorId)),t.styles&&(t.styles=function(t,e,n){const r=/url\((["']?)([^"']+?)\1\)/g;return t.map((t=>{if(t.style&&t.style["background-image"]){const o=[...t.style["background-image"].matchAll(r)].map((t=>V(t[2],e,n)));return{...t,style:{...t.style,"background-image":o.map((t=>`url('${t}')`)).join(", ")}}}return t}))}(t.styles,e.id,i.storage.connectorId)),t}return new Promise(((n,r)=>{t.once(cn,(async()=>{try{t.StorageManager.setAutosave(!1);const r=await t.Storage.load(e);t.StorageManager.setAutosave(!0),n(r)}catch(t){console.error("connectorPlugin load error",t),r(t)}})),t.Commands.run(sn)}))}catch(t){throw console.error("connectorPlugin load error",t),t}var n,r,o},async store(e,n){try{if(await dn(t)){const r=await dn(t);e.assets=e.assets.map((t=>({...t,src:U(t.src)}))),e.pages=e.pages.map((t=>({...t,frames:t.frames.map((t=>({...t,component:W(t.component)})))}))),e.styles=function(t){const e=/url\((["']?)([^"']+?)\1\)/g;return t.map((t=>{if(t.style&&t.style["background-image"]){const n=[...t.style["background-image"].matchAll(e)].map((t=>U(t[2])));return{...t,style:{...t.style,"background-image":n.map((t=>`url('${t}')`)).join(", ")}}}return t}))}(e.styles),await Xe({websiteId:n.id,connectorId:r.storage.connectorId,data:e})}else t.once(cn,(()=>t.Storage.save(n))),t.Commands.run(sn)}catch(t){throw console.error("connectorPlugin store error",t),t}}}),t.on("storage:error:load",(t=>{e(t)})),t.on("storage:error:store",(t=>{e(t)})),t.on("asset:upload:end",(e=>{t.store()})),t.on("asset:upload:error",(t=>{e(t)}))}},{name:"./LoginDialog",value:vn},{name:"@silexlabs/grapesjs-loading",value:$e()},{name:"./breadcrumbs",value:function(t,e){let n;var r;function o(){let e=t.getSelected()??t.Pages.getSelected().getMainComponent();if(!n)return;for(n.innerHTML="";e;){const t=i(e);n.prepend(t),console.log(e,e.tagName),e=e.parent()}const r=document.createElement("span");r.innerHTML="<h3>Selection:&nbsp;</h3>",n.prepend(r)}function i(e){const n=document.createElement("span");return e.model,n.onclick=()=>{t.select(e)},n.classList.add("breadcrumb"),n.innerHTML=`<span>${e.get("tagName")}${e.getClasses().length?`.${e.getClasses().join(".")}`:""}</span>`,n}r=t=>{n=document.createElement("div"),n.id="breadcrumbs-container",t.prepend(n);const e=document.createElement("style");e.innerHTML='\n      #breadcrumbs-container {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding: 2px 10px 0;\n        font-size: 12px;\n        color: #999;\n        overflow-x: auto;\n        overflow-y: hidden;\n      }\n      #breadcrumbs-container h3 {\n        margin: 0;\n      }\n      #breadcrumbs-container .breadcrumb {\n        margin: 5px;\n        font-size: large;\n        line-height: 1;\n        cursor: pointer;\n        white-space: nowrap;\n      }\n      #breadcrumbs-container .breadcrumb::after {\n        content: "➔";\n        margin-left: 10px;\n      }\n\n      #breadcrumbs-container .breadcrumb:last-child::after {\n        content: "";\n      }\n    ',t.prepend(e),o()},mn?r(mn):bn.push(r),t.on("component:selected style:target component:drag:end",(()=>o()))}},{name:"./footer",value:function(t,e){const n=t.Panels.addPanel({id:"footer",visible:!0,buttons:[{id:"myNewButton",className:"someClass",command:"someCommand",attributes:{title:"Some title"},active:!1}]});setTimeout((()=>{mn=n.view?.el,bn.forEach((t=>t(mn))),bn=[]}))}}];yr.filter((t=>"function"!=typeof t.value)).forEach((t=>{throw new Error(`Plugin ${t.name} could not be loaded correctly (${t.value})`)}));const br="Containers",wr="Components";function _r(t,e,n){return{container:"#gjs",height:"100%",showOffsets:!0,showDevices:!0,layerManager:{appendTo:".layer-manager-container"},blockManager:{appendTo:".block-manager-container"},assetManager:{upload:`${n}${f}${S}${j}/?websiteId=${t}${e?`&connectorId=${e}`:""}`},storageManager:{autoload:!1,type:"connector",options:{connector:{id:t,connectorId:e}}},cssIcons:"/css/all.min.css",plugins:yr.map((t=>t.value)),pluginsOpts:{[it()]:{blocks:["text","image","video","map"],category:br},[Ln]:{panels:[{id:"dash",className:"logo",attributes:{title:"Go to your dashboard"},link:"/",command:"open-dash"},{id:"block-manager-btn",className:"block-manager-btn fa fa-fw fa-plus",attributes:{title:"Blocks",containerClassName:"block-manager-container"},command:"open-blocks"},{id:"symbols-btn",className:"symbols-btn fa-regular fa-gem",attributes:{title:"Symbols",containerClassName:"symbols-list-container"},command:"open-symbols",buttons:[{id:"symbol-create-button",className:"pages__add-page fa-solid fa-plus",label:"Create symbol from selection",command:Fe}]},{id:"page-panel-btn",className:"page-panel-btn fa fa-fw fa-file",attributes:{title:"Pages",containerClassName:"page-panel-container"},command:wn,buttons:[{className:"pages__add-page fa fa-file",command:_n,text:"+"}]},{id:"layer-manager-btn",className:"layer-manager-btn fa-solid fa-layer-group",attributes:{title:"Layers",containerClassName:"layer-manager-container"},command:"open-layers"},{id:"font-dialog-btn",className:"font-manager-btn fa-solid fa-font",attributes:{title:"Fonts"},command:Re.cmdOpenFonts},{id:"settings-dialog-btn",className:"page-panel-btn fa-solid fa-gears",attributes:{title:"Settings"},command:Dn},{id:"spacer",attributes:{},className:"project-bar-spacer"},{id:"logout-button",className:"page-panel-btn fa fa-fw fa-sign-out",attributes:{title:"Sign out"},command:an}]},[gr]:{appendTo:"options",websiteId:t},[Cn]:{cmdOpenNewPageDialog:jn,cmdOpenSettings:Dn,appendTo:".page-panel-container"},[ft()]:{enableCount:!1,enablePerformance:!1},[Yn]:{onError:t=>console.warn("Links errors:",t)},[pt()]:{blockLabel:"HTML",blockCustomCode:{category:wr}},[Ie]:{appendTo:".symbols-list-container"},[He()]:{api_key:"AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc"},[vn]:{id:t}}}}let xr;async function Cr(t){if(xr)throw new Error("Grapesjs editor already created");return new Promise(((e,n)=>{try{xr=rt().init(t)}catch(t){console.error("Error initializing GrapesJs with plugins:",yr,t),n(t)}["text"].forEach((t=>xr.Blocks.get(t)?.set("category","Basics"))),["image","video"].forEach((t=>xr.Blocks.get(t)?.set("category","Media"))),["map"].forEach((t=>xr.Blocks.get(t)?.set("category","Components"))),xr.Blocks.render([]),xr.Commands.add("gjs-open-import-webpage",function(t,e){const n=t.getConfig("stylePrefix"),r=t.Modal,o=t.CodeManager.getViewer("CodeMirror").clone(),i=document.createElement("div"),s=e.modalImportLabel,a=e.modalImportContent;let l=o.editor;const c=document.createElement("button");return c.type="button",c.innerHTML=e.modalImportButton,c.className=`${n}btn-prim ${n}btn-import`,c.onclick=e=>{t.setComponents(l.getValue().trim()),r.close()},o.set({codeName:"htmlmixed",theme:"hopscotch",readOnly:0,...e.importViewerOptions}),{run(u){if(!l){const t=document.createElement("textarea");if(s){const t=document.createElement("div");t.className=`${n}import-label`,t.innerHTML=s,i.appendChild(t)}i.appendChild(t),i.appendChild(c),o.init(t),l=o.editor}r.setTitle(e.modalImportTitle),r.setContent(i);const p="function"==typeof a?a(t):a;o.setContent(p||""),r.open().getModel().once("change:open",(()=>t.stopCommand(this.id))),l.refresh()},stop(){r.close()}}}(xr,{modalImportLabel:"",modalImportContent:"Paste a web page HTML code here.",modalImportButton:"Import",modalImportTitle:"Import from website"})),xr.on("load",(()=>{xr.Panels.getPanel("views").buttons.remove("open-blocks"),xr.Panels.getPanel("views").buttons.remove("open-layers"),xr.Panels.getPanel("views").view.el.firstChild.style.justifyContent="initial",xr.Panels.getPanel("options").buttons.remove("export-template"),xr.BlockManager.render(null),xr.StyleManager.addProperty("extra",{extend:"filter"}),e(xr)}))}))}function Sr(){return xr}class Or extends et{api=o;websiteId=new URL(location.href).searchParams.get("id")??u;storageId=new URL(location.href).searchParams.get("connectorId");lang=new URL(location.href).searchParams.get("lang")??p;rootUrl=window.location.origin;debug=!1;grapesJsConfig;clientConfigUrl=`${this.rootUrl}/${d}`;initGrapesConfig(){this.grapesJsConfig=_r(this.websiteId,this.storageId,this.rootUrl)}getEditor(){return Sr()}publicationTransformers=[];addPublicationTransformers(t){Array.isArray(t)||(t=[t]),t.forEach((t=>{!function(t){const e=["renderComponent","renderCssRule","transformFile","transformPermalink","transformPath"];Object.keys(t).forEach((t=>{if(!e.includes(t))throw new Error(`Publication transformer: unknown property ${t}`)})),e.forEach((e=>{if("function"!=typeof t[e]&&void 0!==t[e])throw new Error(`Publication transformer: ${e} must be a function`)}))}(t)})),this.publicationTransformers=this.publicationTransformers.concat(t)}}async function Tr(t={}){const e=new Or;Object.assign(e,t),e.addPublicationTransformers(B),await e.addPlugin(e.clientConfigUrl,{}),e.debug&&console.warn("Silex starting in debug mode.",{config:e}),e.emit(er.STARTUP_START),e.initGrapesConfig(),e.emit(er.GRAPESJS_START);try{await Cr(e.grapesJsConfig)}catch(t){throw console.error("Error starting Silex",t),t}const n=Sr();n.getModel().set("config",e),e.emit(er.GRAPESJS_END,{editor:n}),n.I18n.setLocale(e.lang),n.StorageManager.setAutosave(!1);try{await n.load(null)}catch(t){t.httpStatusCode}finally{setTimeout((()=>{n.editor.set("changesCount",0),n.StorageManager.setAutosave(!0),document.querySelector(".silex-loader").classList.add("silex-dialog-hide"),document.querySelector("#gjs").classList.remove("silex-dialog-hide"),e.emit(er.STARTUP_END,{editor:n,config:e})}),100)}}console.info("\nSilex client loaded\n")})(),silex=r})();

package/dist/plugins/client/client/grapesjs/breadcrumbs.js

@@ -13,9 +13,11 @@ export default function (editor, options) {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 0 10px;
+        padding: 2px 10px 0;
         font-size: 12px;
         color: #999;
+        overflow-x: auto;
+        overflow-y: hidden;
       }
       #breadcrumbs-container h3 {
         margin: 0;
@@ -25,9 +27,7 @@ export default function (editor, options) {
         font-size: large;
         line-height: 1;
         cursor: pointer;
-      }
-      #breadcrumbs-container .breadcrumb span {
-        text-decoration: underline;
+        white-space: nowrap;
       }
       #breadcrumbs-container .breadcrumb::after {
         content: "➔";
@@ -42,7 +42,7 @@ export default function (editor, options) {
         renderBreadcrumbs();
     });
     // Append the breadcrumbs container to the editor's container
-    editor.on('component:selected style', () => renderBreadcrumbs());
+    editor.on('component:selected style:target component:drag:end', () => renderBreadcrumbs());
     function renderBreadcrumbs() {
         let component = editor.getSelected() ?? editor.Pages.getSelected().getMainComponent();
         if (!breadcrumbsContainer)

package/dist/plugins/client/client/grapesjs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnC,MAAM,CAAC,OAAO,WAAW,MAAM,EAAE,OAAO;IACtC,IAAI,oBAAoB,CAAA;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE;QAChB,uCAAuC;QACvC,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACpD,oBAAoB,CAAC,EAAE,GAAG,uBAAuB,CAAA;QACjD,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAA;QACpC,yBAAyB;QACzB,MAAM,iBAAiB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QACzD,iBAAiB,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6B7B,CAAA;QACD,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;QACjC,iBAAiB,EAAE,CAAA;IACrB,CAAC,CAAC,CAAA;IACF,6DAA6D;IAE7D,MAAM,CAAC,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAChE,SAAS,iBAAiB;QACxB,IAAI,SAAS,GAAG,MAAM,CAAC,WAAW,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,gBAAgB,EAAE,CAAA;QAErF,IAAG,CAAC,oBAAoB;YAAE,OAAM;QAEhC,kCAAkC;QAClC,oBAAoB,CAAC,SAAS,GAAG,EAAE,CAAA;QAEnC,yEAAyE;QACzE,OAAO,SAAS,EAAE;YAChB,MAAM,UAAU,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAA;YAC9C,oBAAoB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;YACxC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;YACzC,SAAS,GAAG,SAAS,CAAC,MAAM,EAAE,CAAA;SAC/B;QAED,QAAQ;QACR,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QAC5C,KAAK,CAAC,SAAS,GAAG,2BAA2B,CAAA;QAC7C,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC;IACD,SAAS,gBAAgB,CAAC,SAAS;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACjD,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAA;QAC7B,UAAU,CAAC,OAAO,GAAG,GAAG,EAAE;YACxB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAC1B,CAAC,CAAA;QACD,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;QACtC,UAAU,CAAC,SAAS,GAAG,SAAS,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,CAAA;QAC/I,OAAO,UAAU,CAAA;IACnB,CAAC;AACH,CAAC"}
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnC,MAAM,CAAC,OAAO,WAAW,MAAM,EAAE,OAAO;IACtC,IAAI,oBAAoB,CAAA;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE;QAChB,uCAAuC;QACvC,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACpD,oBAAoB,CAAC,EAAE,GAAG,uBAAuB,CAAA;QACjD,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAA;QACpC,yBAAyB;QACzB,MAAM,iBAAiB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QACzD,iBAAiB,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6B7B,CAAA;QACD,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;QACjC,iBAAiB,EAAE,CAAA;IACrB,CAAC,CAAC,CAAA;IACF,6DAA6D;IAE7D,MAAM,CAAC,EAAE,CAAC,oDAAoD,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC1F,SAAS,iBAAiB;QACxB,IAAI,SAAS,GAAG,MAAM,CAAC,WAAW,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,gBAAgB,EAAE,CAAA;QAErF,IAAG,CAAC,oBAAoB;YAAE,OAAM;QAEhC,kCAAkC;QAClC,oBAAoB,CAAC,SAAS,GAAG,EAAE,CAAA;QAEnC,yEAAyE;QACzE,OAAO,SAAS,EAAE;YAChB,MAAM,UAAU,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAA;YAC9C,oBAAoB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;YACxC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;YACzC,SAAS,GAAG,SAAS,CAAC,MAAM,EAAE,CAAA;SAC/B;QAED,QAAQ;QACR,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QAC5C,KAAK,CAAC,SAAS,GAAG,2BAA2B,CAAA;QAC7C,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC;IACD,SAAS,gBAAgB,CAAC,SAAS;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACjD,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAA;QAC7B,UAAU,CAAC,OAAO,GAAG,GAAG,EAAE;YACxB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAC1B,CAAC,CAAA;QACD,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;QACtC,UAAU,CAAC,SAAS,GAAG,SAAS,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,CAAA;QAC/I,OAAO,UAAU,CAAA;IACnB,CAAC;AACH,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.60",
+  "version": "3.0.0-alpha.61",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",

package/src/css/_variables.scss

@@ -17,6 +17,7 @@ $projectBarWidth: 35px;
 $projectPanelWidth: 13%;
 $projectPanelMinWidth: 150px;
 $viewsPanelWidth: 15%; // 15% is grapesjs default
+$footerHeight: 30px;
 $transitionSpeedMedium: .35s;
 $transitionSpeedSlow: .5s;
 $prefix: 'gjs-';

package/src/css/footer.scss

@@ -4,8 +4,9 @@
   bottom: 0;
   left: $projectBarWidth;
   right: $viewsPanelWidth;
-  border-top: 1px solid #dee2e6;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  height: $footerHeight;
 }

package/src/css/project-bar.scss

@@ -43,7 +43,7 @@ iframe.enable-squeeze.silex-squeeze-left {
   top: $topBarHeight;
   width: $projectPanelWidth;
   min-width: $projectPanelMinWidth;
-  height: calc(100% - $topBarHeight);
+  height: calc(100% - $topBarHeight - $footerHeight);
   background-color: $lighterPrimaryColor;
   &:not(.gjs-hidden) {
     display: flex; // let the child take the whole height

package/src/ts/client/grapesjs/breadcrumbs.ts

@@ -14,9 +14,11 @@ export default function (editor, options) {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 0 10px;
+        padding: 2px 10px 0;
         font-size: 12px;
         color: #999;
+        overflow-x: auto;
+        overflow-y: hidden;
       }
       #breadcrumbs-container h3 {
         margin: 0;
@@ -26,9 +28,7 @@ export default function (editor, options) {
         font-size: large;
         line-height: 1;
         cursor: pointer;
-      }
-      #breadcrumbs-container .breadcrumb span {
-        text-decoration: underline;
+        white-space: nowrap;
       }
       #breadcrumbs-container .breadcrumb::after {
         content: "➔";
@@ -44,7 +44,7 @@ export default function (editor, options) {
   })
   // Append the breadcrumbs container to the editor's container
 
-  editor.on('component:selected style', () => renderBreadcrumbs())
+  editor.on('component:selected style:target component:drag:end', () => renderBreadcrumbs())
   function renderBreadcrumbs() {
     let component = editor.getSelected() ?? editor.Pages.getSelected().getMainComponent()