@silexlabs/silex 3.0.0-alpha.146 → 3.0.0-alpha.147

package/dist/client/client/events.d.ts

@@ -14,5 +14,6 @@ export declare enum ClientEvent {
     SETTINGS_OPEN = "silex:settings:open",
     SETTINGS_CLOSE = "silex:settings:close",
     SETTINGS_SAVE_START = "silex:settings:save:start",
-    SETTINGS_SAVE_END = "silex:settings:save:end"
+    SETTINGS_SAVE_END = "silex:settings:save:end",
+    SETTINGS_SECTION_CHANGE = "silex:settings:section-change"
 }

package/dist/client/js/main.js

@@ -164,7 +164,7 @@ var silex;(()=>{var t={99:function(t){"undefined"!=typeof globalThis?globalThis:
         </label>
       </div>
     </div>
-  `}];var ur;!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",t.SETTINGS_OPEN="silex:settings:open",t.SETTINGS_CLOSE="silex:settings:close",t.SETTINGS_SAVE_START="silex:settings:save:start",t.SETTINGS_SAVE_END="silex:settings:save:end"}(ur||(ur={}));const pr=[...cr],dr=[...cr],fr=document.createElement("div");let hr;const gr="open-settings";let vr="v3",mr=null;function yr(t,e){const n=t.head.querySelector(`.${e}`);if(n)return n;const r=t.createElement("div");return r.classList.add(e),t.head.appendChild(r),r}function br(t){const e=t.Canvas.getDocument();e&&(yr(e,"site-head").innerHTML=t.getModel().get("settings").head||"",yr(e,"page-head").innerHTML=t.Pages.getSelected().get("settings")?.head||"")}function*wr(t,e){if(void 0!==t){let n=0;for(const r of t)yield e(r,n++)}}const _r=["DIV","P","H1","H2","H3","H4","H5","H6","SPAN","MAIN","ASIDE","SECTION","ADDRESS","ARTICLE","BUTTON","NAV","HEADER","FOOTER","DETAILS","SUMMARY","PRE","BLOCKQUOTE"],xr={name:"orderedList",icon:"1.",attributes:{title:"Ordered List"},result:t=>t.exec("insertOrderedList")},Cr={name:"unorderedList",icon:"•",attributes:{title:"Unordered List"},result:t=>t.exec("insertUnorderedList")};function Sr(t){return(t||"index").toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g,"-").replace(/-+/g,"-")}function Or(t){return`./${Sr(t)}.html`}const Tr=[{id:"",name:"-"},{id:"url",name:"URL"},{id:"email",name:"Email"},{id:"page",name:"Page"}],Er=(t,e)=>{function n(e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll(e)}))}function r(t){switch(t){case"email":return"mailto:";case"page":return Or(null);case"url":return"https://"}}function o(e,n=""){const i=function(t){return 0===t.indexOf("mailto:")?"email":0===t.indexOf("./")?"page":t?"url":""}(n),s=function(e,n){switch(e){case"email":const e=n.replace("mailto:","").split("?"),r=e[0],o=(e[1]||"").split("&").reduce(((t,e)=>{const n=e.split("=");return t[n[0]]=n[1],t}),{});return At`<div class="href-next__email-inputs">
+  `}];var ur;!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",t.SETTINGS_OPEN="silex:settings:open",t.SETTINGS_CLOSE="silex:settings:close",t.SETTINGS_SAVE_START="silex:settings:save:start",t.SETTINGS_SAVE_END="silex:settings:save:end",t.SETTINGS_SECTION_CHANGE="silex:settings:section-change"}(ur||(ur={}));const pr=[...cr],dr=[...cr],fr=document.createElement("div");let hr;const gr="open-settings";let vr="v3",mr=null;function yr(t,e){const n=t.head.querySelector(`.${e}`);if(n)return n;const r=t.createElement("div");return r.classList.add(e),t.head.appendChild(r),r}function br(t){const e=t.Canvas.getDocument();e&&(yr(e,"site-head").innerHTML=t.getModel().get("settings").head||"",yr(e,"page-head").innerHTML=t.Pages.getSelected().get("settings")?.head||"")}function*wr(t,e){if(void 0!==t){let n=0;for(const r of t)yield e(r,n++)}}const _r=["DIV","P","H1","H2","H3","H4","H5","H6","SPAN","MAIN","ASIDE","SECTION","ADDRESS","ARTICLE","BUTTON","NAV","HEADER","FOOTER","DETAILS","SUMMARY","PRE","BLOCKQUOTE"],xr={name:"orderedList",icon:"1.",attributes:{title:"Ordered List"},result:t=>t.exec("insertOrderedList")},Cr={name:"unorderedList",icon:"•",attributes:{title:"Unordered List"},result:t=>t.exec("insertUnorderedList")};function Sr(t){return(t||"index").toLowerCase().replace(/[^a-z0-9 -]/g,"").replace(/\s+/g,"-").replace(/-+/g,"-")}function Or(t){return`./${Sr(t)}.html`}const Tr=[{id:"",name:"-"},{id:"url",name:"URL"},{id:"email",name:"Email"},{id:"page",name:"Page"}],Er=(t,e)=>{function n(e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll(e)}))}function r(t){switch(t){case"email":return"mailto:";case"page":return Or(null);case"url":return"https://"}}function o(e,n=""){const i=function(t){return 0===t.indexOf("mailto:")?"email":0===t.indexOf("./")?"page":t?"url":""}(n),s=function(e,n){switch(e){case"email":const e=n.replace("mailto:","").split("?"),r=e[0],o=(e[1]||"").split("&").reduce(((t,e)=>{const n=e.split("=");return t[n[0]]=n[1],t}),{});return At`<div class="href-next__email-inputs">
             <label for="href-next__email" class="gjs-one-bg silex-label">Email address</label>
             <input class="href-next__email" placeholder="Insert email" type="email" value=${r||""}/>
             <label for="href-next__email-subject" class="gjs-one-bg silex-label">Subject</label>
@@ -306,7 +306,7 @@ var silex;(()=>{var t={99:function(t){"undefined"!=typeof globalThis?globalThis:
           @click=${()=>this.editor.Commands.stop(kr)}
         >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,Qr.STATUS_NONE)}}function jr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}async function Mr(t){const e=(new TextEncoder).encode(t),n=await crypto.subtle.digest("SHA-256",e);return Array.from(new Uint8Array(n)).map((t=>t.toString(16).padStart(2,"0"))).join("")}const Lr="tmp-pre-publication-transformer-tohtml",Nr="tmp-pre-publication-transformer-src",Ir="tmp-pre-publication-transformer-attributes-src",Dr="tmp-pre-publication-transformer-inline-css",$r="tmp-pre-publication-transformer-href",Rr="tmp-pre-publication-transformer-tocss",Hr={renderComponent:(t,e)=>e(),renderCssRule:(t,e)=>e(),transformPath:(t,e)=>t,transformPermalink(t,e,n){switch(n){case Pe.HTML:return t;case Pe.CSS:return`../${t.replace(/^\//,"")}`;default:throw new Error(`Unknown initiator ${n}`)}},transformFile:t=>t};function Fr(t,e){const n=e["background-image"];if(n){const r=n.replace(/url\(([^)]+)\)/g,((e,n)=>{const r=n.replace(/['"]/g,"");return`url(${Vr(t,r,Ae.ASSET,Pe.CSS)})`}));return{...e,"background-image":r}}return e}function Vr(t,e,n,r){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>e.transformPermalink?e.transformPermalink(t,n,r)??t:t),e)}function Ur(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>e.transformPath?e.transformPath(t,n)??t:t),e)}const Br=window.location.pathname.replace(/\/$/,""),zr=window.location.origin;function Wr(t,e,n){if(t.startsWith("/assets")){const r=new URL(t,zr);return r.pathname=r.pathname.replace(/^\/assets/,""),r.pathname=`${Br}${on}${vn}${Cn}${r.pathname}`,r.searchParams.set("websiteId",e),r.searchParams.set("connectorId",n),`${decodeURIComponent(r.pathname)}${r.search}`}return t.startsWith("<svg")||t.startsWith("data:image")||console.warn("storedToDisplayed: path is not a stored path",t),t}function qr(t){const e=`${Br}${on}${vn}${Cn}`;if(t.startsWith(e)){const n=new URL(t,zr);n.pathname=n.pathname.replace(new RegExp(`^${e}`),""),n.pathname=`${Br}/assets${n.pathname}`,n.searchParams.delete("websiteId"),n.searchParams.delete("connectorId");const r="/"+n.toString().replace(new RegExp(`^${zr}${Br}`),"").replace(/^\//,"");return decodeURIComponent(r)}return t.startsWith("<svg")||t.startsWith("data:image")||console.warn("displayedToStored: path is not a displayed path",t),t}const Gr={transformPath(t,e){if(e===Ae.ASSET)return qr(t)},transformPermalink(t,e){if(e===Ae.ASSET)return qr(t)}};function Kr(t,e,n){const r=t.attributes?.src?{...t,attributes:{...t.attributes,src:Wr(t.attributes.src,e,n)}}:t;return r.components&&(r.components=r.components.map((t=>Kr(t,e,n)))),r}function Yr(t){const e=t.attributes?.src?{...t,attributes:{...t.attributes,src:qr(t.attributes.src)}}:t;return e.components&&(e.components=e.components.map((t=>Yr(t)))),e}const Zr="publish",Xr="publish-login",Jr="publish-logout";var Qr;function to(t,e){t.PublicationManager=new ro(t,e)}function eo(t){switch(t){case Me.IN_PROGRESS:return Qr.STATUS_PENDING;case Me.ERROR:return Qr.STATUS_ERROR;case Me.SUCCESS:return Qr.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"}(Qr||(Qr={}));const no=window.location.origin+window.location.pathname.replace(/\/$/,"");class ro{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=Qr.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??{},$e({type:je.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=Qr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(Zr,(()=>this.startPublication())),t.Commands.add(Xr,((t,e,n)=>this.goLogin(n))),t.Commands.add(Jr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new Pr(t,{appendTo:this.options.appendTo}):console.info("PublicationUi is disabled because no appendTo option is set")}async goLogin(t){if(t.isLoggedIn)return this.settings={...this.settings,connector:t},this.status=Qr.STATUS_NONE,this.editor.store(null),void(this.dialog&&this.dialog.displayPending(this.job,this.status));this.settings={},this.status=Qr.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${no}${on}${sn}${un}?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=Qr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(ur.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=Qr.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await Re({type:je.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=Qr.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async getPublicationData(){this.setPublicationTransformers();const t=this.editor.getProjectData(),e=this.editor.getModel().get("settings"),n=(await this.getHtmlFiles(e)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:Ae.HTML},{path:t.cssPath,content:t.css,type:Ae.CSS}])).concat(t.assets.map((t=>{const e=Ur(this.editor,t.src,Ae.ASSET),n=qr(t.src).replace(/^\/assets\//,"");return{...t,path:e,src:n,type:Ae.ASSET}}))),r={...t,assets:t.assets.map((t=>({...t,src:qr(t.src)}))),settings:e,publication:this.settings,files:n};return this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>(e.pages[r],n.transformFile?n.transformFile(t)??t:t)))),e.files)}(this.editor,r),this.editor.trigger(ur.PUBLISH_DATA,r),r}async startPublication(){try{if(this.status===Qr.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=Qr.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(ur.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,r=await this.getPublicationData(),[o,i]=await He({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:r,options:this.settings.options});this.job=i,this.status=eo(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=Qr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=Qr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(ur.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(ur.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return Promise.all(this.editor.Pages.getAll().map((async e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=this.editor.getCss({component:o}),s=this.editor.getHtml({component:o}),a=Sr(e.get("name")),l=`/css/${a}-${await Mr(i)}.css`,c=`/${a}.html`,u=Vr(this.editor,l,Ae.CSS,Pe.HTML),p=Ur(this.editor,l,Ae.CSS),d=Ur(this.editor,c,Ae.HTML);return{html:`<!DOCTYPE html>\n<html lang="${r("lang")}">\n<head>\n<meta charset="UTF-8">\n<link rel="stylesheet" href="${u}" />\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 name="${t}" property="${t}" content="${r(t)}"/>`)).join("\n")}\n</head>\n${s}\n</html>`,css:i,cssPath:p,htmlPath:d}})))}async trackProgress(){try{this.job=await Fe({jobId:this.job.jobId}),this.status=eo(this.job.status)}catch(t){return this.status=Qr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(ur.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(ur.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===Me.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(ur.PUBLISH_END,{success:this.job.status===Me.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");jr(t,(n=>{if(n.get(Lr))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[Lr]=n.toHTML;const o=n.getStyle.bind(n);n[Dr]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[$r]=i,n.set("attributes",{...n.get("attributes"),href:Vr(t,i,Ae.HTML,Pe.HTML)})),n.get("attributes").src){n[Nr]=n.get("attributes").src;const e=Vr(t,n.get("attributes").src,Ae.ASSET,Pe.HTML);n.set("attributes",{...n.get("attributes"),src:e})}if(n.get("src")){n[Ir]=n.get("src");const e=Vr(t,n.get("src"),Ae.ASSET,Pe.HTML);n.set("src",e)}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>e.renderComponent?e.renderComponent(n,(()=>t))??t:t),r()),n.getStyle=()=>Fr(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[Rr])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[Rr]=n.getStyle,n.getStyle=()=>{const n=Fr(t,r()),o=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,(()=>n))??t:t})),n);return o}}}))}(this.editor)}resetPublicationTransformers(){!function(t){jr(t,(t=>{t[Lr]&&(t.toHTML=t[Lr],delete t[Lr]),t[Dr]&&(t.getStyle=t[Dr],delete t[Dr]),t[Nr]&&(t.set("attributes",{...t.get("attributes"),src:t[Nr]}),delete t[Nr]),t[Ir]&&(t.set("src",t[Ir]),delete t[Ir]),t[$r]&&(t.set("attributes",{...t.get("attributes"),href:t[$r]}),delete t[$r])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[Rr]&&(t.getStyle=t[Rr],delete t[Rr])}))}(this.editor)}}const oo="fa fa-fw fa-paste silex-button",io=" disabled",so=[{name:"./project-bar",value:ir},{name:"grapesjs-style-bg",value:qn()},{name:"./settings",value:(t,e)=>{try{vr="3.0.0-alpha.146"}catch(t){}console.info("Silex version:",vr),t.Commands.add(gr,{run:(e,n,{page:r})=>{hr=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n?.set&&n.set("active",0),t.stopCommand(gr)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r);const o=lr(n)?pr:dr;let i=o[0];Gt(At`
+    `}}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,Qr.STATUS_NONE)}}function jr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}async function Mr(t){const e=(new TextEncoder).encode(t),n=await crypto.subtle.digest("SHA-256",e);return Array.from(new Uint8Array(n)).map((t=>t.toString(16).padStart(2,"0"))).join("")}const Lr="tmp-pre-publication-transformer-tohtml",Nr="tmp-pre-publication-transformer-src",Ir="tmp-pre-publication-transformer-attributes-src",Dr="tmp-pre-publication-transformer-inline-css",$r="tmp-pre-publication-transformer-href",Rr="tmp-pre-publication-transformer-tocss",Hr={renderComponent:(t,e)=>e(),renderCssRule:(t,e)=>e(),transformPath:(t,e)=>t,transformPermalink(t,e,n){switch(n){case Pe.HTML:return t;case Pe.CSS:return`../${t.replace(/^\//,"")}`;default:throw new Error(`Unknown initiator ${n}`)}},transformFile:t=>t};function Fr(t,e){const n=e["background-image"];if(n){const r=n.replace(/url\(([^)]+)\)/g,((e,n)=>{const r=n.replace(/['"]/g,"");return`url(${Vr(t,r,Ae.ASSET,Pe.CSS)})`}));return{...e,"background-image":r}}return e}function Vr(t,e,n,r){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>e.transformPermalink?e.transformPermalink(t,n,r)??t:t),e)}function Ur(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>e.transformPath?e.transformPath(t,n)??t:t),e)}const Br=window.location.pathname.replace(/\/$/,""),zr=window.location.origin;function Wr(t,e,n){if(t.startsWith("/assets")){const r=new URL(t,zr);return r.pathname=r.pathname.replace(/^\/assets/,""),r.pathname=`${Br}${on}${vn}${Cn}${r.pathname}`,r.searchParams.set("websiteId",e),r.searchParams.set("connectorId",n),`${decodeURIComponent(r.pathname)}${r.search}`}return t.startsWith("<svg")||t.startsWith("data:image")||console.warn("storedToDisplayed: path is not a stored path",t),t}function qr(t){const e=`${Br}${on}${vn}${Cn}`;if(t.startsWith(e)){const n=new URL(t,zr);n.pathname=n.pathname.replace(new RegExp(`^${e}`),""),n.pathname=`${Br}/assets${n.pathname}`,n.searchParams.delete("websiteId"),n.searchParams.delete("connectorId");const r="/"+n.toString().replace(new RegExp(`^${zr}${Br}`),"").replace(/^\//,"");return decodeURIComponent(r)}return t.startsWith("<svg")||t.startsWith("data:image")||console.warn("displayedToStored: path is not a displayed path",t),t}const Gr={transformPath(t,e){if(e===Ae.ASSET)return qr(t)},transformPermalink(t,e){if(e===Ae.ASSET)return qr(t)}};function Kr(t,e,n){const r=t.attributes?.src?{...t,attributes:{...t.attributes,src:Wr(t.attributes.src,e,n)}}:t;return r.components&&(r.components=r.components.map((t=>Kr(t,e,n)))),r}function Yr(t){const e=t.attributes?.src?{...t,attributes:{...t.attributes,src:qr(t.attributes.src)}}:t;return e.components&&(e.components=e.components.map((t=>Yr(t)))),e}const Zr="publish",Xr="publish-login",Jr="publish-logout";var Qr;function to(t,e){t.PublicationManager=new ro(t,e)}function eo(t){switch(t){case Me.IN_PROGRESS:return Qr.STATUS_PENDING;case Me.ERROR:return Qr.STATUS_ERROR;case Me.SUCCESS:return Qr.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"}(Qr||(Qr={}));const no=window.location.origin+window.location.pathname.replace(/\/$/,"");class ro{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=Qr.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??{},$e({type:je.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=Qr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(Zr,(()=>this.startPublication())),t.Commands.add(Xr,((t,e,n)=>this.goLogin(n))),t.Commands.add(Jr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new Pr(t,{appendTo:this.options.appendTo}):console.info("PublicationUi is disabled because no appendTo option is set")}async goLogin(t){if(t.isLoggedIn)return this.settings={...this.settings,connector:t},this.status=Qr.STATUS_NONE,this.editor.store(null),void(this.dialog&&this.dialog.displayPending(this.job,this.status));this.settings={},this.status=Qr.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${no}${on}${sn}${un}?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=Qr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(ur.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=Qr.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await Re({type:je.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=Qr.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async getPublicationData(){this.setPublicationTransformers();const t=this.editor.getProjectData(),e=this.editor.getModel().get("settings"),n=(await this.getHtmlFiles(e)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:Ae.HTML},{path:t.cssPath,content:t.css,type:Ae.CSS}])).concat(t.assets.map((t=>{const e=Ur(this.editor,t.src,Ae.ASSET),n=qr(t.src).replace(/^\/assets\//,"");return{...t,path:e,src:n,type:Ae.ASSET}}))),r={...t,assets:t.assets.map((t=>({...t,src:qr(t.src)}))),settings:e,publication:this.settings,files:n};return this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>(e.pages[r],n.transformFile?n.transformFile(t)??t:t)))),e.files)}(this.editor,r),this.editor.trigger(ur.PUBLISH_DATA,r),r}async startPublication(){try{if(this.status===Qr.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=Qr.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(ur.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,r=await this.getPublicationData(),[o,i]=await He({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:r,options:this.settings.options});this.job=i,this.status=eo(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=Qr.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=Qr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(ur.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(ur.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return Promise.all(this.editor.Pages.getAll().map((async e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=this.editor.getCss({component:o}),s=this.editor.getHtml({component:o}),a=Sr(e.get("name")),l=`/css/${a}-${await Mr(i)}.css`,c=`/${a}.html`,u=Vr(this.editor,l,Ae.CSS,Pe.HTML),p=Ur(this.editor,l,Ae.CSS),d=Ur(this.editor,c,Ae.HTML);return{html:`<!DOCTYPE html>\n<html lang="${r("lang")}">\n<head>\n<meta charset="UTF-8">\n<link rel="stylesheet" href="${u}" />\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 name="${t}" property="${t}" content="${r(t)}"/>`)).join("\n")}\n</head>\n${s}\n</html>`,css:i,cssPath:p,htmlPath:d}})))}async trackProgress(){try{this.job=await Fe({jobId:this.job.jobId}),this.status=eo(this.job.status)}catch(t){return this.status=Qr.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(ur.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(ur.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===Me.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(ur.PUBLISH_END,{success:this.job.status===Me.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");jr(t,(n=>{if(n.get(Lr))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[Lr]=n.toHTML;const o=n.getStyle.bind(n);n[Dr]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[$r]=i,n.set("attributes",{...n.get("attributes"),href:Vr(t,i,Ae.HTML,Pe.HTML)})),n.get("attributes").src){n[Nr]=n.get("attributes").src;const e=Vr(t,n.get("attributes").src,Ae.ASSET,Pe.HTML);n.set("attributes",{...n.get("attributes"),src:e})}if(n.get("src")){n[Ir]=n.get("src");const e=Vr(t,n.get("src"),Ae.ASSET,Pe.HTML);n.set("src",e)}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>e.renderComponent?e.renderComponent(n,(()=>t))??t:t),r()),n.getStyle=()=>Fr(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[Rr])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[Rr]=n.getStyle,n.getStyle=()=>{const n=Fr(t,r()),o=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,(()=>n))??t:t})),n);return o}}}))}(this.editor)}resetPublicationTransformers(){!function(t){jr(t,(t=>{t[Lr]&&(t.toHTML=t[Lr],delete t[Lr]),t[Dr]&&(t.getStyle=t[Dr],delete t[Dr]),t[Nr]&&(t.set("attributes",{...t.get("attributes"),src:t[Nr]}),delete t[Nr]),t[Ir]&&(t.set("src",t[Ir]),delete t[Ir]),t[$r]&&(t.set("attributes",{...t.get("attributes"),href:t[$r]}),delete t[$r])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[Rr]&&(t.getStyle=t[Rr],delete t[Rr])}))}(this.editor)}}const oo="fa fa-fw fa-paste silex-button",io=" disabled",so=[{name:"./project-bar",value:ir},{name:"grapesjs-style-bg",value:qn()},{name:"./settings",value:(t,e)=>{try{vr="3.0.0-alpha.147"}catch(t){}console.info("Silex version:",vr),t.Commands.add(gr,{run:(e,n,{page:r})=>{hr=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n?.set&&n.set("active",0),t.stopCommand(gr)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r);const o=lr(n)?pr:dr;let i=o[0];Gt(At`
     <form class="silex-form">
       <div class="silex-help">
         ${lr(n)?At`
@@ -320,12 +320,12 @@ var silex;(()=>{var t={99:function(t){"undefined"!=typeof globalThis?globalThis:
       <section class="silex-sidebar-dialog">
         <aside class="silex-bar">
           <ul class="silex-list silex-list--menu">
-            ${o.map((t=>At`
+            ${o.map((e=>At`
               <li
-                class=${t.id===i.id?"active":""}
-                @click=${e=>{e.preventDefault(),i=t;const n=e.target,r=n.closest("ul"),o=n.closest("section"),s=o.querySelector(`#settings-${t.id}`);Array.from(r.querySelectorAll(".active")).forEach((t=>t.classList.remove("active"))),n.classList.add("active"),Array.from(o.querySelectorAll(".silex-hideable")).forEach((t=>t.classList.add("silex-hidden"))),s.classList.remove("silex-hidden")}}
+                class=${e.id===i.id?"active":""}
+                @click=${n=>{n.preventDefault(),i=e;const r=n.target,o=r.closest("ul"),s=r.closest("section"),a=s.querySelector(`#settings-${e.id}`);Array.from(o.querySelectorAll(".active")).forEach((t=>t.classList.remove("active"))),r.classList.add("active"),Array.from(s.querySelectorAll(".silex-hideable")).forEach((t=>t.classList.add("silex-hidden"))),a.classList.remove("silex-hidden"),mr.refresh(),t.trigger(ur.SETTINGS_SECTION_CHANGE,e.id)}}
               >
-                ${t.label}
+                ${e.label}
               </li>
             `))}
           </ul>
@@ -340,7 +340,7 @@ var silex;(()=>{var t={99:function(t){"undefined"!=typeof globalThis?globalThis:
         <input class="silex-button" type="submit" value="Apply">
       </footer>
     </form>
-  `,fr),fr.querySelector(`#${ar}`)?.appendChild(mr.getElement()),mr.setContent(r.head||"")}(t,0,r),hr.setContent(fr);const o=fr.querySelector("form");return o.onsubmit=e=>{e.preventDefault(),t.trigger(ur.SETTINGS_SAVE_START,r),function(t,e,n=t.getModel()){const r=fr.querySelector("form"),o=new FormData(r),i=Array.from(o).reduce(((t,[e,n])=>(""!==n&&(t[e]=n),t)),{}),{name:s,...a}=i;n.set({settings:{...i,head:mr.getContent()},name:s}),t.getModel().set("changesCount",t.getDirtyCount()+1),br(t)}(t,0,r),t.trigger(ur.SETTINGS_SAVE_END,r),t.stopCommand(gr)},o.querySelector("input")?.focus(),t.trigger(ur.SETTINGS_OPEN,r),hr},stop:()=>{hr.close(),t.trigger(ur.SETTINGS_CLOSE)}}),t.on("storage:start:store",(e=>{e.settings=t.getModel().get("settings"),e.name=t.getModel().get("name")})),t.on("storage:end:load",(e=>{const n=t.getModel();n.set("settings",e.settings||{}),n.set("name",e.name)})),t.on("canvas:frame:load",(()=>{br(t)})),t.on("page",(e=>{t.Canvas.getFrameEl().addEventListener("load",(()=>{br(t)}))})),mr=t.CodeManager.createViewer({readOnly:!1,codeName:"htmlmixed",lineNumbers:!0,lineWrapping:!0})}},{name:"@silexlabs/grapesjs-fonts",value:Se()},{name:"./new-page-dialog",value:(t,e)=>{t.Commands.add(rr,{run:(e,n,{page:r})=>{nr=t.Modal.open({title:"New Page",content:"",attributes:{class:"new-page-dialog"}}).onceClose((()=>{t.stopCommand(rr)})),function(t,e,n){Gt(At`
+  `,fr),fr.querySelector(`#${ar}`)?.appendChild(mr.getElement()),mr.setContent(r.head||"")}(t,0,r),hr.setContent(fr);const o=fr.querySelector("form");return o.onsubmit=e=>{e.preventDefault(),t.trigger(ur.SETTINGS_SAVE_START,r),function(t,e,n=t.getModel()){const r=fr.querySelector("form"),o=new FormData(r),i=Array.from(o).reduce(((t,[e,n])=>(""!==n&&(t[e]=n),t)),{}),{name:s,...a}=i;n.set({settings:{...i,head:mr.getContent()},name:s}),t.getModel().set("changesCount",t.getDirtyCount()+1),br(t)}(t,0,r),t.trigger(ur.SETTINGS_SAVE_END,r),t.stopCommand(gr)},o.querySelector("input")?.focus(),t.trigger(ur.SETTINGS_OPEN,r),hr},stop:()=>{hr.close(),t.trigger(ur.SETTINGS_CLOSE)}}),t.on("storage:start:store",(e=>{e.settings=t.getModel().get("settings"),e.name=t.getModel().get("name")})),t.on("storage:end:load",(e=>{const n=t.getModel();n.set("settings",e.settings||{}),n.set("name",e.name)})),t.on("storage:end:load",(()=>{setTimeout((()=>{br(t)}))})),t.on("canvas:frame:load",(()=>{br(t)})),t.on("page",(e=>{t.Canvas.getFrameEl().addEventListener("load",(()=>{br(t)}))})),mr=t.CodeManager.createViewer({readOnly:!1,codeName:"htmlmixed",lineNumbers:!0,lineWrapping:!0,autoFormat:!1})}},{name:"@silexlabs/grapesjs-fonts",value:Se()},{name:"./new-page-dialog",value:(t,e)=>{t.Commands.add(rr,{run:(e,n,{page:r})=>{nr=t.Modal.open({title:"New Page",content:"",attributes:{class:"new-page-dialog"}}).onceClose((()=>{t.stopCommand(rr)})),function(t,e,n){Gt(At`
     <form class="silex-form">
       <label class="silex-form__element">
         <h3>Name</h3>
@@ -359,4 +359,4 @@ var silex;(()=>{var t={99:function(t){"undefined"!=typeof globalThis?globalThis:
           <option value="${t}" ?selected=${e.toUpperCase()===t}>${t}</option>
         `))}
       </select>
-    `,t)}function r(e){n(e,t.getSelected()?.get("tagName")||"")}t.DomComponents.getTypes().map((e=>{t.DomComponents.addType(e.id,{model:{defaults:{traits:[...t.DomComponents.getType(e.id).model.prototype.defaults.traits,{label:"Tag name",type:"tag-name",name:"tag-name"}]}}})})),t.TraitManager.addType("tag-name",{createInput({trait:e}){const n=document.createElement("div");return t.on("page",(()=>r(n))),r(n),n},onEvent({elInput:t,component:e,event:n}){const r=t.querySelector("#semantic__select").value;e.get("tagName").toUpperCase()===r.toUpperCase()||e.set("tagName",r)},onUpdate({elInput:t,component:e}){n(t,e.get("tagName"))}})}},{name:"./rich-text",value:(t,e)=>{}},{name:"grapesjs-style-filter",value:T()},{name:"grapesjs-plugin-forms",value:k()},{name:"grapesjs-custom-code",value:P()},{name:"./internal-links",value:Er},{name:"@silexlabs/grapesjs-ui-suggest-classes",value:M()},{name:"@silexlabs/grapesjs-filter-styles",value:N()},{name:"./symbolDialogs",value:(t,e)=>{t.Commands.add(Oe,{run:(e,n)=>{const r=prompt("Label",function(e){let n=1;for(;t.Symbols.find((t=>t.get("label")===e+n));)n++;return e+n}("Symbol "));t.runCommand(be,{label:r,icon:"fa-gem"})}})}},{name:"@silexlabs/grapesjs-symbols",value:we},{name:"./PublicationManager",value:to},{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 Te),!(n instanceof Te))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(Mn);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 Ln(t)??await Nn(t,je.STORAGE,e.connectorId);if(!i)throw new Te("Not logged in",401);const s=await Be({websiteId:e.id,connectorId:i.storage.connectorId});return s.assets&&(s.assets=(n=s.assets,r=e.id,o=i.storage.connectorId,n.map((t=>t.src?{...t,src:Wr(t.src,r,o)}:t)))),s.pages&&(s.pages=function(t,e,n){return t.map((t=>({...t,frames:t.frames.map((t=>({...t,component:Kr(t.component,e,n)})))})))}(s.pages,e.id,i.storage.connectorId)),s.styles&&(s.styles=function(t,e,n){return new RegExp(/(.*)(url\((["']?)([^"']+?)\1\))*(.*)/,"g"),t.map((t=>{if(t.style&&t.style["background-image"]){const r=t.style["background-image"].replace(/url\((['"]?)([^'"]+)\1\)/g,((t,r,o)=>`url(${r}${Wr(o,e,n)}${r})`));return{...t,style:{...t.style,"background-image":r}}}return t}))}(s.styles,e.id,i.storage.connectorId)),s}catch(n){throw 401===n.httpStatusCode&&(t.once(Pn,(async()=>{try{t.StorageManager.setAutosave(!1);const n=await t.Storage.load(e);t.StorageManager.setAutosave(!0),t.loadProjectData(n)}catch(t){throw console.error("connectorPlugin load error",t),t}})),t.Commands.run(En)),console.error("connectorPlugin load error",n),n}var n,r,o},async store(e,n){try{if(await Ln(t)){const r=await Ln(t);e.assets=e.assets.map((t=>t.src?{...t,src:qr(t.src)}:t)),e.pages=e.pages.map((t=>({...t,frames:t.frames.map((t=>({...t,component:Yr(t.component)})))}))),e.styles=e.styles.map((t=>{if(t.style&&t.style["background-image"]){const e=t.style["background-image"].replace(/url\((['"]?)([^'"]+)\1\)/g,((t,e,n)=>`url(${e}${qr(n)}${e})`));return{...t,style:{...t.style,"background-image":e}}}return t})),await ze({websiteId:n.id,connectorId:r.storage.connectorId,data:e})}else t.once(Pn,(()=>t.Storage.store())),t.Commands.run(En)}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:Rn},{name:"@silexlabs/grapesjs-loading",value:xe()},{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),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.getName()??e.get("tagName")}</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        overflow-x: auto;\n        overflow-y: hidden;\n      }\n      #breadcrumbs-container h3 {\n        font-size: inherit;\n        margin: 0;\n      }\n      #breadcrumbs-container .breadcrumb {\n        margin: 0 5px;\n        font-size: 14px;\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()},Hn?r(Hn):Fn.push(r),t.on("component:selected style:target component:drag:end",(()=>o()))}},{name:"./img",value:Vn},{name:"./css-props",value:(t,e)=>{t.on("load",(()=>{t.StyleManager.addProperty("dimension",{name:"Min width",property:"min-width",type:"integer",units:["px","%","em"],default:"auto",fixedValues:["inherit","initial","unset","none","max-content","min-content","fit-content"]},{at:2}),t.StyleManager.addProperty("dimension",{name:"Max height",property:"max-height",type:"integer",units:["px","%","em"],default:"auto",fixedValues:["inherit","initial","unset","none","max-content","min-content","fit-content"]},{at:5}),t.StyleManager.addProperty("dimension",{name:"Overflow",property:"overflow",type:"composite",properties:[{name:"Overflow X",type:"radio",options:[{value:"auto",name:"auto"},{value:"hidden",name:"hidden"},{value:"visible",name:"visible"},{value:"scroll",name:"scroll"}]},{name:"Overflow Y",type:"radio",options:[{value:"auto",name:"auto"},{value:"hidden",name:"hidden"},{value:"visible",name:"visible"},{value:"scroll",name:"scroll"}]}],info:"The overflow CSS property sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y."},{at:6}),t.StyleManager.addProperty("extra",{name:"Z index",property:"z-index",type:"slider",step:1,min:-1e4,max:1e4,units:[],info:"Stacking order of the element",default:"auto",fixedValues:["auto","unset","initial","inherit","revert"]},{at:1}),t.StyleManager.addProperty("extra",{name:"Pointer events",property:"pointer-events",type:"select",defaults:"auto",options:[{value:"auto",name:"auto"},{value:"none",name:"none"},{value:"visiblePainted",name:"visiblePainted"},{value:"visibleFill",name:"visibleFill"},{value:"visibleStroke",name:"visibleStroke"},{value:"visible",name:"visible"},{value:"painted",name:"painted"},{value:"fill",name:"fill"},{value:"stroke",name:"stroke"},{value:"all",name:"all"}],info:"The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events."},{at:2}),t.StyleManager.addProperty("extra",{name:"Cursor",property:"cursor",type:"select",defaults:"auto",options:[{value:"auto",name:"auto"},{value:"default",name:"default"},{value:"none",name:"none"},{value:"context-menu",name:"context-menu"},{value:"help",name:"help"},{value:"pointer",name:"pointer"},{value:"progress",name:"progress"},{value:"wait",name:"wait"},{value:"cell",name:"cell"},{value:"crosshair",name:"crosshair"},{value:"text",name:"text"},{value:"vertical-text",name:"vertical-text"},{value:"alias",name:"alias"},{value:"copy",name:"copy"},{value:"move",name:"move"},{value:"no-drop",name:"no-drop"},{value:"not-allowed",name:"not-allowed"},{value:"grab",name:"grab"},{value:"grabbing",name:"grabbing"},{value:"all-scroll",name:"all-scroll"},{value:"col-resize",name:"col-resize"},{value:"row-resize",name:"row-resize"},{value:"n-resize",name:"n-resize"},{value:"e-resize",name:"e-resize"},{value:"s-resize",name:"s-resize"},{value:"w-resize",name:"w-resize"},{value:"ne-resize",name:"ne-resize"},{value:"nw-resize",name:"nw-resize"},{value:"se-resize",name:"se-resize"},{value:"sw-resize",name:"sw-resize"},{value:"ew-resize",name:"ew-resize"},{value:"ns-resize",name:"ns-resize"},{value:"nesw-resize",name:"nesw-resize"},{value:"nwse-resize",name:"nwse-resize"},{value:"zoom-in",name:"zoom-in"},{value:"zoom-out",name:"zoom-out"}],info:"The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element."},{at:3}),t.StyleManager.addProperty("extra",{name:"Column count",property:"column-count",type:"integer",units:[],info:"The column-count CSS property breaks an element's content into the specified number of columns.",default:"auto",fixedValues:["auto","inherit","initial","revert","unset"],min:1},{at:4}),t.StyleManager.addProperty("extra",{name:"Column width",property:"column-width",type:"integer",units:["px","%","em"],info:"The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the element automatically.",default:"auto",fixedValues:["auto","inherit","initial","revert","unset"]},{at:5}),t.StyleManager.addProperty("extra",{name:"Column gap",property:"column-gap",type:"integer",units:["px","%","em"],info:"The column-gap CSS property sets the size of the gap (gutter) between an element's columns.",default:"normal",fixedValues:["normal","inherit","initial","revert","unset"]},{at:5}),t.StyleManager.addProperty("extra",{name:"Column rule",property:"column-rule",type:"composite",properties:[{name:"Column rule width",property:"column-rule-width",type:"integer",units:["px","%","em"],info:"The column-rule-width CSS property sets the width of the line drawn between columns in a multi-column layout.",default:"medium",fixedValues:["medium","thin","thick","inherit","initial","revert","unset"]},{name:"Column rule style",property:"column-rule-style",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"hidden",name:"hidden"},{value:"dotted",name:"dotted"},{value:"dashed",name:"dashed"},{value:"solid",name:"solid"},{value:"double",name:"double"},{value:"groove",name:"groove"},{value:"ridge",name:"ridge"},{value:"inset",name:"inset"},{value:"outset",name:"outset"},{value:"inherit",name:"inherit"}],info:"The column-rule-style CSS property sets the style of the line drawn between columns in a multi-column layout."},{name:"Column rule color",property:"column-rule-color",type:"color",defaults:"none",info:"The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout."}]},{at:6}),t.StyleManager.addProperty("extra",{name:"Column span",property:"column-span",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"all",name:"all"}],info:"The column-span CSS property makes it possible for an element to span across all columns when its value is set to all."},{at:7}),t.StyleManager.addProperty("decorations",{name:"Outline",property:"outline",type:"composite",properties:[{name:"Outline width",property:"outline-width",type:"integer",units:["px","%","em"],info:"The outline-width CSS property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.",default:"medium",fixedValues:["medium","thin","thick","inherit","initial","revert","unset"]},{name:"Outline style",property:"outline-style",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"hidden",name:"hidden"},{value:"dotted",name:"dotted"},{value:"dashed",name:"dashed"},{value:"solid",name:"solid"},{value:"double",name:"double"},{value:"groove",name:"groove"},{value:"ridge",name:"ridge"},{value:"inset",name:"inset"},{value:"outset",name:"outset"}],info:"The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border."},{name:"Outline color",property:"outline-color",type:"color",defaults:"none",info:"The outline-color CSS property sets the color of an element's outline."}]},{at:8}),t.StyleManager.addProperty("typography",{name:"Word break",property:"word-break",type:"select",defaults:"normal",options:[{value:"normal",name:"normal"},{value:"break-all",name:"break-all"},{value:"keep-all",name:"keep-all"},{value:"break-word",name:"break-word"}],info:"The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box."},{at:7}),t.StyleManager.addProperty("typography",{name:"Word wrap",property:"word-wrap",type:"radio",defaults:"normal",options:[{value:"normal",name:"normal"},{value:"break-word",name:"break-word"}],info:"The word-wrap CSS property sets whether the line may be broken within a word in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box."},{at:8}),t.StyleManager.addProperty("typography",{name:"White space",property:"white-space",type:"select",defaults:"normal",options:[{value:"normal",name:"normal"},{value:"nowrap",name:"nowrap"},{value:"pre",name:"pre"},{value:"pre-wrap",name:"pre-wrap"},{value:"pre-line",name:"pre-line"},{value:"break-spaces",name:"break-spaces"}],info:"The white-space CSS property sets how white space inside an element is handled."},{at:9}),t.StyleManager.addProperty("typography",{name:"Text decoration",property:"text-decoration",type:"composite",properties:[{name:"Text decoration line",property:"text-decoration-line",type:"select",defaults:"none",fixedValues:["auto","inherit","initial","revert","unset"],options:[{value:"none",name:"none"},{value:"underline",name:"underline"},{value:"overline",name:"overline"},{value:"line-through",name:"line-through"},{value:"blink",name:"blink"}],info:"The text-decoration CSS property sets the appearance of decorative lines on text."},{name:"Text decoration style",property:"text-decoration-style",type:"select",defaults:"solid",options:[{value:"solid",name:"solid"},{value:"double",name:"double"},{value:"dotted",name:"dotted"},{value:"dashed",name:"dashed"},{value:"wavy",name:"wavy"}],info:"The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines, there is no way to define different styles for each of the lines."},{name:"Text decoration color",property:"text-decoration-color",type:"color",defaults:"initial",fixedValues:["inherit","initial","revert","unset"],info:"The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line."},{name:"Text decoration thickness",property:"text-decoration-thickness",type:"integer",units:["px","%","em"],info:"The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.",default:"auto",fixedValues:["auto","inherit","initial","revert","unset"]}]},{at:10}),t.StyleManager.addProperty("typography",{name:"Text transform",property:"text-transform",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"capitalize",name:"capitalize"},{value:"uppercase",name:"uppercase"},{value:"lowercase",name:"lowercase"}],info:"The text-transform CSS property sets how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized."},{at:11}),t.StyleManager.addProperty("typography",{name:"Text overflow",property:"text-overflow",type:"select",defaults:"clip",options:[{value:"clip",name:"clip"},{value:"ellipsis",name:"ellipsis"}],info:"The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-clip and text-overflow-string."},{at:12}),t.StyleManager.addProperty("general",{name:"Visibility",property:"visibility",type:"select",defaults:"visible",options:[{value:"visible",name:"visible"},{value:"hidden",name:"hidden"},{value:"collapse",name:"collapse"}],info:"The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>."},{at:1});const e=t.StyleManager.addProperty("general",{name:"Content",property:"content",type:"text",defaults:"none",info:"The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.",full:!0,visible:!1},{at:0});function n(){const n=t.SelectorManager.getState();["before","after"].includes(n)?e.set("visible",!0):e.set("visible",!1)}t.on("selector:state component:selected component:styleUpdate style:sector:update",((t,e)=>setTimeout((()=>n())))),t.StyleManager.getSector("general").on("change",(()=>n())),t.SelectorManager.states.add({name:"before",label:"Before"}),t.SelectorManager.states.add({name:"after",label:"After"}),t.SelectorManager.states.add({name:"active",label:"Active"}),t.SelectorManager.states.add({name:"first-child",label:"First child"}),t.SelectorManager.states.add({name:"last-child",label:"Last child"}),t.SelectorManager.states.add({name:"focus",label:"Focus"}),t.SelectorManager.states.add({name:"visited",label:"Visited"}),t.SelectorManager.states.add({name:"link",label:"Link"}),t.SelectorManager.states.add({name:"first-letter",label:"First letter"}),t.SelectorManager.states.add({name:"first-line",label:"First line"}),t.SelectorManager.states.add({name:"selection",label:"Selection"}),t.SelectorManager.states.add({name:"empty",label:"Empty"}),t.SelectorManager.states.add({name:"enabled",label:"Enabled"}),t.SelectorManager.states.add({name:"disabled",label:"Disabled"}),t.SelectorManager.states.add({name:"checked",label:"Checked"}),t.SelectorManager.states.add({name:"indeterminate",label:"Indeterminate"}),t.SelectorManager.states.add({name:"placeholder-shown",label:"Placeholder shown"}),t.SelectorManager.states.add({name:"placeholder",label:"Placeholder"}),t.SelectorManager.states.add({name:"default",label:"Default"}),t.SelectorManager.states.add({name:"valid",label:"Valid"}),t.SelectorManager.states.add({name:"invalid",label:"Invalid"}),t.SelectorManager.states.add({name:"in-range",label:"In range"}),t.SelectorManager.states.add({name:"out-of-range",label:"Out of range"}),t.SelectorManager.states.add({name:"required",label:"Required"}),t.SelectorManager.states.add({name:"optional",label:"Optional"}),t.SelectorManager.states.add({name:"read-only",label:"Read only"}),t.SelectorManager.states.add({name:"read-write",label:"Read write"})}))}},{name:"./footer",value:function(t,e){const n=t.Panels.addPanel({id:"footer",visible:!0,buttons:[]});setTimeout((()=>{Hn=n.view?.el,Fn.forEach((t=>t(Hn))),Fn=[]}))}},{name:"@silexlabs/grapesjs-storage-rate-limit",value:Un},{name:"grapesjs-style-border",value:zn()},{name:"./resize-panel",value:function(t){t.Panels.addPanel({id:"viewsOptions",buttons:[{id:"resize",className:"viewsOptions__size-btn",command:"resize-panel",attributes:{title:"Resize panel"}}]}),t.Commands.add("resize-panel",{run:(t,e)=>{document.documentElement.style.setProperty("--viewsPanelWidth","40%")},stop:(t,e)=>{document.documentElement.style.setProperty("--viewsPanelWidth","20%")}})}}];so.filter((t=>"function"!=typeof t.value)).forEach((t=>{throw new Error(`Plugin ${t.name} could not be loaded correctly (${t.value})`)}));const ao="#333333",lo="#ddd",co="#8873FE",uo="#A291FF",po="#363636",fo="#575757",ho="Containers",go="Components";function vo(t){const{websiteId:e,storageId:n,rootUrl:r}=t;return{container:"#gjs",height:"100%",showOffsets:!0,showDevices:!0,layerManager:{appendTo:".layer-manager-container"},blockManager:{appendTo:".block-manager-container"},assetManager:{upload:`${r}${on}${vn}${Sn}/?websiteId=${e}${n?`&connectorId=${n}`:""}`},storageManager:{autoload:!1,type:"connector",options:{connector:{id:e,connectorId:n}}},cssIcons:"./css/all.min.css",canvasCss:`\n      :root {\n        --primaryColor: ${ao};\n        --secondaryColor: ${lo};\n        --tertiaryColor: ${co};\n        --quaternaryColor: ${uo};\n        --darkerPrimaryColor: ${po};\n        --lighterPrimaryColor: ${fo};\n      }\n      .gjs-frame-selected {\n        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important; // Change to red border\n      }\n      .gjs-selected {\n        outline: 2px solid var(--tertiaryColor) !important;\n        outline-offset: -2px;\n      }\n    `,richTextEditor:{actions:["bold","italic","underline","strikethrough","link","wrap",xr,Cr]},plugins:so.map((t=>t.value)),pluginsOpts:{[S().toString()]:{blocks:["text","image","video","map"],category:ho},[ir.toString()]:{panels:[{id:"dash",className:"logo",attributes:{title:"Dashboard"},command:()=>{window.location.href="/"}},{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:Oe}]},{id:"page-panel-btn",className:"page-panel-btn fa fa-fw fa-file",attributes:{title:"Pages",containerClassName:"page-panel-container"},command:Kn,buttons:[{className:"pages__add-page fa fa-file",command:Yn,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:()=>{mo.runCommand(Ce.cmdOpenFonts)}},{id:"settings-dialog-btn",className:"page-panel-btn fa-solid fa-gears",attributes:{title:"Settings"},command:gr},{id:"spacer",attributes:{},className:"project-bar-spacer"},{id:"dash2",className:"fa-solid fa-house",attributes:{title:"Dashboard"},command:()=>{window.location.href="/"}},{id:"help",className:"fa fa-fw fa-question-circle",attributes:{title:"Documentation"},command:()=>{window.open("https://docs.silex.me/","_blank")}},{id:"logout-button",className:"page-panel-btn fa fa-fw fa-sign-out",attributes:{title:"Sign out"},command:kn}]},[to.toString()]:{appendTo:"options",websiteId:e},[Xn.toString()]:{cmdOpenNewPageDialog:rr,cmdOpenSettings:gr,appendTo:".page-panel-container"},[M().toString()]:{enableCount:!1,enablePerformance:!1},[N()]:{appendBefore:".gjs-sm-sectors"},[Er.toString()]:{onError:t=>console.warn("Links errors:",t)},[P().toString()]:{blockLabel:"HTML",blockCustomCode:{category:go}},[we.toString()]:{appendTo:".symbols-list-container",emptyText:"No symbol yet.",primaryColor:ao,secondaryColor:lo,highlightColor:co},[Se().toString()]:{api_key:"AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc"},[Rn.toString()]:{id:e},[Un.toString()]:{time:5e3},[Vn.toString()]:{replacedElements:t.replacedElements}}}}let mo,yo;async function bo(t){if(mo)throw new Error("Grapesjs editor already created");return new Promise(((e,n)=>{try{mo=x.init(t)}catch(t){console.error("Error initializing GrapesJs with plugins:",so,t),n(t)}["text"].forEach((t=>mo.Blocks.get(t)?.set("category","Basics"))),["image","video"].forEach((t=>mo.Blocks.get(t)?.set("category","Media"))),["map"].forEach((t=>mo.Blocks.get(t)?.set("category","Components"))),mo.Blocks.render([]),mo.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()}}}(mo,{modalImportLabel:"",modalImportContent:"Paste a web page HTML code here.",modalImportButton:"Import",modalImportTitle:"Import from website"})),mo.on("load",(()=>{const t=mo.Panels.getPanel("views");t.buttons.remove("open-blocks"),t.buttons.remove("open-layers"),mo.Panels.getPanel("options").buttons.remove("export-template"),mo.Panels.getPanel("options").buttons.remove("fullscreen"),mo.BlockManager.render(null),mo.StyleManager.addProperty("extra",{extend:"filter"}),e(mo)}))}))}function wo(){return mo}async function _o(t){t.addPublicationTransformers({renderComponent:(t,e)=>"custom-code"===t.get("type")&&t.get("custom-code-plugin__code")?t.get("custom-code-plugin__code"):e()})}async function xo(t){t.addPublicationTransformers({transformFile(e){const n=e;if(n.type===Ae.HTML&&n.content){const e=t.getEditor().runCommand(Ce.cmdGetHtml);n.content=n.content.replace(/<\/head>/,`${e}</head>`)}return e}})}class Co extends m{api=e;websiteId=new URL(location.href).searchParams.get("id")??en;storageId=new URL(location.href).searchParams.get("connectorId");lang=new URL(location.href).searchParams.get("lang")??nn;rootUrl=window.location.origin+window.location.pathname.replace(/\/$/,"");debug=!1;addHashInCssFileName=!0;replacedElements=["img","video","iframe","embed","object","audio","canvas"];grapesJsConfig={plugins:[],pluginsOpts:{}};clientConfigUrl=`${this.rootUrl}/${rn}`;initGrapesConfig(){const t=vo(this);this.grapesJsConfig={...this.grapesJsConfig,...t,plugins:[...this.grapesJsConfig.plugins,...t.plugins],pluginsOpts:{...this.grapesJsConfig.pluginsOpts,...t.pluginsOpts}}}getEditor(){return wo()}publicationTransformers=[Gr,Hr];resetPublicationTransformers(){this.publicationTransformers=[Gr]}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)}addSettings(t,e,n="last"){!function(t,e,n){const r="site"===e?pr:dr;if("first"===n)r.unshift(t);else if("last"===n)r.push(t);else{if("number"!=typeof n)throw new Error("Invalid position for settings section");r.splice(n,0,t)}}(t,e,n)}removeSettings(t,e){!function(t,e){const n="site"===e?pr:dr,r=n.findIndex((e=>e.id===t));if(-1===r)throw new Error(`Cannot find section with id ${t}`);n.splice(r,1)}(t,e)}async addDefaultPlugins(){await this.addPlugin([_o,xo],{})}}async function So(t={}){yo=new Co,Object.assign(yo,t),await yo.addPlugin(yo.clientConfigUrl,{}),yo.debug&&console.warn("Silex starting in debug mode.",{config:yo}),yo.emit(ur.STARTUP_START),yo.initGrapesConfig(),yo.emit(ur.GRAPESJS_START);try{await bo(yo.grapesJsConfig)}catch(t){throw console.error("Error starting Silex",t),t}const e=wo();e.getModel().set("config",yo),yo.emit(ur.GRAPESJS_END,{editor:e}),e.I18n.setLocale(yo.lang),await yo.addDefaultPlugins(),e.StorageManager.setAutosave(!1);try{await e.load(null)}catch(t){t.httpStatusCode}finally{setTimeout((()=>{e.editor.set("changesCount",0),e.StorageManager.setAutosave(!0),document.querySelector(".silex-loader").classList.add("silex-dialog-hide"),document.querySelector("#gjs").classList.remove("silex-dialog-hide"),yo.emit(ur.STARTUP_END,{editor:e,config:yo})}),100)}}console.info("\nSilex client loaded\n")})(),silex=r})();
+    `,t)}function r(e){n(e,t.getSelected()?.get("tagName")||"")}t.DomComponents.getTypes().map((e=>{t.DomComponents.addType(e.id,{model:{defaults:{traits:[...t.DomComponents.getType(e.id).model.prototype.defaults.traits,{label:"Tag name",type:"tag-name",name:"tag-name"}]}}})})),t.TraitManager.addType("tag-name",{createInput({trait:e}){const n=document.createElement("div");return t.on("page",(()=>r(n))),r(n),n},onEvent({elInput:t,component:e,event:n}){const r=t.querySelector("#semantic__select").value;e.get("tagName").toUpperCase()===r.toUpperCase()||e.set("tagName",r)},onUpdate({elInput:t,component:e}){n(t,e.get("tagName"))}})}},{name:"./rich-text",value:(t,e)=>{}},{name:"grapesjs-style-filter",value:T()},{name:"grapesjs-plugin-forms",value:k()},{name:"grapesjs-custom-code",value:P()},{name:"./internal-links",value:Er},{name:"@silexlabs/grapesjs-ui-suggest-classes",value:M()},{name:"@silexlabs/grapesjs-filter-styles",value:N()},{name:"./symbolDialogs",value:(t,e)=>{t.Commands.add(Oe,{run:(e,n)=>{const r=prompt("Label",function(e){let n=1;for(;t.Symbols.find((t=>t.get("label")===e+n));)n++;return e+n}("Symbol "));t.runCommand(be,{label:r,icon:"fa-gem"})}})}},{name:"@silexlabs/grapesjs-symbols",value:we},{name:"./PublicationManager",value:to},{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 Te),!(n instanceof Te))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(Mn);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 Ln(t)??await Nn(t,je.STORAGE,e.connectorId);if(!i)throw new Te("Not logged in",401);const s=await Be({websiteId:e.id,connectorId:i.storage.connectorId});return s.assets&&(s.assets=(n=s.assets,r=e.id,o=i.storage.connectorId,n.map((t=>t.src?{...t,src:Wr(t.src,r,o)}:t)))),s.pages&&(s.pages=function(t,e,n){return t.map((t=>({...t,frames:t.frames.map((t=>({...t,component:Kr(t.component,e,n)})))})))}(s.pages,e.id,i.storage.connectorId)),s.styles&&(s.styles=function(t,e,n){return new RegExp(/(.*)(url\((["']?)([^"']+?)\1\))*(.*)/,"g"),t.map((t=>{if(t.style&&t.style["background-image"]){const r=t.style["background-image"].replace(/url\((['"]?)([^'"]+)\1\)/g,((t,r,o)=>`url(${r}${Wr(o,e,n)}${r})`));return{...t,style:{...t.style,"background-image":r}}}return t}))}(s.styles,e.id,i.storage.connectorId)),s}catch(n){throw 401===n.httpStatusCode&&(t.once(Pn,(async()=>{try{t.StorageManager.setAutosave(!1);const n=await t.Storage.load(e);t.StorageManager.setAutosave(!0),t.loadProjectData(n)}catch(t){throw console.error("connectorPlugin load error",t),t}})),t.Commands.run(En)),console.error("connectorPlugin load error",n),n}var n,r,o},async store(e,n){try{if(await Ln(t)){const r=await Ln(t);e.assets=e.assets.map((t=>t.src?{...t,src:qr(t.src)}:t)),e.pages=e.pages.map((t=>({...t,frames:t.frames.map((t=>({...t,component:Yr(t.component)})))}))),e.styles=e.styles.map((t=>{if(t.style&&t.style["background-image"]){const e=t.style["background-image"].replace(/url\((['"]?)([^'"]+)\1\)/g,((t,e,n)=>`url(${e}${qr(n)}${e})`));return{...t,style:{...t.style,"background-image":e}}}return t})),await ze({websiteId:n.id,connectorId:r.storage.connectorId,data:e})}else t.once(Pn,(()=>t.Storage.store())),t.Commands.run(En)}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:Rn},{name:"@silexlabs/grapesjs-loading",value:xe()},{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),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.getName()??e.get("tagName")}</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        overflow-x: auto;\n        overflow-y: hidden;\n      }\n      #breadcrumbs-container h3 {\n        font-size: inherit;\n        margin: 0;\n      }\n      #breadcrumbs-container .breadcrumb {\n        margin: 0 5px;\n        font-size: 14px;\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()},Hn?r(Hn):Fn.push(r),t.on("component:selected style:target component:drag:end",(()=>o()))}},{name:"./img",value:Vn},{name:"./css-props",value:(t,e)=>{t.on("load",(()=>{t.StyleManager.addProperty("dimension",{name:"Min width",property:"min-width",type:"integer",units:["px","%","em"],default:"auto",fixedValues:["inherit","initial","unset","none","max-content","min-content","fit-content"]},{at:2}),t.StyleManager.addProperty("dimension",{name:"Max height",property:"max-height",type:"integer",units:["px","%","em"],default:"auto",fixedValues:["inherit","initial","unset","none","max-content","min-content","fit-content"]},{at:5}),t.StyleManager.addProperty("dimension",{name:"Overflow",property:"overflow",type:"composite",properties:[{name:"Overflow X",type:"radio",options:[{value:"auto",name:"auto"},{value:"hidden",name:"hidden"},{value:"visible",name:"visible"},{value:"scroll",name:"scroll"}]},{name:"Overflow Y",type:"radio",options:[{value:"auto",name:"auto"},{value:"hidden",name:"hidden"},{value:"visible",name:"visible"},{value:"scroll",name:"scroll"}]}],info:"The overflow CSS property sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y."},{at:6}),t.StyleManager.addProperty("extra",{name:"Z index",property:"z-index",type:"slider",step:1,min:-1e4,max:1e4,units:[],info:"Stacking order of the element",default:"auto",fixedValues:["auto","unset","initial","inherit","revert"]},{at:1}),t.StyleManager.addProperty("extra",{name:"Pointer events",property:"pointer-events",type:"select",defaults:"auto",options:[{value:"auto",name:"auto"},{value:"none",name:"none"},{value:"visiblePainted",name:"visiblePainted"},{value:"visibleFill",name:"visibleFill"},{value:"visibleStroke",name:"visibleStroke"},{value:"visible",name:"visible"},{value:"painted",name:"painted"},{value:"fill",name:"fill"},{value:"stroke",name:"stroke"},{value:"all",name:"all"}],info:"The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events."},{at:2}),t.StyleManager.addProperty("extra",{name:"Cursor",property:"cursor",type:"select",defaults:"auto",options:[{value:"auto",name:"auto"},{value:"default",name:"default"},{value:"none",name:"none"},{value:"context-menu",name:"context-menu"},{value:"help",name:"help"},{value:"pointer",name:"pointer"},{value:"progress",name:"progress"},{value:"wait",name:"wait"},{value:"cell",name:"cell"},{value:"crosshair",name:"crosshair"},{value:"text",name:"text"},{value:"vertical-text",name:"vertical-text"},{value:"alias",name:"alias"},{value:"copy",name:"copy"},{value:"move",name:"move"},{value:"no-drop",name:"no-drop"},{value:"not-allowed",name:"not-allowed"},{value:"grab",name:"grab"},{value:"grabbing",name:"grabbing"},{value:"all-scroll",name:"all-scroll"},{value:"col-resize",name:"col-resize"},{value:"row-resize",name:"row-resize"},{value:"n-resize",name:"n-resize"},{value:"e-resize",name:"e-resize"},{value:"s-resize",name:"s-resize"},{value:"w-resize",name:"w-resize"},{value:"ne-resize",name:"ne-resize"},{value:"nw-resize",name:"nw-resize"},{value:"se-resize",name:"se-resize"},{value:"sw-resize",name:"sw-resize"},{value:"ew-resize",name:"ew-resize"},{value:"ns-resize",name:"ns-resize"},{value:"nesw-resize",name:"nesw-resize"},{value:"nwse-resize",name:"nwse-resize"},{value:"zoom-in",name:"zoom-in"},{value:"zoom-out",name:"zoom-out"}],info:"The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element."},{at:3}),t.StyleManager.addProperty("extra",{name:"Column count",property:"column-count",type:"integer",units:[],info:"The column-count CSS property breaks an element's content into the specified number of columns.",default:"auto",fixedValues:["auto","inherit","initial","revert","unset"],min:1},{at:4}),t.StyleManager.addProperty("extra",{name:"Column width",property:"column-width",type:"integer",units:["px","%","em"],info:"The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the element automatically.",default:"auto",fixedValues:["auto","inherit","initial","revert","unset"]},{at:5}),t.StyleManager.addProperty("extra",{name:"Column gap",property:"column-gap",type:"integer",units:["px","%","em"],info:"The column-gap CSS property sets the size of the gap (gutter) between an element's columns.",default:"normal",fixedValues:["normal","inherit","initial","revert","unset"]},{at:5}),t.StyleManager.addProperty("extra",{name:"Column rule",property:"column-rule",type:"composite",properties:[{name:"Column rule width",property:"column-rule-width",type:"integer",units:["px","%","em"],info:"The column-rule-width CSS property sets the width of the line drawn between columns in a multi-column layout.",default:"medium",fixedValues:["medium","thin","thick","inherit","initial","revert","unset"]},{name:"Column rule style",property:"column-rule-style",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"hidden",name:"hidden"},{value:"dotted",name:"dotted"},{value:"dashed",name:"dashed"},{value:"solid",name:"solid"},{value:"double",name:"double"},{value:"groove",name:"groove"},{value:"ridge",name:"ridge"},{value:"inset",name:"inset"},{value:"outset",name:"outset"},{value:"inherit",name:"inherit"}],info:"The column-rule-style CSS property sets the style of the line drawn between columns in a multi-column layout."},{name:"Column rule color",property:"column-rule-color",type:"color",defaults:"none",info:"The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout."}]},{at:6}),t.StyleManager.addProperty("extra",{name:"Column span",property:"column-span",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"all",name:"all"}],info:"The column-span CSS property makes it possible for an element to span across all columns when its value is set to all."},{at:7}),t.StyleManager.addProperty("decorations",{name:"Outline",property:"outline",type:"composite",properties:[{name:"Outline width",property:"outline-width",type:"integer",units:["px","%","em"],info:"The outline-width CSS property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.",default:"medium",fixedValues:["medium","thin","thick","inherit","initial","revert","unset"]},{name:"Outline style",property:"outline-style",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"hidden",name:"hidden"},{value:"dotted",name:"dotted"},{value:"dashed",name:"dashed"},{value:"solid",name:"solid"},{value:"double",name:"double"},{value:"groove",name:"groove"},{value:"ridge",name:"ridge"},{value:"inset",name:"inset"},{value:"outset",name:"outset"}],info:"The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border."},{name:"Outline color",property:"outline-color",type:"color",defaults:"none",info:"The outline-color CSS property sets the color of an element's outline."}]},{at:8}),t.StyleManager.addProperty("typography",{name:"Word break",property:"word-break",type:"select",defaults:"normal",options:[{value:"normal",name:"normal"},{value:"break-all",name:"break-all"},{value:"keep-all",name:"keep-all"},{value:"break-word",name:"break-word"}],info:"The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box."},{at:7}),t.StyleManager.addProperty("typography",{name:"Word wrap",property:"word-wrap",type:"radio",defaults:"normal",options:[{value:"normal",name:"normal"},{value:"break-word",name:"break-word"}],info:"The word-wrap CSS property sets whether the line may be broken within a word in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box."},{at:8}),t.StyleManager.addProperty("typography",{name:"White space",property:"white-space",type:"select",defaults:"normal",options:[{value:"normal",name:"normal"},{value:"nowrap",name:"nowrap"},{value:"pre",name:"pre"},{value:"pre-wrap",name:"pre-wrap"},{value:"pre-line",name:"pre-line"},{value:"break-spaces",name:"break-spaces"}],info:"The white-space CSS property sets how white space inside an element is handled."},{at:9}),t.StyleManager.addProperty("typography",{name:"Text decoration",property:"text-decoration",type:"composite",properties:[{name:"Text decoration line",property:"text-decoration-line",type:"select",defaults:"none",fixedValues:["auto","inherit","initial","revert","unset"],options:[{value:"none",name:"none"},{value:"underline",name:"underline"},{value:"overline",name:"overline"},{value:"line-through",name:"line-through"},{value:"blink",name:"blink"}],info:"The text-decoration CSS property sets the appearance of decorative lines on text."},{name:"Text decoration style",property:"text-decoration-style",type:"select",defaults:"solid",options:[{value:"solid",name:"solid"},{value:"double",name:"double"},{value:"dotted",name:"dotted"},{value:"dashed",name:"dashed"},{value:"wavy",name:"wavy"}],info:"The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines, there is no way to define different styles for each of the lines."},{name:"Text decoration color",property:"text-decoration-color",type:"color",defaults:"initial",fixedValues:["inherit","initial","revert","unset"],info:"The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line."},{name:"Text decoration thickness",property:"text-decoration-thickness",type:"integer",units:["px","%","em"],info:"The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.",default:"auto",fixedValues:["auto","inherit","initial","revert","unset"]}]},{at:10}),t.StyleManager.addProperty("typography",{name:"Text transform",property:"text-transform",type:"select",defaults:"none",options:[{value:"none",name:"none"},{value:"capitalize",name:"capitalize"},{value:"uppercase",name:"uppercase"},{value:"lowercase",name:"lowercase"}],info:"The text-transform CSS property sets how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized."},{at:11}),t.StyleManager.addProperty("typography",{name:"Text overflow",property:"text-overflow",type:"select",defaults:"clip",options:[{value:"clip",name:"clip"},{value:"ellipsis",name:"ellipsis"}],info:"The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-clip and text-overflow-string."},{at:12}),t.StyleManager.addProperty("general",{name:"Visibility",property:"visibility",type:"select",defaults:"visible",options:[{value:"visible",name:"visible"},{value:"hidden",name:"hidden"},{value:"collapse",name:"collapse"}],info:"The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>."},{at:1});const e=t.StyleManager.addProperty("general",{name:"Content",property:"content",type:"text",defaults:"none",info:"The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.",full:!0,visible:!1},{at:0});function n(){const n=t.SelectorManager.getState();["before","after"].includes(n)?e.set("visible",!0):e.set("visible",!1)}t.on("selector:state component:selected component:styleUpdate style:sector:update",((t,e)=>setTimeout((()=>n())))),t.StyleManager.getSector("general").on("change",(()=>n())),t.SelectorManager.states.add({name:"before",label:"Before"}),t.SelectorManager.states.add({name:"after",label:"After"}),t.SelectorManager.states.add({name:"active",label:"Active"}),t.SelectorManager.states.add({name:"first-child",label:"First child"}),t.SelectorManager.states.add({name:"last-child",label:"Last child"}),t.SelectorManager.states.add({name:"focus",label:"Focus"}),t.SelectorManager.states.add({name:"visited",label:"Visited"}),t.SelectorManager.states.add({name:"link",label:"Link"}),t.SelectorManager.states.add({name:"first-letter",label:"First letter"}),t.SelectorManager.states.add({name:"first-line",label:"First line"}),t.SelectorManager.states.add({name:"selection",label:"Selection"}),t.SelectorManager.states.add({name:"empty",label:"Empty"}),t.SelectorManager.states.add({name:"enabled",label:"Enabled"}),t.SelectorManager.states.add({name:"disabled",label:"Disabled"}),t.SelectorManager.states.add({name:"checked",label:"Checked"}),t.SelectorManager.states.add({name:"indeterminate",label:"Indeterminate"}),t.SelectorManager.states.add({name:"placeholder-shown",label:"Placeholder shown"}),t.SelectorManager.states.add({name:"placeholder",label:"Placeholder"}),t.SelectorManager.states.add({name:"default",label:"Default"}),t.SelectorManager.states.add({name:"valid",label:"Valid"}),t.SelectorManager.states.add({name:"invalid",label:"Invalid"}),t.SelectorManager.states.add({name:"in-range",label:"In range"}),t.SelectorManager.states.add({name:"out-of-range",label:"Out of range"}),t.SelectorManager.states.add({name:"required",label:"Required"}),t.SelectorManager.states.add({name:"optional",label:"Optional"}),t.SelectorManager.states.add({name:"read-only",label:"Read only"}),t.SelectorManager.states.add({name:"read-write",label:"Read write"})}))}},{name:"./footer",value:function(t,e){const n=t.Panels.addPanel({id:"footer",visible:!0,buttons:[]});setTimeout((()=>{Hn=n.view?.el,Fn.forEach((t=>t(Hn))),Fn=[]}))}},{name:"@silexlabs/grapesjs-storage-rate-limit",value:Un},{name:"grapesjs-style-border",value:zn()},{name:"./resize-panel",value:function(t){t.Panels.addPanel({id:"viewsOptions",buttons:[{id:"resize",className:"viewsOptions__size-btn",command:"resize-panel",attributes:{title:"Resize panel"}}]}),t.Commands.add("resize-panel",{run:(t,e)=>{document.documentElement.style.setProperty("--viewsPanelWidth","40%")},stop:(t,e)=>{document.documentElement.style.setProperty("--viewsPanelWidth","20%")}})}}];so.filter((t=>"function"!=typeof t.value)).forEach((t=>{throw new Error(`Plugin ${t.name} could not be loaded correctly (${t.value})`)}));const ao="#333333",lo="#ddd",co="#8873FE",uo="#A291FF",po="#363636",fo="#575757",ho="Containers",go="Components";function vo(t){const{websiteId:e,storageId:n,rootUrl:r}=t;return{container:"#gjs",height:"100%",showOffsets:!0,showDevices:!0,layerManager:{appendTo:".layer-manager-container"},blockManager:{appendTo:".block-manager-container"},assetManager:{upload:`${r}${on}${vn}${Sn}/?websiteId=${e}${n?`&connectorId=${n}`:""}`},storageManager:{autoload:!1,type:"connector",options:{connector:{id:e,connectorId:n}}},cssIcons:"./css/all.min.css",canvasCss:`\n      :root {\n        --primaryColor: ${ao};\n        --secondaryColor: ${lo};\n        --tertiaryColor: ${co};\n        --quaternaryColor: ${uo};\n        --darkerPrimaryColor: ${po};\n        --lighterPrimaryColor: ${fo};\n      }\n      .gjs-frame-selected {\n        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important; // Change to red border\n      }\n      .gjs-selected {\n        outline: 2px solid var(--tertiaryColor) !important;\n        outline-offset: -2px;\n      }\n    `,richTextEditor:{actions:["bold","italic","underline","strikethrough","link","wrap",xr,Cr]},plugins:so.map((t=>t.value)),pluginsOpts:{[S().toString()]:{blocks:["text","image","video","map"],category:ho},[ir.toString()]:{panels:[{id:"dash",className:"logo",attributes:{title:"Dashboard"},command:()=>{window.location.href="/"}},{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:Oe}]},{id:"page-panel-btn",className:"page-panel-btn fa fa-fw fa-file",attributes:{title:"Pages",containerClassName:"page-panel-container"},command:Kn,buttons:[{className:"pages__add-page fa fa-file",command:Yn,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:()=>{mo.runCommand(Ce.cmdOpenFonts)}},{id:"settings-dialog-btn",className:"page-panel-btn fa-solid fa-gears",attributes:{title:"Settings"},command:gr},{id:"spacer",attributes:{},className:"project-bar-spacer"},{id:"dash2",className:"fa-solid fa-house",attributes:{title:"Dashboard"},command:()=>{window.location.href="/"}},{id:"help",className:"fa fa-fw fa-question-circle",attributes:{title:"Documentation"},command:()=>{window.open("https://docs.silex.me/","_blank")}},{id:"logout-button",className:"page-panel-btn fa fa-fw fa-sign-out",attributes:{title:"Sign out"},command:kn}]},[to.toString()]:{appendTo:"options",websiteId:e},[Xn.toString()]:{cmdOpenNewPageDialog:rr,cmdOpenSettings:gr,appendTo:".page-panel-container"},[M().toString()]:{enableCount:!1,enablePerformance:!1},[N()]:{appendBefore:".gjs-sm-sectors"},[Er.toString()]:{onError:t=>console.warn("Links errors:",t)},[P().toString()]:{blockLabel:"HTML",blockCustomCode:{category:go},codeViewOptions:{autoFormat:!1}},[we.toString()]:{appendTo:".symbols-list-container",emptyText:"No symbol yet.",primaryColor:ao,secondaryColor:lo,highlightColor:co},[Se().toString()]:{api_key:"AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc"},[Rn.toString()]:{id:e},[Un.toString()]:{time:5e3},[Vn.toString()]:{replacedElements:t.replacedElements}}}}let mo,yo;async function bo(t){if(mo)throw new Error("Grapesjs editor already created");return new Promise(((e,n)=>{try{mo=x.init(t)}catch(t){console.error("Error initializing GrapesJs with plugins:",so,t),n(t)}["text"].forEach((t=>mo.Blocks.get(t)?.set("category","Basics"))),["image","video"].forEach((t=>mo.Blocks.get(t)?.set("category","Media"))),["map"].forEach((t=>mo.Blocks.get(t)?.set("category","Components"))),mo.Blocks.render([]),mo.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()}}}(mo,{modalImportLabel:"",modalImportContent:"Paste a web page HTML code here.",modalImportButton:"Import",modalImportTitle:"Import from website"})),mo.on("load",(()=>{const t=mo.Panels.getPanel("views");t.buttons.remove("open-blocks"),t.buttons.remove("open-layers"),mo.Panels.getPanel("options").buttons.remove("export-template"),mo.Panels.getPanel("options").buttons.remove("fullscreen"),mo.BlockManager.render(null),mo.StyleManager.addProperty("extra",{extend:"filter"}),e(mo)}))}))}function wo(){return mo}async function _o(t){t.addPublicationTransformers({renderComponent:(t,e)=>"custom-code"===t.get("type")&&t.get("custom-code-plugin__code")?t.get("custom-code-plugin__code"):e()})}async function xo(t){t.addPublicationTransformers({transformFile(e){const n=e;if(n.type===Ae.HTML&&n.content){const e=t.getEditor().runCommand(Ce.cmdGetHtml);n.content=n.content.replace(/<\/head>/,`${e}</head>`)}return e}})}class Co extends m{api=e;websiteId=new URL(location.href).searchParams.get("id")??en;storageId=new URL(location.href).searchParams.get("connectorId");lang=new URL(location.href).searchParams.get("lang")??nn;rootUrl=window.location.origin+window.location.pathname.replace(/\/$/,"");debug=!1;addHashInCssFileName=!0;replacedElements=["img","video","iframe","embed","object","audio","canvas"];grapesJsConfig={plugins:[],pluginsOpts:{}};clientConfigUrl=`${this.rootUrl}/${rn}`;initGrapesConfig(){const t=vo(this);this.grapesJsConfig={...this.grapesJsConfig,...t,plugins:[...this.grapesJsConfig.plugins,...t.plugins],pluginsOpts:{...this.grapesJsConfig.pluginsOpts,...t.pluginsOpts}}}getEditor(){return wo()}publicationTransformers=[Gr,Hr];resetPublicationTransformers(){this.publicationTransformers=[Gr]}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)}addSettings(t,e,n="last"){!function(t,e,n){const r="site"===e?pr:dr;if("first"===n)r.unshift(t);else if("last"===n)r.push(t);else{if("number"!=typeof n)throw new Error("Invalid position for settings section");r.splice(n,0,t)}}(t,e,n)}removeSettings(t,e){!function(t,e){const n="site"===e?pr:dr,r=n.findIndex((e=>e.id===t));if(-1===r)throw new Error(`Cannot find section with id ${t}`);n.splice(r,1)}(t,e)}async addDefaultPlugins(){await this.addPlugin([_o,xo],{})}}async function So(t={}){yo=new Co,Object.assign(yo,t),await yo.addPlugin(yo.clientConfigUrl,{}),yo.debug&&console.warn("Silex starting in debug mode.",{config:yo}),yo.emit(ur.STARTUP_START),yo.initGrapesConfig(),yo.emit(ur.GRAPESJS_START);try{await bo(yo.grapesJsConfig)}catch(t){throw console.error("Error starting Silex",t),t}const e=wo();e.getModel().set("config",yo),yo.emit(ur.GRAPESJS_END,{editor:e}),e.I18n.setLocale(yo.lang),await yo.addDefaultPlugins(),e.StorageManager.setAutosave(!1);try{await e.load(null)}catch(t){t.httpStatusCode}finally{setTimeout((()=>{e.editor.set("changesCount",0),e.StorageManager.setAutosave(!0),document.querySelector(".silex-loader").classList.add("silex-dialog-hide"),document.querySelector("#gjs").classList.remove("silex-dialog-hide"),yo.emit(ur.STARTUP_END,{editor:e,config:yo})}),100)}}console.info("\nSilex client loaded\n")})(),silex=r})();

package/dist/plugins/client/client/events.d.ts

@@ -14,5 +14,6 @@ export declare enum ClientEvent {
     SETTINGS_OPEN = "silex:settings:open",
     SETTINGS_CLOSE = "silex:settings:close",
     SETTINGS_SAVE_START = "silex:settings:save:start",
-    SETTINGS_SAVE_END = "silex:settings:save:end"
+    SETTINGS_SAVE_END = "silex:settings:save:end",
+    SETTINGS_SECTION_CHANGE = "silex:settings:section-change"
 }

package/dist/plugins/client/client/events.js

@@ -34,5 +34,6 @@ export var ClientEvent;
     ClientEvent["SETTINGS_CLOSE"] = "silex:settings:close";
     ClientEvent["SETTINGS_SAVE_START"] = "silex:settings:save:start";
     ClientEvent["SETTINGS_SAVE_END"] = "silex:settings:save:end";
+    ClientEvent["SETTINGS_SECTION_CHANGE"] = "silex:settings:section-change";
 })(ClientEvent || (ClientEvent = {}));
 //# sourceMappingURL=events.js.map

package/dist/plugins/client/client/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../src/ts/client/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAN,IAAY,WAoBX;AApBD,WAAY,WAAW;IACrB,4BAA4B;IAC5B,oDAAqC,CAAA;IACrC,gDAAiC,CAAA;IACjC,sDAAuC,CAAA;IACvC,kDAAmC,CAAA;IAEnC,4BAA4B;IAC5B,oDAAqC,CAAA;IACrC,kDAAmC,CAAA;IACnC,gDAAiC,CAAA;IACjC,oDAAqC,CAAA;IACrC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;IAC7C,wDAAyC,CAAA;IACzC,4CAA6B,CAAA;IAC7B,oDAAqC,CAAA;IACrC,sDAAuC,CAAA;IACvC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;AAC/C,CAAC,EApBW,WAAW,KAAX,WAAW,QAoBtB"}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../src/ts/client/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAN,IAAY,WAqBX;AArBD,WAAY,WAAW;IACrB,4BAA4B;IAC5B,oDAAqC,CAAA;IACrC,gDAAiC,CAAA;IACjC,sDAAuC,CAAA;IACvC,kDAAmC,CAAA;IAEnC,4BAA4B;IAC5B,oDAAqC,CAAA;IACrC,kDAAmC,CAAA;IACnC,gDAAiC,CAAA;IACjC,oDAAqC,CAAA;IACrC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;IAC7C,wDAAyC,CAAA;IACzC,4CAA6B,CAAA;IAC7B,oDAAqC,CAAA;IACrC,sDAAuC,CAAA;IACvC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;IAC7C,wEAAyD,CAAA;AAC3D,CAAC,EArBW,WAAW,KAAX,WAAW,QAqBtB"}

package/package.json

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

package/src/ts/client/events.ts

@@ -35,4 +35,5 @@ export enum ClientEvent {
   SETTINGS_CLOSE = 'silex:settings:close',
   SETTINGS_SAVE_START = 'silex:settings:save:start',
   SETTINGS_SAVE_END = 'silex:settings:save:end',
+  SETTINGS_SECTION_CHANGE = 'silex:settings:section-change',
 }

package/src/ts/client/grapesjs/index.ts

@@ -283,7 +283,10 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
         blockLabel: 'HTML',
         blockCustomCode: {
           category: catComponents,
-        }
+        },
+        codeViewOptions: {
+          autoFormat: false,
+        },
       },
       [symbolsPlugin.toString()]: {
         appendTo: '.symbols-list-container',

package/src/ts/client/grapesjs/settings.ts

@@ -88,6 +88,14 @@ export const settingsDialog = (editor, opts) => {
     model.set('settings', data.settings || {})
     model.set('name', data.name)
   })
+  // On chrome this is needed to apply the head content to the DOM
+  editor.on('storage:end:load', () => {
+    setTimeout(() => {
+      updateDom(editor)
+    })
+  })
+  // Normal way to apply the head content to the DOM
+  // fix #1559 Custom <head> code must be reapplied
   editor.on('canvas:frame:load', () => {
     updateDom(editor)
   })
@@ -101,6 +109,7 @@ export const settingsDialog = (editor, opts) => {
     codeName: 'htmlmixed',
     lineNumbers: true,
     lineWrapping: true,
+    autoFormat: false,
   })
 }
 
@@ -165,6 +174,11 @@ function displaySettings(editor, config, model = editor.getModel()) {
     mainItem.classList.remove('silex-hidden')
     // This messes up with the save / cancel mechanism
     // displaySettings(editor, config, model)
+    // Refresh the code editor just in case it went from hidden to visible
+    // This makes it ready to be used when the user clicks on the tab
+    headEditor.refresh()
+    // Notify other plugins
+    editor.trigger(ClientEvent.SETTINGS_SECTION_CHANGE, item.id)
   }}
               >
                 ${item.label}