@silexlabs/silex 3.3.1-1 → 3.3.1-3

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,15 @@ 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.set('visible', shouldShow)
+      // sector.getProperties()
+      //   .forEach(p => p.set('visible', shouldShow))
     }
-  })
+  }
+
+  sector.on('change:visible', () => applyVisibility())
+  editor.on('component:selected', comp => applyVisibility(comp))
 }

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

@@ -0,0 +1,75 @@
+/**
+ * Static plugin definitions for internal GrapesJS plugins
+ * These are bundled with the main application
+ */
+
+import symbolDialogsPlugin, { cmdPromptAddSymbol } from './symbolDialogs'
+import loginDialogPlugin, { LoginDialogOptions, cmdLogout } from './LoginDialog'
+import footerPlugin from './footer'
+import breadcrumbsPlugin from './breadcrumbs'
+import imgPlugin from './img'
+import liPlugin from './li'
+import flexPlugin from './flex'
+import cssPropsPlugin from './css-props'
+import resizePanelPlugin from './resize-panel'
+import { pagePanelPlugin, cmdTogglePages, cmdAddPage } from './page-panel'
+import { newPageDialog, cmdOpenNewPageDialog } from './new-page-dialog'
+import { PROJECT_BAR_PANEL_ID, projectBarPlugin } from './project-bar'
+import { settingsDialog, cmdOpenSettings } from './settings'
+import { blocksPlugin } from './blocks'
+import ViewButtons from './view-buttons'
+import { semanticPlugin } from './semantic'
+import { richTextPlugin } from './rich-text'
+import { internalLinksPlugin } from './internal-links'
+import { keymapsPlugin } from './keymaps'
+import publicationManagerPlugin from './PublicationManager'
+import { storagePlugin } from './storage'
+import uploadProgress from './upload-progress'
+
+export interface PluginDefinition {
+  name: string
+  value: any
+}
+
+export const staticPlugins: PluginDefinition[] = [
+  { name: './symbolDialogs', value: symbolDialogsPlugin },
+  { name: './LoginDialog', value: loginDialogPlugin },
+  { name: './footer', value: footerPlugin },
+  { name: './breadcrumbs', value: breadcrumbsPlugin },
+  { name: './img', value: imgPlugin },
+  { name: './li', value: liPlugin },
+  { name: './flex', value: flexPlugin },
+  { name: './css-props', value: cssPropsPlugin },
+  { name: './resize-panel', value: resizePanelPlugin },
+  { name: './page-panel', value: pagePanelPlugin },
+  { name: './new-page-dialog', value: newPageDialog },
+  { name: './project-bar', value: projectBarPlugin },
+  { name: './settings', value: settingsDialog },
+  { name: './blocks', value: blocksPlugin },
+  { name: './view-buttons', value: ViewButtons },
+  { name: './semantic', value: semanticPlugin },
+  { name: './rich-text', value: richTextPlugin },
+  { name: './internal-links', value: internalLinksPlugin },
+  { name: './keymaps', value: keymapsPlugin },
+  { name: './PublicationManager', value: publicationManagerPlugin },
+  { name: './storage', value: storagePlugin },
+  { name: './upload-progress', value: uploadProgress },
+]
+
+// Validate all static plugins are loaded correctly
+staticPlugins
+  .filter(p => typeof p.value !== 'function')
+  .forEach(p => {
+    throw new Error(`Plugin ${p.name} could not be loaded correctly (${p.value})`)
+  })
+
+// Export named functions for use in plugin options
+export {
+  cmdPromptAddSymbol,
+  cmdLogout,
+  cmdTogglePages,
+  cmdAddPage,
+  cmdOpenNewPageDialog,
+  PROJECT_BAR_PANEL_ID,
+  cmdOpenSettings,
+}