@silexlabs/silex 3.0.0-alpha.152 → 3.0.0-alpha.154

package/src/css/grapesjs-plugins.scss

@@ -58,6 +58,132 @@
   margin-left: 10px;
 }
 
+// publication-ui
+#publish-dialog {
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 0.95rem;
+    transition: 200ms;
+
+    svg {
+      width: 1.4rem;
+      vertical-align: middle;
+      margin-right: 5px;
+    }
+
+    button {
+      border: solid 2px #484848;
+      border-radius: 50px;
+      padding: 4px 9px;
+      background-color: #444;
+      color: $secondaryColor;
+    }
+
+    .connector {
+      color: $quaternaryColor;
+    }
+  }
+
+  main {
+    max-height: none;
+
+    .buttons {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      grid-row-gap: 0.5rem;
+      transition: 200ms;
+    }
+
+    svg {
+      height: 0.9rem;
+      margin-left: 5px;
+    }
+
+    h3 {
+      margin: 0;
+    }
+
+    p {
+      margin-top: 0;
+    }
+
+    details {
+      border-radius: 5px;
+      border: solid #222 2px;
+      background-color: #222;
+      margin: 10px 0;
+      padding: 10px;
+      word-break: break-word;
+      overflow-y: auto;
+      max-height: 200px;
+      position: relative;
+
+      pre {
+        word-break: break-word;
+      }
+
+      summary {
+        font-size: 0.95rem;
+        opacity: 0.7;
+      }
+
+      .logs {
+        font-family: monospace;
+
+        * {
+          margin: 0;
+          padding-top: 3px;
+          padding-bottom: 3px;
+          border-radius: 5px;
+          list-style: '-';
+
+          &:hover {
+            transition: 200ms;
+            background-color: rgba(255, 255, 255, 0.05);
+          }
+        }
+      }
+
+      &:hover {
+        transition: 200ms;
+        border-color: $lighterPrimaryColor;
+        background-color: $darkerPrimaryColor;
+      }
+
+      * {
+        transition: 200ms;
+      }
+    }
+
+    details[open] summary {
+      margin-bottom: 10px;
+    }
+
+    .silex-button {
+      padding: 10px;
+      width: 100%;
+      transition: 200ms;
+
+      &:hover {
+        filter: brightness(1.2);
+      }
+
+      &:active {
+        filter: brightness(0.8);
+      }
+    }
+
+    .silex-button--primary {
+      background-color: $tertiaryColor;
+    }
+  }
+}
+
 // Adapting the layout of the suggestion list
 .gjs-suggest {
   max-height: 30vh;

package/src/ts/client/api.ts

@@ -141,7 +141,14 @@ export async function api<ReqQuery, ReqBody, ResBody>(route: ApiRoute | string,
   })
 
   if (!response.ok) {
-    const json = await response.json()
+    let json
+    try {
+      json = await response.json()
+    } catch (err) {
+      // If the response is not JSON, throw a generic error
+      // This is the case when Silex backend has an uncatched error, e.g. expressjs 413 PayloadTooLargeError: request entity too large
+      throw new ApiError(response.statusText, response.status)
+    }
     throw new ApiError(json.message, response.status)
   }
 

package/src/ts/client/config.ts

