@silexlabs/silex 3.0.1-0 → 3.0.1

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

@@ -23,6 +23,8 @@ import openImport from './openImport'
  * Handle plugins, options and initialization of the editor
  */
 
+const notificationContainer = document.createElement('div')
+
 // ////////////////////
 // Plugins
 // ////////////////////
@@ -30,47 +32,76 @@ 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 navbarPlugin from 'grapesjs-navbar'
 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'
+import fontsDialogPlugin from '@silexlabs/grapesjs-fonts'
 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 notificationsPlugin, { NotificationEditor } from '@silexlabs/grapesjs-notifications'
+import keymapsDialogPlugin, { cmdKeymapsDialog, defaultOptions as keymapsDialogOpts } from '@silexlabs/grapesjs-keymaps-dialog'
 
 import { pagePanelPlugin, cmdTogglePages, cmdAddPage } from './page-panel'
 import { newPageDialog, cmdOpenNewPageDialog } from './new-page-dialog'
-import { projectBarPlugin } from './project-bar'
+import { PROJECT_BAR_PANEL_ID, 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 {defaultKms, keymapsPlugin} from './keymaps'
 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'
+import { titleCase } from '../utils'
 
 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},
   {name: 'grapesjs-plugin-forms', value: formPlugin},
   {name: 'grapesjs-custom-code', value: codePlugin},
   {name: './internal-links', value: internalLinksPlugin},
+  {name: './keymaps', value: keymapsPlugin},
   {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},
   {name: './storage', value: storagePlugin},
   {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},
+  {name: '@silexlabs/grapesjs-notifications', value: notificationsPlugin},
+  {name: '@silexlabs/grapesjs-keymaps-dialog', value: keymapsDialogPlugin},
+  {name: 'grapesjs-navbar', value:navbarPlugin}
 ]
 // Check that all plugins are loaded correctly
 plugins
@@ -79,13 +110,28 @@ plugins
     throw new Error(`Plugin ${p.name} could not be loaded correctly (${p.value})`)
   })
 
+// Constants
+const PRIMARY_COLOR = '#333333'
+const SECONDARY_COLOR = '#ddd'
+const TERTIARY_COLOR = '#8873FE'
+const QUATERNARY_COLOR = '#A291FF'
+const DARKER_PRIMARY_COLOR = '#363636'
+const LIGHTER_PRIMARY_COLOR = '#575757'
+
+// Commands
+export const cmdToggleLayers = 'open-layers'
+export const cmdToggleBlocks = 'open-blocks'
+export const cmdToggleSymbols = 'open-symbols'
+export const cmdToggleNotifications = 'open-notifications'
+
 // ////////////////////
 // Config
 // ////////////////////
 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%',
@@ -103,90 +149,148 @@ 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: {
       autoload: false,
-      //type: 'remote',
       type: 'connector',
       options: {
         connector: {
-          id,
-          connectorId,
+          id: websiteId,
+          connectorId: storageId,
         },
-        //remote: {
-        //  urlStore: `${rootUrl}/${API_WEBSITE_WRITE}?id=${id}`,
-        //  urlLoad: `${rootUrl}/${API_WEBSITE_READ}?id=${id}`,
-        //},
       },
     },
 
-    cssIcons: '/css/all.min.css',
+    cssIcons: './css/all.min.css',
+    canvasCss: `
+      :root {
+        --primaryColor: ${PRIMARY_COLOR};
+        --secondaryColor: ${SECONDARY_COLOR};
+        --tertiaryColor: ${TERTIARY_COLOR};
+        --quaternaryColor: ${QUATERNARY_COLOR};
+        --darkerPrimaryColor: ${DARKER_PRIMARY_COLOR};
+        --lighterPrimaryColor: ${LIGHTER_PRIMARY_COLOR};
+      }
+      .gjs-frame-selected {
+        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important; // Change to red border
+      }
+      .gjs-selected {
+        outline: 2px solid var(--tertiaryColor) !important;
+        outline-offset: -2px;
+      }
+    `,
+
+    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',
             className: 'logo',
