@silexlabs/silex 3.3.1-1 → 3.3.1-3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.3.1-1",
+  "version": "3.3.1-3",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -105,7 +105,7 @@
   "dependencies": {
     "@fontsource/ubuntu": "^5.0.13",
     "@fortawesome/fontawesome-free": "6.6.0",
-    "@silexlabs/grapesjs-advanced-selector": "1.2.1-0",
+    "@silexlabs/grapesjs-advanced-selector": "1.2.1-2",
     "@silexlabs/grapesjs-filter-styles": "1.1.0",
     "@silexlabs/grapesjs-fonts": "1.1.0",
     "@silexlabs/grapesjs-keymaps-dialog": "1.1.0",

package/src/css/grapesjs.scss

@@ -117,6 +117,9 @@
 #gjs-clm-tags-field.gjs-field {
   margin: 0;
 }
+.gjs-field.gjs-field-integer {
+  width: 100%;
+}
 .gjs-clm-tags {
   padding-top: 7px;
   padding-bottom: 0;
@@ -124,6 +127,10 @@
 #gjs-clm-up {
   margin-top: 0;
 }
+.gjs-sm-icon[title]:not([title=""])::after {
+  content: "?";
+  margin-left: 0.5em;
+}
 
 /*
 */
@@ -220,3 +227,8 @@
     display: block;
     color: var(--gjs-color-warn);
 }
+
+// FIXME: Workaround, why is this needed?
+.gjs-field .gjs-sel-arrow {
+  z-index: 999;
+}

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
@@ -61,7 +62,7 @@ export default (editor: Editor, opts) => {
         { id: 'initial', value: 'initial', name: 'initial' },
         { id: 'unset', value: 'unset', name: 'unset' },
       ],
-      info: 'The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.',
+      info: 'Controls element visibility without changing layout.',
     })
     editor.StyleManager.removeProperty('general', 'float')
     editor.StyleManager.removeProperty('general', 'position')
@@ -120,15 +121,36 @@ 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: 'The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.',
-      full: true,
-      visible: false,
-    }, { at: 0 })
+      props: [{
+        name: 'Content',
+        property: 'content',
+        type: 'text',
+        defaults: '',
+        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 (['before', 'after'].includes(state)) {
+                return resolve(true)
+              }
+              return resolve(false)
+            } catch(e) {
+              reject(e)
+            }
+          })
+        })
+      },
+    }, 0)
     /***************/
     /* Dimension   */
     /***************/
@@ -217,8 +239,22 @@ export default (editor: Editor, opts) => {
           { id: 'unset', value: 'unset', name: 'unset' },
         ],
       }],
-      info: 'The overflow CSS property sets what to do when an element\'s content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y.',
+      info: 'Controls content overflow in a block.',
     }, { at: 6 })
+
+    editor.StyleManager.addProperty('dimension', {
+      name: 'Scroll Behavior',
+      property: 'scroll-behavior',
+      type: 'select',
+      defaults: '',
+      options: [
+        { id: '', value: '', name: '' },
+        { id: 'auto', value: 'auto', name: 'auto' },
+        { id: 'smooth', value: 'smooth', name: 'smooth' }
+      ],
+      info: 'Sets smooth or auto scroll behavior.',
+    }, { at: 7 })
+
     editor.StyleManager.removeProperty('dimension', 'margin')
     editor.StyleManager.addProperty('dimension', {
       name: 'Margin',
@@ -256,7 +292,7 @@ export default (editor: Editor, opts) => {
         fixedValues: [ 'initial', 'inherit', 'auto' ],
         units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
       }],
-    }, { at: 7 })
+    }, { at: 8 })
     editor.StyleManager.removeProperty('dimension', 'padding')
     editor.StyleManager.addProperty('dimension', {
       name: 'Padding',
@@ -297,64 +333,8 @@ export default (editor: Editor, opts) => {
         fixedValues: [ 'initial', 'inherit', 'auto' ],
         units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
       }],
-    }, { at: 8 })
-
-    editor.StyleManager.addProperty('extra', {
-      name: 'Scroll Snap Type',
-      property: 'scroll-snap-type',
-      type: 'composite',
-      properties: [{
-        name: 'Direction',
-        property: 'scroll-snap-type-direction',
-        type: 'select',
-        defaults: '',
-        options: [
-          { id: '', value: '', name: '' },
-          { id: 'none', value: 'none', name: 'none' },
-          { id: 'x', value: 'x', name: 'x' },
-          { id: 'y', value: 'y', name: 'y' },
-          { id: 'block', value: 'block', name: 'block' },
-          { id: 'inline', value: 'inline', name: 'inline' },
-          { id: 'both', value: 'both', name: 'both' },
-        ],
-      }, {
-        name: 'Mode',
-        property: 'scroll-snap-type-mode',
-        type: 'select',
-        defaults: '',
-        options: [
-          { id: '', value: '', name: '' },
-          { id: 'proximity', value: 'proximity', name: 'proximity' },
-          { id: 'mandatory', value: 'mandatory', name: 'mandatory' },
-        ],
-      }],
-      info: 'The scroll-snap-type CSS property sets the direction and mode of enforced snap points on the scroll container.',
     }, { at: 9 })
 
