@silexlabs/silex 3.0.0-alpha.97 → 3.0.0

package/src/ts/client/grapesjs/resize-panel.ts

@@ -0,0 +1,20 @@
+export default function(editor) {
+  editor.Panels.addPanel({
+    id: 'viewsOptions',
+    buttons: [{
+      id: 'resize',
+      // icon for arrow left
+      className: 'viewsOptions__size-btn',
+      command: 'resize-panel',
+      attributes: { title: 'Resize panel' },
+    }],
+  })
+  editor.Commands.add('resize-panel', {
+    run: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsPanelWidth', '40%')
+    },
+    stop: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsPanelWidth', '20%')
+    },
+  })
+}

package/src/ts/client/grapesjs/rich-text.ts

@@ -15,19 +15,27 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import { RichTextEditorAction } from 'grapesjs'
 
 const pluginName = 'richText'
 
-export const richTextPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
-  editor.RichTextEditor.add('orderedList', {
-    icon: '1.',
-    attributes: {title: 'Ordered List'},
-    result: rte => rte.exec('insertOrderedList'),
-  })
-  editor.RichTextEditor.add('unorderedList', {
-    icon: '<i class="fa fa-list-ul"></i>',
-    attributes: {title: 'Unordered List'},
-    result: rte => rte.exec('insertUnorderedList'),
-  })
-})
+export const orderedList: RichTextEditorAction = {
+  name: 'orderedList',
+  icon: '1.',
+  attributes: { title: 'Ordered List' },
+  result: rte => rte.exec('insertOrderedList'),
+}
+
+export const unorderedList: RichTextEditorAction = {
+  name: 'unorderedList',
+  icon: '•',
+  //icon: '<i class="fa fa-list-ul"></i>',
+  attributes: { title: 'Unordered List' },
+  result: rte => rte.exec('insertUnorderedList'),
+}
+
+export const richTextPlugin = (editor, opts) => {
+  // This doesn't work, it is now added in the editor config
+  //editor.RichTextEditor.add('orderedList', orderedList)
+  //editor.RichTextEditor.add('unorderedList', unorderedList)
+}

package/src/ts/client/grapesjs/semantic.ts

@@ -17,7 +17,6 @@
 
 import {html, render} from 'lit-html'
 import {map} from 'lit-html/directives/map.js'
-import grapesjs from 'grapesjs/dist/grapes.min.js'
 
 // constants
 const pluginName = 'semantic'
@@ -48,7 +47,7 @@ const tags = [
 ]
 
 // plugin code
-export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+export const semanticPlugin = (editor, opts) => {
   // Add the new trait to all component types
   editor.DomComponents.getTypes().map(type => {
     editor.DomComponents.addType(type.id, {
@@ -61,6 +60,7 @@ export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =>
             {
               label: 'Tag name',
               type: 'tag-name',
+              name: 'tag-name',
             },
           ]
         }
@@ -111,4 +111,4 @@ export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =>
       doRender(elInput, tagName)
     },
   })
-})
+}

package/src/ts/client/grapesjs/settings-sections.ts

