@silexlabs/silex 3.0.1-0 → 3.0.1

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

@@ -15,7 +15,6 @@
  * 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'
 
@@ -26,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({
@@ -53,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/page-panel.ts

@@ -15,30 +15,61 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+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')
@@ -52,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})
 }
@@ -76,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>
@@ -89,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')
@@ -100,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) {
@@ -111,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]))
   })
-})
-
+}

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

@@ -15,95 +15,139 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Editor, Panel } from 'grapesjs'
 import {html, render} from 'lit-html'
 
-const panelId = 'project-bar-panel'
-const containerPanelId = 'project-bar-container'
+export const PROJECT_BAR_PANEL_ID = 'project-bar-panel'
+export const containerPanelId = 'project-bar-container'
+
+export interface PanelObject {
+  command: string | ((editor: Editor) => void)
+  text: string
+  className: string
+  name?: string
+  attributes: {
+    title?: string
+    containerClassName?: string
+  }
+  buttons?: {
+    command: string
+    text: string
+    className: string
+  }[]
+  onClick?: (editor: Editor) => void
+}
 
 export const projectBarPlugin = (editor, opts) => {
   // create the panels container for all panels in grapesjs
   const containerPanel = editor.Panels.addPanel({
     id: containerPanelId,
-    visible  : false,
+    visible: false,
+    // resize project panel button
+    buttons: [{
+      id: 'resizeBlocks',
+      className: 'viewsOptionsProjectPanel__size-btn',
+      command: 'resize-ProjectPanel',
+      attributes: { title: 'Resize Project Panel' },
+    }],
+  })
+  // resize project panel command
+  editor.Commands.add('resize-ProjectPanel', {
+    run: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsProjectPanelWidth', '26%')
+    },
+    stop: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsProjectPanelWidth', '13%')
+    },
   })
   // create the project bar panel in grapesjs
-  const projectBarPanel = editor.Panels.addPanel({
-    id: panelId,
+  editor.Panels.addPanel({
+    id: PROJECT_BAR_PANEL_ID,
     buttons: opts.panels,
-    visible  : true,
+    visible: true,
   })
-  const panelsEl = opts.panels.map(panel => {
-    const el = document.createElement('div')
+  // add the panels to the container
+  opts.panels.map(panel => addButton(editor, panel))
 
-    // create container for panel
-    if(panel.attributes.containerClassName) {
-      el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden')
+  // Handle the preview mode which behaves oddly
+  editor.on('stop:preview', () => {
+    containerPanel.set('visible', false)
+    updateSqueez(editor)
+  })
 
-      // 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)
-      }
+  // All other events where the canvas is resized
+  editor.on('load device:select page', () => {
+    updateSqueez(editor)
+  })
+}
 
-      // temporarily attach it to the body
-      // this lets the block manager and other plugins attach to their container
-      document.body.appendChild(el)
+function updateSqueez(editor: Editor) {
+  const containerPanel = editor.Panels.getPanel(containerPanelId)
+  // make sure the squeez corresponds to the state (reset when change page)
+  if(containerPanel.get('visible')) document.body.classList.add('silex-squeeze-left')
+  else document.body.classList.remove('silex-squeeze-left')
+  editor.refresh()
+}
 
-      // 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)
-      })
+export function addButton(editor: Editor, panel: PanelObject) {
+  const containerPanel = editor.Panels.getPanel(containerPanelId)
+  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
+    const title = panel.name ?? panel.attributes.title
+    if(title) {
+      render(html`
+        <header class="project-bar__panel-header">
+          <h3 class="project-bar__panel-header-title">${ 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)
     }
-
-    // commands for show / hide panels
-    editor.Commands.add(panel.command, {
-      run() {
-        if(panel.link) {
-          window.open(panel.link)
-        }
-        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')
-        }
-      },
+    // 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)
     })
-  })
-  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()
+  // 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')
+        document.body.classList.add('silex-squeeze-left')
+        editor.refresh()
+      }
+      // Call the onClick function if it exists
+      if(panel.onClick) panel.onClick(editor)
+      // Remove the dirty flag
+      el.classList.remove('project-bar__dirty')
+    },
+    stop() {
+      if(panel.attributes.containerClassName) {
+        containerPanel.set('visible', false)
+        el.classList.add('gjs-hidden')
+        document.body.classList.remove('silex-squeeze-left')
+        editor.refresh()
+      }
+      // Call the onClick function if it exists
+      if(panel.onClick) panel.onClick(editor)
+      // Remove the dirty flag
+      el.classList.remove('project-bar__dirty')
+    },
   })
 }

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

@@ -0,0 +1,20 @@
+export default function(editor) {
+  editor.Panels.addPanel({
+    id: 'viewsOptions',
+    buttons: [{
+      id: 'resize',
+      // icon for arrow left
+      className: 'viewsOptions__size-btn',
+      command: 'resize-panel',
+      attributes: { title: 'Resize panel' },
+    }],
+  })
+  editor.Commands.add('resize-panel', {
+    run: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsPanelWidth', '40%')
+    },
+    stop: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsPanelWidth', '20%')
+    },
+  })
+}

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

@@ -15,19 +15,27 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import { RichTextEditorAction } from 'grapesjs'
 
 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'),
-  })
-})
+export const orderedList: RichTextEditorAction = {
+  name: 'orderedList',
+  icon: '1.',
+  attributes: { title: 'Ordered List' },
+  result: rte => rte.exec('insertOrderedList'),
+}
+
+export const unorderedList: RichTextEditorAction = {
+  name: 'unorderedList',
+  icon: '•',
+  //icon: '<i class="fa fa-list-ul"></i>',
+  attributes: { title: 'Unordered List' },
+  result: rte => rte.exec('insertUnorderedList'),
+}
+
+export const richTextPlugin = (editor, opts) => {
+  // This doesn't work, it is now added in the editor config
+  //editor.RichTextEditor.add('orderedList', orderedList)
+  //editor.RichTextEditor.add('unorderedList', unorderedList)
+}