@silexlabs/silex 3.0.0-alpha.100

package/src/ts/client/grapesjs/new-page-dialog.ts

@@ -0,0 +1,90 @@
+/*
+ * 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 * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import {html, render} from 'lit-html'
+import {live} from 'lit-html/directives/live.js'
+
+
+const name = 'new-page-dialog'
+const el = document.createElement('div')
+let modal
+
+export const cmdOpenNewPageDialog = 'new-page-dialog'
+
+export const newPageDialog = grapesjs.plugins.add(name, (editor, opts) => {
+  editor.Commands.add(cmdOpenNewPageDialog, {
+    run: (_, sender, {page}) => {
+      modal = editor.Modal.open({
+        title: 'New Page',
+        content: '',
+        attributes: { class: 'new-page-dialog' },
+      })
+        .onceClose(() => {
+          editor.stopCommand(cmdOpenNewPageDialog) // apparently this is needed to be able to run the command several times
+        })
+      displayDialog(editor, opts, page)
+      modal.setContent(el)
+      const form = el.querySelector('form')
+      form.onsubmit = event => {
+        event.preventDefault()
+        saveDialog(editor, opts, page)
+        editor.stopCommand(cmdOpenNewPageDialog)
+      }
+      form.querySelector('input')?.focus()
+      return modal
+    },
+    stop: () => {
+      modal.close()
+      // el.innerHTML = ''
+    },
+  })
+})
+
+function onImport(editor, page) {
+  editor.Pages.select(page)
+  editor.runCommand('gjs-open-import-webpage')
+}
+
+function displayDialog(editor, config, page) {
+  render(html`
+    <form class="silex-form">
+      <label class="silex-form__element">
+        <h3>Name</h3>
+        <input type="text" name="name" .value=${live(page.getName() || '')}/>
+      </label>
+      <footer>
+        <input class="silex-button" type="button" @click=${e => onImport(editor, page)} value="Import from website">
+        <input class="silex-button" type="button" @click=${e => editor.stopCommand(cmdOpenNewPageDialog)} value="Cancel">
+        <input class="silex-button" type="submit" value="Ok">
+      </footer>
+    </form>
+  `, el)
+}
+
+function saveDialog(editor, config, page) {
+  const form = el.querySelector('form')
+  const formData = new FormData(form)
+  const data = Array.from(formData)
+    .reduce((aggregate, [key, value]) => {
+      aggregate[key] = value
+      return aggregate
+    }, {})
+  page.set(data)
+  // save if auto save is on
+  editor.getModel().set('changesCount', editor.getDirtyCount() + 1)
+}

package/src/ts/client/grapesjs/openImport.ts

@@ -0,0 +1,81 @@
+/*
+ * 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/>.
+ */
+
+/**
+ * @fileoverview Import feature
+ * Let the user import HTML code when she creates a new page
+ *
+ */
+// from https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/commands/openImport.js
+export default function openImport(editor, config) {
+  const pfx = editor.getConfig('stylePrefix')
+  const modal = editor.Modal
+  const codeViewer = editor.CodeManager.getViewer('CodeMirror').clone()
+  const container = document.createElement('div')
+  const importLabel = config.modalImportLabel
+  const importCnt = config.modalImportContent
+  let viewerEditor = codeViewer.editor
+
+  // Init import button
+  const btnImp = document.createElement('button')
+  btnImp.type = 'button'
+  btnImp.innerHTML = config.modalImportButton
+  btnImp.className = `${pfx}btn-prim ${pfx}btn-import`
+  btnImp.onclick = e => {
+    editor.setComponents(viewerEditor.getValue().trim())
+    modal.close()
+  }
+
+  // Init code viewer
+  codeViewer.set({ ...{
+    codeName: 'htmlmixed',
+    theme: 'hopscotch',
+    readOnly: 0
+  }, ...config.importViewerOptions})
+
+  return {
+    run(_) {
+      if (!viewerEditor) {
+        const txtarea = document.createElement('textarea')
+
+        if (importLabel) {
+          const labelEl = document.createElement('div')
+          labelEl.className = `${pfx}import-label`
+          labelEl.innerHTML = importLabel
+          container.appendChild(labelEl)
+        }
+
+        container.appendChild(txtarea)
+        container.appendChild(btnImp)
+        codeViewer.init(txtarea)
+        viewerEditor = codeViewer.editor
+      }
+
+      modal.setTitle(config.modalImportTitle)
+      modal.setContent(container)
+      const cnt = typeof importCnt === 'function' ? importCnt(editor) : importCnt
+      codeViewer.setContent(cnt || '')
+      modal.open().getModel()
+        .once('change:open', () => editor.stopCommand(this.id))
+      viewerEditor.refresh()
+    },
+
+    stop() {
+      modal.close()
+    }
+  }
+}