@@ -0,0 +1,117 @@
+import {live} from 'lit-html/directives/live.js'
+import {html} from 'lit-html'
+import { WebsiteSettings } from '../../types'
+
+// ID of the code editor wrapper
+export const idCodeWrapper = 'settings-head-wrapper'
+
+// Is the model a site or a page?
+export function isSite(model) { return !!model.getHtml }
+
+export interface SettingsSection {
+  id: string
+  label: string
+  render: (settings: WebsiteSettings, model) => any
+}
+
+/**
+ * This is the settings dialog default sections
+ * Each section has an entry in the sidebar
+ * Each section render as part of the settings form
+ * The form is submitted to save the settings with all FormData
+ */
+export const defaultSections: SettingsSection[] = [{
+  id: 'general',
+  label: 'General',
+  render: (settings, model) => html`
+    <div id="settings-general" class="silex-hideable">
+      <div class="gjs-sm-sector-title">General</div>
+      <div class="silex-form__group col2">
+        <label class="silex-form__element">
+          <h3>${isSite(model) ? 'Site name' : 'Page name'}</h3>
+          <p class="silex-help">${isSite(model) ? 'The project name in the editor, for you to remember what it is about.' : 'Label of the page in the editor, and file name of the published HTML page.'}</p>
+          <input type="text" name="name" .value=${live(model.get('name') || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Website language</h3>
+          <p class="silex-help">This is the default language code for this website. Example: en, fr, es...</p>
+          <input type="text" name="lang" .value=${live(settings.lang || '')}/>
+        </label>
+      </div>
+    </div>
+  `,
+}, {
+  id: 'seo',
+  label: 'SEO',
+  render: (settings, model) => html`
+    <div id="settings-seo" class="silex-hideable silex-hidden">
+      <div class="gjs-sm-sector-title">SEO</div>
+      <div class="silex-form__group col2">
+        <label class="silex-form__element">
+          <h3>Title</h3>
+          <p class="silex-help">Title of the browser window, and title in the search engines results. It is used by search engines to find out what your site is talking about. The title should be a maximum of 70 characters long, including spaces.</p>
+          <input type="text" name="title" .value=${live(settings.title || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Description</h3>
+          <p class="silex-help">Description displayed by the search engines in search results. It is used by search engines to find out what your site is talking about. It is best to keep meta descriptions between 150 and 160 characters.</p>
+          <input type="text" name="description" .value=${live(settings.description || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Favicon</h3>
+          <p class="silex-help">Small image displayed in the browser's address bar and in tabs. The recommended size is 16×16 or 32×32 pixels. This can be a URL or a relative path.</p>
+          <input type="text" name="favicon" .value=${live(settings.favicon || '')}/>
+        </label>
+      </div>
+    </div>
+  `,
+}, {
+  id: 'social',
+  label: 'Social',
+  render: (settings, model) => html`
+    <div id="settings-social" class="silex-hideable silex-hidden">
+      <div class="gjs-sm-sector-title">Social</div>
+      <div class="silex-help">
+        <p>Once your website is live, you can use these tools to test sharing:&nbsp;<a target="_blank" href="https://developers.facebook.com/tools/debug/">Facebook</a>,
+        <a target="_blank" href="https://cards-dev.twitter.com/validator">Twitter</a>,
+        <a target="_blank" href="https://www.linkedin.com/post-inspector/inspect/">Linkedin</a></p>
+      </div>
+      <div class="silex-form__group col2">
+        <label class="silex-form__element">
+          <h3>Title</h3>
+          <p class="silex-help">The title of your website displayed when a user shares your website on a social network.
+        Do not include any branding in this title, just eye-catching phrase, e.g. "Learn everything about fishing".
+        Title should be between 60 and 90 characters long.</p>
+          <input type="text" name="og:title" .value=${live(settings['og:title'] || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Description</h3>
+          <p class="silex-help">Description displayed when a user shares your website on a social network. Make it catchy, and invite readers to visit your website too, e.g. "Sam's website about fishing, check it out!" Title should be between 60 and 90 characters long.</p>
+          <input type="text" name="og:description" .value=${live(settings['og:description'] || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Image</h3>
+          <div class="silex-help">
+            <p>Thumbnail image which is displayed when your website is shared on a social network. The optimal size is 1200×627 pixels. At this size, your thumbnail will be big and stand out from the crowd. But do not exceed the 5MB size limit. If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail.</p>
+            <p>Please enter the full URL here, e.g. "http://mysite.com/path/to/image.jpg"</p>
+          </div>
+          <input type="text" name="og:image" .value=${live(settings['og:image'] || '')}/>
+        </label>
+      </div>
+    </div>
+  `,
+}, {
+  id: 'code',
+  label: 'Code',
+  render: (settings, model) => html`
+    <div id="settings-code" class="silex-hideable silex-hidden">
+      <div class="gjs-sm-sector-title">Code</div>
+      <div class="silex-form__group">
+        <label class="silex-form__element" id="${idCodeWrapper}">
+          <h3>HTML head</h3>
+          <p class="silex-help">HTML code which will be inserted in the HEAD tag.</p>
+        </label>
+      </div>
+    </div>
+  `,
+}]

package/src/ts/client/grapesjs/settings.ts

@@ -16,12 +16,18 @@
  */
 
 import {html, render} from 'lit-html'
-import {live} from 'lit-html/directives/live.js'
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import {defaultSections, idCodeWrapper, isSite} from './settings-sections'
+
+/**
+ * @fileoverview This file contains the settings dialog. The config API lets plugins add sections to the settings dialog.
+ */
 
 import { WebsiteSettings } from '../../types'