-            attributes: { title: 'Go to your dashboard' },
-            link: '/',
-            command: 'open-dash',
+            attributes: { title: 'Dashboard' },
+            command: () => {
+              window.location.href = '/'
+            },
           }, {
             id: 'block-manager-btn',
             className: 'block-manager-btn fa fa-fw fa-plus',
-            attributes: { title: 'Blocks', containerClassName: 'block-manager-container', },
-            command: 'open-blocks',
+            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',
-            attributes: { title: 'Symbols', containerClassName: 'symbols-list-container', },
-            command: 'open-symbols',
+            name: 'Symbols',
+            attributes: { title: `Symbols (${titleCase(defaultKms.kmSymbols.keys, '+')})`, containerClassName: 'symbols-list-container', },
+            command: cmdToggleSymbols,
             buttons: [
               {
                 id: 'symbol-create-button',
-                className: 'pages__add-page fa-solid fa-plus',
-                label: 'Create symbol from selection',
+                className: 'gjs-pn-btn',
                 command: cmdPromptAddSymbol,
+                text: '\u271A',
               },
             ],
           }, {
             id: 'page-panel-btn',
             className: 'page-panel-btn fa fa-fw fa-file',
-            attributes: { title: 'Pages', containerClassName: 'page-panel-container', },
+            name: 'Pages',
+            attributes: { title: `Pages (${titleCase(defaultKms.kmPages.keys, '+')})`, containerClassName: 'page-panel-container', },
             command: cmdTogglePages,
             buttons: [{
-              className: 'pages__add-page fa fa-file',
+              className: 'gjs-pn-btn',
               command: cmdAddPage,
-              text: '+',
+              text: '\u271A',
             }],
           }, {
             id: 'layer-manager-btn',
             className: 'layer-manager-btn fa-solid fa-layer-group',
-            attributes: { title: 'Layers', containerClassName: 'layer-manager-container', },
-            command: 'open-layers',
+            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',
-            attributes: { title: 'Fonts' },
-            command: cmdOpenFonts,
+            name: 'Fonts',
+            attributes: { title: `Fonts (${titleCase(defaultKms.kmOpenFonts.keys, '+')})` },
+            command: () => {
+              editor.runCommand('open-fonts')
+            },
           }, {
             id: 'settings-dialog-btn',
             className: 'page-panel-btn fa-solid fa-gears',
-            attributes: { title: 'Settings' },
+            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,
+            buttons: [{
+              className: 'gjs-pn-btn',
+              command: 'notifications:clear',
+              text: '\u2716',
+            }],
+          }, {
+            id: 'dash2',
+            className: 'fa-solid fa-house',
+            attributes: { title: 'Dashboard' },
+            command: () => {
+              window.location.href = '/'
+            },
+          }, {
+            id: 'help',
+            className: 'fa fa-fw fa-question-circle',
+            attributes: { title: 'Documentation' },
+            command: () => {
+              window.open('https://docs.silex.me/', '_blank')
+            },
           }, {
             id: 'logout-button',
             className: 'page-panel-btn fa fa-fw fa-sign-out',
@@ -195,38 +299,72 @@ 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.toString()]: {
+        appendBefore: '.gjs-sm-sectors',
+      },
+      [internalLinksPlugin.toString()]: {
         // FIXME: warn the user about links in error
-        onError: (errors) => console.log('Links errors:', errors),
+        onError: (errors) => console.warn('Links errors:', errors),
+      },
+      [keymapsPlugin.toString()]: {
+        disableKeymaps: false,
       },
