@silexlabs/silex 3.0.0-alpha.96 → 3.0.0

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 */
 }

package/src/ts/client/grapesjs/PublicationManager.ts

@@ -16,13 +16,15 @@
  */
 
 import { getPageSlug } from '../../page'
-import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ClientSideFile, ClientSideFileType, ConnectorData, ConnectorType, ConnectorUser, JobStatus, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types'
+import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ClientSideFile, ClientSideFileType, ConnectorData, ConnectorType, ConnectorUser, JobStatus, Initiator, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types'
 import { Editor } from 'grapesjs'
 import { PublicationUi } from './PublicationUi'
 import { getUser, logout, publicationStatus, publish } from '../api'
 import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH } from '../../constants'
 import { ClientEvent } from '../events'
 import { resetRenderComponents, resetRenderCssRules, transformPermalink, transformFiles, transformPath, renderComponents, renderCssRules } from '../publication-transformers'
+import { displayedToStored } from '../assetUrl'
+import { hashString } from '../utils'
 
 /**
  * @fileoverview Publication manager for Silex
@@ -210,27 +212,10 @@ export class PublicationManager {
     }
   }
 
-  /**
-   * Start the publication process
-   * This is the command "publish"
-   */
-  async startPublication() {
-    if (this.status === PublicationStatus.STATUS_PENDING) throw new Error('Publication is already in progress')
-    this.status = PublicationStatus.STATUS_PENDING
-    this.job = null
-    this.dialog && this.dialog.displayPending(this.job, this.status)
-    this.editor.trigger(ClientEvent.PUBLISH_START)
-    // User and where to publish
-    const storageUser = this.editor.getModel().get('user') as ConnectorUser
-    if(!storageUser) 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 websiteId = this.options.websiteId
-    const storageId = storageUser.storage.connectorId
+  async getPublicationData(projectData, siteSettings): Promise<PublicationData> {
     // Data to publish
     // See assetUrl.ts which is a default transformer, always present
     this.setPublicationTransformers()
-    const projectData = this.editor.getProjectData() as WebsiteData
-    const siteSettings = this.editor.getModel().get('settings') as WebsiteSettings
     // Build the files structure
     const files: ClientSideFile[] = (await this.getHtmlFiles(siteSettings))
       .flatMap(file => ([{
@@ -250,7 +235,13 @@ export class PublicationManager {
           //   .replace(/^\/assets/, '')
           // Transform the file paths with the transformers
           const path = transformPath(this.editor, asset.src, ClientSideFileType.ASSET)
-          const src = transformPermalink(this.editor, asset.src, ClientSideFileType.ASSET)
+          //const src = transformPermalink(this.editor, asset.src, ClientSideFileType.ASSET)
+          // This is done in transformPermalink and transformPath but other transformers may change it
+          // So we do this only using displayedToStored for the path
+          // As path is used to download the asset
+          const src = displayedToStored(asset.src)
+            // Remove the /asset prefix to keep only the file name
+            .replace(/^\/assets\//, '')
           return {
             ...asset,
             path,
@@ -261,14 +252,45 @@ export class PublicationManager {
     // Create the data to send to the server
     const data: PublicationData = {
       ...projectData,
+      assets: projectData.assets.map(asset => ({
+        ...asset,
+        src: displayedToStored(asset.src),
+      })),
       settings: siteSettings,
       publication: this.settings,
       files,
     }
     this.resetPublicationTransformers()
+    // Let plugins transform the data
     transformFiles(this.editor, data)
     this.editor.trigger(ClientEvent.PUBLISH_DATA, data)
+    // Return the data
+    return data
+  }
+
+  /**
+   * Start the publication process
+   * This is the command "publish"
+   */
+  async startPublication() {
     try {
+      if (this.status === PublicationStatus.STATUS_PENDING) throw new Error('Publication is already in progress')
+      this.status = PublicationStatus.STATUS_PENDING
+      this.job = null
+      this.dialog && this.dialog.displayPending(this.job, this.status)
+      // Get the data to publish, clone the objects because plugins can change it
+      const projectData = { ...this.editor.getProjectData() as WebsiteData }
+      const siteSettings = { ...this.editor.getModel().get('settings') as WebsiteSettings }
+      this.editor.trigger(ClientEvent.PUBLISH_START, {projectData, siteSettings})
+      // User and where to publish
+      const storageUser = this.editor.getModel().get('user') as ConnectorUser
+      if(!storageUser) 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 websiteId = this.options.websiteId
+      const storageId = storageUser.storage.connectorId
+      // Get the data to publish
+      const data = await this.getPublicationData(projectData, siteSettings)
+      // Use the publication API
       const [url, job] = await publish({
         websiteId,
         hostingId: this.settings.connector.connectorId,
@@ -278,12 +300,6 @@ export class PublicationManager {
       })
       this.job = job
       this.status = jobStatusToPublicationStatus(this.job.status)
-      // Save the publication settings
-      // Useless because the url is useful after publish only
-      //if(this.settings.url !== url) {
-      //  this.settings.url = url
-      //  await this.editor.store(null)
-      //}
       this.trackProgress()
     } catch (e) {
       console.error('publish error', e)
@@ -302,41 +318,58 @@ export class PublicationManager {
   }
 
   async getHtmlFiles(siteSettings: WebsiteSettings): Promise<WebsiteFile[]> {
-    return this.editor.Pages.getAll().map(page => {
-      const pageSettings = page.get('settings') as WebsiteSettings
+    return Promise.all(this.editor.Pages.getAll().map(async page => {
+      // Clone the settings because plugins can change them
+      siteSettings = { ...siteSettings }
+      const pageSettings = { ...page.get('settings') as WebsiteSettings }
+      // Utility function to get a setting from the page or the site settings
       function getSetting(name) {
         return (pageSettings || {})[name] || (siteSettings || [])[name] || ''
       }
-      const component = page.getMainComponent()
+
+      // Get the content from GrapesJS
+      const body = page.getMainComponent()
+      const cssContent = this.editor.getCss({ component: body })
+      const htmlContent = this.editor.getHtml({ component: body })
+
       // Transform the file paths
       const slug = getPageSlug(page.get('name'))
-      const cssInitialPath = `/css/${slug}.css`
+      const cssInitialPath = `/css/${slug}-${await hashString(cssContent)}.css`
       const htmlInitialPath = `/${slug}.html`
-      const cssPermalink = transformPermalink(this.editor, cssInitialPath, ClientSideFileType.CSS)
+      const cssPermalink = transformPermalink(this.editor, cssInitialPath, ClientSideFileType.CSS, Initiator.HTML)
       const cssPath = transformPath(this.editor, cssInitialPath, ClientSideFileType.CSS)
       const htmlPath = transformPath(this.editor, htmlInitialPath, ClientSideFileType.HTML)
-      const body = this.editor.getHtml({ component })
+
+      // Let plugins transform the data
+      this.editor.trigger(ClientEvent.PUBLISH_PAGE, { page, siteSettings, pageSettings })
+
+      // Useful data for HTML result
+      const title = getSetting('title')
+      const favicon = getSetting('favicon')
+      // Return the HTML file
       return {
         html: `<!DOCTYPE html>
 <html lang="${getSetting('lang')}">
 <head>
+<meta charset="UTF-8">
 <link rel="stylesheet" href="${cssPermalink}" />
 ${siteSettings?.head || ''}
 ${pageSettings?.head || ''}
-<title>${getSetting('title')}</title>
-<link rel="icon" href="${getSetting('favicon')}" />
+${ title ? `<title>${ title }</title>` : '' }
+${ favicon ? `<link rel="icon" href="${favicon}" />` : '' }
 ${['description', 'og:title', 'og:description', 'og:image']
-    .map(prop => `<meta property="${prop}" content="${getSetting(prop)}"/>`)
+    .filter(prop => !!getSetting(prop))
+    .map(prop => `<meta name="${prop}" property="${prop}" content="${getSetting(prop)}"/>`)
     .join('\n')
 }
 </head>
-${body}
+${htmlContent}
 </html>`,
-        css: this.editor.getCss({ component }),
+        css: cssContent,
         cssPath,
         htmlPath,
       }
-    })
+    }))
   }
 
   async trackProgress() {

package/src/ts/client/grapesjs/PublicationUi.ts

@@ -125,13 +125,16 @@ export class PublicationUi {
     el.id = 'publish-dialog'
     el.className = 'silex-dialog-inline silex-dialog gjs-two-color'
     document.body.append(el)
-    // Create the publish button
-    this.editor.Panels.addButton(this.options.appendTo, {
-      id: 'publish-button',
-      className: 'silex-button--size publish-button',
-      command: cmdPublish,
-      attributes: { title: 'Publish' },
-      label: '<span class="fa-solid fa-upload"></span><span class="silex-button--small">Publish</span>',
+    // Let the other buttons be added, we want to be last
+    setTimeout(() => {
+      // Create the publish button
+      this.editor.Panels.addButton(this.options.appendTo, {
+        id: 'publish-button',
+        className: 'silex-button--size publish-button',
+        command: cmdPublish,
+        attributes: { title: 'Publish' },
+        label: '<span class="fa-solid fa-upload"></span><span class="silex-button--small">Publish</span>',
+      })
     })
     return el
   }
@@ -158,6 +161,9 @@ export class PublicationUi {
   }
   async renderOpenDialog(job: PublicationJobData, status: PublicationStatus): Promise<TemplateResult> {
     return html`
+    <header>
+      <h3>Publication</h3>
+    </header>
     <main>
       ${this.isPending(status) ? html`
         <p>Publication in progress</p>
@@ -188,8 +194,6 @@ export class PublicationUi {
           <summary>Logs</summary>
           <pre style="
             max-width: 100%;
-            max-height: 50vh;
-            overflow: auto;
             font-size: x-small;
             " >${unsafeHTML(cleanupLogEntry(job.logs))}
           </pre>
@@ -200,8 +204,6 @@ export class PublicationUi {
           <summary>Errors</summary>
           <pre style="
             max-width: 100%;
-            max-height: 50vh;
-            overflow: auto;
             font-size: x-small;
             "
           >${unsafeHTML(cleanupLogEntry(job.errors))}