@silexlabs/silex 3.0.0-alpha.100

package/src/ts/client/grapesjs/index.ts

@@ -0,0 +1,335 @@
+/*
+ * 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 grapesjs, { Editor, EditorConfig } from 'grapesjs'
+import openImport from './openImport'
+
+/**
+ * @fileoverview This is where grapes config gets created
+ * Handle plugins, options and initialization of the editor
+ */
+
+// ////////////////////
+// Plugins
+// ////////////////////
+import blocksBasicPlugin from 'grapesjs-blocks-basic'
+import styleFilterPlugin from 'grapesjs-style-filter'
+import formPlugin from 'grapesjs-plugin-forms'
+import codePlugin from 'grapesjs-custom-code'
+import uiSuggestClasses from '@silexlabs/grapesjs-ui-suggest-classes'
+import symbolsPlugin from '@silexlabs/grapesjs-symbols'
+import loadingPlugin from '@silexlabs/grapesjs-loading'
+import fontsDialogPlugin, { cmdOpenFonts } from '@silexlabs/grapesjs-fonts'
+import symbolDialogsPlugin, { cmdPromptAddSymbol } from './symbolDialogs'
+import loginDialogPlugin, { LoginDialogOptions, cmdLogout } from './LoginDialog'
+import footerPlugin from './footer'
+import breadcrumbsPlugin from './breadcrumbs'
+import rateLimitPlugin from '@silexlabs/grapesjs-storage-rate-limit'
+
+import { pagePanelPlugin, cmdTogglePages, cmdAddPage } from './page-panel'
+import { newPageDialog, cmdOpenNewPageDialog } from './new-page-dialog'
+import { projectBarPlugin } from './project-bar'
+import { settingsDialog, cmdOpenSettings } from './settings'
+import { blocksPlugin } from './blocks'
+import { semanticPlugin } from './semantic'
+import { richTextPlugin } from './rich-text'
+import { internalLinksPlugin } from './internal-links'
+import publicationManagerPlugin, { PublicationManagerOptions } from './PublicationManager'
+import { storagePlugin } from './storage'
+import { ConnectorId, WebsiteId } from '../../types'
+import { API_PATH, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_PATH } from '../../constants'
+
+const plugins = [
+  {name: './project-bar', value: projectBarPlugin}, // has to be before panels and dialogs
+  {name: './settings', value: settingsDialog},
+  {name: '@silexlabs/grapesjs-fonts', value: fontsDialogPlugin},
+  {name: './new-page-dialog', value: newPageDialog},
+  {name: './page-panel', value: pagePanelPlugin},
+  {name: 'grapesjs-blocks-basic', value: blocksBasicPlugin},
+  {name: './blocks', value: blocksPlugin},
+  {name: './semantic', value: semanticPlugin},
+  {name: './rich-text', value: richTextPlugin},
+  {name: 'grapesjs-style-filter', value: styleFilterPlugin},
+  {name: 'grapesjs-plugin-forms', value: formPlugin},
+  {name: 'grapesjs-custom-code', value: codePlugin},
+  {name: './internal-links', value: internalLinksPlugin},
+  {name: '@silexlabs/grapesjs-ui-suggest-classes', value: uiSuggestClasses},
+  {name: './symbolDialogs', value: symbolDialogsPlugin},
+  {name: '@silexlabs/grapesjs-symbols', value: symbolsPlugin},
+  {name: './PublicationManager', value: publicationManagerPlugin},
+  {name: './storage', value: storagePlugin},
+  {name: './LoginDialog', value: loginDialogPlugin},
+  {name: '@silexlabs/grapesjs-loading', value: loadingPlugin},
+  {name: './breadcrumbs', value: breadcrumbsPlugin},
+  {name: './footer', value: footerPlugin},
+  {name: '@silexlabs/grapesjs-storage-rate-limit', value: rateLimitPlugin},
+]
+// Check that all plugins are loaded correctly
+plugins
+  .filter(p => typeof p.value !== 'function')
+  .forEach(p => {
+    throw new Error(`Plugin ${p.name} could not be loaded correctly (${p.value})`)
+  })
+
+// Constants
+const PRIMARY_COLOR = '#333333'
+const SECONDARY_COLOR = '#ddd'
+const TERTIARY_COLOR = '#8873FE'
+const QUATERNARY_COLOR = '#A291FF'
+const DARKER_PRIMARY_COLOR = '#363636'
+const LIGHTER_PRIMARY_COLOR = '#575757'
+
+// ////////////////////
+// Config
+// ////////////////////
+const catBasic = 'Containers'
+const catComponents = 'Components'
+
+export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl: string): EditorConfig {
+  return {
+    container: '#gjs',
+    height: '100%',
+    showOffsets: true,
+    showDevices: true,
+
+    //pageManager: {},
+
+    layerManager: {
+      appendTo: '.layer-manager-container',
+    },
+
+    blockManager: {
+      appendTo: '.block-manager-container',
+    },
+
+    assetManager: {
+      upload: `${rootUrl}${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSETS_WRITE}/?websiteId=${id}${ connectorId ? `&connectorId=${connectorId}` : ''}`,
+    },
+
+    storageManager: {
+      autoload: false,
+      type: 'connector',
+      options: {
+        connector: {
+          id,
+          connectorId,
+        },
+      },
+    },
+
+    cssIcons: './css/all.min.css',
+    canvasCss: `
+      :root {
+        --primaryColor: ${PRIMARY_COLOR};
+        --secondaryColor: ${SECONDARY_COLOR};
+        --tertiaryColor: ${TERTIARY_COLOR};
+        --quaternaryColor: ${QUATERNARY_COLOR};
+        --darkerPrimaryColor: ${DARKER_PRIMARY_COLOR};
+        --lighterPrimaryColor: ${LIGHTER_PRIMARY_COLOR};
+      }
+      .gjs-frame-selected {
+        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important; // Change to red border
+      }
+      .gjs-selected {
+        outline: 2px solid var(--tertiaryColor) !important;
+        outline-offset: -2px;
+      }
+    `,
+
+    plugins: plugins.map(p => p.value),
+
+    pluginsOpts: {
+      [blocksBasicPlugin as any]: {
+        blocks: ['text', 'image', 'video', 'map'],
+        category: catBasic,
+        //flexGrid: true,
+      },
+      [projectBarPlugin as any]: {
+        panels: [
+          {
+            id: 'dash',
+            className: 'logo',
+            attributes: { title: 'Dashboard' },
+            command: () => {
+              window.location.href = '/'
+            },
+          }, {
+            id: 'block-manager-btn',
+            className: 'block-manager-btn fa fa-fw fa-plus',
+            attributes: { title: 'Blocks', containerClassName: 'block-manager-container', },
+            command: 'open-blocks',
+          }, {
+            id: 'symbols-btn',
+            className: 'symbols-btn fa-regular fa-gem',
+            attributes: { title: 'Symbols', containerClassName: 'symbols-list-container', },
+            command: 'open-symbols',
+            buttons: [
+              {
+                id: 'symbol-create-button',
+                className: 'pages__add-page fa-solid fa-plus',
+                label: 'Create symbol from selection',
+                command: cmdPromptAddSymbol,
+              },
+            ],
+          }, {
+            id: 'page-panel-btn',
+            className: 'page-panel-btn fa fa-fw fa-file',
+            attributes: { title: 'Pages', containerClassName: 'page-panel-container', },
+            command: cmdTogglePages,
+            buttons: [{
+              className: 'pages__add-page fa fa-file',
+              command: cmdAddPage,
+              text: '+',
+            }],
+          }, {
+            id: 'layer-manager-btn',
+            className: 'layer-manager-btn fa-solid fa-layer-group',
+            attributes: { title: 'Layers', containerClassName: 'layer-manager-container', },
+            command: 'open-layers',
+          }, {
+            id: 'font-dialog-btn',
+            className: 'font-manager-btn fa-solid fa-font',
+            attributes: { title: 'Fonts' },
+            command: () => {
+              editor.runCommand(cmdOpenFonts)
+            },
+          }, {
+            id: 'settings-dialog-btn',
+            className: 'page-panel-btn fa-solid fa-gears',
+            attributes: { title: 'Settings' },
+            command: cmdOpenSettings,
+          }, {
+            id: 'spacer',
+            attributes: {},
+            className: 'project-bar-spacer',
+          }, {
+            id: 'dash2',
+            className: 'fa-solid fa-house',
+            attributes: { title: 'Dashboard' },
+            command: () => {
+              window.location.href = '/'
+            },
+          }, {
+            id: 'help',
+            className: 'fa fa-fw fa-question-circle',
+            attributes: { title: 'Documentation' },
+            command: () => {
+              window.open('https://docs.silex.me/', '_blank')
+            },
+          }, {
+            id: 'logout-button',
+            className: 'page-panel-btn fa fa-fw fa-sign-out',
+            attributes: { title: 'Sign out' },
+            command: cmdLogout,
+          },
+        ],
+      },
+      [publicationManagerPlugin as any]: {
+        appendTo: 'options',
+        websiteId: id,
+      } as PublicationManagerOptions,
+      [pagePanelPlugin as any]: {
+        cmdOpenNewPageDialog,
+        cmdOpenSettings,
+        appendTo: '.page-panel-container',
+      },
+      [uiSuggestClasses as any]: {
+        enableCount: false,
+        enablePerformance: false,
+      },
+      [internalLinksPlugin as any]: {
+        // FIXME: warn the user about links in error
+        onError: (errors) => console.warn('Links errors:', errors),
+      },
+      [codePlugin as any]: {
+        blockLabel: 'HTML',
+        blockCustomCode: {
+          category: catComponents,
+        }
+      },
+      [symbolsPlugin as any]: {
+        appendTo: '.symbols-list-container',
+        emptyText: 'No symbol yet.',
+        primaryColor: PRIMARY_COLOR,
+        secondaryColor: SECONDARY_COLOR,
+        highlightColor: TERTIARY_COLOR,
+      },
+      [fontsDialogPlugin as any]: {
+        api_key: 'AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc',
+      },
+      [loginDialogPlugin as any]: {
+        id,
+      } as LoginDialogOptions,
+      [rateLimitPlugin as any]: {
+        time: 5000,
+      },
+    },
+  }
+}
+
+// ////////////////////
+// Initialize editor
+// ////////////////////
+// Keep a ref to the editor singleton
+let editor: Editor
+export async function initEditor(config: EditorConfig) {
+  if(editor) throw new Error('Grapesjs editor already created')
+  return new Promise<Editor>((resolve, reject) => {
+    try {
+      editor = grapesjs.init(config)
+    } catch(e) {
+      console.error('Error initializing GrapesJs with plugins:', plugins, e)
+      reject(e)
+    }
+
+    // customize the editor
+    ['text']
+      .forEach(id => editor.Blocks.get(id)?.set('category', 'Basics'))
+    ;['image', 'video']
+      .forEach(id => editor.Blocks.get(id)?.set('category', 'Media'))
+    ;['map']
+      .forEach(id => editor.Blocks.get(id)?.set('category', 'Components'))
+    editor.Blocks.render([])
+
+    editor.Commands.add('gjs-open-import-webpage', openImport(editor, {
+      modalImportLabel: '',
+      modalImportContent: 'Paste a web page HTML code here.',
+      modalImportButton: 'Import',
+      modalImportTitle: 'Import from website',
+    }))
+
+    editor.on('load', () => {
+      // remove blocks and layers buttons from the properties
+      editor.Panels.getPanel('views').buttons.remove('open-blocks')
+      editor.Panels.getPanel('views').buttons.remove('open-layers')
+      editor.Panels.getPanel('views').view.el.firstChild.style.justifyContent = 'initial' // align left
+      editor.Panels.getPanel('options').buttons.remove('export-template')
+
+      editor.BlockManager.render(null)
+
+      // use the style filter plugin
+      editor.StyleManager.addProperty('extra',{ extend: 'filter' })
+
+      // GrapesJs editor is ready
+      resolve(editor)
+    })
+  })
+}
+
+export function getEditor() {
+  return editor
+}