-      [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]: {
-        api_key: 'AIzaSyAdJTYSLPlKz4w5Iqyy-JAF2o8uQKd1FKc',
+      [fontsDialogPlugin.toString()]: {
+        api_key: config.fontsApiKey,
+        server_url: config.fontsServerUrl,
+        api_url: config.fontsApiUrl,
       },
-      [loginDialogPlugin as any]: {
-        id,
+      [loginDialogPlugin.toString()]: {
+        id: websiteId,
       } as LoginDialogOptions,
+      [rateLimitPlugin.toString()]: {
+        time: 5000,
+      },
+      [imgPlugin.toString()]: {
+        replacedElements: config.replacedElements,
+      },
+      [notificationsPlugin.toString()]: {
+        container: notificationContainer,
+        reverse: true,
+      },
+      [keymapsDialogPlugin.toString()]: {
+        longPressDuration: null,
+        shortcut: 'shift+h',
+      },
+      [navbarPlugin.toString()]:{
+        block:{
+          category: 'Components'
+        }
+      }
     },
   }
 }
@@ -240,6 +378,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)
@@ -262,17 +401,60 @@ export async function initEditor(config: EditorConfig) {
       modalImportTitle: 'Import from website',
     }))
 
+    // Detect loading errors
+    // Display a useful notification
+    const typeConfig = {
+      view: {
+        onRender({editor, el, model}) {
+          const src = model.getAttributes().src
+          el.addEventListener('error', () => {
+            editor.runCommand('notifications:add', {
+              type: 'error',
+              group: 'Image loading error',
+              message: `Error loading image: ${src}`,
+              componentId: model.getId(),
+            })
+          })
+        },
+      },
+    }
+    editor.DomComponents.addType('image', typeConfig)
+    editor.DomComponents.addType('iframe', typeConfig)
+
+    // 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(cmdToggleBlocks)
+      views.buttons.remove(cmdToggleLayers)
+
+      // 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' })
+      // Use the style filter plugin
+      editor.StyleManager.addProperty('extra', { extend: 'filter' })
+
+      // Add a class to the Style Manager's sticky top section
+      editor.SelectorManager.selectorTags.el.parentElement.classList.add('top-style-section')
+
+      // Add the notifications container
+      document.body.querySelector('.notifications-container')?.appendChild(notificationContainer)
+      // Mark the button as dirty when there are notifications
+      // TODO: move this in the notifications plugin options
+      editor.on(
+        'notifications:changed',
+        () => {
+          const notificationButton = editor.Panels.getPanel(PROJECT_BAR_PANEL_ID).view?.el.querySelector('.notifications-btn')
+          ;(editor as NotificationEditor)
+            .NotificationManager['length'] ? notificationButton?.classList.add('project-bar__dirty') : notificationButton?.classList.remove('project-bar__dirty')
+        }
+      )
 
       // 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

@@ -18,8 +18,6 @@
 import {html, render} from 'lit-html'
 import {map} from 'lit-html/directives/map.js'
 import grapesjs from 'grapesjs/dist/grapes.min.js'
-
-import { Page } from '../../types'
 import { getPageLink } from '../../page'
 
 // constants
@@ -32,7 +30,7 @@ const options: grapesjs.SelectOption = [
 ]
 
 // plugin code
-export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+export const internalLinksPlugin = (editor, opts) => {
   // update links when a page link changes
   function onAll(cbk) {
     editor.Pages.getAll()
@@ -58,12 +56,21 @@ export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opt
       // 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)
         }
       })
-      opts?.onError(issues)
+      // Add a notification for the issues
+      if(issues.length) {
+        issues.forEach(component => {
+          editor.runCommand('notifications:add', {
+            type: 'error',
+            message: `Page ${page.previous('name')} was removed, please fix the following links:`,
+            componentId: component.getId(),
+            group: 'Broken internal links',
+          })
+        })
+      }
       break
     }
   })
@@ -109,7 +116,7 @@ export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opt
   function getDefaultHref(type) {
     switch(type) {
     case 'email': return 'mailto:'
-    case 'page': return getPageLink()
+    case 'page': return getPageLink(null)
     case 'url': return 'https://'
     }
   }
@@ -224,4 +231,4 @@ export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opt
       doRender(elInput, href)
     },
   })
-})
+}