@silexlabs/silex 3.3.0 → 3.3.1-1

package/src/ts/client/grapesjs/flex.ts

@@ -0,0 +1,83 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * 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 { SectorConfig, registerSector } from './sectors'
+
+/**
+ * @fileoverview This plugin adds CSS properties for the UL, OL and LI elements
+ *
+ */
+
+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')
+    }
+  }]
+
+  editor.on('load', () => {
+    sectorConfigs.forEach(sectorConfig => registerSector(editor, sectorConfig, 2))
+  })
+}

package/src/ts/client/grapesjs/img.ts

@@ -15,7 +15,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Editor } from 'grapesjs'
+import { Component, ComponentView, Editor } from 'grapesjs'
+import { displayedToStored, storedToDisplayed } from '../assetUrl'
 
 /**
  * @fileoverview This plugin adds CSS properties object-fit and object-position to the image component.
@@ -25,13 +26,17 @@ export default (editor: Editor, opts) => {
   opts = {
     // Default options
     labelSrc: 'Image URL',
-    placeholderSrc: 'https://example.com/image.jpg',
+    placeholderSrc: '/assets/placeholder.png',
     // These default values will never be used,
     // as there is default values in config
     replacedElements: ['img'],
     // Override with provided config
     ...opts,
   }
+
+  const domc = editor.DomComponents
+  const imgType = domc.getType('image')
+
   // Add src trait in the properties
   editor.TraitManager.addType('src', {
     events: {
@@ -131,17 +136,51 @@ export default (editor: Editor, opts) => {
     // It shows up when the selection is an image
     editor.on('component:selected', (model) => {
       if (model && opts.replacedElements.includes(model.get('tagName')?.toLowerCase())) {
-        // Not necessary, grapesjs does it automatically
-        // sector.set('visible', true);
         showSector = true
+        sector.set('visible', true)
       } else {
         showSector = false
         sector.set('visible', false)
       }
     })
-    // Watch automatic changes and revert them if needed
-    sector.on('change:visible', (model, open) => {
+    // Watch changes made by grapesjs and revert them if needed
+    sector.on('change:visible', () => {
       if(sector.get('visible') !== showSector) sector.set('visible', showSector)
     })
+    // Add a new image type that handles the storage URL vs displayed URL
+    domc.addType('image', {
+      ...imgType,
+      view: {
+        ...imgType.view,
+        onRender() {
+          const view = this as ComponentView
+          imgType.view.onRender && imgType.view.onRender.call(this) // call original
+          const el = view.el
+          const elImg = view.el as HTMLImageElement
+          const src = this.model.getAttributes().src
+          if (src && !src.startsWith('http')) {
+            elImg.src = storedToDisplayed(src, opts.websiteId, opts.storageId)
+          }
+        },
+      },
+      model: {
+        ...imgType.model,
+        init() {
+          const model = this as Component
+          imgType.model.init && imgType.model.init.call(this) // call original
+          // Handle changes by the AssetManager
+          model.on('change', () => {
+            if (model.get('src')) {
+              const newSrc = displayedToStored(model.get('src'))
+              if (newSrc !== model.get('src')) {
+                model.set('src', newSrc)
+                model.view.render()
+              }
+            }
+          })
+        },
+      },
+    })
+
   })
 }

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

@@ -32,16 +32,18 @@ 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 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 from '@silexlabs/grapesjs-fonts'
+import selectorPlugin from '@silexlabs/grapesjs-advanced-selector'
 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 rateLimitPlugin from '@silexlabs/grapesjs-storage-rate-limit'
 import borderPugin from 'grapesjs-style-border'
@@ -72,6 +74,7 @@ const plugins = [
   {name: 'grapesjs-style-bg', value: backgroundPlugin},
   {name: './settings', value: settingsDialog},
   {name: '@silexlabs/grapesjs-fonts', value: fontsDialogPlugin},
+  {name: '@silexlabs/grapesjs-advanced-selector', value: selectorPlugin},
   {name: './new-page-dialog', value: newPageDialog},
   {name: './page-panel', value: pagePanelPlugin},
   {name: 'grapesjs-blocks-basic', value: blocksBasicPlugin},
@@ -84,7 +87,6 @@ const plugins = [
   {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},
@@ -94,6 +96,8 @@ const plugins = [
   {name: '@silexlabs/grapesjs-loading', value: loadingPlugin},
   {name: './breadcrumbs', value: breadcrumbsPlugin},
   {name: './img', value: imgPlugin},
+  {name: './li', value: liPlugin},
+  {name: './flex', value: flexPlugin},
   {name: './css-props', value: cssPropsPlugin},
   {name: './footer', value: footerPlugin},
   {name: '@silexlabs/grapesjs-storage-rate-limit', value: rateLimitPlugin},
@@ -170,6 +174,10 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       actions: ['bold', 'italic', 'underline', 'strikethrough', 'link', 'wrap', orderedList, unorderedList],
     },
 
+    selectorManager: {
+      custom: true, // This should not be needed, check index.js
+      escapeName: (name) => `${name}`,
+    },
 
     plugins: plugins.map(p => p.value),
 
@@ -291,10 +299,6 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
         cmdOpenSettings,
         appendTo: '.page-panel-container',
       },
-      [uiSuggestClasses.toString()]: {
-        enableCount: false,
-        enablePerformance: false,
-      },
       [filterStyles.toString()]: {
         appendBefore: '.gjs-sm-sectors',
       },
@@ -334,6 +338,8 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       },
       [imgPlugin.toString()]: {
         replacedElements: config.replacedElements,
+        websiteId,
+        storageId,
       },
       [notificationsPlugin.toString()]: {
         container: notificationContainer,
@@ -418,9 +424,6 @@ export async function initEditor(config: EditorConfig) {
       // 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

package/src/ts/client/grapesjs/li.ts

@@ -0,0 +1,77 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * 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 { SectorConfig, registerSector } from './sectors'
+
+/**
+ * @fileoverview This plugin adds CSS properties for the UL, OL and LI elements
+ *
+ */
+
+export default (editor: Editor) => {
+  const sectorConfigs: SectorConfig[] = [
+    {
+      name: 'List',
+      props: [
+        {
+          id: 'list-style-type',
+          name: 'List Style Type',
+          property: 'list-style-type',
+          type: 'select',
+          options: [
+            { id: '', label: '' },
+            { id: 'disc', label: 'disc' },
+            { id: 'circle', label: 'circle' },
+            { id: 'square', label: 'square' },
+            { id: 'decimal', label: 'decimal' },
+            { id: 'decimal-leading-zero', label: 'decimal-leading-zero' },
+            { id: 'lower-roman', label: 'lower-roman' },
+            { id: 'upper-roman', label: 'upper-roman' },
+            { id: 'lower-alpha', label: 'lower-alpha' },
+            { id: 'upper-alpha', label: 'upper-alpha' },
+            { id: 'none', label: 'none' },
+          ],
+          defaults: '',
+        },
+        {
+          id: 'list-style-position',
+          name: 'List Style Position',
+          property: 'list-style-position',
+          type: 'select',
+          options: [
+            { id: '', label: '' },
+            { id: 'outside', label: 'outside' },
+            { id: 'inside', label: 'inside' },
+          ],
+          defaults: '',
+        },
+        {
+          id: 'list-style-image',
+          name: 'List Style Image',
+          property: 'list-style-image',
+          type: 'text',
+          defaults: '',
+        },
+      ],
+      shouldShow: comp => ['ul', 'ol', 'li'].includes(comp.get('tagName')?.toLowerCase() || ''),
+    },
+  ]
+
+  editor.on('load', () => {
+    sectorConfigs.forEach(sectorConfig => registerSector(editor, sectorConfig))
+  })
+}

