@silexlabs/silex 3.3.1-2 → 3.3.1-4

package/src/ts/client/assetUrl.ts

@@ -1,5 +1,5 @@
 import { API_PATH, API_WEBSITE_ASSET_READ, API_WEBSITE_PATH } from '../constants'
-import { Asset, ClientSideFileType, Component, ConnectorId, Page, Style, WebsiteId } from '../types'
+import { Asset, ClientSideFileType, ConnectorId, Style, WebsiteId } from '../types'
 
 /**
  * @fileoverview Helpers to manage assets URL

package/src/ts/client/grapesjs/css-props.ts

@@ -16,6 +16,7 @@
  */
 
 import { Editor } from 'grapesjs'
+import { registerSector } from './sectors'
 
 /**
  * @fileoverview Adds various css properties
@@ -120,15 +121,37 @@ export default (editor: Editor, opts) => {
       units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
       info: '',
     })
-    const contentProp = editor.StyleManager.addProperty('general', {
+    registerSector(editor, {
+      id: 'content',
       name: 'Content',
-      property: 'content',
-      type: 'text',
-      defaults: '',
-      info: 'Generates content for an element.',
-      full: true,
-      visible: false,
-    }, { at: 0 })
+      props: [{
+        name: 'Content',
+        property: 'content',
+        type: 'text',
+        defaults: '"Content in double quotes"',
+        info: 'Generates content for an element.',
+        full: true,
+        visible: false,
+      }],
+      shouldShow: async () => {
+        return new Promise<boolean>((resolve, reject) => {
+
+          requestAnimationFrame(() => {
+            try {
+              const state = editor.StyleManager
+                .getSelected()
+                ?.get('state')
+              if (state && ['before', 'after'].includes(state)) {
+                return resolve(true)
+              }
+              return resolve(false)
+            } catch(e) {
+              reject(e)
+            }
+          })
+        })
+      },
+    }, 0)
     /***************/
     /* Dimension   */
     /***************/
@@ -825,16 +848,6 @@ export default (editor: Editor, opts) => {
       info: 'Aligns elements to scroll snaps.',
     }, { at: 11 })
 
-    function refreshContentProp() {
-      const state = editor.SelectorManager.getState()
-      if (['before', 'after'].includes(state)) {
-        contentProp.set('visible', true)
-      } else {
-        contentProp.set('visible', false)
-      }
-    }
-    editor.on('selector:state component:selected component:styleUpdate style:sector:update', (state, opts) => setTimeout(() => refreshContentProp()))
-    editor.StyleManager.getSector('general').on('change', () => refreshContentProp())
     editor.SelectorManager.states.add({name: 'before', label: 'Before'})
     editor.SelectorManager.states.add({name: 'after', label: 'After'})
     editor.SelectorManager.states.add({name: 'active', label: 'Active'})

package/src/ts/client/grapesjs/dynamic-plugins.ts

@@ -0,0 +1,63 @@
+/**
+ * Dynamic plugin loader for external GrapesJS plugins
+ * These plugins are loaded at runtime to reduce initial bundle size
+ */
+
+export interface PluginDefinition {
+  name: string
+  value: any
+}
+
+/**
+ * Load all external plugins dynamically
+ */
+export async function loadDynamicPlugins(): Promise<PluginDefinition[]> {
+  const [
+    blocksBasicPlugin,
+    styleFilterPlugin,
+    formPlugin,
+    codePlugin,
+    filterStyles,
+    symbolsPlugin,
+    loadingPlugin,
+    fontsDialogPlugin,
+    selectorPlugin,
+    rateLimitPlugin,
+    borderPlugin,
+    backgroundPlugin,
+    notificationsPlugin,
+    keymapsDialogPlugin,
+  ] = await Promise.all([
+    import('grapesjs-blocks-basic').then(m => m.default),
+    import('grapesjs-style-filter').then(m => m.default),
+    import('grapesjs-plugin-forms').then(m => m.default),
+    import('grapesjs-custom-code').then(m => m.default),
+    import('@silexlabs/grapesjs-filter-styles').then(m => m.default),
+    import('@silexlabs/grapesjs-symbols').then(m => m.default),
+    import('@silexlabs/grapesjs-loading').then(m => m.default),
+    import('@silexlabs/grapesjs-fonts').then(m => m.default),
+    import('@silexlabs/grapesjs-advanced-selector').then(m => m.default),
+    import('@silexlabs/grapesjs-storage-rate-limit').then(m => m.default),
+    import('grapesjs-style-border').then(m => m.default),
+    import('grapesjs-style-bg').then(m => m.default),
+    import('@silexlabs/grapesjs-notifications').then(m => m.default),
+    import('@silexlabs/grapesjs-keymaps-dialog').then(m => m.default),
+  ])
+
+  return [
+    { name: 'grapesjs-blocks-basic', value: blocksBasicPlugin },
+    { name: 'grapesjs-style-filter', value: styleFilterPlugin },
+    { name: 'grapesjs-plugin-forms', value: formPlugin },
+    { name: 'grapesjs-custom-code', value: codePlugin },
+    { name: '@silexlabs/grapesjs-filter-styles', value: filterStyles },
+    { name: '@silexlabs/grapesjs-symbols', value: symbolsPlugin },
+    { name: '@silexlabs/grapesjs-loading', value: loadingPlugin },
+    { name: '@silexlabs/grapesjs-fonts', value: fontsDialogPlugin },
+    { name: '@silexlabs/grapesjs-advanced-selector', value: selectorPlugin },
+    { name: '@silexlabs/grapesjs-storage-rate-limit', value: rateLimitPlugin },
+    { name: 'grapesjs-style-border', value: borderPlugin },
+    { name: 'grapesjs-style-bg', value: backgroundPlugin },
+    { name: '@silexlabs/grapesjs-notifications', value: notificationsPlugin },
+    { name: '@silexlabs/grapesjs-keymaps-dialog', value: keymapsDialogPlugin },
+  ]
+}

