@silexlabs/silex 3.0.0-alpha.151 → 3.0.0-alpha.152

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
 // ////////////////////
@@ -45,10 +47,11 @@ 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 { 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'
@@ -90,7 +93,8 @@ const plugins = [
   {name: './footer', value: footerPlugin},
   {name: '@silexlabs/grapesjs-storage-rate-limit', value: rateLimitPlugin},
   {name: 'grapesjs-style-border', value: borderPugin},
-  {name: './resize-panel', value: resizePanelPlugin}
+  {name: './resize-panel', value: resizePanelPlugin},
+  {name: '@silexlabs/grapesjs-notifications', value: notificationsPlugin},
 ]
 // Check that all plugins are loaded correctly
 plugins
@@ -201,9 +205,9 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
             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',
               },
             ],
           }, {
@@ -212,9 +216,9 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
             attributes: { title: 'Pages', 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',
@@ -237,6 +241,16 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
             id: 'spacer',
             attributes: {},
             className: 'project-bar-spacer',
+          }, {
+            id: 'notifications-btn',
+            className: 'notifications-btn fa-regular fa-bell',
+            attributes: { title: 'Notifications', containerClassName: 'notifications-container', },
+            command: 'open-notifications',
+            buttons: [{
+              className: 'gjs-pn-btn',
+              command: 'notifications:clear',
+              text: '\u2716',
+            }],
           }, {
             id: 'dash2',
             className: 'fa-solid fa-house',
@@ -275,10 +289,6 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       [filterStyles]: {
         appendBefore: '.gjs-sm-sectors',
       },
-      [internalLinksPlugin.toString()]: {
-        // FIXME: warn the user about links in error
-        onError: (errors) => console.warn('Links errors:', errors),
-      },
       [codePlugin.toString()]: {
         blockLabel: 'HTML',
         blockCustomCode: {
@@ -308,6 +318,10 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       [imgPlugin.toString()]: {
         replacedElements: config.replacedElements,
       },
+      [notificationsPlugin.toString()]: {
+        container: notificationContainer,
+        reverse: true,
+      },
     },
   }
 }
@@ -344,6 +358,26 @@ 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', () => {
       const views = editor.Panels.getPanel('views')
@@ -360,9 +394,25 @@ export async function initEditor(config: EditorConfig) {
       // Render the block manager, otherwise it is empty
       editor.BlockManager.render(null)
 
-      // use the style filter plugin
+      // 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.ts

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

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

@@ -18,8 +18,8 @@
 import { Editor, Panel } from 'grapesjs'
 import {html, render} from 'lit-html'
 
-const panelId = 'project-bar-panel'
-const containerPanelId = 'project-bar-container'
+export const PROJECT_BAR_PANEL_ID = 'project-bar-panel'
+export const containerPanelId = 'project-bar-container'
 
 export interface PanelObject {
   command: string | ((editor: Editor) => void)
@@ -34,6 +34,7 @@ export interface PanelObject {
     text: string
     className: string
   }[]
+  onClick?: (editor: Editor) => void
 }
 
 export const projectBarPlugin = (editor, opts) => {
@@ -44,7 +45,7 @@ export const projectBarPlugin = (editor, opts) => {
   })
   // create the project bar panel in grapesjs
   editor.Panels.addPanel({
-    id: panelId,
+    id: PROJECT_BAR_PANEL_ID,
     buttons: opts.panels,
     visible  : true,
   })
@@ -113,6 +114,10 @@ export function addButton(editor: Editor, panel: PanelObject) {
         document.body.classList.add('silex-squeeze-left')
         editor.refresh()
       }
+      // Call the onClick function if it exists
+      if(panel.onClick) panel.onClick(editor)
+      // Remove the dirty flag
+      el.classList.remove('project-bar__dirty')
     },
     stop() {
       if(panel.attributes.containerClassName) {
@@ -121,6 +126,10 @@ export function addButton(editor: Editor, panel: PanelObject) {
         document.body.classList.remove('silex-squeeze-left')
         editor.refresh()
       }
+      // Call the onClick function if it exists
+      if(panel.onClick) panel.onClick(editor)
+      // Remove the dirty flag
+      el.classList.remove('project-bar__dirty')
     },
   })
 }

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

