@silexlabs/silex 3.0.1-alpha.0 → 3.0.1

package/src/ts/client/grapesjs/internal-links.ts

@@ -1,8 +1,23 @@
+/*
+ * 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'
-
-import { Page } from '../../types'
 import { getPageLink } from '../../page'
 
 // constants
@@ -15,7 +30,7 @@ const options: grapesjs.SelectOption = [
 ]
 
 // plugin code
-export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+export const internalLinksPlugin = (editor, opts) => {
   // update links when a page link changes
   function onAll(cbk) {
     editor.Pages.getAll()
@@ -41,12 +56,21 @@ export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opt
       // mark all links as issues
       const issues = []
       onAll(component => {
-        console.log(component.getAttributes().href, getPageLink(page.previous('name')), page.previous('name'))
         if(component.getAttributes().href === getPageLink(page.previous('name'))) {
           issues.push(component)
         }
       })
-      opts?.onError(issues)
+      // Add a notification for the issues
+      if(issues.length) {
+        issues.forEach(component => {
+          editor.runCommand('notifications:add', {
+            type: 'error',
+            message: `Page ${page.previous('name')} was removed, please fix the following links:`,
+            componentId: component.getId(),
+            group: 'Broken internal links',
+          })
+        })
+      }
       break
     }
   })
@@ -92,7 +116,7 @@ export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opt
   function getDefaultHref(type) {
     switch(type) {
     case 'email': return 'mailto:'
-    case 'page': return getPageLink()
+    case 'page': return getPageLink(null)
     case 'url': return 'https://'
     }
   }
@@ -207,4 +231,4 @@ export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opt
       doRender(elInput, href)
     },
   })
-})
+}

package/src/ts/client/grapesjs/keymaps.ts

@@ -0,0 +1,207 @@
+import {Editor, PluginOptions} from 'grapesjs'
+import {isTextOrInputField, selectBody} from '../utils'
+import {PublishableEditor} from './PublicationManager'
+
+// Utility functions
+
+function setButton(editor: Editor, panel_id: string, btn_id: string, active?: boolean): void {
+  const button = editor.Panels.getButton(panel_id, btn_id)
+  button.set('active', active ?? !button.get('active'))
+}
+
+/**
+ * Opens the Publish dialog and publishes the website.
+ * @param editor The editor.
+ */
+function publish(editor: Editor): void {
+  setButton(editor, 'options', 'publish-button', true)
+  editor.runCommand('publish')
+}
+
+/**
+ * Closes any open left panel.
+ * @param editor The editor.
+ */
+function resetPanel(editor: Editor): void {
+  const projectBarBtns = editor.Panels.getPanels().get('project-bar-panel').buttons
+  projectBarBtns.forEach(button => button.set('active', false))
+}
+
+/**
+ * Escapes the current context in this order : modal, Publish dialog, left panel.
+ * If none of these are open, it selects the body.
+ * @param editor The editor.
+ */
+function escapeContext(editor: Editor): void {
+  const publishDialog = (editor as PublishableEditor).PublicationManager.dialog
+  const projectBarPanel = editor.Panels.getPanel('project-bar-panel')
+
+  if (editor.Modal.isOpen()) {
+    editor.Modal.close()
+  } else if (publishDialog && publishDialog.isOpen) {
+    publishDialog.closeDialog()
+  } else if (projectBarPanel.buttons.some(b => b.get('active'))) {
+    resetPanel(editor)
+  } else {
+    selectBody(editor)
+  }
+}
+
+function whenNoFocus(editor: Editor, cbk: () => void): void {
+  if(editor.getEditing()) return
+  if(editor.Modal.isOpen()) return
+  const target = document.activeElement as HTMLElement | null
+  if (target && target.tagName === 'INPUT' && target.getAttribute('type') === 'submit') return
+  if (target && isTextOrInputField(target)) return
+  cbk()
+}
+
+// Constants
+
+export const cmdSelectBody = 'select-body'
+export let prefixKey = 'shift'
+
+export const defaultKms = {
+  kmOpenSettings: {
+    id: 'general:open-settings',
+    keys: 'alt+s',
+    handler: editor => setButton(editor, 'project-bar-panel', 'settings-dialog-btn')
+  },
+  kmOpenPublish: {
+    id: 'general:open-publish',
+    keys: 'alt+p',
+    handler: editor => setButton(editor, 'options', 'publish-button')
+  },
+  kmOpenFonts: {
+    id: 'general:open-fonts',
+    keys: 'alt+f',
+    handler: editor => setButton(editor, 'project-bar-panel', 'font-dialog-btn')
+  },
+  kmPreviewMode: {
+    id: 'general:preview-mode',
+    keys: 'tab',
+    handler: editor => whenNoFocus(editor, () => setButton(editor, 'options', 'preview'))
+  },
+  kmLayers: {
+    id: 'panels:layers',
+    keys: prefixKey + '+l',
+    handler: editor => setButton(editor, 'project-bar-panel', 'layer-manager-btn')
+  },
+  kmBlocks: {
+    id: 'panels:blocks',
+    keys: prefixKey + '+a',
+    handler: editor => setButton(editor, 'project-bar-panel', 'block-manager-btn')
+  },
+  kmNotifications: {
+    id: 'panels:notifications',
+    keys: prefixKey + '+n',
+    handler: editor => setButton(editor, 'project-bar-panel', 'notifications-btn')
+  },
+  kmPages: {
+    id: 'panels:pages',
+    keys: prefixKey + '+p',
+    handler: editor => setButton(editor, 'project-bar-panel', 'page-panel-btn')
+  },
+  kmSymbols: {
+    id: 'panels:symbols',
+    keys: prefixKey + '+s',
+    handler: editor => setButton(editor, 'project-bar-panel', 'symbols-btn')
+  },
+  kmStyleManager: {
+    id: 'panels:style-manager',
+    keys: 'r',
+    handler: editor => setButton(editor, 'views', 'open-sm', true)
+  },
+  kmTraitsManager: {
+    id: 'panels:traits',
+    keys: 't',
+    handler: editor => setButton(editor, 'views', 'open-tm', true)
+  },
+  kmClosePanel: {
+    id: 'panels:close-panel',
+    keys: 'escape',
+    handler: escapeContext
+  },
+  kmSelectBody: {
+    id: 'workflow:select-body',
+    keys: prefixKey + '+b',
+    handler: cmdSelectBody
+  },
+  kmDuplicateSelection: {
+    id: 'workflow:duplicate-selection',
+    keys: 'ctrl+d',
+    handler: 'tlb-clone',
+  },
+  kmPublish: {
+    id: 'workflow:publish',
+    keys: 'ctrl+alt+p',
+    handler: publish
+  },
+  kmAddPage: {
+    id: 'pages:add-page',
+    keys: 'ctrl+alt+n',
+    handler: 'pages:add'
+  },
+  kmRemovePage: {
+    id: 'pages:remove-page',
+    keys: 'ctrl+alt+backspace',
+    handler: 'pages:remove'
+  },
+  kmClonePage: {
+    id: 'pages:clone-page',
+    keys: 'ctrl+alt+d',
+    handler: 'pages:clone'
+  },
+  kmSelectNextPage: {
+    id: 'pages:select-next',
+    keys: 'ctrl+alt+j',
+    handler: 'pages:select-next'
+  },
+  kmSelectPrevPage: {
+    id: 'pages:select-previous',
+    keys: 'ctrl+alt+k',
+    handler: 'pages:select-prev'
+  },
+  kmSelectFirstPage: {
+    id: 'pages:select-first',
+    keys: 'ctrl+alt+h',
+    handler: 'pages:select-first'
+  }
+}
+
+// Main part
+
+export function keymapsPlugin(editor: Editor, opts: PluginOptions): void {
+  // Commands
+  editor.Commands.add(cmdSelectBody, selectBody)
+
+  if (opts.disableKeymaps) return
+  if (opts.prefixKey) prefixKey = opts.prefixKey
+
+  const km = editor.Keymaps
+
+  // Default keymaps
+  for (const keymap in defaultKms) {
+    km.add(defaultKms[keymap].id, defaultKms[keymap].keys, defaultKms[keymap].handler, {
+      prevent: true,
+      ...defaultKms[keymap].options
+    })
+  }
+
+  // Handling the Escape keymap during text edition
+  document.addEventListener('keydown', event => {
+    if (event.key.toLowerCase() === defaultKms.kmClosePanel.keys) {
+      const target = event.target as HTMLElement | null
+      if(editor.getEditing()) return // Close the rich text edition
+      if(editor.Modal.isOpen()) {
+        editor.Modal.close()
+      } else if (target) { // If target exists...
+        if (target.tagName === 'INPUT' && target.getAttribute('type') === 'submit') { // If it's a submit button...
+          escapeContext(editor)
+        } else if (isTextOrInputField(target)) { // If it's a text field...
+          target.blur()
+        }
+      }
+    }
+  })
+}

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