+import { ClientEvent } from '../events'
+
+const sectionsSite = [...defaultSections]
+const sectionsPage = [...defaultSections]
 
-const pluginName = 'settings-dialog'
 const el = document.createElement('div')
 let modal
 
@@ -31,7 +37,8 @@ declare const VERSION: string
 export const cmdOpenSettings = 'open-settings'
 
 let version = 'v3'
-export const settingsDialog = grapesjs.plugins.add(pluginName, (editor, opts) => {
+let headEditor = null
+export const settingsDialog = (editor, opts) => {
   // Display Silex version from package.json
   try {
     version = VERSION
@@ -47,7 +54,7 @@ export const settingsDialog = grapesjs.plugins.add(pluginName, (editor, opts) =>
         attributes: { class: 'settings-dialog' },
       })
         .onceClose(() => {
-          sender.set('active', 0) // Deactivate the button to make it ready to be clicked again
+          sender?.set && sender.set('active', 0) // Deactivate the button to make it ready to be clicked again, only in case of a grapesjs button (not in the pages panel)
           editor.stopCommand(cmdOpenSettings) // apparently this is needed to be able to run the command several times
         })
       displaySettings(editor, opts, page)
@@ -55,14 +62,20 @@ export const settingsDialog = grapesjs.plugins.add(pluginName, (editor, opts) =>
       const form = el.querySelector('form')
       form.onsubmit = event => {
         event.preventDefault()
+        editor.trigger(ClientEvent.SETTINGS_SAVE_START, page)
         saveSettings(editor, opts, page)
+        editor.trigger(ClientEvent.SETTINGS_SAVE_END, page)
         editor.stopCommand(cmdOpenSettings)
       }
       form.querySelector('input')?.focus()
+      // Notify other plugins
+      editor.trigger(ClientEvent.SETTINGS_OPEN, page)
+      // Return the dialog
       return modal
     },
     stop: () => {
       modal.close()
+      editor.trigger(ClientEvent.SETTINGS_CLOSE)
     },
   })
   // add settings to the website
@@ -74,93 +87,117 @@ export const settingsDialog = grapesjs.plugins.add(pluginName, (editor, opts) =>
     const model = editor.getModel()
     model.set('settings', data.settings || {})
     model.set('name', data.name)
-    updateDom(editor)
   })
