@silexlabs/silex 3.0.0-alpha.97 → 3.0.0

package/src/ts/client/grapesjs/img.ts

@@ -0,0 +1,147 @@
+/*
+ * 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 { Editor } from 'grapesjs'
+
+/**
+ * @fileoverview This plugin adds CSS properties object-fit and object-position to the image component.
+ */
+
+export default (editor: Editor, opts) => {
+  opts = {
+    // Default options
+    labelSrc: 'Image URL',
+    placeholderSrc: 'https://example.com/image.jpg',
+    // These default values will never be used,
+    // as there is default values in config
+    replacedElements: ['img'],
+    // Override with provided config
+    ...opts,
+  }
+  // Add src trait in the properties
+  editor.TraitManager.addType('src', {
+    events: {
+      'change': 'onChange',
+    },
+    templateInput() {
+      return `
+        <div class="gjs-field gjs-field-trad">
+          <label class="gjs-label">${opts.labelSrc}</label>
+          <input type="text" class="gjs-field" placeholder="${opts.placeholderSrc}" />
+        </div>
+      `
+    },
+    getInputEl() {
+      if (!this.inputEl) {
+        this.inputEl = this.templateInput()
+      }
+      return this.inputEl
+    },
+    onValueChange() {
+      this.setValue(this.getInputEl().value)
+    },
+    setValue(value) {
+      this.getInputEl().value = value
+    },
+    getValue() {
+      return this.getInputEl().value
+    },
+  })
+
+  // Add the trait to the image component
+  editor.DomComponents.addType('image', {
+    model: {
+      defaults: {
+        ...editor.DomComponents.getType('image').model.prototype.defaults,
+        traits: [
+          ...editor.DomComponents.getType('image').model.prototype.defaults.traits
+          // Remove href and tagName trait becase images have to keep the img tag, not become links
+          // Remove tag-name trait which is added by the semantic plugin
+          // Also remove src trait in case it exists already
+            .filter((trait) => !['href', 'tag-name', 'src'].includes(trait.name)),
+          'src',
+        ],
+      },
+    },
+  })
+
+  // Wait for the editor to be ready
+  editor.on('load', () => {
+    // Add a sector to the style manager
+    const sector = editor.StyleManager.addSector('object', {
+      name: 'Object',
+      open: false,
+      properties: [{
+        label: 'object-fit',
+        property: 'object-fit',
+        type: 'select',
+        default: '',
+        /* @ts-ignore */
+        options: [
+          { id: '', label: '' },
+          { id: 'fill', label: 'fill' },
+          { id: 'contain', label: 'contain' },
+          { id: 'cover', label: 'cover' },
+          { id: 'none', label: 'none' },
+          { id: 'scale-down', label: 'scale-down' },
+          { id: 'initial', label: 'initial' },
+          { id: 'inherit', label: 'inherit' },
+          { id: 'auto', label: 'auto' },
+        ],
+      }, {
+        label: 'object-position',
+        property: 'object-position',
+        type: 'select',
+        default: '',
+        /* @ts-ignore */
+        options: [
+          { id: '', label: '' },
+          { id: 'left top', label: 'left top' },
+          { id: 'left center', label: 'left center' },
+          { id: 'left bottom', label: 'left bottom' },
+          { id: 'right top', label: 'right top' },
+          { id: 'right center', label: 'right center' },
+          { id: 'right bottom', label: 'right bottom' },
+          { id: 'center top', label: 'center top' },
+          { id: 'center center', label: 'center center' },
+          { id: 'center bottom', label: 'center bottom' },
+          { id: 'initial', label: 'initial' },
+          { id: 'inherit', label: 'inherit' },
+          { id: 'unset', label: 'unset' },
+        ],
+      }],
+    }, {
+      at: 1,
+    })
+    let showSector = false
+    // It shows up when the selection is an image
+    editor.on('component:selected', (model) => {
+      if (model && opts.replacedElements.includes(model.get('tagName')?.toLowerCase())) {
+        // Not necessary, grapesjs does it automatically
+        // sector.set('visible', true);
+        showSector = true
+      } else {
+        showSector = false
+        sector.set('visible', false)
+      }
+    })
+    // Watch automatic changes and revert them if needed
+    sector.on('change:visible', (model, open) => {
+      if(sector.get('visible') !== showSector) sector.set('visible', showSector)
+    })
+  })
+}

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