package/src/ts/client/grapesjs/page-panel.ts

@@ -0,0 +1,118 @@
+/*
+ * 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 * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import {html, render} from 'lit-html'
+
+const pluginName = 'page-panel'
+let open
+
+export const cmdTogglePages = 'pages:open-panel'
+export const cmdAddPage = 'pages:add'
+
+function selectPage(editor, page) {
+  editor.Pages.select(page)
+}
+function addPage(editor, config) {
+  const pages = editor.Pages.getAll()
+  let idx = 1
+  const newPageName = config.newPageName || 'New page'
+  let pageName = newPageName
+  while(pages.find(p => p.getName() === pageName)) {
+    pageName = `${newPageName} ${idx++}`
+  }
+  const page = editor.Pages.add({ name: pageName })
+  editor.runCommand(config.cmdOpenNewPageDialog, {page})
+}
+
+function removePage(editor, page) {
+  if(editor.Pages.getAll().length === 1) {
+    console.error('can not delete the only page')
+  } else {
+    const isMain = page.get('type') === 'main'
+    const isSelected = editor.Pages.getSelected() === page
+    editor.Pages.remove(page.id)
+    const firstPage = editor.Pages.getAll()[0]
+    if(isMain) firstPage.set('type', 'main')
+    if(isSelected) selectPage(editor, firstPage)
+  }
+}
+
+function settingsPage(editor, config, page) {
+  editor.runCommand(config.cmdOpenSettings, {page})
+}
+
+function renderPages(editor, config) {
+  const pages = editor.Pages.getAll()
+  const selected = editor.Pages.getSelected()
+  const getPageFromEvent = (e) => {
+    const el = e.target.hasAttribute('data-page-id') ? e.target : e.target.parentNode
+    e.stopPropagation()
+    return editor.Pages.get(el.getAttribute('data-page-id'))
+  }
+  return html`<section class="pages">
+    <main class="pages__main ${pages.length === 1 ? 'pages__single-page' : ''}">
+      <div class="pages__list">
+        ${ pages.map(page => {
+    const name = page.getName() || page.attributes.type
+    // keep the same structure as the layers panel
+    return html`
+           <div class="pages__page ${selected === page ? 'pages__page-selected' : ''}" data-page-id=${page.id} @click=${e => selectPage(editor, getPageFromEvent(e))}>
+             <div class="pages__page-name">
+               ${ name }
+             </div>
+             <i class="pages__icon pages__remove-btn fa fa-trash" @click=${e => removePage(editor, getPageFromEvent(e))}></i>
+             <i class="pages__icon fa fa-cog" @click=${e => settingsPage(editor, config, getPageFromEvent(e))}></i>
+           </div>
+          </div>
+          `
+  })}
+      </div>
+      ${pages.length ? '' : html`<div class="flex-row">
+        No page yet.
+      </div>
+    `}
+    </main></section>`
+}
+
+export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  // create wrapper
+  const el = document.createElement('div')
+  el.classList.add('pages__wrapper')
+  // update
+  const doRender = () => render(renderPages(editor, opts), el)
+  editor.on('page', () => {
+    doRender()
+  })
+  editor.on('load', () => {
+    open = false
+    document.querySelector(opts.appendTo)
+      .appendChild(el)
+    doRender()
+    // click anywhere close it
+    // const close = (event) => {
+    //   if(open) {
+    //     editor.stopCommand(cmdTogglePages)
+    //     //event.preventDefault()
+    //   }
+    // }
+    // document.addEventListener('mousedown', close)
+    // add command to add pages
+    editor.Commands.add(cmdAddPage, () => addPage(editor, opts))
+  })
+})
+

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

@@ -0,0 +1,107 @@
+/*
+ * 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 {html, render} from 'lit-html'
+
+const panelId = 'project-bar-panel'
+const containerPanelId = 'project-bar-container'
+
+export const projectBarPlugin = (editor, opts) => {
+  // create the panels container for all panels in grapesjs
+  const containerPanel = editor.Panels.addPanel({
+    id: containerPanelId,
+    visible  : false,
+  })
+  // create the project bar panel in grapesjs
+  editor.Panels.addPanel({
+    id: panelId,
+    buttons: opts.panels,
+    visible  : true,
+  })
+  const panelsEl = opts.panels.map(panel => {
+    const el = document.createElement('div')
+
+    // create container for panel
+    if(panel.attributes.containerClassName) {
+      el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden')
+
+      // add header
+      if(panel.attributes.title) {
+        render(html`
+          <header class="project-bar__panel-header">
+            <h3 class="project-bar__panel-header-title">${ panel.attributes.title }</h3>
+            ${ panel.buttons?.map(button => {
+    return html`
+                <div
+                  class="project-bar__panel-header-button ${ button.className }"
+                  @click=${e => editor.runCommand(button.command)}
+                ><span>${ button.text }</span></div>
+              `
+  }) }
+          </header>
+        `, el)
+      }
+
+      // temporarily attach it to the body
+      // this lets the block manager and other plugins attach to their container
+      document.body.appendChild(el)
+
+      // on load attach the panels to the main container
+      // this is when the main containerPanel has an element
+      editor.on('load', () => {
+        const containerPanelEl = containerPanel.view.el
+        containerPanelEl.appendChild(el)
+      })
+    }
+
+    // commands for show / hide panels
+    // handle the case where command is a normal command, then let the Panel handle it
+    typeof panel.command === 'string' && editor.Commands.add(panel.command, {
+      run() {
+        if(panel.attributes.containerClassName) {
+          containerPanel.set('visible', true)
+          el.classList.remove('gjs-hidden')
+          editor.Canvas.getFrameEl().classList.add('silex-squeeze-left')
+        }
+      },
+      stop() {
+        if(panel.attributes.containerClassName) {
+          containerPanel.set('visible', false)
+          el.classList.add('gjs-hidden')
+          editor.Canvas.getFrameEl().classList.remove('silex-squeeze-left')
+        }
+      },
+    })
+  })
+  function updateSqueez() {
+    const containerPanelEl = containerPanel.view.el
+    const iframe = editor.Canvas.getFrameEl()
+    iframe.classList.remove('enable-squeeze')
+    setTimeout(() => {
+      const left = iframe.getClientRects()[0]?.left
+      const right = containerPanelEl.getClientRects()[0]?.right
+      if(left < right || !right) iframe.classList.add('enable-squeeze')
+      else iframe.classList.remove('enable-squeeze')
+    }, 400) // More than the transition duration
+    // make sure the squeez corresponds to the state (reset when change page)
+    if(containerPanel.get('visible')) iframe.classList.add('silex-squeeze-left')
+    else iframe.classList.remove('silex-squeeze-left')
+  }
+  editor.on('load device:select page', () => {
+    updateSqueez()
+  })
+}

package/src/ts/client/grapesjs/rich-text.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 * as grapesjs from 'grapesjs/dist/grapes.min.js'
+
+const pluginName = 'richText'
+
+export const richTextPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  editor.RichTextEditor.add('orderedList', {
+    icon: '1.',
+    attributes: {title: 'Ordered List'},
+    result: rte => rte.exec('insertOrderedList'),
+  })
+  editor.RichTextEditor.add('unorderedList', {
+    icon: '<i class="fa fa-list-ul"></i>',
+    attributes: {title: 'Unordered List'},
+    result: rte => rte.exec('insertUnorderedList'),
+  })
+})

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

@@ -0,0 +1,114 @@
+/*
+ * 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 {html, render} from 'lit-html'
+import {map} from 'lit-html/directives/map.js'
+import grapesjs from 'grapesjs/dist/grapes.min.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',
+]
+
+// plugin code
+export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  // Add the new trait to all component types
+  editor.DomComponents.getTypes().map(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',
+            },
+          ]
+        }
+      }
+    })
+  })
+
+  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)
+  }
+  function doRenderCurrent(el: HTMLElement) {
+    doRender(el, editor.getSelected()?.get('tagName') || '')
+  }
+
+  // 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
+      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 {
+        component.set('tagName', value)
+      }
+    },
+    // Update UI on the component change
+    onUpdate({ elInput, component }) {
+      const tagName = component.get('tagName')
+      doRender(elInput, tagName)
+    },
+  })
+})