@silexlabs/silex 3.0.0-alpha.102 → 3.0.0-alpha.104

package/dist/client/client/grapesjs/css-props.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from 'grapesjs';
+/**
+ * @fileoverview Adds various css properties
+ */
+declare const _default: (editor: Editor, opts: any) => void;
+export default _default;

package/dist/client/client/grapesjs/img.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from 'grapesjs';
+/**
+ * @fileoverview This plugin adds CSS properties object-fit and object-position to the image component.
+ */
+declare const _default: (editor: Editor, opts: any) => void;
+export default _default;

package/dist/client/js/main.js

@@ -228,7 +228,7 @@ var silex;(()=>{var t={357:function(t){var e;"undefined"!=typeof globalThis?glob
           @click=${()=>this.editor.Commands.stop(yr)}
         >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,Ir.STATUS_NONE)}}var _r;function xr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}!function(t){t.STARTUP_START="silex:startup:start",t.STARTUP_END="silex:startup:end",t.GRAPESJS_START="silex:grapesjs:start",t.GRAPESJS_END="silex:grapesjs:end",t.PUBLISH_START="silex:publish:start",t.PUBLISH_DATA="silex:publish:data",t.PUBLISH_END="silex:publish:end",t.PUBLISH_ERROR="silex:publish:error",t.PUBLISH_LOGIN_START="silex:publish:login:start",t.PUBLISH_LOGIN_END="silex:publish:login:end",t.ASSET_WRITE_END="silex:asset:write:end",t.WRITE_END="silex:write:end"}(_r||(_r={}));const Cr="tmp-pre-publication-transformer-tohtml",Sr="tmp-pre-publication-transformer-src",Or="tmp-pre-publication-transformer-attributes-src",Tr="tmp-pre-publication-transformer-inline-css",Er="tmp-pre-publication-transformer-href",kr="tmp-pre-publication-transformer-tocss";function Ar(t,e){const n=e["background-image"],r=n?.match(/url\(["']?(.*?)["']?\)/)?.pop();return r?{...e,"background-image":`url(${Pr(t,r,$.ASSET)})`}:e}function Pr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPermalink?e.transformPermalink(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}function jr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPath?e.transformPath(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}const Mr="publish",Lr="publish-login",Nr="publish-logout";var Ir;function Dr(t,e){t.PublicationManager=new Hr(t,e)}function $r(t){switch(t){case H.IN_PROGRESS:return Ir.STATUS_PENDING;case H.ERROR:return Ir.STATUS_ERROR;case H.SUCCESS:return Ir.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"}(Ir||(Ir={}));const Rr=window.location.origin+window.location.pathname.replace(/\/$/,"");class Hr{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=Ir.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??{},fn({type:R.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=Ir.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(Mr,(()=>this.startPublication())),t.Commands.add(Lr,((t,e,n)=>this.goLogin(n))),t.Commands.add(Nr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new wr(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=Ir.STATUS_NONE,this.editor.store(null),void(this.dialog&&this.dialog.displayPending(this.job,this.status));this.settings={},this.status=Ir.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${Rr}${f}${h}${y}?connectorId=${e}&type=${n}`,"_blank"),new Promise((e=>{const n=async e=>{const r=e.data;"login"===r?.type&&(window.removeEventListener("message",n),r.error?(this.status=Ir.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(_r.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=Ir.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await hn({type:R.HOSTING,connectorId:this.settings.connector.connectorId}),this.settings={},this.dialog&&this.dialog.displayPending(this.job,this.status)}catch(t){console.error("logout error",t),this.status=Ir.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async startPublication(){if(this.status===Ir.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=Ir.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(_r.PUBLISH_START);const t=this.editor.getModel().get("user");if(!t)throw new Error("User not logged in to a storage connector");if(!this.settings.connector?.connectorId)throw new Error("User not logged in to a hosting connector");const e=this.options.websiteId,n=t.storage.connectorId;this.setPublicationTransformers();const r=this.editor.getProjectData(),o=this.editor.getModel().get("settings"),i=(await this.getHtmlFiles(o)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:$.HTML},{path:t.cssPath,content:t.css,type:$.CSS}])).concat(r.assets.map((t=>{const e=jr(this.editor,t.src,$.ASSET),n=Pr(this.editor,t.src,$.ASSET);return{...t,path:e,src:n,type:$.ASSET}}))),s={...r,settings:o,publication:this.settings,files:i};this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>{try{return e.pages[r],n.transformFile?n.transformFile(t)??t:t}catch(e){return console.error("Publication transformer: error transforming file",t,e),t}}))),e.files)}(this.editor,s),this.editor.trigger(_r.PUBLISH_DATA,s);try{const[t,r]=await gn({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:s,options:this.settings.options});this.job=r,this.status=$r(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=Ir.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=Ir.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(_r.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(_r.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return this.editor.Pages.getAll().map((e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=hr(e.get("name")),s=`/css/${i}.css`,a=`/${i}.html`,l=Pr(this.editor,s,$.CSS),c=jr(this.editor,s,$.CSS),u=jr(this.editor,a,$.HTML),p=this.editor.getHtml({component:o});return{html:`<!DOCTYPE html>\n<html lang="${r("lang")}">\n<head>\n<link rel="stylesheet" href="${l}" />\n${t?.head||""}\n${n?.head||""}\n<title>${r("title")}</title>\n<link rel="icon" href="${r("favicon")}" />\n${["description","og:title","og:description","og:image"].map((t=>`<meta property="${t}" content="${r(t)}"/>`)).join("\n")}\n</head>\n${p}\n</html>`,css:this.editor.getCss({component:o}),cssPath:c,htmlPath:u}}))}async trackProgress(){try{this.job=await vn({jobId:this.job.jobId}),this.status=$r(this.job.status)}catch(t){return this.status=Ir.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(_r.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(_r.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===H.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(_r.PUBLISH_END,{success:this.job.status===H.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");xr(t,(n=>{if(n.get(Cr))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[Cr]=n.toHTML;const o=n.getStyle.bind(n);n[Tr]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[Er]=i,n.set("attributes",{...n.get("attributes"),href:Pr(t,i,$.HTML)})),n.get("attributes").src){n[Sr]=n.get("attributes").src;const e=Pr(t,n.get("attributes").src,$.ASSET);n.set("attributes",{...n.get("attributes"),src:e})}if(n.get("src")){n[Or]=n.get("src");const e=Pr(t,n.get("src"),$.ASSET);n.set("src",e)}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>{try{return e.renderComponent?e.renderComponent(n,(()=>t))??t:t}catch(e){return console.error("Publication transformer: error rendering component",n,e),t}}),r()),n.getStyle=()=>Ar(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[kr])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[kr]=n.getStyle,n.getStyle=()=>{try{const n=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,r)??t:t})),Ar(t,r()));return n}catch(t){return console.error("Publication transformer: error rendering style",n,t),r()}}}}))}(this.editor)}resetPublicationTransformers(){!function(t){xr(t,(t=>{t[Cr]&&(t.toHTML=t[Cr],delete t[Cr]),t[Tr]&&(t.getStyle=t[Tr],delete t[Tr]),t[Sr]&&(t.set("attributes",{...t.get("attributes"),src:t[Sr]}),delete t[Sr]),t[Or]&&(t.set("src",t[Or]),delete t[Or]),t[Er]&&(t.set("attributes",{...t.get("attributes"),href:t[Er]}),delete t[Er])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[kr]&&(t.getStyle=t[kr],delete t[kr])}))}(this.editor)}}const Fr=[{name:"./project-bar",value:or},{name:"grapesjs-style-bg",value:qn()},{name:"./settings",value:(t,e)=>{try{lr="3.0.0-alpha.102"}catch(t){}console.info("Silex version:",lr),t.Commands.add(ar,{run:(e,n,{page:r})=>{sr=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n.set("active",0),t.stopCommand(ar)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r),Ae(ue`
+    `}}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,Ir.STATUS_NONE)}}var _r;function xr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}!function(t){t.STARTUP_START="silex:startup:start",t.STARTUP_END="silex:startup:end",t.GRAPESJS_START="silex:grapesjs:start",t.GRAPESJS_END="silex:grapesjs:end",t.PUBLISH_START="silex:publish:start",t.PUBLISH_DATA="silex:publish:data",t.PUBLISH_END="silex:publish:end",t.PUBLISH_ERROR="silex:publish:error",t.PUBLISH_LOGIN_START="silex:publish:login:start",t.PUBLISH_LOGIN_END="silex:publish:login:end",t.ASSET_WRITE_END="silex:asset:write:end",t.WRITE_END="silex:write:end"}(_r||(_r={}));const Cr="tmp-pre-publication-transformer-tohtml",Sr="tmp-pre-publication-transformer-src",Or="tmp-pre-publication-transformer-attributes-src",Tr="tmp-pre-publication-transformer-inline-css",Er="tmp-pre-publication-transformer-href",kr="tmp-pre-publication-transformer-tocss";function Ar(t,e){const n=e["background-image"],r=n?.match(/url\(["']?(.*?)["']?\)/)?.pop();return r?{...e,"background-image":`url(${Pr(t,r,$.ASSET)})`}:e}function Pr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPermalink?e.transformPermalink(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}function jr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPath?e.transformPath(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}const Mr="publish",Lr="publish-login",Nr="publish-logout";var Ir;function Dr(t,e){t.PublicationManager=new Hr(t,e)}function $r(t){switch(t){case H.IN_PROGRESS:return Ir.STATUS_PENDING;case H.ERROR:return Ir.STATUS_ERROR;case H.SUCCESS:return Ir.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"}(Ir||(Ir={}));const Rr=window.location.origin+window.location.pathname.replace(/\/$/,"");class Hr{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=Ir.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??{},fn({type:R.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=Ir.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(Mr,(()=>this.startPublication())),t.Commands.add(Lr,((t,e,n)=>this.goLogin(n))),t.Commands.add(Nr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new wr(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=Ir.STATUS_NONE,this.editor.store(null),void(this.dialog&&this.dialog.displayPending(this.job,this.status));this.settings={},this.status=Ir.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${Rr}${f}${h}${y}?connectorId=${e}&type=${n}`,"_blank"),new Promise((e=>{const n=async e=>{const r=e.data;"login"===r?.type&&(window.removeEventListener("message",n),r.error?(this.status=Ir.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(_r.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=Ir.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await hn({type:R.HOSTING,connectorId:this.settings.connector.connectorId}),this.settings={},this.dialog&&this.dialog.displayPending(this.job,this.status)}catch(t){console.error("logout error",t),this.status=Ir.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async startPublication(){if(this.status===Ir.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=Ir.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(_r.PUBLISH_START);const t=this.editor.getModel().get("user");if(!t)throw new Error("User not logged in to a storage connector");if(!this.settings.connector?.connectorId)throw new Error("User not logged in to a hosting connector");const e=this.options.websiteId,n=t.storage.connectorId;this.setPublicationTransformers();const r=this.editor.getProjectData(),o=this.editor.getModel().get("settings"),i=(await this.getHtmlFiles(o)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:$.HTML},{path:t.cssPath,content:t.css,type:$.CSS}])).concat(r.assets.map((t=>{const e=jr(this.editor,t.src,$.ASSET),n=Pr(this.editor,t.src,$.ASSET);return{...t,path:e,src:n,type:$.ASSET}}))),s={...r,settings:o,publication:this.settings,files:i};this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>{try{return e.pages[r],n.transformFile?n.transformFile(t)??t:t}catch(e){return console.error("Publication transformer: error transforming file",t,e),t}}))),e.files)}(this.editor,s),this.editor.trigger(_r.PUBLISH_DATA,s);try{const[t,r]=await gn({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:s,options:this.settings.options});this.job=r,this.status=$r(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=Ir.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=Ir.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(_r.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(_r.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return this.editor.Pages.getAll().map((e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=hr(e.get("name")),s=`/css/${i}.css`,a=`/${i}.html`,l=Pr(this.editor,s,$.CSS),c=jr(this.editor,s,$.CSS),u=jr(this.editor,a,$.HTML),p=this.editor.getHtml({component:o});return{html:`<!DOCTYPE html>\n<html lang="${r("lang")}">\n<head>\n<link rel="stylesheet" href="${l}" />\n${t?.head||""}\n${n?.head||""}\n<title>${r("title")}</title>\n<link rel="icon" href="${r("favicon")}" />\n${["description","og:title","og:description","og:image"].map((t=>`<meta property="${t}" content="${r(t)}"/>`)).join("\n")}\n</head>\n${p}\n</html>`,css:this.editor.getCss({component:o}),cssPath:c,htmlPath:u}}))}async trackProgress(){try{this.job=await vn({jobId:this.job.jobId}),this.status=$r(this.job.status)}catch(t){return this.status=Ir.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(_r.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(_r.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===H.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(_r.PUBLISH_END,{success:this.job.status===H.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");xr(t,(n=>{if(n.get(Cr))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[Cr]=n.toHTML;const o=n.getStyle.bind(n);n[Tr]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[Er]=i,n.set("attributes",{...n.get("attributes"),href:Pr(t,i,$.HTML)})),n.get("attributes").src){n[Sr]=n.get("attributes").src;const e=Pr(t,n.get("attributes").src,$.ASSET);n.set("attributes",{...n.get("attributes"),src:e})}if(n.get("src")){n[Or]=n.get("src");const e=Pr(t,n.get("src"),$.ASSET);n.set("src",e)}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>{try{return e.renderComponent?e.renderComponent(n,(()=>t))??t:t}catch(e){return console.error("Publication transformer: error rendering component",n,e),t}}),r()),n.getStyle=()=>Ar(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[kr])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[kr]=n.getStyle,n.getStyle=()=>{try{const n=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,r)??t:t})),Ar(t,r()));return n}catch(t){return console.error("Publication transformer: error rendering style",n,t),r()}}}}))}(this.editor)}resetPublicationTransformers(){!function(t){xr(t,(t=>{t[Cr]&&(t.toHTML=t[Cr],delete t[Cr]),t[Tr]&&(t.getStyle=t[Tr],delete t[Tr]),t[Sr]&&(t.set("attributes",{...t.get("attributes"),src:t[Sr]}),delete t[Sr]),t[Or]&&(t.set("src",t[Or]),delete t[Or]),t[Er]&&(t.set("attributes",{...t.get("attributes"),href:t[Er]}),delete t[Er])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[kr]&&(t.getStyle=t[kr],delete t[kr])}))}(this.editor)}}const Fr=[{name:"./project-bar",value:or},{name:"grapesjs-style-bg",value:qn()},{name:"./settings",value:(t,e)=>{try{lr="3.0.0-alpha.104"}catch(t){}console.info("Silex version:",lr),t.Commands.add(ar,{run:(e,n,{page:r})=>{sr=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n.set("active",0),t.stopCommand(ar)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r),Ae(ue`
     <p>The page settings will override site settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
     <form class="silex-form">
       <h2>General settings</h2>
@@ -318,4 +318,4 @@ var silex;(()=>{var t={357:function(t){var e;"undefined"!=typeof globalThis?glob
           <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"}]}}})})),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)=>{t.RichTextEditor.add("orderedList",{icon:"1.",attributes:{title:"Ordered List"},result:t=>t.exec("insertOrderedList")}),t.RichTextEditor.add("unorderedList",{icon:'<i class="fa fa-list-ul"></i>',attributes:{title:"Unordered List"},result:t=>t.exec("insertUnorderedList")})}},{name:"grapesjs-style-filter",value:lt()},{name:"grapesjs-plugin-forms",value:ut()},{name:"grapesjs-custom-code",value:dt()},{name:"./internal-links",value:mr},{name:"@silexlabs/grapesjs-ui-suggest-classes",value:ht()},{name:"./symbolDialogs",value:(t,e)=>{t.Commands.add(ln,{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(en,{label:r,icon:"fa-gem"})}})}},{name:"@silexlabs/grapesjs-symbols",value:nn},{name:"./PublicationManager",value:Dr},{name:"./storage",value:t=>{function e(e){const n="string"==typeof e?JSON.parse(e):e;if(console.error("Error with loading or saving website or uploading asset",n,n instanceof N),!(n instanceof N))return t.Modal.open({title:"Error",content:`An error occured.<br>${n.message}`});switch(console.error("ApiError",n.httpStatusCode,n.message),n.httpStatusCode){case 404:return t.Modal.open({title:"Website not found",content:`This website could not be found.<br><hr>${n.message}`});case 403:return t.Modal.open({title:"Access denied",content:`You are not allowed to access this website.<br><hr>${n.message}`});case 401:return void t.trigger(Ln);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 Nn(t)??await In(t,R.STORAGE,e.connectorId);if(!i)throw new N("Not logged in",401);const s=await bn({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:U(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:W(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}${U(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(jn,(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(kn)),console.error("connectorPlugin load error",n),n}var n,r,o},async store(e,n){try{if(await Nn(t)){const r=await Nn(t);e.assets=e.assets.map((t=>t.src?{...t,src:B(t.src)}:t)),e.pages=e.pages.map((t=>({...t,frames:t.frames.map((t=>({...t,component:q(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}${B(n)}${e})`));return{...t,style:{...t.style,"background-image":e}}}return t})),await wn({websiteId:n.id,connectorId:r.storage.connectorId,data:e})}else t.once(jn,(()=>t.Storage.store())),t.Commands.run(kn)}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:Hn},{name:"@silexlabs/grapesjs-loading",value:on()},{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()},Fn?r(Fn):Vn.push(r),t.on("component:selected style:target component:drag:end",(()=>o()))}},{name:"./footer",value:function(t,e){const n=t.Panels.addPanel({id:"footer",visible:!0,buttons:[{id:"myNewButton",className:"someClass",command:"someCommand",attributes:{title:"Some title"},active:!1}]});setTimeout((()=>{Fn=n.view?.el,Vn.forEach((t=>t(Fn))),Vn=[]}))}},{name:"@silexlabs/grapesjs-storage-rate-limit",value:Un},{name:"grapesjs-style-border",value:zn()}];Fr.filter((t=>"function"!=typeof t.value)).forEach((t=>{throw new Error(`Plugin ${t.name} could not be loaded correctly (${t.value})`)}));const Vr="#333333",Ur="#ddd",Br="#8873FE",zr="#A291FF",Wr="#363636",qr="#575757",Gr="Containers",Kr="Components";function Yr(t,e,n){return{container:"#gjs",height:"100%",showOffsets:!0,showDevices:!0,layerManager:{appendTo:".layer-manager-container"},blockManager:{appendTo:".block-manager-container"},assetManager:{upload:`${n}${f}${S}${j}/?websiteId=${t}${e?`&connectorId=${e}`:""}`},storageManager:{autoload:!1,type:"connector",options:{connector:{id:t,connectorId:e}}},cssIcons:"./css/all.min.css",canvasCss:`\n      :root {\n        --primaryColor: ${Vr};\n        --secondaryColor: ${Ur};\n        --tertiaryColor: ${Br};\n        --quaternaryColor: ${zr};\n        --darkerPrimaryColor: ${Wr};\n        --lighterPrimaryColor: ${qr};\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    `,plugins:Fr.map((t=>t.value)),pluginsOpts:{[st()]:{blocks:["text","image","video","map"],category:Gr},[or]:{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:ln}]},{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:()=>{Jr.runCommand(sn.cmdOpenFonts)}},{id:"settings-dialog-btn",className:"page-panel-btn fa-solid fa-gears",attributes:{title:"Settings"},command:ar},{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:An}]},[Dr]:{appendTo:"options",websiteId:t},[Xn]:{cmdOpenNewPageDialog:rr,cmdOpenSettings:ar,appendTo:".page-panel-container"},[ht()]:{enableCount:!1,enablePerformance:!1},[mr]:{onError:t=>console.warn("Links errors:",t)},[dt()]:{blockLabel:"HTML",blockCustomCode:{category:Kr}},[nn]:{appendTo:".symbols-list-container",emptyText:"No symbol yet.",primaryColor:Vr,secondaryColor:Ur,highlightColor:Br},[an()]:{api_key:"AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc"},[Hn]:{id:t},[Un]:{time:5e3}}}}let Jr;async function Xr(t){if(Jr)throw new Error("Grapesjs editor already created");return new Promise(((e,n)=>{try{Jr=ot().init(t)}catch(t){console.error("Error initializing GrapesJs with plugins:",Fr,t),n(t)}["text"].forEach((t=>Jr.Blocks.get(t)?.set("category","Basics"))),["image","video"].forEach((t=>Jr.Blocks.get(t)?.set("category","Media"))),["map"].forEach((t=>Jr.Blocks.get(t)?.set("category","Components"))),Jr.Blocks.render([]),Jr.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()}}}(Jr,{modalImportLabel:"",modalImportContent:"Paste a web page HTML code here.",modalImportButton:"Import",modalImportTitle:"Import from website"})),Jr.on("load",(()=>{Jr.Panels.getPanel("views").buttons.remove("open-blocks"),Jr.Panels.getPanel("views").buttons.remove("open-layers"),Jr.Panels.getPanel("views").view.el.firstChild.style.justifyContent="initial",Jr.Panels.getPanel("options").buttons.remove("export-template"),Jr.BlockManager.render(null),Jr.StyleManager.addProperty("extra",{extend:"filter"}),e(Jr)}))}))}function Zr(){return Jr}class Qr extends nt{api=o;websiteId=new URL(location.href).searchParams.get("id")??u;storageId=new URL(location.href).searchParams.get("connectorId");lang=new URL(location.href).searchParams.get("lang")??p;rootUrl=window.location.origin+window.location.pathname.replace(/\/$/,"");debug=!1;grapesJsConfig;clientConfigUrl=`${this.rootUrl}/${d}`;initGrapesConfig(){this.grapesJsConfig=Yr(this.websiteId,this.storageId,this.rootUrl)}getEditor(){return Zr()}publicationTransformers=[];addPublicationTransformers(t){Array.isArray(t)||(t=[t]),t.forEach((t=>{!function(t){const e=["renderComponent","renderCssRule","transformFile","transformPermalink","transformPath"];Object.keys(t).forEach((t=>{if(!e.includes(t))throw new Error(`Publication transformer: unknown property ${t}`)})),e.forEach((e=>{if("function"!=typeof t[e]&&void 0!==t[e])throw new Error(`Publication transformer: ${e} must be a function`)}))}(t)})),this.publicationTransformers=this.publicationTransformers.concat(t)}}async function to(t={}){const e=new Qr;Object.assign(e,t),e.addPublicationTransformers(z),await e.addPlugin(e.clientConfigUrl,{}),e.debug&&console.warn("Silex starting in debug mode.",{config:e}),e.emit(_r.STARTUP_START),e.initGrapesConfig(),e.emit(_r.GRAPESJS_START);try{await Xr(e.grapesJsConfig)}catch(t){throw console.error("Error starting Silex",t),t}const n=Zr();n.getModel().set("config",e),e.emit(_r.GRAPESJS_END,{editor:n}),n.I18n.setLocale(e.lang),n.StorageManager.setAutosave(!1);try{await n.load(null)}catch(t){t.httpStatusCode}finally{setTimeout((()=>{n.editor.set("changesCount",0),n.StorageManager.setAutosave(!0),document.querySelector(".silex-loader").classList.add("silex-dialog-hide"),document.querySelector("#gjs").classList.remove("silex-dialog-hide"),e.emit(_r.STARTUP_END,{editor:n,config:e})}),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)=>{t.RichTextEditor.add("orderedList",{icon:"1.",attributes:{title:"Ordered List"},result:t=>t.exec("insertOrderedList")}),t.RichTextEditor.add("unorderedList",{icon:'<i class="fa fa-list-ul"></i>',attributes:{title:"Unordered List"},result:t=>t.exec("insertUnorderedList")})}},{name:"grapesjs-style-filter",value:lt()},{name:"grapesjs-plugin-forms",value:ut()},{name:"grapesjs-custom-code",value:dt()},{name:"./internal-links",value:mr},{name:"@silexlabs/grapesjs-ui-suggest-classes",value:ht()},{name:"./symbolDialogs",value:(t,e)=>{t.Commands.add(ln,{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(en,{label:r,icon:"fa-gem"})}})}},{name:"@silexlabs/grapesjs-symbols",value:nn},{name:"./PublicationManager",value:Dr},{name:"./storage",value:t=>{function e(e){const n="string"==typeof e?JSON.parse(e):e;if(console.error("Error with loading or saving website or uploading asset",n,n instanceof N),!(n instanceof N))return t.Modal.open({title:"Error",content:`An error occured.<br>${n.message}`});switch(console.error("ApiError",n.httpStatusCode,n.message),n.httpStatusCode){case 404:return t.Modal.open({title:"Website not found",content:`This website could not be found.<br><hr>${n.message}`});case 403:return t.Modal.open({title:"Access denied",content:`You are not allowed to access this website.<br><hr>${n.message}`});case 401:return void t.trigger(Ln);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 Nn(t)??await In(t,R.STORAGE,e.connectorId);if(!i)throw new N("Not logged in",401);const s=await bn({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:U(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:W(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}${U(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(jn,(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(kn)),console.error("connectorPlugin load error",n),n}var n,r,o},async store(e,n){try{if(await Nn(t)){const r=await Nn(t);e.assets=e.assets.map((t=>t.src?{...t,src:B(t.src)}:t)),e.pages=e.pages.map((t=>({...t,frames:t.frames.map((t=>({...t,component:q(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}${B(n)}${e})`));return{...t,style:{...t.style,"background-image":e}}}return t})),await wn({websiteId:n.id,connectorId:r.storage.connectorId,data:e})}else t.once(jn,(()=>t.Storage.store())),t.Commands.run(kn)}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:Hn},{name:"@silexlabs/grapesjs-loading",value:on()},{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()},Fn?r(Fn):Vn.push(r),t.on("component:selected style:target component:drag:end",(()=>o()))}},{name:"./img",value:(t,e)=>{e={labelSrc:"Image URL",placeholderSrc:"https://example.com/image.jpg",...e},t.TraitManager.addType("src",{events:{change:"onChange"},templateInput:()=>`\n        <div class="gjs-field gjs-field-trad">\n          <label class="gjs-label">${e.labelSrc}</label>\n          <input type="text" class="gjs-field" placeholder="${e.placeholderSrc}" />\n        </div>\n      `,getInputEl(){return this.inputEl||(this.inputEl=this.templateInput()),this.inputEl},onValueChange(){this.setValue(this.getInputEl().value)},setValue(t){this.getInputEl().value=t},getValue(){return this.getInputEl().value}}),t.DomComponents.addType("image",{model:{defaults:{...t.DomComponents.getType("image").model.prototype.defaults,traits:[...t.DomComponents.getType("image").model.prototype.defaults.traits.filter((t=>!["href","tag-name","src"].includes(t.name))),"src"]}}}),t.on("load",(()=>{const e=t.StyleManager.addSector("image",{name:"Image",open:!1,properties:[{label:"object-fit",property:"object-fit",type:"select",default:"",options:[{id:"",label:""},{id:"fill",label:"fill"},{id:"contain",label:"contain"},{id:"cover",label:"cover"},{id:"none",label:"none"},{id:"scale-down",label:"scale-down"},{id:"initial",label:"initial"},{id:"inherit",label:"inherit"},{id:"auto",label:"auto"}]},{label:"object-position",property:"object-position",type:"select",default:"",options:[{id:"",label:""},{id:"left top",label:"left top"},{id:"left center",label:"left center"},{id:"left bottom",label:"left bottom"},{id:"right top",label:"right top"},{id:"right center",label:"right center"},{id:"right bottom",label:"right bottom"},{id:"center top",label:"center top"},{id:"center center",label:"center center"},{id:"center bottom",label:"center bottom"},{id:"initial",label:"initial"},{id:"inherit",label:"inherit"},{id:"unset",label:"unset"}]}]},{at:1});let n=!1;t.on("component:selected",(t=>{t&&"image"===t.get("type")?n=!0:(n=!1,e.set("visible",!1))})),e.on("change:visible",((t,r)=>{e.get("visible")!==n&&e.set("visible",n)}))}))}},{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:4}),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:"auto",fixedValues:["auto","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})}))}},{name:"./footer",value:function(t,e){const n=t.Panels.addPanel({id:"footer",visible:!0,buttons:[{id:"myNewButton",className:"someClass",command:"someCommand",attributes:{title:"Some title"},active:!1}]});setTimeout((()=>{Fn=n.view?.el,Vn.forEach((t=>t(Fn))),Vn=[]}))}},{name:"@silexlabs/grapesjs-storage-rate-limit",value:Un},{name:"grapesjs-style-border",value:zn()}];Fr.filter((t=>"function"!=typeof t.value)).forEach((t=>{throw new Error(`Plugin ${t.name} could not be loaded correctly (${t.value})`)}));const Vr="#333333",Ur="#ddd",Br="#8873FE",zr="#A291FF",Wr="#363636",qr="#575757",Gr="Containers",Kr="Components";function Yr(t,e,n){return{container:"#gjs",height:"100%",showOffsets:!0,showDevices:!0,layerManager:{appendTo:".layer-manager-container"},blockManager:{appendTo:".block-manager-container"},assetManager:{upload:`${n}${f}${S}${j}/?websiteId=${t}${e?`&connectorId=${e}`:""}`},storageManager:{autoload:!1,type:"connector",options:{connector:{id:t,connectorId:e}}},cssIcons:"./css/all.min.css",canvasCss:`\n      :root {\n        --primaryColor: ${Vr};\n        --secondaryColor: ${Ur};\n        --tertiaryColor: ${Br};\n        --quaternaryColor: ${zr};\n        --darkerPrimaryColor: ${Wr};\n        --lighterPrimaryColor: ${qr};\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    `,plugins:Fr.map((t=>t.value)),pluginsOpts:{[st()]:{blocks:["text","image","video","map"],category:Gr},[or]:{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:ln}]},{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:()=>{Jr.runCommand(sn.cmdOpenFonts)}},{id:"settings-dialog-btn",className:"page-panel-btn fa-solid fa-gears",attributes:{title:"Settings"},command:ar},{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:An}]},[Dr]:{appendTo:"options",websiteId:t},[Xn]:{cmdOpenNewPageDialog:rr,cmdOpenSettings:ar,appendTo:".page-panel-container"},[ht()]:{enableCount:!1,enablePerformance:!1},[mr]:{onError:t=>console.warn("Links errors:",t)},[dt()]:{blockLabel:"HTML",blockCustomCode:{category:Kr}},[nn]:{appendTo:".symbols-list-container",emptyText:"No symbol yet.",primaryColor:Vr,secondaryColor:Ur,highlightColor:Br},[an()]:{api_key:"AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc"},[Hn]:{id:t},[Un]:{time:5e3}}}}let Jr;async function Xr(t){if(Jr)throw new Error("Grapesjs editor already created");return new Promise(((e,n)=>{try{Jr=ot().init(t)}catch(t){console.error("Error initializing GrapesJs with plugins:",Fr,t),n(t)}["text"].forEach((t=>Jr.Blocks.get(t)?.set("category","Basics"))),["image","video"].forEach((t=>Jr.Blocks.get(t)?.set("category","Media"))),["map"].forEach((t=>Jr.Blocks.get(t)?.set("category","Components"))),Jr.Blocks.render([]),Jr.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()}}}(Jr,{modalImportLabel:"",modalImportContent:"Paste a web page HTML code here.",modalImportButton:"Import",modalImportTitle:"Import from website"})),Jr.on("load",(()=>{Jr.Panels.getPanel("views").buttons.remove("open-blocks"),Jr.Panels.getPanel("views").buttons.remove("open-layers"),Jr.Panels.getPanel("views").view.el.firstChild.style.justifyContent="initial",Jr.Panels.getPanel("options").buttons.remove("export-template"),Jr.BlockManager.render(null),Jr.StyleManager.addProperty("extra",{extend:"filter"}),e(Jr)}))}))}function Zr(){return Jr}class Qr extends nt{api=o;websiteId=new URL(location.href).searchParams.get("id")??u;storageId=new URL(location.href).searchParams.get("connectorId");lang=new URL(location.href).searchParams.get("lang")??p;rootUrl=window.location.origin+window.location.pathname.replace(/\/$/,"");debug=!1;grapesJsConfig;clientConfigUrl=`${this.rootUrl}/${d}`;initGrapesConfig(){this.grapesJsConfig=Yr(this.websiteId,this.storageId,this.rootUrl)}getEditor(){return Zr()}publicationTransformers=[];addPublicationTransformers(t){Array.isArray(t)||(t=[t]),t.forEach((t=>{!function(t){const e=["renderComponent","renderCssRule","transformFile","transformPermalink","transformPath"];Object.keys(t).forEach((t=>{if(!e.includes(t))throw new Error(`Publication transformer: unknown property ${t}`)})),e.forEach((e=>{if("function"!=typeof t[e]&&void 0!==t[e])throw new Error(`Publication transformer: ${e} must be a function`)}))}(t)})),this.publicationTransformers=this.publicationTransformers.concat(t)}}async function to(t={}){const e=new Qr;Object.assign(e,t),e.addPublicationTransformers(z),await e.addPlugin(e.clientConfigUrl,{}),e.debug&&console.warn("Silex starting in debug mode.",{config:e}),e.emit(_r.STARTUP_START),e.initGrapesConfig(),e.emit(_r.GRAPESJS_START);try{await Xr(e.grapesJsConfig)}catch(t){throw console.error("Error starting Silex",t),t}const n=Zr();n.getModel().set("config",e),e.emit(_r.GRAPESJS_END,{editor:n}),n.I18n.setLocale(e.lang),n.StorageManager.setAutosave(!1);try{await n.load(null)}catch(t){t.httpStatusCode}finally{setTimeout((()=>{n.editor.set("changesCount",0),n.StorageManager.setAutosave(!0),document.querySelector(".silex-loader").classList.add("silex-dialog-hide"),document.querySelector("#gjs").classList.remove("silex-dialog-hide"),e.emit(_r.STARTUP_END,{editor:n,config:e})}),100)}}console.info("\nSilex client loaded\n")})(),silex=r})();

package/dist/plugins/client/client/grapesjs/css-props.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from 'grapesjs';
+/**
+ * @fileoverview Adds various css properties
+ */
+declare const _default: (editor: Editor, opts: any) => void;
+export default _default;