package/src/ts/client/grapesjs/internal-links.test.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 { internalLinksPlugin } from './internal-links'
+import { expect, test, beforeEach } from '@jest/globals'
+import grapesjs from 'grapesjs'
+
+let editor
+let nextId = 1
+function getNewId() {
+  return (nextId++).toString()
+}
+const comp1 = {
+  tagName: 'a',
+  content: 'link to main',
+  attributes: { href: './index.html' },
+}
+const comp2 = {
+  tagName: 'a',
+  content: 'link to page 1',
+  attributes: { href: './page-1.html' },
+}
+const comp3 = {
+  tagName: 'a',
+  content: 'link to page 2',
+  attributes: { href: './page-2.html' },
+}
+
+const pageMain = {
+  id: getNewId(),
+  type: 'main',
+  component: {
+    tagName: 'div',
+    components: [comp1, comp2],
+  },
+}
+const page1 = {
+  id: getNewId(),
+  name: 'Page 1',
+  component: {
+    tagName: 'div',
+    components: [comp3],
+  },
+}
+const page2 = {
+  id: getNewId(),
+  name: 'Page 2',
+  component: {
+    tagName: 'div',
+    components: [comp1, comp2, comp3],
+  },
+}
+beforeEach(() => {
+  editor = grapesjs.init({
+    headless: true,
+    storageManager: { autoload: false },
+    pageManager: {
+      pages: [pageMain, page1, page2],
+    },
+    plugins: [internalLinksPlugin],
+  })
+  expect(editor).not.toBeUndefined()
+})
+test('init', () => {
+  expect(editor.getComponents()).toHaveLength(pageMain.component.components.length)
+})
+test('rename page and rewrite links in current page', () => {
+  const page = editor.Pages.getSelected()
+  expect(page.id).toBe(pageMain.id)
+  expect(page.getName()).toBeUndefined()
+  const newName = 'Home page'
+  const newPath = './home-page.html'
+  // Do not work: page.setName(newName)
+  page.set('name', newName)
+  expect(page.getName()).toBe(newName)
+  const comp1Model = page.getMainComponent().components().find(c => c.attributes.content === comp1.content)
+  expect(comp1Model).toBeTruthy()
+  expect(comp1Model.attributes.attributes.href).toBe(newPath)
+})
+test('rename page and rewrite links in another page', () => {
+  const page = editor.Pages.get(page2.id)
+  expect(page.get('name')).toBe(page2.name)
+  const newName = 'Page 2 new-name'
+  const newPath = './page-2-new-name.html'
+  // Do not work: page.setName(newName)
+  page.set('name', newName)
+  expect(page.get('name')).toBe(newName)
+  const comp1Model = page.getMainComponent().components().find(c => c.attributes.content === comp3.content)
+  expect(comp1Model).toBeTruthy()
+  expect(comp1Model.attributes.attributes.href).toBe(newPath)
+})