@@ -31,6 +31,7 @@ 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 filterStyles from '@silexlabs/grapesjs-filter-styles'
 import symbolsPlugin from '@silexlabs/grapesjs-symbols'
 import loadingPlugin from '@silexlabs/grapesjs-loading'
 import fontsDialogPlugin, { cmdOpenFonts } from '@silexlabs/grapesjs-fonts'
@@ -38,7 +39,12 @@ import symbolDialogsPlugin, { cmdPromptAddSymbol } from './symbolDialogs'
 import loginDialogPlugin, { LoginDialogOptions, cmdLogout } from './LoginDialog'
 import footerPlugin from './footer'
 import breadcrumbsPlugin from './breadcrumbs'
+import imgPlugin from './img'
+import cssPropsPlugin from './css-props'
 import rateLimitPlugin from '@silexlabs/grapesjs-storage-rate-limit'
+import borderPugin from 'grapesjs-style-border'
+import backgroundPlugin from 'grapesjs-style-bg'
+import resizePanelPlugin from './resize-panel'
 
 import { pagePanelPlugin, cmdTogglePages, cmdAddPage } from './page-panel'
 import { newPageDialog, cmdOpenNewPageDialog } from './new-page-dialog'
@@ -46,21 +52,24 @@ import { projectBarPlugin } from './project-bar'
 import { settingsDialog, cmdOpenSettings } from './settings'
 import { blocksPlugin } from './blocks'
 import { semanticPlugin } from './semantic'
-import { richTextPlugin } from './rich-text'
+import { orderedList, richTextPlugin, unorderedList } from './rich-text'
 import { internalLinksPlugin } from './internal-links'
 import publicationManagerPlugin, { PublicationManagerOptions } from './PublicationManager'
+import ViewButtons from './view-buttons'
 import { storagePlugin } from './storage'
-import { ConnectorId, WebsiteId } from '../../types'
 import { API_PATH, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_PATH } from '../../constants'
