@silexlabs/silex 3.0.1-alpha.0 → 3.0.2

package/src/ts/client/config.ts

@@ -1,39 +1,201 @@
-import { Config, Plugin } from '@silexlabs/silex-plugins'
-import { getEditorConfig } from './grapesjs'
-import { CLIENT_CONFIG_FILE_NAME } from '../constants'
+/*
+ * 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, 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
  */
 
-const id = new URL(location.href).searchParams.get('id') || 'default'
-const lang = new URL(location.href).searchParams.get('lang') || 'en'
-const rootUrl = `${location.protocol}//${location.host}${location.pathname}`
+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(/\/$/, '')
 
-export class SilexConfig extends Config {
   /**
    * debug mode
    */
   debug = false
 
   /**
-   * language for I18n module
+   * 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
    */
-  lang = lang
+  replacedElements = [
+    'img',
+    'video',
+    'iframe',
+    'embed',
+    'object',
+    'audio',
+    'canvas',
+    // 'option',
+  ]
 
   /**
    * Grapesjs config
    */
-  editor = getEditorConfig(id, rootUrl)
+  grapesJsConfig: EditorConfig = {
+    plugins: [],
+    pluginsOpts: {},
+  }
 
   /**
    * Client config url
    * This is the url of the config file which is a plugin
    */
-  clientConfigUrl = `${rootUrl}${CLIENT_CONFIG_FILE_NAME}`
+  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() {
+    // 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)
+  }
 
   /**
-   * GrapesJs plugins
+   * Add default plugins
    */
-  grapesJsPlugins: Plugin[] = []
+  async addDefaultPlugins() {
+    await this.addPlugin([
+      publishCustomCodeBlock,
+      publishFonts,
+    ], {})
+  }
 }

package/src/ts/client/events.ts

@@ -0,0 +1,43 @@
+/*
+ * 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', /* 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/expose.ts

@@ -1,4 +1,30 @@
-export * from './index'
+/*
+ * 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)
+    })
+  }
+}