@silexlabs/silex 3.0.0-alpha.97 → 3.0.0

package/src/css/grapesjs.scss

@@ -1,4 +1,5 @@
 @use "variables" as *;
+@use "grapesjs-plugins";
 
 #gjs {
   flex: 1 1 auto;
@@ -35,7 +36,7 @@
   left: auto;
 }
 .#{$cv-prefix}canvas {
-  width: calc(100% - $viewsPanelWidth - $projectBarWidth);
+  width: calc(100% - var(--viewsPanelWidth) - $projectBarWidth);
 }
 .#{$pn-prefix}devices-c {
   display: flex;
@@ -44,7 +45,6 @@
   }
 }
 .#{$pn-prefix}views-container {
-  width: $viewsPanelWidth;
 }
 
 .gjs-editor {
@@ -52,6 +52,17 @@
   font-size: 0.75rem;
 }
 
+// Dialogs
+.gjs-mdl-header {
+  background-color: $primaryColor;
+  color: $secondaryColor;
+  padding: 20px;
+  border-bottom: 1px solid $lighterPrimaryColor;
+  .gjs-mdl-btn-close {
+    top: 15px;
+  }
+}
+
 // Inside the canvas
 .gjs-toolbar {
   background-color: $tertiaryColor;
@@ -66,6 +77,19 @@
     outline: 1px solid $tertiaryColor;
 }
 
+// Property panels
+.gjs-pn-buttons {
+  justify-content: unset;
+}
+
+.gjs-pn-views-container, .gjs-pn-views {
+  width: var(--viewsPanelWidth);
+}
+
+.gjs-pn-options {
+  right: var(--viewsPanelWidth);
+}
+
 /*
 */
 // Font awesome 5 fix
@@ -141,12 +165,3 @@
 .fa-diamond:before {
   content: "\f3a5";
 }
-/*
-.fa-plus:before {
-	content: "+";
-  font-size: 35px;
-}
-// .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>);
-// }
-*/

package/src/css/index.scss

@@ -10,6 +10,7 @@
 @use "loader";
 @use "footer";
 @use "dialog";
+@use "fonts";
 @use "project-bar";
 @use "page-panel";
 @use "website-info";

package/src/css/project-bar.scss

@@ -1,14 +1,17 @@
 @use "variables" as *;
 
 // squeeze the stage iframe when panel is open
-iframe.enable-squeeze.gjs-frame {
-  transition: width $transitionSpeedMedium, height $transitionSpeedMedium, left $transitionSpeedMedium;
-}
-iframe.enable-squeeze.silex-squeeze-left {
-  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
-  left: var(--project-panel-width);
-  width: calc(100% - var(--project-panel-width));
+//.silex-squeeze-left .gjs-frame-wrapper {
+//  margin-left: 18%;
+//  width: auto;
+//}
+.silex-squeeze-left .gjs-cv-canvas {
+  left: calc(13% + 35px);
+  width: auto;
+  right: var(--viewsPanelWidth);
 }
+
+
 // button bar
 .#{$pn-prefix}project-bar-panel {
   width: $projectBarWidth;
@@ -35,6 +38,7 @@ iframe.enable-squeeze.silex-squeeze-left {
     background-repeat: no-repeat;
     background-position: center center;
     background-color: transparent;
+    background-size: contain;
   }
 }
 

package/src/css/silex.scss

@@ -29,11 +29,34 @@
   width: 100%;
 }
 
+// Resize options panel button
+.silex-workspace {
+  .gjs-pn-viewsOptions {
+      z-index: $z-views-options-buttons;
+      right: 0;
+      left: auto;
+
+      .viewsOptions__size-btn::before {
+        content: '←';
+      }
+    }
+}
+
+.silex-hidden {
+  /* do not really hide, because it breaks the code editor init in the site settings + for animation */
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  height: 10px;
+  width: 10px;
+  overflow: hidden;
+}
+
 // full screen settings
 .settings-dialog > div {
   max-width: none;
   width: 100%;
-  max-height: 100vh;
+  height: 100vh;
   overflow: auto;
   form.silex-form {
     padding-bottom: 100px; // leave space for fixed footer
@@ -63,6 +86,10 @@
       font-size: x-small;
     }
   }
+  .CodeMirror {
+    min-height: 400px;
+    height: auto;
+  }
 }
 
 button.silex-button,
