@silexlabs/silex 3.0.0-alpha.100

package/src/ts/client/assetUrl.ts

@@ -0,0 +1,235 @@
+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 {
+    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 {
+    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
+ */
+export function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, storageId: ConnectorId): 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 => storedToDisplayed(match[2], websiteId, storageId))
+      return {
+        ...style,
+        style: {
+          ...style.style,
+          'background-image': urls.map(url => `url('${url}')`).join(', '),
+        },
+      }
+    }
+    return style
+  })
+}
+
+/**
+ * Remove temp data from stylesheets
+ */
+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]))
+      return {
+        ...style,
+        style: {
+          ...style.style,
+          'background-image': urls.map(url => `url('${url}')`).join(', '),
+        },
+      }
+    }
+    return style
+  })
+}

package/src/ts/client/config.ts

@@ -0,0 +1,105 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Config } from '@silexlabs/silex-plugins'
+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 * as api from './api'
+
+/**
+ * @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
+   */
+  websiteId: WebsiteId = new URL(location.href).searchParams.get('id') ?? DEFAULT_WEBSITE_ID
+
+  /**
+   * The storage connector to use
+   * If not found in the URL and the user is not logged in to any storage, use the first storage
+   */
+  storageId: ConnectorId = new URL(location.href).searchParams.get('connectorId')
+
+  /**
+   * language for I18n module
+   */
+  lang = new URL(location.href).searchParams.get('lang') ?? DEFAULT_LANGUAGE
+
+  /**
+   * root url of Silex app
+   */
+  rootUrl = window.location.origin + window.location.pathname.replace(/\/$/, '')
+
+  /**
+   * debug mode
+   */
+  debug = false
+
+  /**
+   * Grapesjs config
+   */
+  grapesJsConfig: EditorConfig
+
+  /**
+   * Client config url
+   * This is the url of the config file which is a plugin
+   */
+  clientConfigUrl = `${this.rootUrl}/${CLIENT_CONFIG_FILE_NAME}`
+
+  /**
+   * Init GrapesJS config which depend on the config file properties
+   */
+  initGrapesConfig() {
+    this.grapesJsConfig = getEditorConfig(this.websiteId, this.storageId, this.rootUrl)
+  }
+
+  /**
+   * Get grapesjs editor
+   */
+  getEditor(): Editor {
+    return getEditor()
+  }
+
+  /**
+   * Publication transformers let plugins change files before they are published
+   */
+  publicationTransformers: Array<PublicationTransformer> = []
+
+  /**
+   * 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)
+  }
+}

package/src/ts/client/events.ts

@@ -0,0 +1,34 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+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',
+
+  // 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',
+  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',
+}

package/src/ts/client/expose.ts

@@ -0,0 +1,30 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export * from './grapesjs/index'
+export * from './config'
+
+export * as constants from '../constants'
+export * as utils from './utils'
+export * as api from './api'
+export * as events from './events'
+export * as page from '../page'
+export * as types from '../types'
+
+console.info(`
+Silex client loaded
+`)

package/src/ts/client/grapesjs/LoginDialog.ts

@@ -0,0 +1,204 @@
+import { html, render } from 'lit-html'
+import { Editor } from 'grapesjs'
+import { ApiConnectorLoggedInPostMessage, ConnectorData, ConnectorId, ConnectorType, ConnectorUser } from '../../types'
+import { connectorList, getUser, logout } from '../api'
+import { WebsiteId } from '../../types'
+import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH } from '../../constants'
+
+export const cmdLogin = 'silex:auth:login'
+export const cmdLogout = 'silex:auth:logout'
+export const eventLoggingIn = 'silex:auth:logging-in'
+export const eventLoggedIn = 'silex:auth:logged-in'
+export const eventLoginFailed = 'silex:auth:login-failed'
+export const eventLoggedOut = 'silex:auth:logged-out'
+
+export interface LoginDialogOptions {
+  id: WebsiteId,
+}
+
+export async function getCurrentUser(editor: Editor): Promise<ConnectorUser> {
+  return editor.getModel().get('user') as ConnectorUser
+}
+
+export async function updateUser(editor: Editor, type: ConnectorType, connectorId?: ConnectorId): Promise<ConnectorUser> {
+  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) {
+  // Options
+  const options: LoginDialogOptions = {
+    ...opts,
+  }
+
+  // Commands and events
+  editor.Commands.add(cmdLogin, {
+    async run(editor: Editor) {  await openDialog() },
+    stop(editor: Editor) { closeDialog() },
+  })
+  editor.Commands.add(cmdLogout, {
+    async run(editor: Editor) {
+      await logout({type: ConnectorType.STORAGE })
+      editor.getModel().set('user', null)
+      editor.trigger(eventLoggedOut)
+    },
+  })
+  editor.on(eventLoggedOut, async () => openDialog())
+
+  // Dialog API
+  function closeDialog() {
+    if (open) {
+      editor.Modal.close()
+      open = false
+    }
+  }
+  async function openDialog() {
+    editor.trigger(eventLoggingIn)
+    open = true
+    editor.Modal.open({
+      title: 'Login',
+      content: '<div id="LoginDialog__content"></div>',
+    }, {
+      closeOnConfirm: false,
+      closeOnEscape: false,
+      closeOnOverlayClick: false,
+    })
+    body = document.querySelector('#LoginDialog__content')
+    if (!body) {
+      throw new Error('Dialog creation failed')
+    }
+    render(html`Logging in...`, body)
+    return loadStorageList(async list => onStorageList(list))
+  }
+  async function onStorageList(list) {
+    const loggedIn = list.find(connector => connector.isLoggedIn)
+    if (loggedIn) {
+      try {
+        const status = await updateUser(editor, loggedIn.type, loggedIn.connectorId)
+        editor.trigger(eventLoggedIn, status)
+        return closeDialog()
+      } catch (err) {
+        console.error('Error with updating login status', err)
+        render(html`
+            <main>
+              <p>There was an error with updating the login status. ${err.message}</p>
+            </main>
+            <footer>
+              <button class="silex-button silex-button--primary" @click=${() => loadStorageList(async list => onStorageList(list))}>Retry</button>
+              <button class="silex-button" @click=${async () => {
+    await logout({type: loggedIn.type, connectorId: loggedIn.connectorId})
+    openDialog()
+  }}>Login with another connector</button>
+            </footer>
+          `, body)
+      }
+      return
+    }
+    // Display the list of storage and continue to login
+    render(html`
+        <main>
+          <p>Login and give Silex access to a file storage.</p>
+          ${list.map(connector => html`
+            <button
+              class="silex-button silex-button--primary"
+              id="publish-button--primary"
+              @click=${() => loginWithConnector(connector)}
+            >Login with ${connector.displayName}</button>
+          `)}
+        </main>
+        <footer>
+        </footer>
+      `, body)
+  }
+
+  // Auth management
+  async function loadStorageList(done: (list: ConnectorData[]) => Promise<void>) {
+    try {
+      const storageConnectors = await connectorList({type: ConnectorType.STORAGE})
+      await done(storageConnectors)
+    } catch (err) {
+      console.error('Error with loading storage connectors', err)
+      render(html`
+        <main>
+          An error occured while loading the storage connectors: ${err.message}
+        </main>
+        <footer>
+          <button type="button" class="gjs-btn-prim" @click=${() => loadStorageList(done)}>Retry</button>
+        </footer>
+        `, body)
+    }
+  }
+  async function loginWithConnector(connector: ConnectorData) {
+    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`
+        <main>
+          <p>Waiting for your authorization in popup window...</p>
+          </main>
+        <footer>
+          <button type="button" class="gjs-btn-prim" @click=${() => openDialog()}>Cancel</button>
+        </footer>
+      `, body)
+      const onMessage = async (event) => {
+        const data = event.data as ApiConnectorLoggedInPostMessage
+        if (data?.type === 'login') {
+          window.removeEventListener('message', onMessage)
+          const { connectorId, error, message } = data // TODO: use options from the connector? For now they are stored in the session
+          if (error) {
+            // Error, start over
+            console.error('login error', message)
+            render(html`
+              <main>
+                <p>Login failed with error: ${message}</p>
+              <footer>
+                <button type="button" class="gjs-btn-prim" @click=${() => openDialog()}>Retry</button>
+                ${ connectorId ? html`<button class="silex-button" @click=${async () => {
+    await logout({type: connector.type, connectorId})
+    openDialog()
+  }}>Login with another connector</button>` : '' }
+
+                  </footer>
+                `, body)
+            editor.trigger(eventLoginFailed)
+          } else {
+            try {
+              render(html`
+                <main>
+                  <p>Loging in...</p>
+                </main>
+                <footer>
+                </footer>
+              `, body)
+              const status = await updateUser(editor, connector.type, connectorId)
+              editor.trigger(eventLoggedIn, status)
+              closeDialog()
+            } catch (err) {
+              console.error('Error with loading login status', err)
+              render(html`
+                <main>
+                  An error occured, could not get your data.
+                  ${err.message}
+                </main>
+                <footer>
+                  <button type="button" class="gjs-btn-prim" @click=${() => openDialog()}>Retry</button>
+                  <button class="silex-button" @click=${async () => {
+    await logout({type: connector.type, connectorId})
+    openDialog()
+  }}>Login with another connector</button>
+                </footer>
+                `, body)
+            }
+          }
+        }
+      }
+      window.addEventListener('message', onMessage, false)
+    })
+  }
+}