package/src/ts/client/grapesjs/sectors.ts

@@ -0,0 +1,59 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * 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 { Component, Editor } from 'grapesjs'
+
+/**
+ * @fileoverview
+ *
+ */
+
+export type SectorConfig = {
+  name: string
+  props: any[]
+  shouldShow: (comp: Component) => boolean
+}
+
+export function registerSector(editor: Editor, config: SectorConfig, at?: number) {
+  const sm = editor.StyleManager
+  let sector = sm.getSector(config.name)
+  if (!sector) {
+    sector = sm.addSector(config.name, { name: config.name, open: false, visible: false }, { at })
+  }
+
+  // Add props if not already present
+  const existingProps = sector.get('properties')//.map(p => p.get('property'))
+  config.props.forEach(p => {
+    if (!existingProps.includes(p.property)) {
+      sector.addProperty(p, {})
+    }
+  })
+
+  // 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)
+    if (sector.get('visible') !== shouldShow) {
+      sector.set('visible', shouldShow)
+    }
+  })
+}

package/src/ts/client/grapesjs/semantic.ts

@@ -21,94 +21,168 @@ import {map} from 'lit-html/directives/map.js'
 // constants
 const pluginName = 'semantic'
 
-const tags = [
-  'DIV',
-  'P',
-  'H1',
-  'H2',
-  'H3',
-  'H4',
-  'H5',
-  'H6',
-  'SPAN',
-  'MAIN',
-  'ASIDE',
-  'SECTION',
-  'ADDRESS',
-  'ARTICLE',
-  'BUTTON',
-  'NAV',
-  'HEADER',
-  'FOOTER',
-  'DETAILS',
-  'SUMMARY',
-  'PRE',
-  'BLOCKQUOTE',
+// Group tags by category
+const tagCategories = [
+  {
+    label: 'Containers',
+    tags: ['DIV', 'SPAN', 'P'],
+  },
+  {
+    label: 'Headings',
+    tags: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'],
+  },
+  {
+    label: 'Main document structure',
+    tags: ['MAIN', 'SECTION', 'ARTICLE', 'NAV', 'ASIDE', 'HEADER', 'FOOTER'],
+  },
+  {
+    label: 'Content grouping',
+    tags: ['ADDRESS', 'BLOCKQUOTE', 'PRE'],
+  },
+  {
+    label: 'Interactive/form',
+    tags: ['BUTTON', 'LABEL', 'DETAILS', 'SUMMARY'],
+  },
 ]
 
+// Flatten all tags for lookup
+const tags = tagCategories.flatMap(cat => cat.tags)
+
 // plugin code
 export const semanticPlugin = (editor, opts) => {
-  // Add the new trait to all component types
-  editor.DomComponents.getTypes().map(type => {
+  // Helper to merge extra traits into a type's default traits
+  function withExtraTraits(type, extraTraits) {
+    const origTraits = editor.DomComponents.getType(type.id).model.prototype.defaults.traits
+    return [
+      ...origTraits,
+      ...extraTraits,
+    ]
+  }
+
+  // Traits to add to all components
+  const extraTraits = [
+    {
+      label: 'Tag name',
+      type: 'tag-name',
+      name: 'tag-name',
+    },
+    {
+      label: 'For',
+      name: 'for',
+      type: 'for-trait',
+      placeholder: 'ID of input',
+    }
+  ]
+
+  // Add the extra traits to all component types
+  editor.DomComponents.getTypes().forEach(type => {
     editor.DomComponents.addType(type.id, {
       model: {
         defaults: {
-          traits: [
-            // Keep the type original traits
-            ...editor.DomComponents.getType(type.id).model.prototype.defaults.traits,
-            // Add the new trait
-            {
-              label: 'Tag name',
-              type: 'tag-name',
-              name: 'tag-name',
-            },
-          ]
+          traits: withExtraTraits(type, extraTraits),
         }
       }
     })
   })
 
-  function doRender(el: HTMLElement, tagName: string) {
-    const tagsWithCurrent = tags.includes(tagName.toUpperCase()) ? tags : tags.concat(tagName.toUpperCase())
-    render(html`
-      <label for="semantic__select" class="gjs-one-bg silex-label">Type</label>
-      <select id="semantic__select" @change=${event => doRender(el, event.target.value)}>
-        ${map<string>(tagsWithCurrent, tag => html`
-          <option value="${tag}" ?selected=${tagName.toUpperCase() === tag}>${tag}</option>
-        `)}
-      </select>
-    `, el)
+  // Shared render function for select and for-trait
+  function renderTrait(el: HTMLElement, opts: {
+    tagName?: string,
+    forAttr?: string,
+    type: 'tag' | 'for'
+  }) {
+    const tagName = (opts.tagName || '').toUpperCase()
+    if (opts.type === 'tag') {
+      // Render tag select
+      let categoriesWithCurrent = tagCategories.map(cat => ({
+        ...cat,
+        tags: cat.tags.slice(),
+      }))
+      if (tagName && !tags.includes(tagName)) {
+        categoriesWithCurrent = [
+          ...categoriesWithCurrent,
+          { label: 'Other', tags: [tagName] }
+        ]
+      }
+      render(html`
+        <select @change=${event => renderTrait(el, { tagName: event.target.value, type: 'tag' })}>
+          ${map(categoriesWithCurrent, cat => html`
+            <optgroup label="${cat.label}">
+              ${map(cat.tags, tag => html`
+                <option value="${tag}" ?selected=${tagName === tag}>${tag}</option>
+              `)}
+            </optgroup>
+          `)}
+        </select>
+      `, el)
+    } else if (opts.type === 'for') {
+      // Render "for" input, hide if not LABEL
+      const wrapper = el.closest('.gjs-trt-trait__wrp-for') as HTMLElement
+      if (tagName !== 'LABEL') {
+        if(wrapper) wrapper.style.display = 'none'
+        render(html``, el)
+      } else {
+        if(wrapper) wrapper.style.display = 'initial'
+        render(html`
+          <input type="text" placeholder="ID of input" value="${opts.forAttr || ''}"
+            @input=${event => renderTrait(el, { forAttr: (event.target as HTMLInputElement).value, tagName, type: 'for' })}
+          >
+        `, el)
+      }
+    }
   }
+
   function doRenderCurrent(el: HTMLElement) {
-    doRender(el, editor.getSelected()?.get('tagName') || '')
+    renderTrait(el, { tagName: editor.getSelected()?.get('tagName') || '', type: 'tag' })
+  }
+  function doRenderCurrentFor(el: HTMLElement) {
+    const selected = editor.getSelected()
+    renderTrait(el, {
+      tagName: selected?.get('tagName') || '',
+      forAttr: selected?.getAttributes().for || '',
+      type: 'for'
+    })
   }
 
   // Add semantic traits
   // inspired by https://github.com/olivmonnier/grapesjs-plugin-header/blob/master/src/components.js
   editor.TraitManager.addType('tag-name', {
-    createInput({ trait }) {
-      // Create a new element container and add some content
+    createInput({ trait, component }) {
       const el = document.createElement('div')
-      // update the UI when a page is added/renamed/removed
       editor.on('page', () => doRenderCurrent(el))
       doRenderCurrent(el)
-      // this will be the element passed to onEvent and onUpdate
       return el
     },
-    // Update the component based on UI changes
-    // `elInput` is the result HTMLElement you get from `createInput`
     onEvent({ elInput, component, event }) {
-      const value = elInput.querySelector('#semantic__select').value
-      if(component.get('tagName').toUpperCase() === value.toUpperCase()){
-        // Already done
-      } else {
+      const value = (event.target as HTMLSelectElement).value
+      if(component.get('tagName').toUpperCase() !== value.toUpperCase()){
         component.set('tagName', value)
       }
     },
-    // Update UI on the component change
     onUpdate({ elInput, component }) {
       const tagName = component.get('tagName')
-      doRender(elInput, tagName)
+      renderTrait(elInput, { tagName, type: 'tag' })
+    },
+  })
+
+  editor.TraitManager.addType('for-trait', {
+    createInput({ trait, component }) {
+      const el = document.createElement('div')
+      editor.on('page', () => doRenderCurrentFor(el))
+      editor.on('component:update', () => doRenderCurrentFor(el))
+      doRenderCurrentFor(el)
+      return el
+    },
+    onEvent({ elInput, component, event }) {
+      const value = (event.target as HTMLInputElement).value
+      if(component.getAttributes().for !== value){
+        component.setAttributes({ for: value })
+      }
+    },
+    onUpdate({ elInput, component }) {
+      const forAttr = component.getAttributes().for || ''
+      const tagName = component.get('tagName') || ''
+      renderTrait(elInput, { forAttr, tagName, type: 'for' })
     },
   })
 }

package/src/ts/client/grapesjs/symbolDialogs.ts

@@ -15,21 +15,25 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Component, Editor } from 'grapesjs'
+
 export const cmdPromptAddSymbol = 'symbol-prompt-add'
 
-export default (editor, opts) => {
-  function getNext(prefix) {
+export default (editor: Editor) => {
+  function getNext(prefix: string) {
     let idx = 1
-    while(editor.Symbols.find(s => s.get('label') === prefix + idx)) {
+    while(
+      editor.Components.getSymbols()
+        .find((symbol: Component) => symbol.get('custom-name') === prefix + idx)
+    ) {
       idx++
     }
     return prefix + idx
   }
   editor.Commands.add(cmdPromptAddSymbol, {
-    run: (_, sender) => {
+    run: (_) => {
       const label = prompt('Label', getNext('Symbol '))
-      const icon = 'fa-gem'
-      editor.runCommand('symbols:add', { label, icon })
+      editor.runCommand('symbols:add', { label })
     }
   })
 }