@silexlabs/silex 3.0.0-alpha.21

package/src/plugins/WebsitePlugin.js

@@ -0,0 +1,149 @@
+const { Router } = require('express')
+const { resolve } = require('path')
+const formidable = require('formidable')
+
+const { noCache } = require('./Cache')
+
+const EVENT_READ_START = 'EVENT_READ_START'
+const EVENT_READ_END = 'EVENT_READ_END'
+const EVENT_WRITE_START = 'EVENT_WRITE_START'
+const EVENT_WRITE_END = 'EVENT_WRITE_END'
+const EVENT_ASSET_READ_START = 'EVENT_ASSET_READ_START'
+const EVENT_ASSET_READ_END = 'EVENT_ASSET_READ_END'
+const EVENT_ASSET_WRITE_START = 'EVENT_ASSET_WRITE_START'
+const EVENT_ASSET_WRITE_END = 'EVENT_ASSET_WRITE_END'
+
+module.exports = async function(config, opts = {}) {
+  // Options with defaults
+  const options = {
+    // Defaults
+    backend: 'src/plugins/DefaultBackend.js',
+    // Options
+    ...opts
+  }
+
+  // Link to the desired backend
+  const backend = resolve(__dirname, '../..', options.backend)
+  const { assetsDir, assetUrl, init, writeData, readData } = require(backend)
+
+  config.on('silex:startup:start', ({app}) => {
+    // const backwardCompat = new BackwardCompat(rootUrl)
+    const router = Router()
+
+    // website specials
+    router.get('/website', readWebsite)
+    router.post('/website', writeWebsite)
+    router.get(/\/assets\/(.*)/, readAsset)
+    router.post('/assets', writeAsset)
+
+    app.use(noCache,  router)
+  })
+
+  async function readWebsite(req, res) {
+    const id = req.query.id
+    config.emit(EVENT_READ_START, { req, id })
+    try {
+      const data = await readData(id)
+      config.emit(EVENT_READ_END, { req, res, data, id })
+      res
+        .type('application/json')
+        .send(data)
+    } catch (err) {
+      if(err.code === 'ENOENT') {
+        console.error('Read file error, website does not exist', err)
+        res.status(404).json({ message: 'Read file error, website does not exist: ' + err.message, code: err.code})
+      } else {
+        console.error('Read file error', err)
+        res.status(400).json({ message: 'Read file error: ' + err.message, code: err.code})
+      }
+    }
+  }
+
+  function fromBody(body) {
+    try {
+      return [{
+        assets: body.assets,
+        pages: body.pages,
+        files: body.files,
+        styles: body.styles,
+        settings: body.settings,
+        publication: body.publication,
+        name: body.name,
+        fonts: body.fonts,
+        symbols: body.symbols,
+      }, null]
+    } catch(err) {
+      console.error('Could not parse body data', body, err)
+      return [null, err]
+    }
+  }
+
+  async function writeWebsite(req, res) {
+    const id = req.query.id
+    await init(id)
+
+    const [data, err] = fromBody(req.body)
+    if(err) {
+      res.status(400).json({ message: 'Error writing data file, could not parse the provided body: ' + err.message, code: err.code})
+      return
+    }
+    config.emit(EVENT_WRITE_START, { req, id, data })
+    try {
+      await writeData(id, data)
+    } catch (err) {
+      console.error('Error writing data file', err)
+      res.status(500).json({ message: 'Error writing data file: ' + err.message, code: err.code})
+      return
+    }
+
+    config.emit(EVENT_WRITE_END, { res, req, id, data })
+
+    res.json({
+      message: 'OK',
+    })
+  }
+
+  async function readAsset(req, res) {
+    const id = req.query.id
+    const fileName = req.params[0]
+    const uploadDir = await assetsDir(id)
+    config.emit(EVENT_ASSET_READ_START, { req, id, fileName, uploadDir })
+    res.sendFile(`${uploadDir}/${fileName}`)
+    config.emit(EVENT_ASSET_READ_END, { req, id, fileName, uploadDir })
+  }
+
+  async function writeAsset(req, res) {
+    const id = req.query.id
+    // FIXME: assetsDir and assetsUrl will both download the site settings file => get both in 1 call
+    const uploadDir = await assetsDir(id)
+
+    const form = formidable({
+      uploadDir,
+      filename: (name, ext, part, _form) => `${name}${ext}`,
+      multiples: true,
+      keepExtensions: true,
+    })
+
+    form.parse(req, async (err, fields, files) => {
+      if (err) {
+        console.error('Error parsing upload data', err)
+        res
+          .status(400)
+          .json({ message: 'Error parsing upload data: ' + err.message, code: err.code})
+        return
+      }
+      Promise.all(
+        [].concat(files['files[]']) // may be an array or 1 element
+          .map(file => {
+            const { originalFilename, filepath } = file
+            return assetUrl(id, originalFilename)
+          })
+      )
+        .then(data => {
+          config.emit(EVENT_ASSET_WRITE_START, { req, id, uploadDir, form, data })
+          res.json({ data })
+          config.emit(EVENT_ASSET_WRITE_END, { res, req, id, uploadDir, form, data })
+        })
+    })
+  }
+}