package/src/ts/client/grapesjs/flex.ts

@@ -14,70 +14,75 @@
  * 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'
-import { SectorConfig, registerSector } from './sectors'
+import { Component, Editor } from 'grapesjs'
 
 /**
  * @fileoverview This plugin adds CSS properties for the UL, OL and LI elements
  *
  */
 
-export default (editor: Editor) => {
-  const sectorConfigs: SectorConfig[] = [{
-    name: 'Flex Item',
-    props: [
-      {
-        id: 'order',
-        name: 'Order',
-        property: 'order',
-        type: 'integer',
-        defaults: 0,
-      },
-      {
-        id: 'flex-grow',
-        name: 'Flex Grow',
-        property: 'flex-grow',
-        type: 'integer',
-        defaults: 0,
-      },
-      {
-        id: 'flex-shrink',
-        name: 'Flex Shrink',
-        property: 'flex-shrink',
-        type: 'integer',
-        defaults: 1,
-      },
-      {
-        id: 'flex-basis',
-        name: 'Flex Basis',
-        property: 'flex-basis',
-        type: 'text',
-        defaults: 'auto',
-      },
-      {
-        id: 'align-self',
-        name: 'Align Self',
-        property: 'align-self',
-        type: 'select',
-        options: [
-          { id: '', label: '' },
-          { id: 'auto', label: 'auto' },
-          { id: 'flex-start', label: 'flex-start' },
-          { id: 'flex-end', label: 'flex-end' },
-          { id: 'center', label: 'center' },
-          { id: 'baseline', label: 'baseline' },
-          { id: 'stretch', label: 'stretch' },
-        ],
-      },
-    ],
-    shouldShow: comp => {
-      const parent = comp.parent()
-      const display = parent?.getStyle()['display'] as string || ''
-      return display.includes('flex')
-    }
-  }]
+const FLEX_PROPS = [
+  'flex-direction',
+  'flex-wrap',
+  'justify-content',
+  'align-items',
+  'align-content',
+  'row-gap',
+  'column-gap',
+]
+
+const FLEX_ITEM_PROPS = [
+  'flex-grow',
+  'flex-shrink',
+  'flex-basis',
+  'order',
+  'align-self',
+]
 
+export default (editor: Editor) => {
   editor.on('load', () => {
-    sectorConfigs.forEach(sectorConfig => registerSector(editor, sectorConfig, 2))
+    const sector = editor.StyleManager.getSector('flex')
+    // Add missing sectors
+    // FIXME: this makes grapesjs bug, all other props disappear
+    // FLEX_PROPS
+    //   .concat(FLEX_ITEM_PROPS)
+    //   .forEach(id => {
+    //     if (!sector.getProperty(id)) {
+    //       editor.StyleManager.addProperty('flex', {
+    //         id,
+    //       })
+    //     }
+    //   })
+    // Listen to the events that should trigger a visibility check
+    editor.on('component:selected', comp => applyVisibility(comp))
+    // `change:visible` is a workaround grapesjs behavior: https://github.com/GrapesJS/grapesjs/issues/3123
+    editor.on('change:visible', applyVisibility)
+    // `style:property:update` is useful for instantly display the flex sector when selecting display: inline-flex;
+    editor.on('style:property:update', () => applyVisibility())
+    function applyVisibility(comp: Component = editor.getSelected()) {
+      editor.off('change:visible', applyVisibility) // Avoid infinite loop
+      requestAnimationFrame(() => {
+        if(!comp) return // No selection yet
+        const computedDisplay = comp?.view?.el && getComputedStyle(comp.view.el)['display'] as string || ''
+        const isFlex = computedDisplay === 'flex' || computedDisplay === 'inline-flex'
+        const parent = comp.parent()
+        const parentComputedDisplay = parent?.view?.el && getComputedStyle(parent.view.el)['display'] as string || ''
+        const parentIsFlex = parentComputedDisplay === 'flex' || parentComputedDisplay === 'inline-flex'
+        if (parentIsFlex || isFlex) {
+          sector.set('visible', true)
+        }
+        if (parentIsFlex && isFlex) {
+          sector.getProperties()
+            .forEach(p => p.set('visible', true))
+        } else if (isFlex) {
+          sector.getProperties()
+            .forEach(p => p.set('visible', FLEX_PROPS.includes(p.getId())))
+        } else if (parentIsFlex) {
+          sector.getProperties()
+            .forEach(p => p.set('visible', FLEX_ITEM_PROPS.includes(p.getId())))
+        }
+        editor.on('change:visible', applyVisibility)
+      })
+    }
   })
 }

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

@@ -144,9 +144,15 @@ export default (editor: Editor, opts) => {
       }
     })
     // Watch changes made by grapesjs and revert them if needed