+import { ClientConfig } from '../config'
 
 const plugins = [
   {name: './project-bar', value: projectBarPlugin}, // has to be before panels and dialogs
+  {name: 'grapesjs-style-bg', value: backgroundPlugin},
   {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: './view-buttons', value: ViewButtons},
   {name: './semantic', value: semanticPlugin},
   {name: './rich-text', value: richTextPlugin},
   {name: 'grapesjs-style-filter', value: styleFilterPlugin},
@@ -68,6 +77,7 @@ const plugins = [
   {name: 'grapesjs-custom-code', value: codePlugin},
   {name: './internal-links', value: internalLinksPlugin},
   {name: '@silexlabs/grapesjs-ui-suggest-classes', value: uiSuggestClasses},
+  {name: '@silexlabs/grapesjs-filter-styles', value: filterStyles},
   {name: './symbolDialogs', value: symbolDialogsPlugin},
   {name: '@silexlabs/grapesjs-symbols', value: symbolsPlugin},
   {name: './PublicationManager', value: publicationManagerPlugin},
@@ -75,8 +85,12 @@ const plugins = [
   {name: './LoginDialog', value: loginDialogPlugin},
   {name: '@silexlabs/grapesjs-loading', value: loadingPlugin},
   {name: './breadcrumbs', value: breadcrumbsPlugin},
+  {name: './img', value: imgPlugin},
+  {name: './css-props', value: cssPropsPlugin},
   {name: './footer', value: footerPlugin},
   {name: '@silexlabs/grapesjs-storage-rate-limit', value: rateLimitPlugin},
+  {name: 'grapesjs-style-border', value: borderPugin},
+  {name: './resize-panel', value: resizePanelPlugin}
 ]
 // Check that all plugins are loaded correctly
 plugins
@@ -99,7 +113,8 @@ const LIGHTER_PRIMARY_COLOR = '#575757'
 const catBasic = 'Containers'
 const catComponents = 'Components'
 
-export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl: string): EditorConfig {
+export function getEditorConfig(config: ClientConfig): EditorConfig {
+  const { websiteId, storageId, rootUrl } = config
   return {
     container: '#gjs',
     height: '100%',
@@ -117,7 +132,7 @@ export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl
     },
 
     assetManager: {
-      upload: `${rootUrl}${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSETS_WRITE}/?websiteId=${id}${ connectorId ? `&connectorId=${connectorId}` : ''}`,
+      upload: `${rootUrl}${API_PATH}${API_WEBSITE_PATH}${API_WEBSITE_ASSETS_WRITE}/?websiteId=${websiteId}${ storageId ? `&connectorId=${storageId}` : ''}`,
     },
 
     storageManager: {
@@ -125,8 +140,8 @@ export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl
       type: 'connector',
       options: {
         connector: {
-          id,
-          connectorId,
+          id: websiteId,
+          connectorId: storageId,
         },
       },
     },
@@ -150,15 +165,21 @@ export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl
       }
     `,
 
+    richTextEditor: {
+      // @ts-ignore
+      actions: ['bold', 'italic', 'underline', 'strikethrough', 'link', 'wrap', orderedList, unorderedList],
+    },
+
+
     plugins: plugins.map(p => p.value),
 
     pluginsOpts: {
-      [blocksBasicPlugin as any]: {
+      [blocksBasicPlugin.toString()]: {
         blocks: ['text', 'image', 'video', 'map'],
         category: catBasic,
         //flexGrid: true,
       },
-      [projectBarPlugin as any]: {
+      [projectBarPlugin.toString()]: {
         panels: [
           {
             id: 'dash',
@@ -238,45 +259,54 @@ export function getEditorConfig(id: WebsiteId, connectorId: ConnectorId, rootUrl
           },
         ],
       },
-      [publicationManagerPlugin as any]: {
+      [publicationManagerPlugin.toString()]: {
         appendTo: 'options',
-        websiteId: id,
+        websiteId,
       } as PublicationManagerOptions,
-      [pagePanelPlugin as any]: {
+      [pagePanelPlugin.toString()]: {
         cmdOpenNewPageDialog,
         cmdOpenSettings,
         appendTo: '.page-panel-container',
       },
-      [uiSuggestClasses as any]: {
+      [uiSuggestClasses.toString()]: {
         enableCount: false,
         enablePerformance: false,
       },
-      [internalLinksPlugin as any]: {
+      [filterStyles]: {
+        appendBefore: '.gjs-sm-sectors',
+      },
+      [internalLinksPlugin.toString()]: {
         // FIXME: warn the user about links in error
         onError: (errors) => console.warn('Links errors:', errors),
       },
-      [codePlugin as any]: {
+      [codePlugin.toString()]: {
         blockLabel: 'HTML',
         blockCustomCode: {
           category: catComponents,
-        }
+        },
+        codeViewOptions: {
+          autoFormat: false,
+        },
       },
-      [symbolsPlugin as any]: {
+      [symbolsPlugin.toString()]: {
         appendTo: '.symbols-list-container',
         emptyText: 'No symbol yet.',
         primaryColor: PRIMARY_COLOR,
         secondaryColor: SECONDARY_COLOR,
         highlightColor: TERTIARY_COLOR,
       },
-      [fontsDialogPlugin as any]: {
+      [fontsDialogPlugin.toString()]: {
         api_key: 'AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc',
       },
-      [loginDialogPlugin as any]: {
-        id,
+      [loginDialogPlugin.toString()]: {
+        id: websiteId,
       } as LoginDialogOptions,
-      [rateLimitPlugin as any]: {
+      [rateLimitPlugin.toString()]: {
         time: 5000,
       },
+      [imgPlugin.toString()]: {
+        replacedElements: config.replacedElements,
+      },
     },
   }
 }
@@ -290,6 +320,7 @@ export async function initEditor(config: EditorConfig) {
   if(editor) throw new Error('Grapesjs editor already created')
   return new Promise<Editor>((resolve, reject) => {
     try {
+      /* @ts-ignore */
       editor = grapesjs.init(config)
     } catch(e) {
       console.error('Error initializing GrapesJs with plugins:', plugins, e)
@@ -312,17 +343,24 @@ export async function initEditor(config: EditorConfig) {
       modalImportTitle: 'Import from website',
     }))
 
+    // Adjustments to do when the editor is ready
     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
+      const views = editor.Panels.getPanel('views')
+
+      // Remove blocks and layers buttons from the properties
+      // This is because in Silex they are on the left
+      views.buttons.remove('open-blocks')
+      views.buttons.remove('open-layers')
+
+      // Remove useless buttons
       editor.Panels.getPanel('options').buttons.remove('export-template')
+      editor.Panels.getPanel('options').buttons.remove('fullscreen')
 
+      // Render the block manager, otherwise it is empty
       editor.BlockManager.render(null)
 
       // use the style filter plugin
-      editor.StyleManager.addProperty('extra',{ extend: 'filter' })
+      editor.StyleManager.addProperty('extra', { extend: 'filter' })
 
       // GrapesJs editor is ready
       resolve(editor)

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

@@ -65,6 +65,7 @@ const page2 = {
   },
 }
 beforeEach(() => {
+  /* @ts-ignore */
   editor = grapesjs.init({
     headless: true,
     storageManager: { autoload: false },
@@ -81,7 +82,7 @@ test('init', () => {
 test('rename page and rewrite links in current page', () => {
   const page = editor.Pages.getSelected()
   expect(page.id).toBe(pageMain.id)
-  expect(page.getName()).toBeUndefined()
+  expect(page.getName()).toBe('')
   const newName = 'Home page'
   const newPath = './home-page.html'
   // Do not work: page.setName(newName)

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

@@ -56,7 +56,6 @@ export const internalLinksPlugin = (editor, opts) => {
       // 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)
         }

package/src/ts/client/grapesjs/new-page-dialog.ts

@@ -15,7 +15,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
 import {html, render} from 'lit-html'
 import {live} from 'lit-html/directives/live.js'
 
@@ -26,7 +25,7 @@ let modal
 
 export const cmdOpenNewPageDialog = 'new-page-dialog'
 
-export const newPageDialog = grapesjs.plugins.add(name, (editor, opts) => {
+export const newPageDialog = (editor, opts) => {
   editor.Commands.add(cmdOpenNewPageDialog, {
     run: (_, sender, {page}) => {
       modal = editor.Modal.open({
@@ -53,7 +52,7 @@ export const newPageDialog = grapesjs.plugins.add(name, (editor, opts) => {
       // el.innerHTML = ''
     },
   })
-})
+}
 
 function onImport(editor, page) {
   editor.Pages.select(page)

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

@@ -15,7 +15,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
 import {html, render} from 'lit-html'
 
 const pluginName = 'page-panel'
@@ -29,16 +28,41 @@ function selectPage(editor, page) {
 }
 function addPage(editor, config) {
   const pages = editor.Pages.getAll()
+  // Get a name
   let idx = 1
   const newPageName = config.newPageName || 'New page'
   let pageName = newPageName
   while(pages.find(p => p.getName() === pageName)) {
     pageName = `${newPageName} ${idx++}`
   }
+  // Add page
   const page = editor.Pages.add({ name: pageName })
+  // Select the new page
+  editor.Pages.select(page)
+  // Open page settings to edit the name
   editor.runCommand(config.cmdOpenNewPageDialog, {page})
 }
 
+function clonePage(editor, page) {
+  const pages = editor.Pages.getAll()
+  // Get a name
+  let idx = 1
+  const newPageName = (page.getName() || 'main') + ' copy'
+  let pageName = newPageName
+  while(pages.find(p => p.getName() === pageName)) {
+    pageName = `${newPageName} ${idx++}`
+  }
+  // Clone components
+  const body = page.getMainComponent().clone()
+  // Add page
+  const newPage = editor.Pages.add({
+    name: pageName,
+    component: body,
+  })
+  // Select the new page
+  editor.Pages.select(newPage)
+}
+
 function removePage(editor, page) {
   if(editor.Pages.getAll().length === 1) {
     console.error('can not delete the only page')
@@ -76,6 +100,7 @@ function renderPages(editor, config) {
                ${ name }
              </div>
              <i class="pages__icon pages__remove-btn fa fa-trash" @click=${e => removePage(editor, getPageFromEvent(e))}></i>
+             <i class="pages__icon pages__clone-btn fa fa-clone" @click=${e => clonePage(editor, getPageFromEvent(e))}></i>
              <i class="pages__icon fa fa-cog" @click=${e => settingsPage(editor, config, getPageFromEvent(e))}></i>
            </div>
           </div>
@@ -89,7 +114,7 @@ function renderPages(editor, config) {
     </main></section>`
 }
 
-export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+export const pagePanelPlugin = (editor, opts) => {
   // create wrapper
   const el = document.createElement('div')
   el.classList.add('pages__wrapper')
@@ -114,5 +139,5 @@ export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =
     // add command to add pages
     editor.Commands.add(cmdAddPage, () => addPage(editor, opts))
   })