-    editor.StyleManager.addProperty('extra', {
-      name: 'Scroll Padding',
-      property: 'scroll-padding',
-      type: 'integer',
-      defaults: '',
-      units: ['px', 'em', 'rem', '%'],
-      info: 'The scroll-padding CSS property defines offsets for the optimal snap position when scrolling is loaded by the browser.',
-    }, { at: 10 })
-
-    editor.StyleManager.addProperty('extra', {
-      name: 'Scroll Snap Align',
-      property: 'scroll-snap-align',
-      type: 'select',
-      defaults: '',
-      options: [
-        { id: '', value: '', name: '' },
-        { id: 'none', value: 'none', name: 'none' },
-        { id: 'start', value: 'start', name: 'start' },
-        { id: 'end', value: 'end', name: 'end' },
-        { id: 'center', value: 'center', name: 'center' },
-      ],
-      info: 'The scroll-snap-align property specifies how strictly the snap points are enforced on the element in the container.',
-    }, { at: 11 })
-
     /***************/
     /* Typography  */
     /***************/
@@ -752,6 +732,15 @@ export default (editor: Editor, opts) => {
       default: '',
       fixedValues: ['normal', 'inherit', 'initial', 'revert', 'unset'],
     }, { at: 6 })
+    editor.StyleManager.addProperty('extra', {
+      name: 'Row Gap',
+      property: 'row-gap',
+      type: 'integer',
+      units: ['px', '%', 'em'],
+      info: 'The row-gap CSS property sets the size of the gap (gutter) between an element\'s rows.',
+      default: '',
+      fixedValues: ['normal', 'inherit', 'initial', 'revert', 'unset'],
+    }, { at: 7 })
     editor.StyleManager.addProperty('extra', {
       name: 'Column rule',
       property: 'column-rule',
@@ -791,7 +780,7 @@ export default (editor: Editor, opts) => {
         defaults: '',
         info: 'The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout.',
       }],
-    }, { at: 7 })
+    }, { at: 8 })
     editor.StyleManager.addProperty('extra', {
       name: 'Column span',
       property: 'column-span',
@@ -803,17 +792,61 @@ export default (editor: Editor, opts) => {
         { id: 'all', value: 'all', name: 'all' },
       ],
       info: 'The column-span CSS property makes it possible for an element to span across all columns when its value is set to all.',
-    }, { at: 8 })
-    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())
+    }, { at: 9 })
+    editor.StyleManager.addProperty('extra', {
+      name: 'Scroll Snap Type',
+      property: 'scroll-snap-type',
+      type: 'composite',
+      properties: [{
+        name: 'Direction',
+        property: 'scroll-snap-type-direction',
+        type: 'select',
+        defaults: '',
+        options: [
+          { id: '', value: '', name: '' },
+          { id: 'none', value: 'none', name: 'none' },
+          { id: 'x', value: 'x', name: 'x' },
+          { id: 'y', value: 'y', name: 'y' },
+          { id: 'block', value: 'block', name: 'block' },
+          { id: 'inline', value: 'inline', name: 'inline' },
+          { id: 'both', value: 'both', name: 'both' },
+        ],
+      }, {
+        name: 'Mode',
+        property: 'scroll-snap-type-mode',
+        type: 'select',
+        defaults: '',
+        options: [
+          { id: '', value: '', name: '' },
+          { id: 'proximity', value: 'proximity', name: 'proximity' },
+          { id: 'mandatory', value: 'mandatory', name: 'mandatory' },
+        ],
+      }],
+      info: 'The scroll-snap-type CSS property sets the direction and mode of enforced snap points on the scroll container.',
+    }, { at: 10 })
+    editor.StyleManager.addProperty('extra', {
+      name: 'Scroll Padding',
+      property: 'scroll-padding',
+      type: 'integer',
+      defaults: '',
+      units: ['px', 'em', 'rem', '%'],
+      info: 'Defines offsets for scroll snapping.',
+    }, { at: 11 })
+    editor.StyleManager.addProperty('extra', {
+      name: 'Scroll Snap Align',
+      property: 'scroll-snap-align',
+      type: 'select',
+      defaults: '',
+      options: [
+        { id: '', value: '', name: '' },
+        { id: 'none', value: 'none', name: 'none' },
+        { id: 'start', value: 'start', name: 'start' },
+        { id: 'end', value: 'end', name: 'end' },
+        { id: 'center', value: 'center', name: 'center' },
+      ],
+      info: 'Aligns elements to scroll snaps.',
+    }, { at: 11 })
+
     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,7 +14,7 @@
  * 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 { Component, Editor } from 'grapesjs'
 import { SectorConfig, registerSector } from './sectors'
 
 /**
@@ -22,62 +22,63 @@ import { SectorConfig, registerSector } from './sectors'
  *
  */
 
-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,
+    //       })
+    //     }
+    //   })
+    // Update the visibility
+    // This is a workaround grapesjs behavior: https://github.com/GrapesJS/grapesjs/issues/3123
+    sector.on('change:visible', () => applyVisibility())
+    editor.on('component:selected', comp => applyVisibility(comp))
+    function applyVisibility(comp: Component = editor.getSelected()) {
+      requestAnimationFrame(() => {
+        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())))
+        }
+      })
+    }
   })
 }

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: [
         {