@silexlabs/silex 3.0.1-0 → 3.0.1

package/src/ts/client/assetUrl.ts

@@ -0,0 +1,254 @@
+import { API_PATH, API_WEBSITE_ASSET_READ, API_WEBSITE_PATH } from '../constants'
+import { Asset, ClientSideFileType, Component, ConnectorId, Page, Style, WebsiteId } from '../types'
+
+/**
+ * @fileoverview Helpers to manage assets URL
+ * Assets URLs are stored on storage in their "stored version": `/assets/image.webp`
+ * But the client side uses the "display version": `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ * After loading the site data we convert all URLs to the client side version
+ * Before saving the site data we convert all URLs to the storage version
+ * During publicationn we convert all URLs to the storage version and back
+ */
+
+// Get the base URL where Silex is served
+const baseUrl = window.location.pathname.replace(/\/$/, '')
+
+// Orging and path, should we use config.rootUrl?
+const SERVER_URL = window.location.origin
+
+/**
+ * Function to convert a path from it stored version to the displayed version
+ * Stored version is like `/assets/image.webp`
+ * Grapesjs version is like `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ * Exported for unit tests
+ */
+export function storedToDisplayed(path: string, websiteId: WebsiteId, storageId: ConnectorId): string {
+  // Check the path is a stored path
+  if (path.startsWith('/assets')) {
+    // Make an absolute URL
+    const url = new URL(path, SERVER_URL)
+    // Remove the assets folder as it is part of the saved path
+    url.pathname = url.pathname.replace(/^\/assets/, '')
+    // Add the API path and the connectorId and websiteId
+    url.pathname = `${baseUrl}${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSET_READ}${url.pathname}`
+    // Add the GET params
+    url.searchParams.set('websiteId', websiteId)
+    url.searchParams.set('connectorId', storageId)
+    // Back to a relative URL, keep the path but not the origin
+    return `${decodeURIComponent(url.pathname)}${url.search}`
+    //const encodedPath = '/' + url.toString() // add a leading slash
+    //  .replace(new RegExp(`^${SERVER_URL}`), '')
+    //  .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
+  }
+}
+
+/**
+ * Function to convert a path from the one we give to grapesjs to the stored version
+ * Grapesjs version is like `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ * Stored version is like `/assets/image.webp`
+ * @param path the path to convert
+ * @returns the converted path
+ * Exported for unit tests
+ */
+export function displayedToStored(path: string): string {
+  // The path to the assets API
+  const apiPath = `${baseUrl}${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSET_READ}`
+  // Check the path is a displayed path
+  if (path.startsWith(apiPath)) {
+    const url = new URL(path, SERVER_URL)
+    url.pathname = url.pathname.replace(new RegExp(`^${apiPath}`), '')
+    url.pathname = `${baseUrl}/assets${url.pathname}`
+    url.searchParams.delete('websiteId')
+    url.searchParams.delete('connectorId')
+    const encodedPath = '/' + url.toString() // add a leading slash
+      .replace(new RegExp(`^${SERVER_URL}${baseUrl}`), '')
+      .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
+  }
+}
+
+/**
+ * Publication transformer to convert the asset URL during publication
+ */
+export const assetsPublicationTransformer = {
+  transformPath(path: string, type: ClientSideFileType): string {
+    if(type === ClientSideFileType.ASSET) {
+      const result = displayedToStored(path)
+      return result
+    }
+    return undefined
+  },
+  transformPermalink(path: string, type: ClientSideFileType): string {
+    if(type === ClientSideFileType.ASSET) {
+      const result = displayedToStored(path)
+      return result
+    }
+    return undefined
+  },
+}
+
+/**
+ * Update asset URL to use the current storage connector and website ID
+ * Assets URLs are stored in the project data in the form `/assets/image.webp`
+ * This function adds the API path and the connectorId and websiteId like so: `/api/website/assets/image.webp?websiteId=47868975&connectorId=gitlab`
+ */
+export function addTempDataToAssetUrl(assets: Asset[], websiteId: WebsiteId, storageId: ConnectorId): Asset[] {
+  return assets.map((asset: Asset) => {
+    return asset.src ? {
+      ...asset,
+      src: storedToDisplayed(asset.src, websiteId, storageId),
+    } : asset
+  })
+}
+
+/**
+ * Remove the temporary data from the asset URL
+ * Remove the API path and the connectorId and websiteId like so: `/assets/image.webp`
+ */
+export function removeTempDataFromAssetUrl(assets: Asset[]): Asset[] {
+  return assets.map((asset: Asset) => {
+    // Return the asset with the new URL
+    return asset.src ? {
+      ...asset,
+      src: displayedToStored(asset.src),
+    } : asset
+  })
+}
+
+/**
+ * Reucrsive function to update the asset URL in the components
+ */
+function addTempDataToComponents(component: Component, websiteId: WebsiteId, storageId: ConnectorId): Component {
+  // Update the asset URL in the component
+  const newComponent = component.attributes?.src ? {
+    ...component,
+    attributes: {
+      ...component.attributes,
+      src: storedToDisplayed(component.attributes.src, websiteId, storageId),
+    },
+  } : component
+  // Update the asset URL in the children
+  if (newComponent.components) {
+    newComponent.components = newComponent.components.map((childComponent: Component) => {
+      return addTempDataToComponents(childComponent, websiteId, storageId)
+    })
+  }
+  return newComponent
+}
+
+/**
+ * Reucrsive function to update the asset URL in the components
+ */
+function removeTempDataFromComponents(component: Component): Component {
+  // Update the asset URL in the component
+  const newComponent = component.attributes?.src ? {
+    ...component,
+    attributes: {
+      ...component.attributes,
+      src: displayedToStored(component.attributes.src),
+    },
+  } : component
+  // Update the asset URL in the children
+  if (newComponent.components) {
+    newComponent.components = newComponent.components.map((childComponent: Component) => {
+      return removeTempDataFromComponents(childComponent)
+    })
+  }
+  return newComponent
+}
+
+/**
+ * Add temp data to pages
+ */
+export function addTempDataToPages(pages: Page[], websiteId: WebsiteId, storageId: ConnectorId): Page[] {
+  return pages.map((page: Page) => {
+    return {
+      ...page,
+      frames: page.frames.map(frame => ({
+        ...frame,
+        component: addTempDataToComponents(frame.component, websiteId, storageId),
+      }))
+    }
+  })
+}
+
+/**
+ * Remove temp data from asset URL in the components
+ */
+export function removeTempDataFromPages(pages: Page[]): Page[] {
+  return pages.map((page: Page) => {
+    return {
+      ...page,
+      frames: page.frames.map(frame => ({
+        ...frame,
+        component: removeTempDataFromComponents(frame.component),
+      }))
+    }
+  })
+}
+
+/**
+ * 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 regex = new RegExp(/(.*)(url\((["']?)([^"']+?)\1\))*(.*)/, 'g')
+
+  return styles.map((style: Style) => {
+    if (style.style && style.style['background-image']) {
+      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': bgImage,
+        },
+      }
+    }
+    return style
+  })
+}
+
+/**
+ * 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 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': bgImage,
+        },
+      }
+    }
+    return style
+  })
+}

package/src/ts/client/config.ts

@@ -16,16 +16,27 @@
  */
 
 import { Config } from '@silexlabs/silex-plugins'