-})
+}
 

package/src/ts/client/grapesjs/project-bar.ts

@@ -15,11 +15,27 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Editor, Panel } from 'grapesjs'
 import {html, render} from 'lit-html'
 
 const panelId = 'project-bar-panel'
 const containerPanelId = 'project-bar-container'
 
+export interface PanelObject {
+  command: string | ((editor: Editor) => void)
+  text: string
+  className: string
+  attributes: {
+    title?: string
+    containerClassName?: string
+  }
+  buttons?: {
+    command: string
+    text: string
+    className: string
+  }[]
+}
+
 export const projectBarPlugin = (editor, opts) => {
   // create the panels container for all panels in grapesjs
   const containerPanel = editor.Panels.addPanel({
@@ -32,76 +48,79 @@ export const projectBarPlugin = (editor, opts) => {
     buttons: opts.panels,
     visible  : true,
   })
-  const panelsEl = opts.panels.map(panel => {
-    const el = document.createElement('div')
+  // add the panels to the container
+  opts.panels.map(panel => addButton(editor, panel))
 
-    // create container for panel
-    if(panel.attributes.containerClassName) {
-      el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden')
+  // Handle the preview mode which behaves oddly
+  editor.on('stop:preview', () => {
+    containerPanel.set('visible', false)
+    updateSqueez(editor)
+  })
 
-      // add header
-      if(panel.attributes.title) {
-        render(html`
-          <header class="project-bar__panel-header">
-            <h3 class="project-bar__panel-header-title">${ panel.attributes.title }</h3>
-            ${ panel.buttons?.map(button => {
-    return html`
-                <div
-                  class="project-bar__panel-header-button ${ button.className }"
-                  @click=${e => editor.runCommand(button.command)}
-                ><span>${ button.text }</span></div>
-              `
-  }) }
-          </header>
-        `, el)
-      }
+  // All other events where the canvas is resized
+  editor.on('load device:select page', () => {
+    updateSqueez(editor)
+  })
+}
 
-      // temporarily attach it to the body
-      // this lets the block manager and other plugins attach to their container
-      document.body.appendChild(el)
+function updateSqueez(editor: Editor) {
+  const containerPanel = editor.Panels.getPanel(containerPanelId)
+  // make sure the squeez corresponds to the state (reset when change page)
+  if(containerPanel.get('visible')) document.body.classList.add('silex-squeeze-left')
+  else document.body.classList.remove('silex-squeeze-left')
+  editor.refresh()
+}
 
-      // on load attach the panels to the main container
-      // this is when the main containerPanel has an element
-      editor.on('load', () => {
-        const containerPanelEl = containerPanel.view.el
-        containerPanelEl.appendChild(el)
-      })
+export function addButton(editor: Editor, panel: PanelObject) {
+  const containerPanel = editor.Panels.getPanel(containerPanelId)
+  const el = document.createElement('div')
+  // create container for panel
+  if(panel.attributes.containerClassName) {
+    el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden')
+    // add header
+    if(panel.attributes.title) {
+      render(html`
+        <header class="project-bar__panel-header">
+          <h3 class="project-bar__panel-header-title">${ panel.attributes.title }</h3>
+          ${ panel.buttons?.map(button => {
+    return html`
+              <div
+                class="project-bar__panel-header-button ${ button.className }"
+                @click=${e => editor.runCommand(button.command)}
+              ><span>${ button.text }</span></div>
+            `
+  }) }
+        </header>
+      `, el)
     }
-
-    // commands for show / hide panels
-    // handle the case where command is a normal command, then let the Panel handle it
-    typeof panel.command === 'string' && editor.Commands.add(panel.command, {
-      run() {
-        if(panel.attributes.containerClassName) {
-          containerPanel.set('visible', true)
-          el.classList.remove('gjs-hidden')
-          editor.Canvas.getFrameEl().classList.add('silex-squeeze-left')
-        }
-      },
-      stop() {
-        if(panel.attributes.containerClassName) {
-          containerPanel.set('visible', false)
-          el.classList.add('gjs-hidden')
-          editor.Canvas.getFrameEl().classList.remove('silex-squeeze-left')
-        }
-      },
+    // temporarily attach it to the body
+    // this lets the block manager and other plugins attach to their container
+    document.body.appendChild(el)
+    // on load attach the panels to the main container
+    // this is when the main containerPanel has an element
+    editor.on('load', () => {
+      const containerPanelEl = containerPanel.view.el
+      containerPanelEl.appendChild(el)
     })
-  })
-  function updateSqueez() {
-    const containerPanelEl = containerPanel.view.el
-    const iframe = editor.Canvas.getFrameEl()
-    iframe.classList.remove('enable-squeeze')
-    setTimeout(() => {
-      const left = iframe.getClientRects()[0]?.left
-      const right = containerPanelEl.getClientRects()[0]?.right
-      if(left < right || !right) iframe.classList.add('enable-squeeze')
-      else iframe.classList.remove('enable-squeeze')
-    }, 400) // More than the transition duration
-    // make sure the squeez corresponds to the state (reset when change page)
-    if(containerPanel.get('visible')) iframe.classList.add('silex-squeeze-left')
-    else iframe.classList.remove('silex-squeeze-left')
   }
-  editor.on('load device:select page', () => {
-    updateSqueez()
+  // commands for show / hide panels
+  // handle the case where command is a normal command, then let the Panel handle it
+  typeof panel.command === 'string' && editor.Commands.add(panel.command, {
+    run() {
+      if(panel.attributes.containerClassName) {
+        containerPanel.set('visible', true)
+        el.classList.remove('gjs-hidden')
+        document.body.classList.add('silex-squeeze-left')
+        editor.refresh()
+      }
+    },
+    stop() {
+      if(panel.attributes.containerClassName) {
+        containerPanel.set('visible', false)
+        el.classList.add('gjs-hidden')
+        document.body.classList.remove('silex-squeeze-left')
+        editor.refresh()
+      }
+    },
   })
 }