-    sector.on('change:visible', () => {
-      if(sector.get('visible') !== showSector) sector.set('visible', showSector)
-    })
+    function doubleCheck() {
+      if(sector.get('visible') !== showSector){
+        sector.off('change:visible', doubleCheck)
+        sector.set('visible', showSector)
+        sector.on('change:visible', doubleCheck)
+      }
+    }
+    sector.on('change:visible', doubleCheck)
+
     // Add a new image type that handles the storage URL vs displayed URL
     domc.addType('image', {
       ...imgType,

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

@@ -143,6 +143,7 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
     showDevices: true,
 
     //pageManager: {},
+    telemetry: false,
 
     layerManager: {
       appendTo: '.layer-manager-container',

package/src/ts/client/grapesjs/li.ts

@@ -25,6 +25,7 @@ import { SectorConfig, registerSector } from './sectors'
 export default (editor: Editor) => {
   const sectorConfigs: SectorConfig[] = [
     {
+      id: 'list',
       name: 'List',
       props: [
         {
@@ -67,7 +68,9 @@ export default (editor: Editor) => {
           defaults: '',
         },
       ],
-      shouldShow: comp => ['ul', 'ol', 'li'].includes(comp.get('tagName')?.toLowerCase() || ''),
+      shouldShow: comp => {
+        return comp && ['ul', 'ol', 'li'].includes(comp.get('tagName')?.toLowerCase() || '')
+      },
     },
   ]
 

package/src/ts/client/grapesjs/plugin-options.ts

@@ -0,0 +1,243 @@
+/**
+ * Plugin options configuration for all GrapesJS plugins
+ */
+
+import { EditorConfig } from 'grapesjs'
+import { PluginDefinition } from './dynamic-plugins'
+import { staticPlugins, cmdPromptAddSymbol, cmdTogglePages, cmdAddPage, cmdOpenSettings, PROJECT_BAR_PANEL_ID, cmdOpenNewPageDialog } from './static-plugins'
+import { NotificationEditor } from '@silexlabs/grapesjs-notifications'
+import { cmdKeymapsDialog } from '@silexlabs/grapesjs-keymaps-dialog'
+// Commands will be imported from the main index file
+export const cmdToggleLayers = 'open-layers'
+export const cmdToggleBlocks = 'open-blocks'
+export const cmdToggleSymbols = 'open-symbols'
+export const cmdToggleNotifications = 'open-notifications'
+import { ClientConfig } from '../config'
+import { titleCase } from '../utils'
+import { defaultKms } from './keymaps'
+
+// Constants
+const PRIMARY_COLOR = '#333333'
+const SECONDARY_COLOR = '#ddd'
+const TERTIARY_COLOR = '#8873FE'
+const QUATERNARY_COLOR = '#A291FF'
+const catBasic = 'Containers'
+const catComponents = 'Components'
+
+// Create notification container
+const notificationContainer = document.createElement('div')
+
+/**
+ * Get plugin options for static plugins
+ */
+export function getStaticPluginOptions(config: ClientConfig) {
+  const { websiteId, storageId } = config
+  
+  const projectBarPluginValue = staticPlugins.find(p => p.name === './project-bar')?.value
+  const imgPluginValue = staticPlugins.find(p => p.name === './img')?.value
+  const pagePanelPluginValue = staticPlugins.find(p => p.name === './page-panel')?.value
+  const internalLinksPluginValue = staticPlugins.find(p => p.name === './internal-links')?.value
+  const keymapsPluginValue = staticPlugins.find(p => p.name === './keymaps')?.value
+  const loginDialogPluginValue = staticPlugins.find(p => p.name === './LoginDialog')?.value
+
+  return {
+    [projectBarPluginValue?.toString()]: {
+      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',
+          name: 'Blocks',
+          attributes: { title: `Blocks (${titleCase(defaultKms.kmBlocks.keys, '+')})`, containerClassName: 'block-manager-container', },
+          command: cmdToggleBlocks,
+        }, {
+          id: 'symbols-btn',
+          className: 'symbols-btn fa-regular fa-gem',
+          name: 'Symbols',
+          attributes: { title: `Symbols (${titleCase(defaultKms.kmSymbols.keys, '+')})`, containerClassName: 'symbols-list-container', },
+          command: cmdToggleSymbols,
+          buttons: [
+            {
+              id: 'symbol-create-button',
+              className: 'gjs-pn-btn',
+              command: cmdPromptAddSymbol,
+              text: '\u271A',
+            },
+          ],
+        }, {
+          id: 'page-panel-btn',
+          className: 'page-panel-btn fa fa-fw fa-file',
+          name: 'Pages',
+          attributes: { title: `Pages (${titleCase(defaultKms.kmPages.keys, '+')})`, containerClassName: 'page-panel-container', },
+          command: cmdTogglePages,
+          buttons: [{
+            className: 'gjs-pn-btn',
+            command: cmdAddPage,
+            text: '\u271A',
+          }],
+        }, {
+          id: 'layer-manager-btn',
+          className: 'layer-manager-btn fa-solid fa-layer-group',
+          name: 'Layers',
+          attributes: { title: `Layers (${titleCase(defaultKms.kmLayers.keys, '+')})`, containerClassName: 'layer-manager-container', },
+          command: cmdToggleLayers,
+        }, {
+          id: 'font-dialog-btn',
+          className: 'font-manager-btn fa-solid fa-font',
+          name: 'Fonts',
+          attributes: { title: `Fonts (${titleCase(defaultKms.kmOpenFonts.keys, '+')})` },
+          command: () => {
+            // @ts-ignore - editor will be available at runtime
+            editor.runCommand('open-fonts')
+          },
+        }, {
+          id: 'settings-dialog-btn',
+          className: 'page-panel-btn fa-solid fa-gears',
+          name: 'Settings',
+          attributes: { title: `Settings (${titleCase(defaultKms.kmOpenSettings.keys, '+')})` },
+          command: cmdOpenSettings,
+        }, {
+          id: 'spacer',
+          attributes: {},
+          className: 'project-bar-spacer',
+        }, {
+          id: 'keymaps-btn',
+          className: 'keymaps-btn fa-solid fa-keyboard',
+          name: 'Shortcuts',
+          attributes: { title: 'Keyboard Shortcuts (Shift+H)' },
+          command: cmdKeymapsDialog,
+        }, {
+          id: 'notifications-btn',
+          className: 'notifications-btn fa-regular fa-bell',
+          name: 'Notifications',
+          attributes: { title: `Notifications (${titleCase(defaultKms.kmNotifications.keys, '+')})`, containerClassName: 'notifications-container', },
+          command: cmdToggleNotifications,
+        }, {
+          id: 'logout-btn',
+          className: 'logout-btn fa fa-fw fa-power-off',
+          name: 'Logout',
+          attributes: { title: 'Logout' },
+          command: () => {
+            // @ts-ignore - editor will be available at runtime
+            editor.runCommand('logout')
+          },
+        }],
+    },
+    ...(pagePanelPluginValue && {
+      [pagePanelPluginValue.toString()]: {
+        cmdOpenNewPageDialog,
+        cmdOpenSettings,
+        appendTo: '.page-panel-container',
+      }
+    }),
+    ...(internalLinksPluginValue && {
+      [internalLinksPluginValue.toString()]: {
+        // FIXME: warn the user about links in error
+        onError: (errors: any) => console.warn('Links errors:', errors),
+      }
+    }),
+    ...(keymapsPluginValue && {
+      [keymapsPluginValue.toString()]: {
+        disableKeymaps: false,
+      }
+    }),
+    ...(loginDialogPluginValue && {
+      [loginDialogPluginValue.toString()]: {
+        id: websiteId,
+      }
+    }),
+    ...(imgPluginValue && {
+      [imgPluginValue.toString()]: {
+        replacedElements: config.replacedElements,
+        websiteId,
+        storageId,
+      }
+    }),
+  }
+}
+
+/**
+ * Get plugin options for dynamic plugins
+ */
+export function getDynamicPluginOptions(dynamicPlugins: PluginDefinition[], config: ClientConfig) {
+  const options: any = {}
+
+  dynamicPlugins.forEach(plugin => {
+    const pluginKey = plugin.value.toString()
+    
+    switch (plugin.name) {
+    case 'grapesjs-blocks-basic':
+      options[pluginKey] = {
+        blocks: ['text', 'image', 'video', 'map'],
+        category: catBasic,
+      }
+      break
+        
+    case '@silexlabs/grapesjs-fonts':
+      options[pluginKey] = {
+        api_key: (config as any).fontsApiKey || 'dummy-key-for-development',
+        server_url: (config as any).fontsServerUrl,
+        api_url: (config as any).fontsApiUrl,
+      }
+      break
+        
+    case '@silexlabs/grapesjs-filter-styles':
+      options[pluginKey] = {
+        appendBefore: '.gjs-sm-sectors',
+      }
+      break
+        
+    case 'grapesjs-custom-code':
+      options[pluginKey] = {
+        blockLabel: 'HTML',
+        blockCustomCode: {
+          category: catComponents,
+        },
+        codeViewOptions: {
+          autoFormat: false,
+        },
+      }
+      break
+        
+    case '@silexlabs/grapesjs-symbols':
+      options[pluginKey] = {
+        appendTo: '.symbols-list-container',
+        emptyText: 'No symbol yet.',
+        primaryColor: PRIMARY_COLOR,
+        secondaryColor: SECONDARY_COLOR,
+        highlightColor: TERTIARY_COLOR,
+      }
+      break
+        
+    case '@silexlabs/grapesjs-storage-rate-limit':
+      options[pluginKey] = {
+        time: 5000,
+      }
+      break
+        
+    case '@silexlabs/grapesjs-notifications':
+      options[pluginKey] = {
+        container: notificationContainer,
+        reverse: true,
+      }
+      break
+        
+    case '@silexlabs/grapesjs-keymaps-dialog':
+      options[pluginKey] = {
+        longPressDuration: null,
+        shortcut: 'shift+h',
+      }
+      break
+    }
+  })
+
+  return options
+}
+
+export { notificationContainer }

package/src/ts/client/grapesjs/sectors.ts

@@ -22,16 +22,17 @@ import { Component, Editor } from 'grapesjs'
  */
 
 export type SectorConfig = {
+  id: string
   name: string
   props: any[]
-  shouldShow: (comp: Component) => boolean
+  shouldShow: (comp: Component) => boolean | Promise<boolean>
 }
 
 export function registerSector(editor: Editor, config: SectorConfig, at?: number) {
   const sm = editor.StyleManager
-  let sector = sm.getSector(config.name)
+  let sector = sm.getSector(config.id)
   if (!sector) {
-    sector = sm.addSector(config.name, { name: config.name, open: false, visible: false }, { at })
+    sector = sm.addSector(config.id, { name: config.name, open: false, visible: false }, { at })
   }
 
   // Add props if not already present
@@ -42,18 +43,17 @@ export function registerSector(editor: Editor, config: SectorConfig, at?: number
     }
   })
 
-  // Keep sector in sync with internal visibility state
-  sector.on('change:visible', () => {
-    const shouldBeVisible = sector.get('visible')
-    if (shouldBeVisible !== config.shouldShow(editor.getSelected() as Component)) {
-      sector.set('visible', !shouldBeVisible)
-    }
-  })
-
-  editor.on('component:selected', comp => {
-    const shouldShow = config.shouldShow(comp)
+  async function applyVisibility(comp: Component = editor.getSelected()) {
+    const shouldShow = await config.shouldShow(comp)
     if (sector.get('visible') !== shouldShow) {
+      sector.off('change:visible', applyVisibility)
       sector.set('visible', shouldShow)
+      sector.on('change:visible', applyVisibility)
+      // sector.getProperties()
+      //   .forEach(p => p.set('visible', shouldShow))
     }
-  })
+  }
+
+  sector.on('change:visible', applyVisibility)
+  editor.on('component:selected', comp => applyVisibility(comp))
 }