@@ -16,7 +16,7 @@
  */
 
 import {html, render} from 'lit-html'
-import {defaultSections, idCodeWrapper, isSite} from './settings-sections'
+import {defaultSections, idCodeWrapper, isSite, SettingsSection} from './settings-sections'
 
 /**
  * @fileoverview This file contains the settings dialog. The config API lets plugins add sections to the settings dialog.
@@ -39,6 +39,7 @@ export const settingsDialog = (editor, opts) => {
   console.info('Silex version:', SILEX_VERSION)
   editor.Commands.add(cmdOpenSettings, {
     run: (_, sender, {page}) => {
+      console.log('open settings', page)
       modal = editor.Modal.open({
         title: page ? 'Page settings' : 'Site Settings',
         content: '',
@@ -101,6 +102,37 @@ export const settingsDialog = (editor, opts) => {
   })
 }
 
+function showSection(item: SettingsSection) {
+  const aside = el.querySelector('aside.silex-bar') as HTMLElement
+  const ul = aside.querySelector('ul.silex-list--menu') as HTMLUListElement
+  const li = ul.querySelector('li#settings-' + item.id) as HTMLLIElement
+  currentSection = item
+  console.log('show section', item.id, {aside, ul, li})
+  if(!li) {
+    console.warn('Cannot find section', item.id, 'in the side bar, fallback to the first section')
+    showSection(defaultSections[0]) // Fallback to the first section
+    return
+  }
+  // Update active
+  Array.from(ul.querySelectorAll('.active')).forEach(el => el.classList.remove('active'))
+  li.classList.add('active')
+  const main = el.querySelector('main#settings__main') as HTMLElement
+  const mainItem = el.querySelector(`div#settings-${item.id}`)
+  if(!mainItem) {
+    console.warn('Cannot find section', item.id, 'in the settings dialog, fallback to the first section')
+    showSection(defaultSections[0]) // Fallback to the first section
+    return
+  }
+  // Update hidden
+  Array.from(main.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()
+}
+
 export function addSection(section, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number) {
   const sections = siteOrPage === 'site' ? sectionsSite : sectionsPage
   if (position === 'first') {
@@ -122,6 +154,7 @@ export function removeSection(id, siteOrPage: 'site' | 'page') {
 }
 
 
+let currentSection
 function displaySettings(editor, config, model = editor.getModel()) {
   // Update the model with the current settings
   const settings = model.get('settings') || {} as WebsiteSettings
@@ -129,7 +162,8 @@ function displaySettings(editor, config, model = editor.getModel()) {
   // Get the current sections for page or site
   const menuItemsCurrent = isSite(model) ? sectionsSite : sectionsPage
   // Init the current section selection
-  let sections = menuItemsCurrent[0]
+  currentSection = currentSection || menuItemsCurrent[0]
+  // Render the settings dialog
   render(html`
     <form class="silex-form">
       <div class="silex-help">
@@ -146,25 +180,12 @@ function displaySettings(editor, config, model = editor.getModel()) {
           <ul class="silex-list silex-list--menu">
             ${menuItemsCurrent.map(item => html`
               <li
-                class=${item.id === sections.id ? 'active' : ''}
+                id="settings-${item.id}"
+                class=${item.id === currentSection.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()
+    // Show the new section
+    showSection(item)
     // Notify other plugins
     editor.trigger(ClientEvent.SETTINGS_SECTION_CHANGE, item.id)
   }}
@@ -174,7 +195,7 @@ function displaySettings(editor, config, model = editor.getModel()) {
             `)}
           </ul>
         </aside>
-        <main>
+        <main id="settings__main">
             ${menuItemsCurrent.map(item => item.render(settings, model))}
         </main>
       </section>
@@ -185,6 +206,9 @@ function displaySettings(editor, config, model = editor.getModel()) {
       </footer>
     </form>
   `, el)
+  // Display the current section
+  showSection(currentSection)
+  // Init the code editor
   el.querySelector(`#${idCodeWrapper}`)?.appendChild(headEditor.getElement())
   headEditor.setContent(settings.head || '')
 }

package/src/ts/plugins/server/GitlabConnector.ts

@@ -38,6 +38,7 @@ export interface GitlabOptions {
   //metaRepoFile: string
   repoPrefix: string
   scope: string
+  domain: string
 }
 
 interface GitlabToken {
@@ -189,6 +190,8 @@ export default class GitlabConnector implements StorageConnector {
     } as GitlabOptions
     if(!this.options.clientId) throw new Error('Missing Gitlab client ID')
     if(!this.options.clientSecret) throw new Error('Missing Gitlab client secret')
+    if(!this.options.domain) throw new Error('Missing Gitlab domain')
+
   }
 
   // **
@@ -224,7 +227,7 @@ export default class GitlabConnector implements StorageConnector {
   async readFile(session: GitlabSession, websiteId: string, fileName: string): Promise<Buffer> {
     const safePath = fileName.replace(/^\//, '')
     // Call the API
-    const url = `https://gitlab.com/api/v4/projects/${websiteId}/repository/files/${safePath}?ref=${this.options.branch}&access_token=${session.gitlab?.token?.access_token}`
+    const url = `${this.options.domain}/api/v4/projects/${websiteId}/repository/files/${safePath}?ref=${this.options.branch}&access_token=${session.gitlab?.token?.access_token}`
     const response = await fetch(url, {
       method: 'GET',
       headers: {
@@ -273,7 +276,7 @@ export default class GitlabConnector implements StorageConnector {
     const token = session?.gitlab?.token
     const tokenParam = token ? `access_token=${token.access_token}&` : ''
     const paramsStr = Object.entries(params).map(([k, v]) => `${k}=${encodeURIComponent((v as any).toString())}`).join('&')
-    const url = `https://gitlab.com/${path}?${tokenParam}${paramsStr}`
+    const url = `${this.options.domain}/${path}?${tokenParam}${paramsStr}`
     const headers = {
       'Content-Type': 'application/json',
     }
@@ -304,7 +307,7 @@ export default class GitlabConnector implements StorageConnector {
           client_id: this.options.clientId,
           client_secret: this.options.clientSecret,
         }
-        const response = await fetch('https://gitlab.com/oauth/token', {
+        const response = await fetch(this.options.domain + '/oauth/token', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -391,7 +394,7 @@ export default class GitlabConnector implements StorageConnector {
       codeVerifier,
       codeChallenge,
     }
-    return `https://gitlab.com/oauth/authorize?client_id=${this.options.clientId}&redirect_uri=${redirect_uri}&response_type=code&state=${session.gitlab.state}&scope=${this.options.scope}&code_challenge=${codeChallenge}&code_challenge_method=S256`
+    return `${this.options.domain}/oauth/authorize?client_id=${this.options.clientId}&redirect_uri=${redirect_uri}&response_type=code&state=${session.gitlab.state}&scope=${this.options.scope}&code_challenge=${codeChallenge}&code_challenge_method=S256`
   }
 
   getOptions(formData: object): object {
@@ -420,7 +423,7 @@ export default class GitlabConnector implements StorageConnector {
     if(!session.gitlab?.codeVerifier) throw new ApiError('Missing code verifier', 401)
     if(!session.gitlab?.codeChallenge) throw new ApiError('Missing code challenge', 401)
 
-    const response = await fetch('https://gitlab.com/oauth/token', {
+    const response = await fetch(this.options.domain + '/oauth/token', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',