@@ -83,6 +110,7 @@ input.silex-button[type="submit"] {
   padding: 5px;
 }
 
+.silex-button.disabled,
 .silex-button[disabled] {
   opacity: .8;
   cursor: unset;
@@ -98,6 +126,7 @@ input.silex-button[type="submit"] {
 
 .silex-button--size {
   max-height: 30px;
+  margin: 0 10px;
 }
 
 .silex-button--small {
@@ -113,11 +142,15 @@ input.silex-button[type="submit"] {
   display: block;
 }
 
+.silex-sidebar-dialog,
 .silex-bar {
   display: flex;
   &>* {
     margin: 5px;
   }
+  main {
+    width: 100%;
+  }
 }
 
 ol.silex-list,
@@ -125,15 +158,15 @@ ul.silex-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #575757;
+  //background-color: #575757;
   &>li {
     padding: 5px;
-    border-bottom: 1px solid #575757;
-    background-color: #444;
+    border-bottom: 1px solid $lighterPrimaryColor;
+    //background-color: #444;
     margin: 5px;
   }
   fieldset {
-    border-color: #575757;
+    border-color: $lighterPrimaryColor;
   }
   h4 { // badge-like
     display: inline-block;
@@ -158,6 +191,26 @@ ul.silex-list {
   }
 }
 
+ol.silex-list--menu,
+ul.silex-list--menu {
+  &>li {
+    padding: 15px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-bottom-color: $lighterPrimaryColor;
+    text-align: center;
+    cursor: pointer;
+  }
+  &>li:first-child {
+    border-top-color: $lighterPrimaryColor;
+  }
+  .active,
+  &>li:hover {
+    color: $tertiaryColor;
+    background-color: $darkerPrimaryColor;
+  }
+}
+
 form.silex-form {
   display: flex;
   flex-direction: column;

package/src/html/index.pug

@@ -34,6 +34,6 @@ html(lang="en", translate="no")
       script(src='js/main.js')
 
     block silex-start
-      // Here you can use silex.config to hook into silex options before silex starts
       script.
-        window.silex.start()
+        silex.start()
+        // From here silex.config is available and Silex is getting started

package/src/ts/client/api.ts

@@ -15,8 +15,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { API_CONNECTOR_LIST, API_CONNECTOR_USER, API_CONNECTOR_LOGOUT, API_CONNECTOR_PATH, API_PATH, API_PUBLICATION_PATH, API_PUBLICATION_PUBLISH, API_PUBLICATION_STATUS, API_WEBSITE_ASSET_READ, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_DELETE, API_WEBSITE_LIST, API_WEBSITE_PATH, API_WEBSITE_READ, API_WEBSITE_WRITE, API_WEBSITE_META_READ, API_WEBSITE_META_WRITE, API_WEBSITE_CREATE } from '../constants'
-import { ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorId, JobData, JobId, PublicationJobData, WebsiteId, ApiConnectorListResponse, ApiConnectorListQuery, ConnectorData, ConnectorType, ApiWebsiteReadQuery, ApiWebsiteReadResponse, WebsiteData, ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse, ApiWebsiteDeleteQuery, ApiWebsiteAssetsReadQuery, ApiWebsiteAssetsReadResponse, ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse, ClientSideFile, PublicationData, ApiConnectorUserResponse, ConnectorUser, WebsiteMeta, ApiConnectorLogoutQuery, ApiConnectorUserQuery, ApiWebsiteListResponse, ApiWebsiteListQuery, WebsiteMetaFileContent, ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse, ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse, ApiWebsiteMetaReadQuery, ApiWebsiteMetaReadResponse, ConnectorOptions, ApiError } from '../types'
+import { API_CONNECTOR_LIST, API_CONNECTOR_USER, API_CONNECTOR_LOGOUT, API_CONNECTOR_PATH, API_PATH, API_PUBLICATION_PATH, API_PUBLICATION_PUBLISH, API_PUBLICATION_STATUS, API_WEBSITE_ASSET_READ, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_DELETE, API_WEBSITE_LIST, API_WEBSITE_PATH, API_WEBSITE_READ, API_WEBSITE_WRITE, API_WEBSITE_META_READ, API_WEBSITE_META_WRITE, API_WEBSITE_CREATE, API_WEBSITE_DUPLICATE } from '../constants'
+import { ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorId, JobData, JobId, PublicationJobData, WebsiteId, ApiConnectorListResponse, ApiConnectorListQuery, ConnectorData, ConnectorType, ApiWebsiteReadQuery, ApiWebsiteReadResponse, WebsiteData, ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse, ApiWebsiteDeleteQuery, ApiWebsiteAssetsReadQuery, ApiWebsiteAssetsReadResponse, ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse, ClientSideFile, PublicationData, ApiConnectorUserResponse, ConnectorUser, WebsiteMeta, ApiConnectorLogoutQuery, ApiConnectorUserQuery, ApiWebsiteListResponse, ApiWebsiteListQuery, WebsiteMetaFileContent, ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse, ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse, ApiWebsiteMetaReadQuery, ApiWebsiteMetaReadResponse, ConnectorOptions, ApiError, ApiWebsiteDuplicateQuery } from '../types'
 
 export enum ApiRoute {
   PUBLICATION_PUBLISH = API_PATH + API_PUBLICATION_PATH + API_PUBLICATION_PUBLISH,
@@ -27,6 +27,7 @@ export enum ApiRoute {
   WEBSITE_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_READ,
   WEBSITE_WRITE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_WRITE,
   WEBSITE_DELETE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DELETE,
+  WEBSITE_DUPLICATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DUPLICATE,
   WEBSITE_CREATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_CREATE,
   WEBSITE_LIST = API_PATH + API_WEBSITE_PATH + API_WEBSITE_LIST,
   WEBSITE_ASSETS_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_ASSET_READ,
@@ -83,23 +84,27 @@ export async function websiteList({connectorId}: {connectorId?: ConnectorId}): P
 }
 
 export async function websiteLoad({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteData> {
-  return api<ApiWebsiteReadQuery, null, ApiWebsiteReadResponse>(ApiRoute.WEBSITE_READ, 'GET', { websiteId, connectorId: connectorId }) as Promise<WebsiteData>
+  return api<ApiWebsiteReadQuery, null, ApiWebsiteReadResponse>(ApiRoute.WEBSITE_READ, 'GET', { websiteId, connectorId }) as Promise<WebsiteData>
 }
 
 export async function websiteSave({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteData, connectorId?: ConnectorId}): Promise<void> {
-  const { message } = await api<ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse>(ApiRoute.WEBSITE_WRITE, 'POST', { websiteId, connectorId: connectorId }, data)
+  const { message } = await api<ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse>(ApiRoute.WEBSITE_WRITE, 'POST', { websiteId, connectorId }, data)
 }
 
 export async function websiteDelete({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteDeleteQuery, null, null>(ApiRoute.WEBSITE_DELETE, 'DELETE', { websiteId, connectorId: connectorId })
+  await api<ApiWebsiteDeleteQuery, null, null>(ApiRoute.WEBSITE_DELETE, 'DELETE', { websiteId, connectorId })
+}
+
+export async function websiteDuplicate({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
+  await api<ApiWebsiteDuplicateQuery, null, null>(ApiRoute.WEBSITE_DUPLICATE, 'POST', { websiteId, connectorId })
 }
 
 export async function websiteCreate({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse>(ApiRoute.WEBSITE_CREATE, 'PUT', { connectorId: connectorId }, data)
+  await api<ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse>(ApiRoute.WEBSITE_CREATE, 'PUT', { connectorId }, data)
 }
 
 export async function websiteMetaWrite({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse>(ApiRoute.WEBSITE_META_WRITE, 'POST', { websiteId, connectorId: connectorId }, data)
+  await api<ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse>(ApiRoute.WEBSITE_META_WRITE, 'POST', { websiteId, connectorId }, data)
 }
 
 export async function websiteMetaRead({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteMeta> {
@@ -107,7 +112,7 @@ export async function websiteMetaRead({websiteId, connectorId}: {websiteId: Webs
 }
 
 export async function websiteAssetsLoad({path, websiteId, connectorId}: {path: string, websiteId: WebsiteId, connectorId: ConnectorId}): Promise<string> {
-  return api<ApiWebsiteAssetsReadQuery, null, ApiWebsiteAssetsReadResponse>(`${ApiRoute.WEBSITE_ASSETS_READ}/${path}`, 'GET', { websiteId, connectorId: connectorId })
+  return api<ApiWebsiteAssetsReadQuery, null, ApiWebsiteAssetsReadResponse>(`${ApiRoute.WEBSITE_ASSETS_READ}/${path}`, 'GET', { websiteId, connectorId })
 }
 
 /**
@@ -115,7 +120,7 @@ export async function websiteAssetsLoad({path, websiteId, connectorId}: {path: s
  * @see assetManager in src/ts/client/grapesjs/index.ts
  */
 export async function websiteAssetsSave({websiteId, connectorId, files}: {websiteId: WebsiteId, connectorId: ConnectorId, files: ClientSideFile[]}): Promise<string[]> {
-  const { data } = await api<ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse>(ApiRoute.WEBSITE_ASSETS_WRITE, 'POST', { websiteId, connectorId: connectorId }, files)
+  const { data } = await api<ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse>(ApiRoute.WEBSITE_ASSETS_WRITE, 'POST', { websiteId, connectorId }, files)
   return data
 }
 

package/src/ts/client/assetUrl.test.ts

@@ -1,4 +1,5 @@
 import { jest,  expect, describe, it, beforeEach } from '@jest/globals'
+import { removeTempDataFromStyles } from './assetUrl'
 
 describe('assetUrl', () => {
   beforeEach(() => {
@@ -122,4 +123,42 @@ describe('assetUrl', () => {
     expect(storedToDisplayed(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`, websiteId, connectorId))
       .toBe(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`)
   })
+
+  it('multiple backgrounds', async () => {
+    // // FIXME: this should mock the functions but it doesnt
+    // const mocked = {
+    //   displayedToStored: jest.fn((url: string) => url),
+    //   storedToDisplayed: jest.fn((url: string) => url),
+    // }
+    // jest.mock('./assetUrl', () => (mocked))
+    //addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId)
+    //expect(mocked.displayedToStored).toBeCalledTimes(1)
+    const { addTempDataToStyles } = await import('./assetUrl')
+
+    const websiteId = 'test-id'
+    const connectorId = 'test-connector'
+    const bgImageDisplayed = `linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/api/website/assets/qIg7JPRc.webp?websiteId=${websiteId}&connectorId=${connectorId}'), linear-gradient(#0ca311 0%, #0ca311 100%)`
+    const bgImageStored = 'linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url(\'/assets/qIg7JPRc.webp\'), linear-gradient(#0ca311 0%, #0ca311 100%)'
+    const selectors = ['body']
+    function toStyle(bgImage: string) {
+      return {
+        style: {
+          'background-image': bgImage,
+        },
+        selectors,
+      }
+    }
+    // From stored to displayed
+    expect(addTempDataToStyles([toStyle(bgImageStored)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to displayed (error case)
+    expect(addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to stored
+    expect(removeTempDataFromStyles([toStyle(bgImageDisplayed)]))
+      .toEqual([toStyle(bgImageStored)])
+    //// From stored to stored (error case)
+    expect(removeTempDataFromStyles([toStyle(bgImageStored)]))
+      .toEqual([toStyle(bgImageStored)])
+  })
 })

package/src/ts/client/assetUrl.ts

@@ -41,6 +41,11 @@ export function storedToDisplayed(path: string, websiteId: WebsiteId, storageId:
     //  .replace(/^\//, '') // remove the first slash if it exists
     //return decodeURIComponent(encodedPath)
   } else {
+    if(path.startsWith('<svg') || path.startsWith('data:image')) {
+      // SVG or data URL
+      return path
+    }
+    // Not a stored path, is there a problem?
     console.warn('storedToDisplayed: path is not a stored path', path)
     return path
   }
@@ -69,6 +74,10 @@ export function displayedToStored(path: string): string {
       .replace(/^\//, '') // remove the first slash if it exists
     return decodeURIComponent(encodedPath)
   } else {
+    if(path.startsWith('<svg') || path.startsWith('data:image')) {
+      // SVG or data URL
+      return path
+    }
     console.warn('displayedToStored: path is not a displayed path', path)
     return path
   }
@@ -196,17 +205,22 @@ export function removeTempDataFromPages(pages: Page[]): Page[] {
 
 /**
  * Add data to stylesheets
+ *   e.g. linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/assets/qIg7JPRc.webp'), linear-gradient(#0ca311 0%, #0ca311 100%)
  */
 export function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, storageId: ConnectorId): Style[] {
-  const pattern = /url\((["']?)([^"']+?)\1\)/g
+  const regex = new RegExp(/(.*)(url\((["']?)([^"']+?)\1\))*(.*)/, 'g')
+
   return styles.map((style: Style) => {
     if (style.style && style.style['background-image']) {
-      const urls = [...style.style['background-image'].matchAll(pattern)].map(match => storedToDisplayed(match[2], websiteId, storageId))
+      const bgImage = style.style['background-image']
+        .replace(/url\((['"]?)([^'"]+)\1\)/g, (match, quote, url) => {
+          return `url(${quote}${storedToDisplayed(url, websiteId, storageId)}${quote})`
+        })
       return {
         ...style,
         style: {
           ...style.style,
-          'background-image': urls.map(url => `url('${url}')`).join(', '),
+          'background-image': bgImage,
         },
       }
     }
@@ -216,17 +230,22 @@ export function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, stora
 
 /**
  * Remove temp data from stylesheets
+ * The property `background-image` contains the URLs of the assets and other values,
+ *   e.g. `linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/api/website/assets/qIg7JPRc.webp?websiteId=default&connectorId=fs-storage'), linear-gradient(#0ca311 0%, #0ca311 100%)`
  */
 export function removeTempDataFromStyles(styles: Style[]): Style[] {
   const pattern = /url\((["']?)([^"']+?)\1\)/g
   return styles.map((style: Style) => {
     if (style.style && style.style['background-image']) {
-      const urls = [...style.style['background-image'].matchAll(pattern)].map(match => displayedToStored(match[2]))
+      const bgImage = style.style['background-image']
+        .replace(/url\((['"]?)([^'"]+)\1\)/g, (match, quote, url) => {
+          return `url(${quote}${displayedToStored(url)}${quote})`
+        })
       return {
         ...style,
         style: {
           ...style.style,
-          'background-image': urls.map(url => `url('${url}')`).join(', '),
+          'background-image': bgImage,
         },
       }
     }

package/src/ts/client/config.ts

@@ -20,8 +20,15 @@ import { getEditor, getEditorConfig } from './grapesjs'
 import { CLIENT_CONFIG_FILE_NAME, DEFAULT_LANGUAGE, DEFAULT_WEBSITE_ID } from '../constants'
 import { ConnectorId, WebsiteId } from '../types'
 import { Editor, EditorConfig, Page } from 'grapesjs'
-import { PublicationTransformer, validatePublicationTransformer } from './publication-transformers'
+import { PublicationTransformer, publicationTransformerDefault, validatePublicationTransformer } from './publication-transformers'
 import * as api from './api'
+import { assetsPublicationTransformer } from './assetUrl'
+import { SettingsSection } from './grapesjs/settings-sections'
+import { addSection, removeSection } from './grapesjs/settings'
+
+// Plugins
+import publishCustomCodeBlock from './publish-custom-code-block'
+import publishFonts from './publish-fonts'
 
 /**
  * @fileoverview Silex client side config
@@ -57,10 +64,38 @@ export class ClientConfig extends Config {
    */
   debug = false
 
+  /**
+   * Add hash in the file name of CSS at the time of publication
+   * If true, CSS files of generated pages will look like `page-name.123456.css`  instead of `page-name.css`
+   * This is useful to avoid caching issues
+   * @default true
+   */
+  addHashInCssFileName = true
+
+  /**
+   * Replaced elements
+   * This is a list of elements which support the object-fit and object-position CSS properties
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
+   * When selected, Silex will show the object-fit and object-position properties in the style panel
+   */
+  replacedElements = [
+    'img',
+    'video',
+    'iframe',
+    'embed',
+    'object',
+    'audio',
+    'canvas',
+    // 'option',
+  ]
+
   /**
    * Grapesjs config
    */
-  grapesJsConfig: EditorConfig
+  grapesJsConfig: EditorConfig = {
+    plugins: [],
+    pluginsOpts: {},
+  }
 
   /**
    * Client config url
@@ -72,7 +107,22 @@ export class ClientConfig extends Config {
    * Init GrapesJS config which depend on the config file properties
    */
   initGrapesConfig() {
-    this.grapesJsConfig = getEditorConfig(this.websiteId, this.storageId, this.rootUrl)
+    // Get the initial config
+    const config = getEditorConfig(this)
+
+    // Merge with the config modified by plugins
+    this.grapesJsConfig = {
+      ...this.grapesJsConfig,
+      ...config,
+      plugins: [
+        ...this.grapesJsConfig.plugins,
+        ...config.plugins,
+      ],
+      pluginsOpts: {
+        ...this.grapesJsConfig.pluginsOpts,
+        ...config.pluginsOpts,
+      },
+    }
   }
 
   /**
@@ -85,7 +135,14 @@ export class ClientConfig extends Config {
   /**
    * Publication transformers let plugins change files before they are published
    */
-  publicationTransformers: Array<PublicationTransformer> = []
+  publicationTransformers: Array<PublicationTransformer> = [assetsPublicationTransformer, publicationTransformerDefault]
+
+  /**
+   * Reset publication transformers
+   */
+  resetPublicationTransformers() {
+    this.publicationTransformers = [assetsPublicationTransformer]
+  }
 
   /**
    * Add a publication transformer(s)
@@ -102,4 +159,28 @@ export class ClientConfig extends Config {
     // Add to the list
     this.publicationTransformers = this.publicationTransformers.concat(transformers)
   }
+
+  /**
+   * Add a section to the settings dialog
+   */
+  addSettings(section: SettingsSection, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number = 'last') {
+    addSection(section, siteOrPage, position)
+  }
+
+  /**
+   * Remove a section from the settings dialog
+   */
+  removeSettings(id: string, siteOrPage: 'site' | 'page') {
+    removeSection(id, siteOrPage)
+  }
+
+  /**
+   * Add default plugins
+   */
+  async addDefaultPlugins() {
+    await this.addPlugin([
+      publishCustomCodeBlock,
+      publishFonts,
+    ], {})
+  }
 }

package/src/ts/client/events.ts

@@ -17,18 +17,24 @@
 
 export enum ClientEvent {
   // Sent on the config object
-  STARTUP_START = 'silex:startup:start',
-  STARTUP_END = 'silex:startup:end',
-  GRAPESJS_START = 'silex:grapesjs:start',
-  GRAPESJS_END = 'silex:grapesjs:end',
+  STARTUP_START = 'silex:startup:start', /* Loading is over and Silex is starting */
+  STARTUP_END = 'silex:startup:end', /* Silex is ready to be used */
+  GRAPESJS_START = 'silex:grapesjs:start', /* GrapesJS is about to be initialized, it is time to edit config.grapesJsConfig */
+  GRAPESJS_END = 'silex:grapesjs:end', /* GrapesJS is ready to be used, `editor` is passed as an argument */
 
-  // Sent on the editor object
-  PUBLISH_START = 'silex:publish:start',
-  PUBLISH_DATA = 'silex:publish:data',
-  PUBLISH_END = 'silex:publish:end',
-  PUBLISH_ERROR = 'silex:publish:error',
+  // Sent on GrapesJs editor object (returned by silex.getEditor())
+  PUBLISH_START = 'silex:publish:start', /* Publication starts, you can read+write {projectData, siteSettings} */
+  PUBLISH_PAGE = 'silex:publish:page', /* Publication of a page, read+write { siteSettings, pageSettings, page } */
+  PUBLISH_DATA = 'silex:publish:data', /* Just before we send the published data to the server, read+write all publication data, check PublicationData type in types.ts */
+  PUBLISH_END = 'silex:publish:end', /* Publication is over, the argument is the publication result with {success: boolean, message: string} */
+  PUBLISH_ERROR = 'silex:publish:error', /* Publication failed, the argument is the publication result with {success: boolean, message: string} */
   PUBLISH_LOGIN_START = 'silex:publish:login:start',
   PUBLISH_LOGIN_END = 'silex:publish:login:end',
   ASSET_WRITE_END = 'silex:asset:write:end',
   WRITE_END = 'silex:write:end',
+  SETTINGS_OPEN = 'silex:settings:open', /* The settings dialog is opened */
+  SETTINGS_CLOSE = 'silex:settings:close', /* The settings dialog is closed */
+  SETTINGS_SAVE_START = 'silex:settings:save:start', /* The settings dialog is closed and the settings are about to be saved */
+  SETTINGS_SAVE_END = 'silex:settings:save:end', /* The settings dialog is closed and the settings are saved */
+  SETTINGS_SECTION_CHANGE = 'silex:settings:section-change', /* The user clicked on a section in the settings dialog */
 }