@silexlabs/silex 3.4.0 → 3.5.1-1

package/src/css/silex.scss

@@ -60,11 +60,70 @@
 }
 
 // full screen settings
-.settings-dialog > div {
-  max-width: none;
-  width: 100%;
+.settings-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
   height: 100vh;
+  z-index: $z-dialog-inline;
+  pointer-events: auto;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+
+  .settings-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--primaryColor);
+    overflow: hidden;
+  }
+  .settings-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--gjs-border-color, #ddd);
+  }
+  .settings-header h3 {
+    margin: 0;
+    font-size: 18px;
+  }
+  .settings-close {
+    color: inherit;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .settings-body {
+    flex: 1;
+    overflow: auto;
+    padding: 0;
+  }
+  .settings-body .silex-form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .settings-body .silex-sidebar-dialog {
+    flex: 1;
+  }
+  footer {
+    position: fixed;
+    z-index: 10;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 0;
+  }
   form.silex-form {
     padding-bottom: 100px; // leave space for fixed footer
     textarea {
@@ -91,7 +150,7 @@
     .silex-version {
       float: left;
       padding: 0 15px;
-      font-size: x-small;
+      font-size: small;
     }
   }
   .CodeMirror {
@@ -164,7 +223,7 @@ input.silex-button[type="submit"] {
     margin: 5px;
   }
   main {
-    width: 100%;
+    width: 93%;
   }
 }
 

package/src/ts/client/config.ts

@@ -29,6 +29,7 @@ import { addSection, removeSection } from './grapesjs/settings'
 // Plugins
 import publishCustomCodeBlock from './publish-custom-code-block'
 import publishFonts from './publish-fonts'
+import { EleventyPluginOptions } from './grapesjs/cms'
 
 /**
  * @fileoverview Silex client side config
@@ -118,6 +119,27 @@ export class ClientConfig extends Config {
   fontsServerUrl = 'https://fonts.googleapis.com'
   fontsApiUrl = 'https://www.googleapis.com'
 
+  /**
+   * CMS configuration options
+   * @default Default CMS configuration with enabled: true
+   */
+  cmsConfig: Partial<EleventyPluginOptions> & { enabled?: boolean } = {
+    enabled: true,
+    enable11ty: true,
+    cacheBuster: false,
+    dataSources: [],
+    dir: {
+      input: '',
+      html: '',
+      assets: 'assets',
+      css: 'css',
+    },
+    urls: {
+      css: '/css',
+      assets: '/assets',
+    },
+  }
+
   /**
    * Init GrapesJS config which depend on the config file properties
    */
@@ -179,6 +201,7 @@ export class ClientConfig extends Config {
    * Add a section to the settings dialog
    */
   addSettings(section: SettingsSection, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number = 'last') {
+    console.warn('addSettings API is deprecated, use the command instead:')
     addSection(section, siteOrPage, position)
   }
 

package/src/ts/client/grapesjs/breadcrumbs.ts

@@ -47,9 +47,10 @@ export default function (editor, options) {
 
   editor.on('component:selected style:target component:drag:end', () => renderBreadcrumbs())
   function renderBreadcrumbs() {
-    let component = editor.getSelected() ?? editor.Pages.getSelected().getMainComponent()
+    const selectedPage = editor.Pages?.getSelected()
+    let component = editor.getSelected() ?? selectedPage?.getMainComponent()
 
-    if(!breadcrumbsContainer) return
+    if(!breadcrumbsContainer || !component) return
 
     // Clear the breadcrumbs container
     breadcrumbsContainer.innerHTML = ''

package/src/ts/client/grapesjs/cms/DataSource.ts

@@ -0,0 +1,333 @@
+import { DataSourceType, Field, IDataSource, Type, addDataSource, addFilters, removeFilters } from '@silexlabs/grapesjs-data-source'
+import { EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from './index'
+import { Editor } from 'grapesjs'
+import { i18nFilters } from './filters'
+import { ClientEvent } from '../../events'
+
+//import { cmdPauseAutoSave } from '@silexlabs/silex/src/ts/client/grapesjs/storage'
+const cmdPauseAutoSave = 'pause-auto-save'
+
+export default function(editor: Editor, opts: EleventyPluginOptions): void {
+  editor.on(`
+    ${ ClientEvent.SETTINGS_SAVE_END }
+    storage:after:load
+    `, () => {
+    updateFilters(editor, opts)
+  })
+  updateFilters(editor, opts)
+  if(opts.enable11ty) {
+    // Add the 11ty data source using the new functional API
+    const ds = new EleventyDataSource()
+    editor.runCommand(cmdPauseAutoSave)
+
+    // Add the data source
+    addDataSource(ds)
+
+    // Wait for the next tick to avoid triggering a save
+    setTimeout(() => {
+      editor.stopCommand(cmdPauseAutoSave)
+    })
+  }
+}
+
+function updateFilters(editor: Editor, opts: EleventyPluginOptions) {
+  const settings = (editor.getModel().get('settings') || {}) as Silex11tyPluginWebsiteSettings
+  if(settings.eleventyI18n) {
+    addFilters(i18nFilters)
+  } else if (!opts.i18nPlugin) {
+    removeFilters(i18nFilters)
+  }
+}
+
+export const EleventyDataSourceId = 'eleventy'
+
+export class EleventyDataSource implements IDataSource {
+  /**
+   * Unique identifier of the data source
+   * This is used to retrieve the data source from the editor
+   */
+  public id = EleventyDataSourceId
+  public label = 'Eleventy'
+  public url = ''
+  public type = 'graphql' as DataSourceType
+  public method = 'POST'
+  public headers = {}
+  public hidden = true
+  public readonly = true
+
+  private eventListeners: Record<string, ((...args: unknown[]) => void)[]> = {}
+
+  // Simple event handling
+  on(event: string, callback: (...args: unknown[]) => void): void {
+    if (!this.eventListeners[event]) {
+      this.eventListeners[event] = []
+    }
+    this.eventListeners[event].push(callback)
+  }
+
+  off(event: string, callback?: (...args: unknown[]) => void): void {
+    if (!this.eventListeners[event]) return
+    if (callback) {
+      this.eventListeners[event] = this.eventListeners[event].filter(cb => cb !== callback)
+    } else {
+      this.eventListeners[event] = []
+    }
+  }
+
+  trigger(event: string, ...args: unknown[]): void {
+    if (!this.eventListeners[event]) return
+    this.eventListeners[event].forEach(callback => callback(...args))
+  }
+
+  /**
+   * Implement IDatasource
+   */
+  async connect(): Promise<void> {}
+  isConnected(): boolean { return true }
+
+  /**
+   * Implement IDatasource
+   */
+  getQuery(/*expressions: Expression[]*/): string { return '' }
+
+  /**
+   * Implement IDatasource
+   */
+  getTypes(): Type[] {
+    return [{
+      id: 'string',
+      label: 'String',
+      dataSourceId: 'eleventy',
+      fields: [],
+    }, {
+      id: 'number',
+      label: 'Number',
+      dataSourceId: 'eleventy',
+      fields: [],
+    }, {
+      id: 'date',
+      label: 'Date',
+      dataSourceId: 'eleventy',
+      fields: [],
+    }, {
+      id: 'page',
+      label: 'page',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'url',
+        label: 'url',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'fileSlug',
+        label: 'fileSlug',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'filePathStem',
+        label: 'filePathStem',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'date',
+        label: 'date',
+        typeIds: ['date'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'inputPath',
+        label: 'inputPath',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'outputPath',
+        label: 'outputPath',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'outputFileExtension',
+        label: 'outputFileExtension',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'lang',
+        label: 'lang',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'pagination',
+      label: 'pagination',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'hrefs',
+        label: 'hrefs',
+        typeIds: ['string'],
+        kind: 'list',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'href',
+        label: 'href',
+        typeIds: ['paginationHref'],
+        kind: 'object',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'pageNumber',
+        label: 'pageNumber',
+        typeIds: ['number'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'pages',
+        label: 'pages',
+        typeIds: ['page'],
+        kind: 'list',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'paginationHref',
+      label: 'paginationHref',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'next',
+        label: 'next',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'previous',
+        label: 'previous',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'first',
+        label: 'first',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'last',
+        label: 'last',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'eleventy',
+      label: 'eleventy',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'version',
+        label: 'version',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'generator',
+        label: 'generator',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'env',
+        label: 'env',
+        typeIds: ['env'],
+        kind: 'object',
+        dataSourceId: 'eleventy',
+      }]
+    }, {
+      id: 'env',
+      label: 'env',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'root',
+        label: 'root',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'config',
+        label: 'config',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'source',
+        label: 'source',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'runMode',
+        label: 'runMode',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }, {
+      id: 'locale_link',
+      label: 'locale_link',
+      dataSourceId: 'eleventy',
+      fields: [{
+        id: 'url',
+        label: 'url',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'lang',
+        label: 'lang',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }, {
+        id: 'label',
+        label: 'label',
+        typeIds: ['string'],
+        kind: 'scalar',
+        dataSourceId: 'eleventy',
+      }],
+    }]
+  }
+
+  /**
+   * Implement IDatasource
+   */
+  getQueryables(): Field[] {
+    return [{
+      id: 'page',
+      label: 'page',
+      typeIds: ['page'],
+      kind: 'object',
+      dataSourceId: 'eleventy',
+    //}, {
+    //  id: 'eleventy',
+    //  label: 'eleventy',
+    //  typeIds: ['eleventy'],
+    //  kind: 'object',
+    //  dataSourceId: 'eleventy',
+    //}, {
+    //  id: 'env',
+    //  label: 'env',
+    //  typeIds: ['env'],
+    //  kind: 'object',
+    //  dataSourceId: 'eleventy',
+    }]
+  }
+
+  fetchValues(query: string): Promise<unknown> {
+    console.log('fetch', {query})
+    throw new Error('not implemented yet')
+  }
+}
+
+export class EleventyDataSourceTest extends EleventyDataSource {
+}

package/src/ts/client/grapesjs/cms/blocks.ts

@@ -0,0 +1,124 @@
+import { Component, Editor } from 'grapesjs'
+import { ClientConfig } from '../../config'
+
+export default function(editor: Editor/*, opts: EleventyPluginOptions*/): void {
+  // **
+  // Shortcode
+  editor.BlockManager.add('eleventy-shortcode', {
+    label: 'Shortcode',
+    category: 'Eleventy',
+    content: { type: 'eleventy-shortcode' },
+    media: '<span style="font-size: 50px;">{%</span>',
+  })
+  editor.DomComponents.addType('eleventy-shortcode', {
+    model: {
+      defaults: {
+        traits: [{
+          type: 'shortcode-name',
+          label: 'Shortcode name',
+          name: 'shortcode_name',
+          placeholder: 'shortcode_name',
+        }, {
+          type: 'shortcode-attributes',
+          label: 'Shortcode attributes',
+          name: 'shortcode_attributes',
+          placeholder: 'param1, "example param 2"',
+        }],
+      },
+      init() {
+        let pending = false
+        editor.on('component:add component:remove component:mount', model => {
+          if (pending) return
+          setTimeout(() => {
+            // FIXME: why do we need a timeout?
+            if (model.parent() === this || model === this) {
+              pending = true
+              updateShortcode(this)
+              pending = false
+            }
+          }, 500)
+        })
+      },
+    },
+  })
+  function updateShortcode(component: Component) {
+    const { shortcode_attributes, shortcode_name } = component.get('attributes')
+    const componentsToKeep = component.components()
+      .filter(c => c.view?.el?.nodeType === 1)
+    if (componentsToKeep.length) {
+      // Paired shortcode
+      component.components(`
+        {% ${shortcode_name} ${shortcode_attributes ?? ''} %}
+        <div class="replace_content"></div>
+        {% end${shortcode_name} %}
+        `)
+      const replaceContentDiv = component.components().find(c => c.getClasses().includes('replace_content'))
+      if (!replaceContentDiv) {
+        console.error('No replace_content found', { component, componentsToKeep })
+        return
+      }
+      replaceContentDiv.replaceWith(componentsToKeep)
+    } else {
+      component.components(`
+        {% ${shortcode_name} ${shortcode_attributes ?? ''} %}
+        `)
+    }
+  }
+  editor.TraitManager.addType('shortcode-name', {
+    onEvent({ component }) {
+      updateShortcode(component)
+    },
+  })
+  editor.TraitManager.addType('shortcode-attributes', {
+    onEvent({ component }) {
+      updateShortcode(component)
+    },
+  })
+  // **
+  // Select element
+  editor.BlockManager.add('eleventy-select', {
+    label: 'select',
+    category: 'Eleventy',
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"></path><path d="M18.5 13l1.5-2h-3zM4 11.5h11v1H4z"></path></svg>',
+    content: { type: 'eleventy-select' },
+  })
+  editor.DomComponents.addType('eleventy-select', {
+    model: {
+      defaults: {
+        tagName: 'select',
+        droppable: true,
+        // // Prevent the drop down from opening on click
+        // script: function() {
+        //   this.addEventListener('mousedown', event => {
+        //     event.preventDefault()
+        //   })
+        // },
+      },
+    },
+  })
+  // **
+  // Option element
+  editor.BlockManager.add('eleventy-option', {
+    label: 'option',
+    category: 'Eleventy',
+    media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
+    content: { type: 'eleventy-option' },
+  })
+  editor.DomComponents.addType('eleventy-option', {
+    model: {
+      defaults: {
+        tagName: 'option',
+        droppable: false,
+        //draggable: 'select, optgroup', // Sometimes we need a container between the select and the option to have states inside the loop
+        traits: [
+          {
+            type: 'text',
+            label: 'Value',
+            name: 'value',
+            placeholder: 'Value',
+          },
+        ],
+      },
+    },
+  })
+}