-  editor.on('page', (e) => {
-    editor.Canvas.getFrameEl().addEventListener('load', () => {
+  // On chrome this is needed to apply the head content to the DOM
+  editor.on('storage:end:load', () => {
+    setTimeout(() => {
       updateDom(editor)
     })
   })
-})
+  // Normal way to apply the head content to the DOM
+  // fix #1559 Custom <head> code must be reapplied
+  editor.on('canvas:frame:load', () => {
+    updateDom(editor)
+  })
+  // When the page changes, update the dom
+  editor.on('page', (e) => {
+    updateDom(editor)
+  })
+  headEditor = editor.CodeManager.createViewer({
+    readOnly: false,
+    codeName: 'htmlmixed',
+    lineNumbers: true,
+    lineWrapping: true,
+    autoFormat: false,
+  })
+}
+
+export function addSection(section, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number) {
+  const sections = siteOrPage === 'site' ? sectionsSite : sectionsPage
+  if (position === 'first') {
+    sections.unshift(section)
+  } else if (position === 'last') {
+    sections.push(section)
+  } else if (typeof position === 'number') {
+    sections.splice(position, 0, section)
+  } else {
+    throw new Error('Invalid position for settings section')
+  }
+}
+
+export function removeSection(id, siteOrPage: 'site' | 'page') {
+  const sections = siteOrPage === 'site' ? sectionsSite : sectionsPage
+  const index = sections.findIndex(section => section.id === id)
+  if(index === -1) throw new Error(`Cannot find section with id ${id}`)
+  sections.splice(index, 1)
+}
 
-// Is the model a site or a page?
-function isSite(model) { return !!model.getHtml }
 
 function displaySettings(editor, config, model = editor.getModel()) {
+  // Update the model with the current settings
   const settings = model.get('settings') || {} as WebsiteSettings
   model.set('settings', settings)
+  // Get the current sections for page or site
+  const menuItemsCurrent = isSite(model) ? sectionsSite : sectionsPage
+  // Init the current section selection
+  let sections = menuItemsCurrent[0]
   render(html`
-    <p>The page settings will override site settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
     <form class="silex-form">
-      <h2>General settings</h2>
-      <div class="silex-form__group col2">
-        <label class="silex-form__element">
-          <h3>${isSite(model) ? 'Site name' : 'Page name'}</h3>
-          <p>${isSite(model) ? 'The project name in the editor, for you and your team.' : 'Label of the page in the editor, and file name of the HTML page.'}</p>
-          <input type="text" name="name" .value=${live(model.get('name') || '')}/>
-        </label>
-        <label class="silex-form__element">
-          <h3>Website language</h3>
-          <p>This is the default language code for this website. Example: en, fr, es...</p>
-          <input type="text" name="lang" .value=${live(settings.lang || '')}/>
-        </label>
-        <label class="silex-form__element">
-          <h3>Title</h3>
-          <p>Title of the browser window, and title in the search engines results. It is used by search engines to find out what your site is talking about. The title should be a maximum of 70 characters long, including spaces.</p>
-          <input type="text" name="title" .value=${live(settings.title || '')}/>
-        </label>
-        <label class="silex-form__element">
-          <h3>Description</h3>
-          <p>Description displayed by the search engines in search results. It is used by search engines to find out what your site is talking about. It is best to keep meta descriptions between 150 and 160 characters.</p>
-          <input type="text" name="description" .value=${live(settings.description || '')}/>
-        </label>
-        <label class="silex-form__element">
-          <h3>Favicon</h3>
-          <p>Small image displayed in the browser's address bar and in tabs. The recommended size is 16×16 or 32×32 pixels. This can be a URL or a relative path.</p>
-          <input type="text" name="favicon" .value=${live(settings.favicon || '')}/>
-        </label>
-      </div>
-      <h2>Social networks sharing</h2>
-      <div>
-        <p>Once your website is live, you can use these tools to test sharing:&nbsp;<a target="_blank" href="https://developers.facebook.com/tools/debug/">Facebook</a>,
-        <a target="_blank" href="https://cards-dev.twitter.com/validator">Twitter</a>,
-        <a target="_blank" href="https://www.linkedin.com/post-inspector/inspect/">Linkedin</a></p>
-      </div>
-      <div class="silex-form__group col2">
-        <label class="silex-form__element">
-          <h3>Title</h3>
-          <p>The title of your website displayed when a user shares your website on a social network.
-        Do not include any branding in this title, just eye-catching phrase, e.g. "Learn everything about fishing".
-        Title should be between 60 and 90 characters long.</p>
-          <input type="text" name="og:title" .value=${live(settings['og:title'] || '')}/>
-        </label>
-        <label class="silex-form__element">
-          <h3>Description</h3>
-          <p>Description displayed when a user shares your website on a social network. Make it catchy, and invite readers to visit your website too, e.g. "Sam's website about fishing, check it out!" Title should be between 60 and 90 characters long.</p>
-          <input type="text" name="og:description" .value=${live(settings['og:description'] || '')}/>
-        </label>
-        <label class="silex-form__element">
-          <h3>Image</h3>
-          <p>Thumbnail image which is displayed when your website is shared on a social network. The optimal size is 1200×627 pixels. At this size, your thumbnail will be big and stand out from the crowd. But do not exceed the 5MB size limit. If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail.</p>
-          <p>Please enter the full URL here, e.g. "http://mysite.com/path/to/image.jpg"</p>
-          <input type="text" name="og:image" .value=${live(settings['og:image'] || '')}/>
-        </label>
-      </div>
-      <h2>Code</h2>
-      <div class="silex-form__group">
-        <label class="silex-form__element">
-          <h3>HTML head</h3>
-          <p>HTML code which will be inserted in the HEAD tag.</p>
-          <textarea name="head" .value=${live(settings.head || '')}></textarea>
-        </label>
+      <div class="silex-help">
+        ${isSite(model) ? html`
+          <p>Here you can set the name of your website, SEO and social networks sharing data.</p>
+          <p>These settings are overriden by the page settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
+        ` : html`
+          <p>Here you can set the name of your page, SEO and social networks sharing data.</p>
+          <p>These settings override the site settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
+        `}
       </div>
+      <section class="silex-sidebar-dialog">
+        <aside class="silex-bar">
+          <ul class="silex-list silex-list--menu">
+            ${menuItemsCurrent.map(item => html`
+              <li
+                class=${item.id === sections.id ? 'active' : ''}
+                @click=${e => {
+    e.preventDefault()
+    sections = item
+    const li = e.target as HTMLElement
+    const ul = li.closest('ul')
+    const section = li.closest('section')
+    const mainItem = section.querySelector(`#settings-${item.id}`)
+    // Update active
+    Array.from(ul.querySelectorAll('.active')).forEach(el => el.classList.remove('active'))
+    li.classList.add('active')
+    // Update hidden
+    Array.from(section.querySelectorAll('.silex-hideable')).forEach(el => el.classList.add('silex-hidden'))
+    mainItem.classList.remove('silex-hidden')
+    // This messes up with the save / cancel mechanism
+    // displaySettings(editor, config, model)
+    // Refresh the code editor just in case it went from hidden to visible
+    // This makes it ready to be used when the user clicks on the tab
+    headEditor.refresh()
+    // Notify other plugins
+    editor.trigger(ClientEvent.SETTINGS_SECTION_CHANGE, item.id)
+  }}
+              >
+                ${item.label}
+              </li>
+            `)}
+          </ul>
+        </aside>
+        <main>
+            ${menuItemsCurrent.map(item => item.render(settings, model))}
+        </main>
+      </section>
       <footer>
         <p class="silex-version">Silex ${version}</p>
         <input class="silex-button" type="button" @click=${e => editor.stopCommand(cmdOpenSettings)} value="Cancel">
-        <input class="silex-button" type="submit" value="Ok">
+        <input class="silex-button" type="submit" value="Apply">
       </footer>
     </form>
   `, el)
+  el.querySelector(`#${idCodeWrapper}`)?.appendChild(headEditor.getElement())
+  headEditor.setContent(settings.head || '')
 }
 
 function saveSettings(editor, config, model = editor.getModel()) {
@@ -168,13 +205,19 @@ function saveSettings(editor, config, model = editor.getModel()) {
   const formData = new FormData(form)
   const data = Array.from(formData as any)
     .reduce((aggregate, [key, value]) => {
-      aggregate[key] = value
+      // Keep only the values that are set
+      if(value !== '') {
+        aggregate[key] = value
+      }
       return aggregate
     }, {}) as {[key: string]: any}
-    // take the name out to the main model (by design in grapesjs pages)
+  // take the name out to the main model (by design in grapesjs pages)
   const { name, ...settings } = data
   model.set({
-    settings,
+    settings: {
+      ...data,
+      head: headEditor.getContent(),
+    },
     name,
   })
   // save if auto save is on

package/src/ts/client/grapesjs/symbolDialogs.ts

@@ -15,12 +15,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
 import { cmdAddSymbol } from '@silexlabs/grapesjs-symbols'
 
 export const cmdPromptAddSymbol = 'symbol-prompt-add'
 
-export default grapesjs.plugins.add(name, (editor, opts) => {
+export default (editor, opts) => {
   function getNext(prefix) {
     let idx = 1
     while(editor.Symbols.find(s => s.get('label') === prefix + idx)) {
@@ -35,4 +34,4 @@ export default grapesjs.plugins.add(name, (editor, opts) => {
       editor.runCommand(cmdAddSymbol, { label, icon })
     }
   })
-})
+}

package/src/ts/client/grapesjs/view-buttons.ts

@@ -0,0 +1,42 @@
+/*
+ * 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/>.
+ *
+ */
+
+const pasteBtnClass = 'fa fa-fw fa-paste silex-button'
+const disabledClass = ' disabled'
+
+export default function(editor) {
+  // Add copy/paste buttons in the top bar
+  const [copyBtn, pasteBtn] = editor.Panels.addButton('options', [{
+    id: 'copy',
+    className: 'fa fa-fw fa-copy',
+    command: 'core:copy',
+    attributes: { title: 'Copy (Ctrl+C)' },
+  }, {
+    id: 'paste',
+    className: pasteBtnClass + disabledClass,
+    command: 'core:paste',
+    attributes: { title: 'Paste (Ctrl+V)' },
+    active: false,
+  }])
+
+  // Disable paste button if clipboard is empty
+  editor.EditorModel.on('change:clipboard', (model, value) => {
+    const hasClipboard = value && value.length > 0
+    pasteBtn.set('className', pasteBtnClass + (hasClipboard ? '' : disabledClass))
+  })
+}

package/src/ts/client/index.ts

@@ -21,7 +21,6 @@
  *
  */
 
-import { assetsPublicationTransformer } from './assetUrl'
 import { ClientConfig } from './config'
 import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'
@@ -29,16 +28,18 @@ import { initEditor, getEditor } from './grapesjs/index'
 // Expose API to calling app as window.silex
 export * from './expose'
 
+/**
+ * Expose the config object
+ */
+export let config: ClientConfig
+
 /**
  * Start Silex, called from host HTML page with window.silex.start()
  */
-export async function start(options = {}) {
-  const config = new ClientConfig()
+export async function start(options = {}): Promise<void> {
+  config = new ClientConfig()
   Object.assign(config, options)
 
-  // Add the publication transformers which are used to cleanup assets URLs
-  config.addPublicationTransformers(assetsPublicationTransformer)
-
   // Config file in root folder which may be generated by the server
   await config.addPlugin(config.clientConfigUrl, {})
 
@@ -54,6 +55,7 @@ export async function start(options = {}) {
   config.initGrapesConfig()
 
   // Start grapesjs
+  // Here you can change the config before passing it to grapesjs
   config.emit(ClientEvent.GRAPESJS_START)
   try{
     await initEditor(config.grapesJsConfig)
@@ -73,6 +75,9 @@ export async function start(options = {}) {
   // Init internationalization module
   editor.I18n.setLocale(config.lang)
 
+  // Add default plugins
+  await config.addDefaultPlugins()
+
   // Load the site
   editor.StorageManager.setAutosave(false)
   try {
@@ -94,5 +99,7 @@ export async function start(options = {}) {
       document.querySelector('#gjs').classList.remove('silex-dialog-hide')
       config.emit(ClientEvent.STARTUP_END, { editor, config })
     }, 100)
+    const um = editor.UndoManager
+    um.clear()
   }
 }

package/src/ts/client/publication-transformers.test.ts

@@ -10,7 +10,7 @@ import {
   transformBgImage
 } from './publication-transformers'
 import { ClientConfig } from './config'
-import GrapesJS, { Component, Editor, ObjectStrings, Page } from 'grapesjs'
+import grapesjs, { Component, Editor, ObjectStrings, Page } from 'grapesjs'
 import { ClientSideFile, ClientSideFileType, PublicationData } from '../types'
 
 describe('publication-transformers', () => {
@@ -23,7 +23,8 @@ describe('publication-transformers', () => {
 
   beforeEach(() => {
     // Initialize your mocks here
-    editor = GrapesJS.init({
+    /* @ts-ignore */
+    editor = grapesjs.init({
       headless: true,
       storageManager: { autoload: false },
     })
@@ -136,13 +137,20 @@ describe('publication-transformers', () => {
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
   })
+
   it('should transform a style rule with background image', () => {
     expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': 'url(test.png)' })
     const transformPermalink = transformer.transformPermalink as Mock
     const transformedSrc = 'transformed.png'
-    transformPermalink.mockImplementation((url, type) => (url as string).replace('test.png', transformedSrc))
-    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': 'url(transformed.png)' })
-    expect(transformBgImage(editor, { 'background-image': 'url("test.png")' })).toEqual({ 'background-image': 'url(transformed.png)' })
+    const transformedSrc2 = 'transformed2.png'
+    transformPermalink.mockImplementation((url, type) => (url as string).replace('test.png', transformedSrc).replace('test2.png', transformedSrc2))
+    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': `url(${transformedSrc})` })
+    expect(transformBgImage(editor, { 'background-image': 'url("test.png")' })).toEqual({ 'background-image': `url(${transformedSrc})` })
+    expect(transformBgImage(editor, {
+      'background-image': 'linear-gradient(to right, rgb(30 75 115 / 100%), url(test.png), linear-gradient(to left, rgb(30 75 115 / 10%), url(test2.png), rgb(255 255 255 / 0%));',
+    })).toEqual({
+      'background-image': `linear-gradient(to right, rgb(30 75 115 / 100%), url(${transformedSrc}), linear-gradient(to left, rgb(30 75 115 / 10%), url(${transformedSrc2}), rgb(255 255 255 / 0%));`,
+    })
   })
 
   it('should transform permalinks of background images in inline css', () => {