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

package/dist/client/css/admin.css

@@ -3812,15 +3812,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   color: #ffffff;
 }
 
-:root {
-  --primaryColor: #444;
-  --secondaryColor: #ddd;
-  --tertiaryColor: #5e85a8;
-  --quaternaryColor: #7bc0ff;
-  --darkerPrimaryColor: #363636;
-  --lighterPrimaryColor: #575757;
-}
-
 .silex-workspace {
   position: absolute;
   top: 0;
@@ -3829,6 +3820,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   height: 100%;
   display: flex;
 }
+.silex-workspace body {
+  font-family: "Ubuntu", sans-serif;
+}
 .silex-workspace a {
   color: inherit;
 }
@@ -3871,7 +3865,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   left: 0;
   width: 100%;
   padding: 20px 0;
-  background-color: #444;
+  background-color: #333333;
 }
 .settings-dialog > div footer > *:last-child {
   margin-right: 30px;
@@ -3910,7 +3904,7 @@ input.silex-button[type=submit] {
 }
 
 .silex-button.silex-button--secondary {
-  background-color: #444;
+  background-color: #333333;
 }
 
 .silex-button--size {
@@ -4021,7 +4015,7 @@ form.silex-form .silex-form__group.col2 {
   color: #ddd;
   justify-content: center;
   align-items: center;
-  background-color: #444;
+  background-color: #333333;
   z-index: 10;
 }
 
@@ -4052,7 +4046,7 @@ form.silex-form .silex-form__group.col2 {
 
 .silex-dialog-inline {
   position: absolute;
-  background-color: #444;
+  background-color: #333333;
   z-index: 10;
   border-radius: 3px;
   border: 2px solid rgba(0, 0, 0, 0.25);
@@ -4071,162 +4065,12 @@ form.silex-form .silex-form__group.col2 {
   text-align: right;
 }
 .silex-dialog-inline a {
-  color: #7bc0ff;
+  color: #56E3FF;
 }
 .silex-dialog-inline header > * {
   margin: 0;
 }
 
-#gjs {
-  flex: 1 1 auto;
-}
-
-.gjs-one-bg {
-  background-color: #444;
-}
-.gjs-one-color {
-  color: #444;
-}
-.gjs-one-color-h:hover {
-  color: #444;
-}
-.gjs-two-bg {
-  background-color: #ddd;
-}
-.gjs-two-color {
-  color: #ddd;
-}
-.gjs-two-color-h:hover {
-  color: #ddd;
-}
-.gjs-three-bg {
-  background-color: #5e85a8;
-}
-.gjs-three-color {
-  color: #5e85a8;
-}
-.gjs-three-color-h:hover {
-  color: #5e85a8;
-}
-.gjs-four-bg {
-  background-color: #7bc0ff;
-}
-.gjs-four-color {
-  color: #7bc0ff;
-}
-.gjs-four-color-h:hover {
-  color: #7bc0ff;
-}
-
-.gjs-cv-canvas,
-.gjs-pn-panel,
-.gjs-pn-commands {
-  left: 35px;
-}
-
-.gjs-pn-project-bar-panel,
-.gjs-pn-views,
-.gjs-pn-options,
-.gjs-pn-views-container {
-  left: auto;
-}
-
-.gjs-cv-canvas {
-  width: calc(85% - 35px);
-}
-
-.gjs-pn-devices-c {
-  display: flex;
-}
-.gjs-pn-devices-c .gjs-device-label {
-  display: none;
-}
-
-.gjs-pn-views-container {
-  width: 15%;
-}
-
-/*
-*/
-.gjs-editor-cont .fa {
-  font-weight: 400;
-}
-
-.fa-square-o:before {
-  content: "\f0c8";
-}
-
-.fa-trash-o:before {
-  content: "\f1f8";
-}
-
-.fa-map-o:before {
-  content: "\f279";
-}
-
-.fa-youtube-play:before {
-  content: "\f04b";
-}
-
-/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
-.fa-chevron-right:before {
-  content: "\f054";
-}
-
-.fa-chevron-down:before {
-  content: "\f078";
-}
-
-.fa-cog:before {
-  font-weight: 900;
-}
-
-.fa-paint-brush:before {
-  font-weight: 900;
-}
-
-.fa-arrows-alt:before {
-  content: "\f065";
-  font-weight: 900;
-}
-
-.fa-caret-down:before {
-  content: "\f0d7";
-  font-weight: 900;
-}
-
-.fa-caret-right:before {
-  content: "\f0da";
-  font-weight: 900;
-}
-
-.fa-trash:before {
-  content: "\f2ed";
-  font-weight: 900;
-}
-
-.fa-list:before {
-  content: "\f03a";
-  font-weight: 900;
-}
-
-.fa-sign-out:before {
-  content: "\f08b";
-  font-weight: 900;
-}
-
-/*
-.fa-plus:before {
-	content: "+";
-  font-size: 35px;
-}
-.fa-diamond:before {
-  content: "\f3a5";
-}
-// .fa-plus {
-//   background-image: svg(<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>);
-// }
-*/
 iframe.enable-squeeze.gjs-frame {
   transition: width 0.35s, height 0.35s, left 0.35s;
 }
@@ -4280,11 +4124,11 @@ iframe.enable-squeeze.silex-squeeze-left {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #444;
+  background-color: #333333;
   overflow: auto;
 }
 .gjs-pn-project-bar-container .project-bar__panel:not(.gjs-hidden) .gjs-layer {
-  background-color: #444;
+  background-color: #333333;
 }
 .gjs-pn-project-bar-container .project-bar__panel > *:not(header) {
   flex: 1;
@@ -4323,7 +4167,7 @@ iframe.enable-squeeze.silex-squeeze-left {
   line-height: 13px;
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button:hover {
-  color: #7bc0ff;
+  color: #56E3FF;
 }
 
 .page-panel-container .pages__wrapper {
@@ -4337,7 +4181,7 @@ iframe.enable-squeeze.silex-squeeze-left {
 .page-panel-container .pages .pages__main {
   flex: 1;
   border: 1px solid #363636;
-  background-color: #444;
+  background-color: #333333;
 }
 .page-panel-container .pages .pages__page {
   display: flex;
@@ -4347,17 +4191,17 @@ iframe.enable-squeeze.silex-squeeze-left {
   cursor: pointer;
 }
 .page-panel-container .pages .pages__page:hover {
-  background-color: #444;
+  background-color: #333333;
 }
 .page-panel-container .pages .pages__page:hover .pages__page-name {
-  color: #7bc0ff;
+  color: #56E3FF;
 }
 .page-panel-container .pages .pages__page-selected {
   background-color: #575757;
   cursor: default;
 }
 .page-panel-container .pages .pages__page-selected .pages__page-name {
-  color: #7bc0ff;
+  color: #56E3FF;
 }
 .page-panel-container .pages .pages__main.pages__single-page .pages__remove-btn {
   visibility: hidden;
@@ -4378,7 +4222,7 @@ iframe.enable-squeeze.silex-squeeze-left {
   cursor: pointer;
 }
 .page-panel-container .pages .pages__icon:hover {
-  color: #7bc0ff;
+  color: #56E3FF;
 }
 .page-panel-container .gjs-pn-buttons {
   flex-direction: column;
@@ -4398,8 +4242,242 @@ iframe.enable-squeeze.silex-squeeze-left {
   background-color: #363636;
 }
 
+#gjs {
+  flex: 1 1 auto;
+}
+
+.gjs-one-bg {
+  background-color: #333333;
+}
+.gjs-one-color {
+  color: #333333;
+}
+.gjs-one-color-h:hover {
+  color: #333333;
+}
+.gjs-two-bg {
+  background-color: #ddd;
+}
+.gjs-two-color {
+  color: #ddd;
+}
+.gjs-two-color-h:hover {
+  color: #ddd;
+}
+.gjs-three-bg {
+  background-color: #8873FE;
+}
+.gjs-three-color {
+  color: #8873FE;
+}
+.gjs-three-color-h:hover {
+  color: #8873FE;
+}
+.gjs-four-bg {
+  background-color: #56E3FF;
+}
+.gjs-four-color {
+  color: #56E3FF;
+}
+.gjs-four-color-h:hover {
+  color: #56E3FF;
+}
+
+.gjs-cv-canvas,
+.gjs-pn-panel,
+.gjs-pn-commands {
+  left: 35px;
+}
+
+.gjs-pn-project-bar-panel,
+.gjs-pn-views,
+.gjs-pn-options,
+.gjs-pn-views-container {
+  left: auto;
+}
+
+.gjs-cv-canvas {
+  width: calc(85% - 35px);
+}
+
+.gjs-pn-devices-c {
+  display: flex;
+}
+.gjs-pn-devices-c .gjs-device-label {
+  display: none;
+}
+
+.gjs-pn-views-container {
+  width: 15%;
+}
+
+.gjs-editor {
+  font-family: "Ubuntu", sans-serif;
+  font-size: 0.75rem;
+}
+
+.gjs-toolbar {
+  background-color: #8873FE;
+}
+
+.gjs-resizer-h {
+  border-color: #8873FE;
+}
+
+.gjs-com-badge, .gjs-com-badge-red, .gjs-badge {
+  background-color: #8873FE;
+}
+
+.gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
+  outline: 1px solid #8873FE;
+}
+
+/*
+*/
+.gjs-editor-cont .fa {
+  font-weight: 400;
+}
+
+.fa-square-o:before {
+  content: "\f0c8";
+}
+
+.fa-trash-o:before {
+  content: "\f1f8";
+}
+
+.fa-map-o:before {
+  content: "\f279";
+}
+
+.fa-youtube-play:before {
+  content: "\f04b";
+}
+
+/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
+.fa-chevron-right:before {
+  content: "\f054";
+}
+
+.fa-chevron-down:before {
+  content: "\f078";
+}
+
+.fa-cog:before {
+  font-weight: 900;
+}
+
+.fa-paint-brush:before {
+  font-weight: 900;
+}
+
+.fa-arrows-alt:before {
+  content: "\f065";
+  font-weight: 900;
+}
+
+.fa-caret-down:before {
+  content: "\f0d7";
+  font-weight: 900;
+}
+
+.fa-caret-right:before {
+  content: "\f0da";
+  font-weight: 900;
+}
+
+.fa-trash:before {
+  content: "\f2ed";
+  font-weight: 900;
+}
+
+.fa-list:before {
+  content: "\f03a";
+  font-weight: 900;
+}
+
+.fa-sign-out:before {
+  content: "\f08b";
+  font-weight: 900;
+}
+
+/*
+.fa-plus:before {
+	content: "+";
+  font-size: 35px;
+}
+.fa-diamond:before {
+  content: "\f3a5";
+}
+// .fa-plus {
+//   background-image: svg(<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>);
+// }
+*/
+/* ubuntu-cyrillic-ext-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-cyrillic-ext-400-normal.woff2) format("woff2"), url(./files/ubuntu-cyrillic-ext-400-normal.woff) format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* ubuntu-cyrillic-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-cyrillic-400-normal.woff2) format("woff2"), url(./files/ubuntu-cyrillic-400-normal.woff) format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* ubuntu-greek-ext-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-greek-ext-400-normal.woff2) format("woff2"), url(./files/ubuntu-greek-ext-400-normal.woff) format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+/* ubuntu-greek-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-greek-400-normal.woff2) format("woff2"), url(./files/ubuntu-greek-400-normal.woff) format("woff");
+  unicode-range: U+0370-03FF;
+}
+/* ubuntu-latin-ext-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-latin-ext-400-normal.woff2) format("woff2"), url(./files/ubuntu-latin-ext-400-normal.woff) format("woff");
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* ubuntu-latin-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-latin-400-normal.woff2) format("woff2"), url(./files/ubuntu-latin-400-normal.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 /* Normalize css */
 /* Silex styles imports */
+:root {
+  --primaryColor: $primaryColor;
+  --secondaryColor: $secondaryColor;
+  --tertiaryColor: $tertiaryColor;
+  --quaternaryColor: $quaternaryColor;
+  --darkerPrimaryColor: $darkerPrimaryColor;
+  --lighterPrimaryColor: $lighterPrimaryColor;
+}
+
 .container-png::before {
   content: " ";
   background-image: url("../assets/container.png");

package/dist/client/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html><html lang="en" translate="no"><head><title>Silex</title><meta name="description" content="This is a public instance of Silex website builder. Build websites in the browser"><link rel="shortcut icon" href="assets/favicon.png"><style>body {
   background-color: #444444;
-  font-family: Helvetica,sans-serif;
+  font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .silex-loader {
   display: none;

package/dist/client/js/main.js

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

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

@@ -13,7 +13,7 @@ export default function (editor, options) {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 2px 10px 0;
+        padding: 5px 10px 0;
         font-size: 12px;
         color: #999;
         overflow-x: auto;
@@ -24,7 +24,7 @@ export default function (editor, options) {
       }
       #breadcrumbs-container .breadcrumb {
         margin: 5px;
-        font-size: large;
+        font-size: 15px;
         line-height: 1;
         cursor: pointer;
         white-space: nowrap;
@@ -68,7 +68,7 @@ export default function (editor, options) {
             editor.select(component);
         };
         breadcrumb.classList.add('breadcrumb');
-        breadcrumb.innerHTML = `<span>${component.get('tagName')}${component.getClasses().length ? `.${component.getClasses().join('.')}` : ''}</span>`;
+        breadcrumb.innerHTML = `<span>${component.getName() ?? component.get('tagName')}</span>`;
         return breadcrumb;
     }
 }

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

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

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

@@ -113,6 +113,29 @@ export function getEditorConfig(id, connectorId, rootUrl) {
             },
         },
         cssIcons: '/css/all.min.css',
+        canvasCss: `
+      :root {
+        --primaryColor: #333333;
+        --secondaryColor: #ddd;
+        --tertiaryColor: #8873FE;
+        --quaternaryColor: #56E3FF;
+        --darkerPrimaryColor: #363636;
+        --lighterPrimaryColor: #575757;
+      }
+      .gjs-frame-selected {
+        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important; // Change to red border
+      }
+      .gjs-selected {
+        outline: 2px solid var(--tertiaryColor) !important;
+        outline-offset: -2px;
+      }
+      .gjs-tools .gjs-badge { /* for the label */
+        background-color: red;
+      }
+      .gjs-toolbar { /* for the toolbar */
+        background-color: red;
+      }
+    `,
         plugins: plugins.map(p => p.value),
         pluginsOpts: {
             [blocksBasicPlugin]: {
@@ -125,7 +148,7 @@ export function getEditorConfig(id, connectorId, rootUrl) {
                     {
                         id: 'dash',
                         className: 'logo',
-                        attributes: { title: 'Go to your dashboard' },
+                        attributes: { title: 'Dashboard' },
                         link: '/',
                         command: 'open-dash',
                     }, {
@@ -175,6 +198,18 @@ export function getEditorConfig(id, connectorId, rootUrl) {
                         id: 'spacer',
                         attributes: {},
                         className: 'project-bar-spacer',
+                    }, {
+                        id: 'dash2',
+                        className: 'fa-solid fa-house',
+                        attributes: { title: 'Dashboard' },
+                        link: '/',
+                        command: 'open-dash',
+                    }, {
+                        id: 'help',
+                        className: 'fa fa-fw fa-question-circle',
+                        attributes: { title: 'Documentation' },
+                        link: 'https://docs.silex.me/',
+                        command: 'open-help',
                     }, {
                         id: 'logout-button',
                         className: 'page-panel-btn fa fa-fw fa-sign-out',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.61",
+  "version": "3.0.0-alpha.62",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -101,6 +101,7 @@
   },
   "dependencies": {
     "@directus/sdk": "10.3.3",
+    "@fontsource/ubuntu": "^5.0.5",
     "@fortawesome/fontawesome-free": "6.4.0",
     "@gitbeaker/rest": "^39.7.0",
     "@silexlabs/grapesjs-directus-storage": "1.0.15",

package/src/css/_variables.scss

@@ -1,17 +1,12 @@
-// $silexlightergrey: #ddd;
-// $silexlightgrey: #535353;
-// $silexmediumgrey: #444;
-// $silexmediumdarkgrey: #393939;
-// $silexdarkgrey: #2f2f2f;
-// $silexdarkergrey: #2a2a2a;
-// $silexlightblue: #7bc0ff;
+// All colors
+// /!\ Duplicated in the grapesjs/index.ts too => keep in sync
+$primaryColor: #333333 !default;
+$secondaryColor: #ddd !default;
+$tertiaryColor: #8873FE !default;
+$quaternaryColor: #56E3FF !default;
+$darkerPrimaryColor: #363636 !default;
+$lighterPrimaryColor: #575757 !default;
 
-$primaryColor: #444;
-$secondaryColor: #ddd;
-$tertiaryColor: #5e85a8;
-$quaternaryColor: #7bc0ff;
-$darkerPrimaryColor: #363636;
-$lighterPrimaryColor: #575757;
 $topBarHeight: 40px;
 $projectBarWidth: 35px;
 $projectPanelWidth: 13%;
@@ -26,11 +21,4 @@ $cv-prefix: '#{$prefix}cv-';
 $z-dialog-inline: 10;
 $z-loader: 10;
 
-:root {
-  --primaryColor: #444;
-  --secondaryColor: #ddd;
-  --tertiaryColor: #5e85a8;
-  --quaternaryColor: #7bc0ff;
-  --darkerPrimaryColor: #363636;
-  --lighterPrimaryColor: #575757;
-}
+$fontFamily: 'Ubuntu', sans-serif;

package/src/css/grapesjs.scss

@@ -22,6 +22,7 @@
     }
   }
 }
+
 .#{$cv-prefix}canvas,
 .#{$pn-prefix}panel,
 .#{$pn-prefix}commands {
@@ -46,6 +47,25 @@
   width: $viewsPanelWidth;
 }
 
+.gjs-editor {
+  font-family: $fontFamily;
+  font-size: 0.75rem;
+}
+
+// Inside the canvas
+.gjs-toolbar {
+  background-color: $tertiaryColor;
+}
+.gjs-resizer-h {
+  border-color: $tertiaryColor;
+}
+.gjs-com-badge, .gjs-com-badge-red, .gjs-badge {
+    background-color: $tertiaryColor;
+}
+.gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
+    outline: 1px solid $tertiaryColor;
+}
+
 /*
 */
 // Font awesome 5 fix

package/src/css/index.scss

@@ -1,5 +1,8 @@
 /* Normalize css */
 @use "normalize.css/normalize";
+
+@use "_variables";
+//@use "light";
 @use "grapesjs/src/styles/scss/main";
 
 /* Silex styles imports */
@@ -7,10 +10,24 @@
 @use "loader";
 @use "footer";
 @use "dialog";
-@use "grapesjs";
 @use "project-bar";
 @use "page-panel";
 @use "website-info";
+@use "grapesjs";
+
+//@use "grapesjs-light";
+
+// Ubuntu Fonts
+@use "@fontsource/ubuntu";
+
+:root {
+  --primaryColor: $primaryColor;
+  --secondaryColor: $secondaryColor;
+  --tertiaryColor: $tertiaryColor;
+  --quaternaryColor: $quaternaryColor;
+  --darkerPrimaryColor: $darkerPrimaryColor;
+  --lighterPrimaryColor: $lighterPrimaryColor;
+}
 
 .container-png::before {
   content: " ";

package/src/css/silex.scss

@@ -3,6 +3,9 @@
 
 .silex-workspace {
   @include mixins.silex-ui-full;
+  body {
+    font-family: $fontFamily;
+  }
   display: flex;
   a {
     color: inherit;

package/src/html/index.pug

@@ -12,7 +12,7 @@ html(lang="en", translate="no")
       style.
         body {
           background-color: #444444;
-          font-family: Helvetica,sans-serif;
+          font-family: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
         }
         .silex-loader {
           display: none;

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

@@ -14,7 +14,7 @@ export default function (editor, options) {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 2px 10px 0;
+        padding: 5px 10px 0;
         font-size: 12px;
         color: #999;
         overflow-x: auto;
@@ -25,7 +25,7 @@ export default function (editor, options) {
       }
       #breadcrumbs-container .breadcrumb {
         margin: 5px;
-        font-size: large;
+        font-size: 15px;
         line-height: 1;
         cursor: pointer;
         white-space: nowrap;
@@ -73,7 +73,7 @@ export default function (editor, options) {
       editor.select(component)
     }
     breadcrumb.classList.add('breadcrumb')
-    breadcrumb.innerHTML = `<span>${component.get('tagName')}${component.getClasses().length ? `.${component.getClasses().join('.')}` : ''}</span>`
+    breadcrumb.innerHTML = `<span>${component.getName() ?? component.get('tagName')}</span>`
     return breadcrumb
   }
 }

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

@@ -127,6 +127,29 @@ export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl
     },
 
     cssIcons: '/css/all.min.css',
+    canvasCss: `
+      :root {
+        --primaryColor: #333333;
+        --secondaryColor: #ddd;
+        --tertiaryColor: #8873FE;
+        --quaternaryColor: #56E3FF;
+        --darkerPrimaryColor: #363636;
+        --lighterPrimaryColor: #575757;
+      }
+      .gjs-frame-selected {
+        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important; // Change to red border
+      }
+      .gjs-selected {
+        outline: 2px solid var(--tertiaryColor) !important;
+        outline-offset: -2px;
+      }
+      .gjs-tools .gjs-badge { /* for the label */
+        background-color: red;
+      }
+      .gjs-toolbar { /* for the toolbar */
+        background-color: red;
+      }
+    `,
 
     plugins: plugins.map(p => p.value),
 
@@ -141,7 +164,7 @@ export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl
           {
             id: 'dash',
             className: 'logo',
-            attributes: { title: 'Go to your dashboard' },
+            attributes: { title: 'Dashboard' },
             link: '/',
             command: 'open-dash',
           }, {
@@ -191,6 +214,18 @@ export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl
             id: 'spacer',
             attributes: {},
             className: 'project-bar-spacer',
+          }, {
+            id: 'dash2',
+            className: 'fa-solid fa-house',
+            attributes: { title: 'Dashboard' },
+            link: '/',
+            command: 'open-dash',
+          }, {
+            id: 'help',
+            className: 'fa fa-fw fa-question-circle',
+            attributes: { title: 'Documentation' },
+            link: 'https://docs.silex.me/',
+            command: 'open-help',
           }, {
             id: 'logout-button',
             className: 'page-panel-btn fa fa-fw fa-sign-out',