package/src/ts/client/config.ts

@@ -0,0 +1,21 @@
+import { Config } from '@silexlabs/silex-plugins'
+import { getEditorConfig } from './grapesjs'
+
+/**
+ * @fileoverview Silex client side config
+ */
+
+const id = new URL(location.href).searchParams.get('id') || 'default'
+const rootUrl = '.'
+
+export class SilexConfig extends Config {
+  /**
+   * debug mode
+   */
+  debug = false
+
+  /**
+   * Grapesjs config
+   */
+  editor = getEditorConfig(id, rootUrl)
+}

package/src/ts/client/expose.ts

@@ -0,0 +1,4 @@
+export * from './index'
+export * from './grapesjs/index'
+export * from './config'
+

package/src/ts/client/grapesjs/blocks.ts

@@ -0,0 +1,88 @@
+import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+
+const pluginName = 'blocks'
+const clsContainer = 'silex-container'
+const clsSection = 'silex-section'
+const clsSectionBackground = 'silex-section-background'
+
+export const blocksPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  // Make row and column classes private
+  const privateCls = [clsSection, clsSectionBackground, clsContainer]
+    .map(cls => '.' + cls)
+  editor.on(
+    'selector:add',
+    selector => privateCls.indexOf(selector.getFullName()) >= 0 && selector.set('private', 1)
+  )
+  ;[
+    // {
+    //   id: 'section',
+    //   def: {
+    //     label: 'Section',
+    //     category: 'Containers',
+    //     attributes: { class: 'fa fa-list-alt' },
+    //     draggable: 'body',
+    //     content: {
+    //       tagName: 'section',
+    //       styles: `
+    //       .${clsSectionBackground} {
+    //         display: flex;
+    //         justify-content: center;
+    //       }
+    //       `,
+    //       components: [
+    //         {
+    //           tagName: 'div',
+    //           name: 'Section container',
+    //           attributes: { class: ['website-width'] },
+    //           draggable: false,
+    //           removable: false,
+    //           resizable: true,
+    //           styles: `
+    //           .${clsSection} {
+    //             min-height: 100px;
+    //             width: 1200px;
+    //           }
+    //           `,
+    //         },
+    //       ],
+    //     },
+    //   },
+    // },
+    {
+      id: 'container',
+      def: {
+        label: 'Container',
+        category: 'Basics',
+        attributes: { class: 'container-png' },
+        content: {
+          type: 'container',
+          style: {
+            'min-height': '100px',
+          },
+        },
+      },
+    },
+    // {
+    //   id: 'link-block',
+    //   def: {
+    //     category: 'Containers',
+    //     label: 'Link Block',
+    //     attributes: { class: 'fa fa-link' },
+    //     content: {
+    //       type: 'link',
+    //       editable: false,
+    //       droppable: true,
+    //       resizable: true,
+    //       style:{
+    //         display: 'inline-block',
+    //         padding: '5px',
+    //         'min-height': '100px',
+    //         'width': '100px'
+    //       }
+    //     },
+    //   },
+    // },
+  ]
+    .forEach(block => editor.BlockManager.add(block.id, block.def))
+})
+

package/src/ts/client/grapesjs/eleventy.ts

@@ -0,0 +1,21 @@
+import grapesjs from 'grapesjs/dist/grapes.min.js'
+
+import { getPageSlug } from '../../page'
+import { Page } from '../../types'
+
+const pluginName = 'eleventy'
+
+export const eleventyPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  editor.on(opts.eventStart || 'publish:start', data => {
+    data.pages.forEach((page: Page, idx) => {
+      const file = data.files[idx]
+      file.css = `---
+permalink: /css/${getPageSlug(page.name)}.css
+---
+${file.css}
+`
+      file.cssPath += '.liquid'
+    })
+  })
+})
+

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