-import { getEditorConfig } from './grapesjs'
+import { getEditor, getEditorConfig } from './grapesjs'
 import { CLIENT_CONFIG_FILE_NAME, DEFAULT_LANGUAGE, DEFAULT_WEBSITE_ID } from '../constants'
 import { ConnectorId, WebsiteId } from '../types'
-import { EditorConfig } from 'grapesjs'
+import { Editor, EditorConfig, Page } from 'grapesjs'
+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
  */
 
 export class ClientConfig extends Config {
+  api = api
+
   /**
    * The website to load
    * This is the id of the website in the storage connector
@@ -46,17 +57,45 @@ export class ClientConfig extends Config {
   /**
    * root url of Silex app
    */
-  rootUrl = window.location.origin
+  rootUrl = window.location.origin + window.location.pathname.replace(/\/$/, '')
 
   /**
    * debug mode
    */
   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
@@ -64,10 +103,99 @@ export class ClientConfig extends Config {
    */
   clientConfigUrl = `${this.rootUrl}/${CLIENT_CONFIG_FILE_NAME}`
 
+  /**
+   * Google fonts API key, see this doc to get an API key: https://developers.google.com/fonts/docs/developer_api#APIKey
+   * @default Test key for local dev
+   */
+  fontsApiKey = 'AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc'
+
+  /**
+   * Google fonts server or a free privacy-friendly drop-in replacement for Google Fonts or a proxy server to speed up the load and protect privacy
+   * @see https://github.com/coollabsio/fonts
+   * @see https://fontlay.com/
+   * @default Google Fonts
+   */
+  fontsServerUrl = 'https://fonts.googleapis.com'
+  fontsApiUrl = 'https://www.googleapis.com'
+
   /**
    * 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,
+      },
+    }
+  }
+
+  /**
+   * Get grapesjs editor
+   */
+  getEditor(): Editor {
+    return getEditor()
+  }
+
+  /**
+   * Publication transformers let plugins change files before they are published
+   */
+  publicationTransformers: Array<PublicationTransformer> = [assetsPublicationTransformer, publicationTransformerDefault]
+
+  /**
+   * Reset publication transformers
+   */
+  resetPublicationTransformers() {
+    this.publicationTransformers = [assetsPublicationTransformer]
+  }
+
+  /**
+   * Add a publication transformer(s)
+   */
+  addPublicationTransformers(transformers: PublicationTransformer | PublicationTransformer[]) {
+    // Make sure it is an array
+    if (!Array.isArray(transformers)) {
+      transformers = [transformers]
+    }
+    // Validate
+    transformers.forEach(transformer => {
+      validatePublicationTransformer(transformer)
+    })
+    // 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

@@ -16,16 +16,28 @@
  */
 
 export enum ClientEvent {
-  STARTUP_START = 'silex:startup:start',
-  STARTUP_END = 'silex:startup:end',
-  GRAPESJS_START = 'silex:grapesjs:start',
-  GRAPESJS_END = 'silex:grapesjs:end',
-  PUBLISH_START = 'silex:publish:start',
-  PUBLISH_DATA = 'silex:publish:data',
-  PUBLISH_END = 'silex:publish:end',
-  PUBLISH_ERROR = 'silex:publish:error',
-  PUBLISH_LOGIN_START = 'silex:publish:login:start',
+  // Sent on the config object
+  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 GrapesJs editor object (returned by silex.getEditor())
+  PUBLICATION_UI_OPEN = 'silex:publication-ui:open', /* The publication UI is opened, you can access it with { publicationUi } */
+  PUBLICATION_UI_CLOSE = 'silex:publication-ui:close', /* The publication UI is closed, you can access it with { publicationUi } */
+  PUBLISH_BEFORE = 'silex:publish:before', /* Publication is about to start, you can read+write {projectData, siteSettings} */
+  PUBLISH_START = 'silex:publish:start', /* Publication starts, you can read+write project data/settings, use publication manager/ui, prevent publication {projectData, siteSettings, publicationManager, prenventDefault} */
+  PUBLISH_PAGE = 'silex:publish:page', /* Publication of a page, read+write settings and page data, use publication manager and prevent publication { siteSettings, pageSettings, page, publicationManager, preventDefault } */
+  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 { data, publicationManager } */
+  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', /* The user is about to login before publication, you can read+write connector data and use publication manager and prevent publication {connector, publicationManager, preventDefault} */
   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/LoginDialog.ts

@@ -21,12 +21,14 @@ export async function getCurrentUser(editor: Editor): Promise<ConnectorUser> {
 }
 
 export async function updateUser(editor: Editor, type: ConnectorType, connectorId?: ConnectorId): Promise<ConnectorUser> {
-  console.log('updateUser', type, connectorId)
   const user = await getUser({type, connectorId})
   editor.getModel().set('user', user)
   return user
 }
 
+// Orging and path, should we use config.rootUrl?
+const SERVER_URL = window.location.origin + window.location.pathname.replace(/\/$/, '')
+
 let open = false
 let body: HTMLElement | null = null
 export default function loginDialogPlugin(editor, opts) {
@@ -133,7 +135,7 @@ export default function loginDialogPlugin(editor, opts) {
     }
   }
   async function loginWithConnector(connector: ConnectorData) {
-    const nonOAuthUrl = `${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN}?connectorId=${connector.connectorId}&type=${connector.type}`
+    const nonOAuthUrl = `${SERVER_URL}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN}?connectorId=${connector.connectorId}&type=${connector.type}`
     window.open(connector.oauthUrl ?? nonOAuthUrl, '_blank')
     return new Promise(resolve => {
       render(html`