package/src/ts/client/grapesjs/internal-links.ts

@@ -0,0 +1,225 @@
+/*
+ * 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 {html, render} from 'lit-html'
+import {map} from 'lit-html/directives/map.js'
+import grapesjs from 'grapesjs/dist/grapes.min.js'
+import { getPageLink } from '../../page'
+
+// constants
+const pluginName = 'internal-links'
+const options: grapesjs.SelectOption = [
+  { id: '', name: '-' },
+  { id: 'url', name: 'URL' },
+  { id: 'email', name: 'Email' },
+  { id: 'page', name: 'Page' },
+]
+
+// plugin code
+export const internalLinksPlugin = (editor, opts) => {
+  // update links when a page link changes
+  function onAll(cbk) {
+    editor.Pages.getAll()
+      .forEach(page => {
+        page.getMainComponent()
+          .onAll(cbk)
+      })
+  }
+  editor.on('page', ({ event, page }) => {
+    if(!page) return // fixes UT
+    switch (event) {
+    case 'change:name':
+      // update all links to this page
+      onAll(component => {
+        if(component.getAttributes().href === getPageLink(page.previous('name'))) {
+          component.setAttributes({
+            href: getPageLink(page.get('name')),
+          })
+        }
+      })
+      break
+    case 'remove':
+      // mark all links as issues
+      const issues = []
+      onAll(component => {
+        console.log(component.getAttributes().href, getPageLink(page.previous('name')), page.previous('name'))
+        if(component.getAttributes().href === getPageLink(page.previous('name'))) {
+          issues.push(component)
+        }
+      })
+      opts?.onError(issues)
+      break
+    }
+  })
+  // utility functions to render the UI
+  function getUi(type, href) {
+    switch (type) {
+    case 'email':
+      const mailTo = href.replace('mailto:', '').split('?')
+      const email = mailTo[0]
+      const params = (mailTo[1] || '').split('&').reduce((acc, item) => {
+        const items = item.split('=')
+        acc[items[0]] = items[1]
+        return acc
+      }, {})
+      return html`<div class="href-next__email-inputs">
+            <label for="href-next__email" class="gjs-one-bg silex-label">Email address</label>
+            <input class="href-next__email" placeholder="Insert email" type="email" value=${email || ''}/>
+            <label for="href-next__email-subject" class="gjs-one-bg silex-label">Subject</label>
+            <input class="href-next__email-subject" placeholder="Insert subject" value=${ params.subject || '' }/>
+          </div>`
+    case 'page':
+      return html`<div class="href-next__page-inputs">
+            <label for="href-next__page" class="gjs-one-bg silex-label">Page name</label>
+            <select id="href-next__page" class="href-next__page">
+              ${
+  map<grapesjs.Page>(editor.Pages.getAll(), page => html`<option
+                  ?selected=${getPageLink(page.getName()) === href}
+                  value=${getPageLink(page.getName())}>
+                    ${page.getName() || 'Main'}
+                </option>`)
+}
+            </select>
+          </div>`
+    case 'url':
+      return html`<div class="href-next__url-inputs">
+          <label for="href-next__url" class="gjs-one-bg silex-label">URL</label>
+          <input class="href-next__url" placeholder="Insert URL" type="url" value=${ href }/>
+        </div>`
+    default:
+      return ''
+    }
+  }
+  function getDefaultHref(type) {
+    switch(type) {
+    case 'email': return 'mailto:'
+    case 'page': return getPageLink(null)
+    case 'url': return 'https://'
+    }
+  }
+  function doRender(el: HTMLElement, href = '') {
+    const type = getType(href)
+    const ui = getUi(type, href)
+
+    render(html`
+      <label for="href-next__type" class="gjs-one-bg silex-label">Type</label>
+      <select id="href-next__type" class="href-next__type" @change=${event => doRender(el, getDefaultHref(event.target.value))}>
+        ${map<grapesjs.SelectOption>(options, opt => html`
+          <option value="${opt.id}" ?selected=${type === opt.id}>${opt.name}</option>
+        `)}
+      </select>
+      ${ ui }
+    `, el)
+  }
+  function getType(href: string) {
+    if (href.indexOf('mailto:') === 0) {
+      return 'email'
+    } else if(href.indexOf('./') === 0){
+      return 'page'
+    } else if(href){
+      return 'url'
+    }
+    return ''
+  }
+  function doRenderCurrent(el) {
+    doRender(el, editor.getSelected()?.getAttributes().href || '')
+  }
+
+  // Add the new trait to all component types
+  editor.DomComponents.getTypes().map(type => {
+    editor.DomComponents.addType(type.id, {
+      model: {
+        defaults: {
+          traits: [
+            // Keep the type original traits
+            ...editor.DomComponents.getType(type.id).model.prototype.defaults.traits
+            // Filter original href trait
+              .filter(trait => trait.name ? trait.name !== 'href' : trait !== 'href'),
+            // Add the new trait
+            {
+              label: 'Link',
+              type: 'href-next',
+              name: 'href',
+            },
+          ]
+        }
+      }
+    })
+  })
+
+  editor.TraitManager.addType('href-next', {
+    createInput({ trait }) {
+      // Create a new element container and add some content
+      const el = document.createElement('div')
+      // update the UI when a page is added/renamed/removed
+      editor.on('page', () => doRenderCurrent(el))
+      doRenderCurrent(el)
+      // this will be the element passed to onEvent and onUpdate
+      return el
+    },
+    // Update the component based on UI changes
+    // `elInput` is the result HTMLElement you get from `createInput`
+    onEvent({ elInput, component, event }) {
+      const inputType = elInput.querySelector('.href-next__type')
+      let href = ''
+      // Compute the new HREF value
+      switch (inputType.value) {
+      case 'page':
+        const valPage = elInput.querySelector('.href-next__page')?.value
+        href = valPage || getDefaultHref('page')
+        break
+      case 'url':
+        const valUrl = elInput.querySelector('.href-next__url')?.value
+        href = valUrl || getDefaultHref('url')
+        break
+      case 'email':
+        const valEmail = elInput.querySelector('.href-next__email')?.value
+        const valSubj = elInput.querySelector('.href-next__email-subject')?.value
+        href = valEmail ? `mailto:${valEmail}${valSubj ? `?subject=${valSubj}` : ''}` :  getDefaultHref('email')
+        break
+      default:
+        href = ''
+      }
+
+      // Store the new HREF value
+      component.addAttributes({ href })
+
+      // Handle the tag name
+      if(href === '') {
+        // Not a link
+        if(component.get('tagName').toUpperCase() === 'A'){
+          // Retrieve the original stored value
+          const original = component.get('originalTagName') ?? 'DIV'
+          // Case of the inline A tags inserted by the text bar
+          const value = original.toUpperCase() === 'A' ? 'SPAN' : original
+          component.set('tagName', value)
+        }
+      } else {
+        // Link
+        if(component.get('tagName').toUpperCase() !== 'A') {
+          component.set('originalTagName', component.get('tagName'))
+          component.set('tagName', 'A')
+        }
+      }
+    },
+    // Update UI on the component change
+    onUpdate({ elInput, component }) {
+      const href = component.getAttributes().href || ''
+      doRender(elInput, href)
+    },
+  })
+}