@silexlabs/silex 3.3.1-0 → 3.3.1-2

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

@@ -42,6 +42,8 @@ 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'
@@ -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},
@@ -334,6 +338,8 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       },
       [imgPlugin.toString()]: {
         replacedElements: config.replacedElements,
+        websiteId,
+        storageId,
       },
       [notificationsPlugin.toString()]: {
         container: notificationContainer,

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 })
     }
   })
 }

package/src/ts/client/index.ts

@@ -21,13 +21,11 @@
  *
  */
 
-import { Component, ComponentView } from 'grapesjs'
 import { DEV_MESSAGE } from '../constants'
 import { ClientConfig } from './config'
 import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'
 import { cmdPauseAutoSave } from './grapesjs/storage'
-import { displayedToStored, storedToDisplayed } from './assetUrl'
 
 // Expose API to calling app as window.silex
 export * from './expose'
@@ -85,42 +83,6 @@ export async function start(options = {}): Promise<void> {
   // Add default plugins
   await config.addDefaultPlugins()
 
-  const domc = editor.DomComponents
-  const imgType = domc.getType('image')
-  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, config.websiteId, config.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()
-            }
-          }
-        })
-      },
-    },
-  })
-
   // Load the site
   try {
     editor.runCommand(cmdPauseAutoSave)

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

@@ -656,7 +656,7 @@ export default class GitlabConnector implements StorageConnector {
     } while (page <= totalPages)
 
     return projects
-      .filter(p => p.name.startsWith(this.options.repoPrefix))
+      .filter(p => p.name.startsWith(this.options.repoPrefix) && !p.name.includes('-deleted-'))
       .map(p => ({
         websiteId: p.id,
         name: p.name.replace(this.options.repoPrefix, ''),
@@ -826,75 +826,10 @@ export default class GitlabConnector implements StorageConnector {
     await this.callApi({
       session,
       path: `api/v4/projects/${websiteId}`,
-      method: 'DELETE'
+      method: 'DELETE',
     })
-    //// Load the meta repo data
-    //const file = await this.callApi(session, `api/v4/projects/${this.getMetaRepoPath(session)}/repository/files/${this.options.metaRepoFile}`, 'GET', null, {
-    //  ref: this.options.branch,
-    //})
-    //const metaRepo = JSON.parse(Buffer.from(file.content, 'base64').toString('utf8')) as MetaRepoFileContent
-    //const data = metaRepo.websites[websiteId]
-    //if(!data) throw new ApiError(`Website ${websiteId} not found`, 404)
-    //// Update or create the website meta data
-    //delete metaRepo.websites[websiteId]
-    //// Save the meta repo data
-    //const project = await this.callApi(session, `api/v4/projects/${this.getMetaRepoPath(session)}/repository/files/${this.options.metaRepoFile}`, 'PUT', {
-    //  branch: this.options.branch,
-    //  commit_message: `Delete meta data of ${data.meta.name} (${websiteId}) from Silex`,
-    //  content: JSON.stringify(metaRepo),
-    //})
   }
 
-  // async duplicateWebsite(session: GitlabSession, websiteId: string): Promise<void> {
-  //   // Get the repo meta data
-  //   const meta = await this.getWebsiteMeta(session, websiteId)
-  //   // List all the repository files
-  //   const files = await this.ls({
-  //     session,
-  //     websiteId,
-  //     recursive: true,
-  //   })
-
-  //   // Create a new repo
-  //   const newId = await this.createWebsite(session, {
-  //     ...meta,
-  //     name: meta.name + ' Copy ' + new Date().toISOString().replace(/T.*/, '') + ' ' + Math.random().toString(36).substring(2, 4),
-  //   })
-  //   // Upload all files
-  //   const actions: GitlabAction[] = []
-  //   for (const file of files.keys()) {
-  //     const content = await this.readFile(session, websiteId, file)
-  //     // From buffer to string
-  //     const contentStr = content.toString('base64')
-  //     const path = encodeURIComponent(file)
-  //     switch (file) {
-  //     case WEBSITE_DATA_FILE:
-  //       actions.push({
-  //         action: 'update',
-  //         file_path: path,
-  //         content: contentStr,
-  //       })
-  //       break
-  //     default:
-  //       actions.push({
-  //         action: 'create',
-  //         file_path: path,
-  //         content: contentStr,
-  //       })
-  //     }
-  //   }
-  //   // Perform a batch commit
-  //   return this.callApi({
-  //     session,
-  //     path: `api/v4/projects/${newId}/repository/commits`,
-  //     method: 'POST',
-  //     requestBody: {
-  //       branch: this.options.branch,
-  //       commit_message: 'Update website data from Silex',
-  //       actions,
-  //     },
-  //   })
-  // }
   // Fork the repo
   async duplicateWebsite(session: GitlabSession, websiteId: string): Promise<void> {
     const meta = await this.getWebsiteMeta(session, websiteId)