@@ -0,0 +1,255 @@
+import grapesjs, { 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/src'
+import loadingPlugin from '@silexlabs/grapesjs-loading'
+import fontsDialogPlugin, { cmdOpenFonts } from '@silexlabs/grapesjs-fonts'
+import symbolDialogsPlugin, { cmdPromptAddSymbol } from './symbolDialogs'
+
+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 { publishPlugin } from './publish'
+import { templatePlugin } from './template'
+import { eleventyPlugin } from './eleventy'
+
+const plugins = [
+  {name: './grapesjs/project-bar', value: projectBarPlugin}, // has to be before panels and dialogs
+  {name: './grapesjs/settings', value: settingsDialog},
+  {name: '@silexlabs/grapesjs-fonts', value: fontsDialogPlugin},
+  {name: './grapesjs/new-page-dialog', value: newPageDialog},
+  {name: './grapesjs/page-panel', value: pagePanelPlugin},
+  {name: 'grapesjs-blocks-basic', value: blocksBasicPlugin},
+  {name: './grapesjs/blocks', value: blocksPlugin},
+  {name: './grapesjs/semantic', value: semanticPlugin},
+  {name: './grapesjs/rich-text', value: richTextPlugin},
+  {name: 'grapesjs-style-filter', value: styleFilterPlugin},
+  {name: 'grapesjs-plugin-forms', value: formPlugin},
+  {name: 'grapesjs-custom-code', value: codePlugin},
+  {name: './grapesjs/internal-links', value: internalLinksPlugin},
+  {name: '@silexlabs/grapesjs-ui-suggest-classes', value: uiSuggestClasses},
+  {name: './grapesjs/symbolDialogs', value: symbolDialogsPlugin},
+  {name: '@silexlabs/grapesjs-symbols', value: symbolsPlugin},
+  {name: './grapesjs/publish', value: publishPlugin},
+  {name: './grapesjs/template', value: templatePlugin},
+  {name: './grapesjs/eleventy', value: eleventyPlugin},
+  {name: '@silexlabs/grapesjs-loading', value: loadingPlugin},
+]
+// Check that all plugins are loaded correctly
+plugins
+  .filter(p => !p.value)
+  .forEach(p => {
+    throw new Error(`Plugin ${p.name} could not be loaded correctly`)
+  })
+
+export function getPlugins() { return plugins }
+
+// ////////////////////
+// Config
+// ////////////////////
+const catBasic = 'Containers'
+const catComponents = 'Components'
+
+export function getEditorConfig(id: string, rootUrl: string) {
+  return {
+    container: '#gjs',
+    height: '100%',
+    showOffsets: true,
+    showDevices: true,
+
+    //pageManager: {},
+
+    layerManager: {
+      appendTo: '.layer-manager-container',
+    },
+
+    blockManager: {
+      appendTo: '.block-manager-container',
+    },
+
+    storageManager: {
+      autoload: true,
+      options: {
+        remote: {
+          urlStore: `${rootUrl}/website/?id=${id}`,
+          urlLoad: `${rootUrl}/website/?id=${id}`,
+        },
+      },
+    },
+
+    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: 'Go to your dashboard' },
+            link: '/',
+            command: 'open-dash',
+          }, {
+            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 fa-fw fa-diamond',
+            attributes: { title: 'Symbols', containerClassName: 'symbols-list-container', },
+            command: 'open-symbols',
+            buttons: [
+              {
+                id: 'symbol-create-button',
+                className: 'pages__add-page fa 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 fa-fw fa-list',
+            attributes: { title: 'Layers', containerClassName: 'layer-manager-container', },
+            command: 'open-layers',
+          }, {
+            id: 'font-dialog-btn',
+            className: 'font-manager-btn fa fa-fw fa-font',
+            attributes: { title: 'Fonts' },
+            command: cmdOpenFonts,
+          }, {
+            id: 'settings-dialog-btn',
+            className: 'page-panel-btn fa fa-fw fa-cog',
+            attributes: { title: 'Settings' },
+            command: cmdOpenSettings,
+          }, {
+            id: 'spacer',
+            attributes: {},
+            className: 'project-bar-spacer',
+          }, {
+            id: 'logout-button',
+            className: 'page-panel-btn fa fa-fw fa-sign-out',
+            attributes: { title: 'Sign out' },
+            command: 'relogin',
+          },
+        ],
+      },
+      [publishPlugin as any]: {
+        appendTo: 'options',
+        rootUrl,
+        id,
+      },
+      [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.log('Links errors:', errors),
+      },
+      [codePlugin as any]: {
+        blockLabel: 'HTML',
+        blockCustomCode: {
+          category: catComponents,
+        }
+      },
+      [symbolsPlugin as any]: {
+        appendTo: '.symbols-list-container',
+      },
+      [fontsDialogPlugin as any]: {
+        api_key: 'AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc',
+      },
+    },
+  }
+}
+
+// ////////////////////
+// Initialize editor
+// ////////////////////
+// Expose grapes for plugins
+// window['grapesjs'] = grapesjs
+
+// Keep a ref to the editor singleton
+let editor
+
+export function initEditor(config: EditorConfig) {
+  if(editor) throw new Error('Grapesjs editor already created')
+
+  editor = grapesjs.init(config)
+
+  // 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', () => {
+    // // move the options panel to the sidebar
+    // const optionsEl = editor.Panels.getPanel('options').view.el
+    // editor.Panels.getPanel('project-bar-panel').view.el
+    // .appendChild(options)
+    // options.style.width = 0
+    // options.style.position = 'static'
+    // remove blocks and layers buttons from the properties
+    setTimeout(() => {
+      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')
+    })
+
+    // use the style filter plugin
+    editor.StyleManager.addProperty('extra',{ extend: 'filter' })
+  })
+}
+
+export function getEditor() {
+  return editor
+}

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

@@ -0,0 +1,87 @@
+import { internalLinksPlugin } from './internal-links'
+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)
+})