@@ -115,7 +115,7 @@ export class ClientConfig extends Config {
    * @see https://fontlay.com/
    * @default Google Fonts
    */
-  fontsServerUrl = 'https://www.googleapis.com'
+  fontsServerUrl = 'https://fonts.googleapis.com'
 
   /**
    * Init GrapesJS config which depend on the config file properties

package/src/ts/client/grapesjs/PublicationManager.ts

@@ -298,6 +298,11 @@ export class PublicationManager {
         data: data as ApiPublicationPublishBody,
         options: this.settings.options,
       })
+      
+      // in gitlab pages situation, getUrl from gitlabHostingConnector gives publication url obtained with Gitlab API pages
+      console.info('Gitlab url: ', url)
+      // could be used in an future UI
+
       this.job = job
       this.status = jobStatusToPublicationStatus(this.job.status)
       this.trackProgress()

package/src/ts/client/grapesjs/PublicationUi.ts

@@ -21,6 +21,8 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
 import { cmdPublicationLogin, cmdPublicationLogout, cmdPublicationStart, PublicationStatus, PublishableEditor } from './PublicationManager'
 import { ConnectorData, ConnectorType, PublicationJobData, PublicationSettings } from '../../types'
 import { connectorList } from '../api'
+import { defaultKms } from './keymaps'
+import { titleCase } from '../utils'
 
 /**
  * @fileoverview define the publication dialog
@@ -36,6 +38,12 @@ import { connectorList } from '../api'
 // Constants
 export const cmdPublish = 'publish-open-dialog'
 
+// **
+// Semantic Icons
+const svgConnector = '<svg width="100%" height="100%" viewBox="0 0 44 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><g><path d="M2,11.427c0,0 3.846,-2.655 7.376,0c3.531,2.656 7.45,0 7.45,0" style="fill:none;stroke:#a291ff;stroke-width:4px;"/></g><path d="M32.165,6.424l9.156,0" style="fill:none;stroke:#a291ff;stroke-width:4px;"/><path d="M32.165,2l0,18.854" style="fill:none;stroke:#a291ff;stroke-width:4px;"/><path d="M32.165,16.43l9.156,0" style="fill:none;stroke:#a291ff;stroke-width:4px;"/><path d="M26.253,20.854c-5.203,0 -9.427,-4.224 -9.427,-9.427c-0,-5.203 4.224,-9.427 9.427,-9.427l5.912,-0l0,18.854l-5.912,0Z" style="fill:none;stroke:#a291ff;stroke-width:4px;"/></g></svg>'
+const svgSuccess = '<svg viewBox="0 0 40 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M3,12.969l11.868,11.869l21.838,-21.838" style="fill:none;stroke:#37bf76;stroke-width:6px;"/></svg>'
+const svgError = '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><path d="M3,28.915l25.915,-25.915" style="fill:none;stroke:#cf4443;stroke-width:6px;"/><path d="M28.915,28.915l-25.915,-25.915" style="fill:none;stroke:#cf4443;stroke-width:6px;"/></g></svg>'
+
 // **
 // Types
 export type PublicationDialogOptions = {
@@ -132,7 +140,7 @@ export class PublicationUi {
         id: 'publish-button',
         className: 'silex-button--size publish-button',
         command: cmdPublish,
-        attributes: { title: 'Publish' },
+        attributes: { title: `Publish [${titleCase(defaultKms.kmOpenPublish.keys, '+')}]` },
         label: '<span class="fa-solid fa-upload"></span><span class="silex-button--small">Publish</span>',
       })
     })
@@ -152,6 +160,8 @@ export class PublicationUi {
     `, this.el)
       if (this.isOpen) {
         this.el.classList.remove('silex-dialog-hide')
+        const primaryBtn = this.el.querySelector('.silex-button--primary') as HTMLElement
+        if (primaryBtn) primaryBtn.focus()
       } else {
         this.el.classList.add('silex-dialog-hide')
       }
@@ -162,26 +172,39 @@ export class PublicationUi {
   async renderOpenDialog(job: PublicationJobData, status: PublicationStatus): Promise<TemplateResult> {
     return html`
     <header>
-      <h3>Publication</h3>
+      <span>${unsafeHTML(svgConnector)} Connected to <span class="connector">${this.settings.connector.displayName}</span></span>
+      ${this.settings.connector.disableLogout ? '' : html`
+      <button
+        class="silex-button silex-button--secondary"
+        id="publish-button--secondary"
+        @click=${() => this.editor.Commands.run(cmdPublicationLogout)}
+      >Disconnect
+      </button>`}
     </header>
     <main>
       ${this.isPending(status) ? html`
-        <p>Publication in progress</p>
+        <p>Publication in progress...</p>
       ` : ''}
       ${this.isReady(status) ? html`
-        <p>You are connected to ${this.settings.connector.displayName}</p><p>Click on the publish button to publish your website</p>
+        <p>Click on the button below to publish your website.</p>
         ${this.settings.options && Object.entries(this.settings.options).length && html`<p>Publication options: <ul>${ Object.entries(this.settings.options).map(([key, value]) => html`<li>${key}: ${value}</li>`) }</ul></p>`}
       ` : ''}
       ${this.isSuccess(status) ? html`
-        <p>Publication success</p>
+        <h3 class="status">Publication success ${unsafeHTML(svgSuccess)}</h3>
         ${this.settings.options?.websiteUrl ? html`<p><a href="${this.settings.options.websiteUrl}" target="_blank">Click here to view the published website</a></p>` : ''}
       ` : ''}
       ${this.isError(status) || this.isLoggedOut(status) ? html`
-        <p>Publication error</p>
-        <div>${unsafeHTML(this.errorMessage)}</div>
+        <h3 class="status">Publication error ${unsafeHTML(svgError)}</h3>
+        <details open>
+          <summary>Details</summary>
+          ${unsafeHTML(this.errorMessage)}
+        </details>
       ` : ''}
       ${job?.message ? html`
-        <p>${unsafeHTML(job.message)}</p>
+        <details open>
+          <summary>Details</summary>
+          ${unsafeHTML(job.message)}
+        </details>
       ` : ''}
       ${this.isPending(status) ? html`
         <progress
@@ -190,17 +213,13 @@ export class PublicationUi {
         ></progress>
       ` : ''}
       ${job?.logs?.length && job.logs[0].length ? html`
-        <br><details>
+        <details>
           <summary>Logs</summary>
-          <pre style="
-            max-width: 100%;
-            font-size: x-small;
-            " >${unsafeHTML(cleanupLogEntry(job.logs))}
-          </pre>
+          <div class="logs">${unsafeHTML(cleanupLogEntry(job.logs))}</div>
         </details>
       ` : ''}
       ${job?.errors?.length && job.errors[0].length ? html`
-        <br><details>
+        <details>
           <summary>Errors</summary>
           <pre style="
             max-width: 100%;
@@ -210,8 +229,6 @@ export class PublicationUi {
           </pre>
         </details>
       ` : ''}
-    </main>
-    <footer>
       ${this.isPending(status) || this.isLoggedOut(status) ? '' : html`
         <button
           class="silex-button silex-button--primary"
@@ -219,19 +236,16 @@ export class PublicationUi {
           @click=${() => this.editor.Commands.run(cmdPublicationStart)}
         >Publish</button>
       `}
+    </main>
+    <footer>
       ${this.isLoggedOut(status) ? html`
         <button
           class="silex-button silex-button--primary"
           id="publish-button--primary"
           @click=${() => this.editor.Commands.run(cmdPublicationLogin, this.settings.connector)}
         >Connect</button>
-      `: this.settings.connector.disableLogout ? '' : html`
-        <button
-          class="silex-button silex-button--secondary"
-          id="publish-button--secondary"
-          @click=${() => this.editor.Commands.run(cmdPublicationLogout)}
-        >Disconnect</button>
-      `}
+      `: ''}
+      <a href="https://docs.silex.me/en/user/publish" target="_blank">Help</a>
       <button
         class="silex-button silex-button--secondary"
         id="publish-button--secondary"
@@ -256,20 +270,23 @@ export class PublicationUi {
       //}
       return html`
       <main>
-        <p>You need to connect a hosting connector to publish your website</p>
+        <p>You need to select a hosting connector to publish your website.</p>
         ${this.isError(status) || this.isLoggedOut(status) ? html`
           <p>Login error</p>
           <div>${unsafeHTML(this.errorMessage)}</div>
         ` : ''}
-        ${hostingConnectors.map(connector => html`
+        <div class="buttons">
+          ${hostingConnectors.map(connector => html`
           <button
-            class="silex-button silex-button--primary"
+            class="silex-button"
             id="publish-button--primary"
             @click=${() => this.editor.Commands.run(cmdPublicationLogin, connector)}
           >${connector.displayName}</button>
         `)}
+        </div>
       </main>
       <footer>
+        <a href="https://docs.silex.me/en/user/publish" target="_blank">Help</a>
         <button
           class="silex-button silex-button--secondary"
           id="publish-button--secondary"
@@ -288,6 +305,7 @@ export class PublicationUi {
         <p>Something went wrong: ${err.message}</p>
       </main>
       <footer>
+        <a href="https://docs.silex.me/en/user/publish" target="_blank">Help</a>
         <button
           class="silex-button silex-button--secondary"
           id="publish-button--secondary"

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

@@ -57,11 +57,13 @@ import { blocksPlugin } from './blocks'
 import { semanticPlugin } from './semantic'
 import { orderedList, richTextPlugin, unorderedList } from './rich-text'
 import { internalLinksPlugin } from './internal-links'
+import { defaultKms, keymapsPlugin } from './keymaps'
 import publicationManagerPlugin, { PublicationManagerOptions } from './PublicationManager'
 import ViewButtons from './view-buttons'
 import { storagePlugin } from './storage'
 import { API_PATH, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_PATH } from '../../constants'
 import { ClientConfig } from '../config'
+import { titleCase } from '../utils'
 
 const plugins = [
   {name: './project-bar', value: projectBarPlugin}, // has to be before panels and dialogs
@@ -79,6 +81,7 @@ const plugins = [
   {name: 'grapesjs-plugin-forms', value: formPlugin},
   {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},
@@ -111,6 +114,12 @@ const QUATERNARY_COLOR = '#A291FF'
 const DARKER_PRIMARY_COLOR = '#363636'
 const LIGHTER_PRIMARY_COLOR = '#575757'
 
+// Commands
+export const cmdToggleLayers = 'open-layers'
+export const cmdToggleBlocks = 'open-blocks'
+export const cmdToggleSymbols = 'open-symbols'
+export const cmdToggleNotifications = 'open-notifications'
+
 // ////////////////////
 // Config
 // ////////////////////
@@ -195,13 +204,15 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
           }, {
             id: 'block-manager-btn',
             className: 'block-manager-btn fa fa-fw fa-plus',
-            attributes: { title: 'Blocks', containerClassName: 'block-manager-container', },
-            command: 'open-blocks',
+            name: 'Blocks',
+            attributes: { title: `Blocks [${titleCase(defaultKms.kmBlocks.keys, '+')}]`, containerClassName: 'block-manager-container', },
+            command: cmdToggleBlocks,
           }, {
             id: 'symbols-btn',
             className: 'symbols-btn fa-regular fa-gem',
-            attributes: { title: 'Symbols', containerClassName: 'symbols-list-container', },
-            command: 'open-symbols',
+            name: 'Symbols',
+            attributes: { title: `Symbols [${titleCase(defaultKms.kmSymbols.keys, '+')}]`, containerClassName: 'symbols-list-container', },
+            command: cmdToggleSymbols,
             buttons: [
               {
                 id: 'symbol-create-button',
@@ -213,7 +224,8 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
           }, {
             id: 'page-panel-btn',
             className: 'page-panel-btn fa fa-fw fa-file',
-            attributes: { title: 'Pages', containerClassName: 'page-panel-container', },
+            name: 'Pages',
+            attributes: { title: `Pages [${titleCase(defaultKms.kmPages.keys, '+')}]`, containerClassName: 'page-panel-container', },
             command: cmdTogglePages,
             buttons: [{
               className: 'gjs-pn-btn',
@@ -223,19 +235,22 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
           }, {
             id: 'layer-manager-btn',
             className: 'layer-manager-btn fa-solid fa-layer-group',
-            attributes: { title: 'Layers', containerClassName: 'layer-manager-container', },
-            command: 'open-layers',
+            name: 'Layers',
+            attributes: { title: `Layers [${titleCase(defaultKms.kmLayers.keys, '+')}]`, containerClassName: 'layer-manager-container', },
+            command: cmdToggleLayers,
           }, {
             id: 'font-dialog-btn',
             className: 'font-manager-btn fa-solid fa-font',
-            attributes: { title: 'Fonts' },
+            name: 'Fonts',
+            attributes: { title: `Fonts [${titleCase(defaultKms.kmOpenFonts.keys, '+')}]` },
             command: () => {
               editor.runCommand(cmdOpenFonts)
             },
           }, {
             id: 'settings-dialog-btn',
             className: 'page-panel-btn fa-solid fa-gears',
-            attributes: { title: 'Settings' },
+            name: 'Settings',
+            attributes: { title: `Settings [${titleCase(defaultKms.kmOpenSettings.keys, '+')}]` },
             command: cmdOpenSettings,
           }, {
             id: 'spacer',
@@ -244,8 +259,9 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
           }, {
             id: 'notifications-btn',
             className: 'notifications-btn fa-regular fa-bell',
-            attributes: { title: 'Notifications', containerClassName: 'notifications-container', },
-            command: 'open-notifications',
+            name: 'Notifications',
+            attributes: { title: `Notifications [${titleCase(defaultKms.kmNotifications.keys, '+')}]`, containerClassName: 'notifications-container', },
+            command: cmdToggleNotifications,
             buttons: [{
               className: 'gjs-pn-btn',
               command: 'notifications:clear',
@@ -289,6 +305,13 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       [filterStyles]: {
         appendBefore: '.gjs-sm-sectors',
       },
+      [internalLinksPlugin.toString()]: {
+        // FIXME: warn the user about links in error
+        onError: (errors) => console.warn('Links errors:', errors),
+      },
+      [keymapsPlugin.toString()]: {
+        disableKeymaps: false,
+      },
       [codePlugin.toString()]: {
         blockLabel: 'HTML',
         blockCustomCode: {
@@ -384,8 +407,8 @@ export async function initEditor(config: EditorConfig) {
 
       // Remove blocks and layers buttons from the properties
       // This is because in Silex they are on the left
-      views.buttons.remove('open-blocks')
-      views.buttons.remove('open-layers')
+      views.buttons.remove(cmdToggleBlocks)
+      views.buttons.remove(cmdToggleLayers)
 
       // Remove useless buttons
       editor.Panels.getPanel('options').buttons.remove('export-template')

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

@@ -0,0 +1,155 @@
+import {Editor, PluginOptions} from 'grapesjs'
+import {cmdPublish} from './PublicationUi'
+import {cmdOpenFonts} from '@silexlabs/grapesjs-fonts'
+import {cmdToggleBlocks, cmdToggleLayers, cmdToggleNotifications, cmdToggleSymbols} from './index'
+import {cmdTogglePages} from './page-panel'
+import {cmdOpenSettings} from './settings'
+import {isTextOrInputField, selectBody} from '../utils'
+import {PublishableEditor} from './PublicationManager'
+
+// Utility functions
+
+function getPanelCommandIds (): string[] {
+  return [
+    cmdToggleBlocks,
+    cmdToggleLayers,
+    cmdToggleNotifications,
+    cmdToggleSymbols,
+    cmdTogglePages,
+    cmdOpenSettings,
+    cmdOpenFonts
+  ]
+}
+
+function toggleCommand (editor: Editor, name: string): void {
+  const cmd = editor.Commands
+
+  if (!cmd.isActive(name)) {
+    resetPanel(editor)
+    cmd.run(name)
+  } else {
+    cmd.stop(name)
+  }
+}
+
+function resetPanel(editor: Editor): void {
+  getPanelCommandIds().forEach(p => editor.Commands.stop(p))
+}
+
+/**
+ * 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
+
+  if (editor.Modal.isOpen()) {
+    editor.Modal.close()
+  } else if (publishDialog && publishDialog.isOpen) {
+    publishDialog.closeDialog()
+  } else if (getPanelCommandIds().some(cmd => editor.Commands.isActive(cmd))) {
+    resetPanel(editor)
+  } else {
+    selectBody(editor)
+  }
+}
+
+// Constants
+
+export const cmdSelectBody = 'select-body'
+export let prefixKey = 'shift'
+
+export const defaultKms = {
+  kmOpenSettings: {
+    id: 'general:open-settings',
+    keys: 'alt+s',
+    handler: editor => toggleCommand(editor, cmdOpenSettings)
+  },
+  kmOpenPublish: {
+    id: 'general:open-publish',
+    keys: 'alt+p',
+    handler: editor => toggleCommand(editor, cmdPublish)
+  },
+  kmOpenFonts: {
+    id: 'general:open-fonts',
+    keys: 'alt+f',
+    handler: editor => toggleCommand(editor, cmdOpenFonts)
+  },
+  kmPreviewMode: {
+    id: 'general:preview-mode',
+    keys: 'tab',
+    handler: editor => toggleCommand(editor, 'preview'),
+    options: {prevent: true}
+  },
+  kmLayers: {
+    id: 'panels:layers',
+    keys: prefixKey + '+l',
+    handler: editor => toggleCommand(editor, cmdToggleLayers)
+  },
+  kmBlocks: {
+    id: 'panels:blocks',
+    keys: prefixKey + '+a',
+    handler: editor => toggleCommand(editor, cmdToggleBlocks)
+  },
+  kmNotifications: {
+    id: 'panels:notifications',
+    keys: prefixKey + '+n',
+    handler: editor => toggleCommand(editor, cmdToggleNotifications)
+  },
+  kmPages: {
+    id: 'panels:pages',
+    keys: prefixKey + '+p',
+    handler: editor => toggleCommand(editor, cmdTogglePages)
+  },
+  kmSymbols: {
+    id: 'panels:symbols',
+    keys: prefixKey + '+s',
+    handler: editor => toggleCommand(editor, cmdToggleSymbols)
+  },
+  kmClosePanel: {
+    id: 'panels:close-panel',
+    keys: 'escape',
+    handler: escapeContext
+  },
+  kmSelectBody: {
+    id: 'workflow:select-body',
+    keys: prefixKey + '+b',
+    handler: cmdSelectBody
+  }
+}
+
+// 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, 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
+      const rte = editor.getEditing()
+
+      if (rte) { // If in Rich Text edition...
+        // TODO: Close the Rich Text edition and un-focus the text field
+      } 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/project-bar.ts

@@ -25,6 +25,7 @@ export interface PanelObject {
   command: string | ((editor: Editor) => void)
   text: string
   className: string
+  name?: string
   attributes: {
     title?: string
     containerClassName?: string
@@ -41,13 +42,13 @@ 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,
   })
   // create the project bar panel in grapesjs
   editor.Panels.addPanel({
     id: PROJECT_BAR_PANEL_ID,
     buttons: opts.panels,
-    visible  : true,
+    visible: true,
   })
   // add the panels to the container
   opts.panels.map(panel => addButton(editor, panel))
@@ -79,10 +80,11 @@ export function addButton(editor: Editor, panel: PanelObject) {
   if(panel.attributes.containerClassName) {
     el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden')
     // add header
-    if(panel.attributes.title) {
+    const title = panel.name ?? panel.attributes.title
+    if(title) {
       render(html`
         <header class="project-bar__panel-header">
-          <h3 class="project-bar__panel-header-title">${ panel.attributes.title }</h3>
+          <h3 class="project-bar__panel-header-title">${ title }</h3>
           ${ panel.buttons?.map(button => {
     return html`
               <div