@@ -1,4 +1,20 @@
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+/*
+ * 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 {live} from 'lit-html/directives/live.js'
 
@@ -9,7 +25,7 @@ let modal
 
 export const cmdOpenNewPageDialog = 'new-page-dialog'
 
-export const newPageDialog = grapesjs.plugins.add(name, (editor, opts) => {
+export const newPageDialog = (editor, opts) => {
   editor.Commands.add(cmdOpenNewPageDialog, {
     run: (_, sender, {page}) => {
       modal = editor.Modal.open({
@@ -36,7 +52,7 @@ export const newPageDialog = grapesjs.plugins.add(name, (editor, opts) => {
       // el.innerHTML = ''
     },
   })
-})
+}
 
 function onImport(editor, page) {
   editor.Pages.select(page)

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

@@ -1,3 +1,25 @@
+/*
+ * 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')

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

@@ -1,27 +1,75 @@
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+/*
+ * 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 {html, render} from 'lit-html'
+import {ref} from 'lit-html/directives/ref.js'
 
 const pluginName = 'page-panel'
 let open
 
 export const cmdTogglePages = 'pages:open-panel'
 export const cmdAddPage = 'pages:add'
+export const cmdRemovePage = 'pages:remove'
+export const cmdClonePage = 'pages:clone'
+export const cmdSelectNextPage = 'pages:select-next'
+export const cmdSelectPrevPage = 'pages:select-prev'
+export const cmdSelectFirstPage = 'pages:select-first'
 
 function selectPage(editor, page) {
   editor.Pages.select(page)
 }
 function addPage(editor, config) {
   const pages = editor.Pages.getAll()
+  // Get a name
   let idx = 1
   const newPageName = config.newPageName || 'New page'
   let pageName = newPageName
   while(pages.find(p => p.getName() === pageName)) {
     pageName = `${newPageName} ${idx++}`
   }
+  // Add page
   const page = editor.Pages.add({ name: pageName })
+  // Select the new page
+  editor.Pages.select(page)
+  // Open page settings to edit the name
   editor.runCommand(config.cmdOpenNewPageDialog, {page})
 }
 
+function clonePage(editor, page) {
+  const pages = editor.Pages.getAll()
+  // Get a name
+  let idx = 1
+  const newPageName = (page.getName() || 'main') + ' copy'
+  let pageName = newPageName
+  while(pages.find(p => p.getName() === pageName)) {
+    pageName = `${newPageName} ${idx++}`
+  }
+  // Clone components
+  const body = page.getMainComponent().clone()
+  // Add page
+  const newPage = editor.Pages.add({
+    name: pageName,
+    component: body,
+  })
+  // Select the new page
+  editor.Pages.select(newPage)
+}
+
 function removePage(editor, page) {
   if(editor.Pages.getAll().length === 1) {
     console.error('can not delete the only page')
@@ -35,6 +83,54 @@ function removePage(editor, page) {
   }
 }
 
+function removePageWithConfirm(editor, page) {
+  const content = document.createElement('div')
+  const modal = editor.Modal.open({
+    title: 'Are you sure?',
+    content,
+  })
+  render(html`
+    <p>Do you really want to remove this page?</p>
+    <footer>
+      <button
+        ${ref((el: HTMLButtonElement) => {
+    console.log('focus', el)
+    setTimeout(() => el.focus())
+  })}
+        @click=${() => {
+    removePage(editor, page)
+    modal.close()
+  }}
+        class="silex-button silex-button--primary">Delete page</button>
+      <button
+        @click=${() => modal.close()}
+        class="silex-button silex-button--secondary">Cancel</button
+    </footer>
+  `, content)
+}
+
+function selectNextPage(editor) {
+  const pages = editor.Pages.getAll()
+  const selected = editor.Pages.getSelected()
+  const idx = pages.indexOf(selected)
+  if(idx < pages.length - 1) {
+    selectPage(editor, pages[idx + 1])
+  } else {
+    selectPage(editor, pages[0])
+  }
+}
+
+function selectPrevPage(editor) {
+  const pages = editor.Pages.getAll()
+  const selected = editor.Pages.getSelected()
+  const idx = pages.indexOf(selected)
+  if(idx > 0) {
+    selectPage(editor, pages[idx - 1])
+  } else {
+    selectPage(editor, pages[pages.length - 1])
+  }
+}
+
 function settingsPage(editor, config, page) {
   editor.runCommand(config.cmdOpenSettings, {page})
 }
@@ -59,6 +155,7 @@ function renderPages(editor, config) {
                ${ name }
              </div>
              <i class="pages__icon pages__remove-btn fa fa-trash" @click=${e => removePage(editor, getPageFromEvent(e))}></i>
+             <i class="pages__icon pages__clone-btn fa fa-clone" @click=${e => clonePage(editor, getPageFromEvent(e))}></i>
              <i class="pages__icon fa fa-cog" @click=${e => settingsPage(editor, config, getPageFromEvent(e))}></i>
            </div>
           </div>
@@ -72,7 +169,7 @@ function renderPages(editor, config) {
     </main></section>`
 }
 
-export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+export const pagePanelPlugin = (editor: Editor, opts) => {
   // create wrapper
   const el = document.createElement('div')
   el.classList.add('pages__wrapper')
@@ -83,9 +180,9 @@ export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =
   })
   editor.on('load', () => {
     open = false
-    document.querySelector(opts.appendTo)
-      .appendChild(el)
+    document.querySelector(opts.appendTo).appendChild(el)
     doRender()
+
     // click anywhere close it
     // const close = (event) => {
     //   if(open) {
@@ -94,8 +191,13 @@ export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =
     //   }
     // }
     // document.addEventListener('mousedown', close)
-    // add command to add pages
+
+    // add useful commands
     editor.Commands.add(cmdAddPage, () => addPage(editor, opts))
+    editor.Commands.add(cmdRemovePage, () => removePageWithConfirm(editor, editor.Pages.getSelected()))
+    editor.Commands.add(cmdClonePage, () => clonePage(editor, editor.Pages.getSelected()))
+    editor.Commands.add(cmdSelectNextPage, () => selectNextPage(editor))
+    editor.Commands.add(cmdSelectPrevPage, () => selectPrevPage(editor))
+    editor.Commands.add(cmdSelectFirstPage, () => selectPage(editor, editor.Pages.getAll()[0]))
   })
-})
-
+}