fix focus for keyboard nav, fix esc shortcut, add pages shortcuts, fi…

…x tab shortcut

src/css/dialog.scss

@@ -60,3 +60,8 @@
     color: variables.$quaternaryColor;
   }
 }
+
+:focus-visible {
+  outline: 2px solid variables.$tertiaryColor;
+  outline-offset: 2px;
+}

src/css/silex.scss

@@ -108,6 +108,13 @@ input.silex-button[type="submit"] {
   background-color: $lighterPrimaryColor;
   border-color: transparent;
   padding: 5px;
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px $tertiaryColor;
+  }
+  &:hover {
+    background-color: $darkerPrimaryColor;
+  }
 }
 
 .silex-button.disabled,

src/ts/client/grapesjs/keymaps.ts

@@ -47,6 +47,15 @@ function escapeContext(editor: Editor): void {
   }
 }
 
+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'
@@ -71,7 +80,7 @@ export const defaultKms = {
   kmPreviewMode: {
     id: 'general:preview-mode',
     keys: 'tab',
-    handler: editor => setButton(editor, 'options', 'preview')
+    handler: editor => whenNoFocus(editor, () => setButton(editor, 'options', 'preview'))
   },
   kmLayers: {
     id: 'panels:layers',
@@ -127,6 +136,36 @@ export const defaultKms = {
     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'
   }
 }
 
@@ -153,10 +192,9 @@ export function keymapsPlugin(editor: Editor, opts: PluginOptions): void {
   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
+      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)

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

@@ -15,13 +15,20 @@
  * 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)
@@ -76,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})
 }
@@ -114,7 +169,7 @@ function renderPages(editor, config) {
     </main></section>`
 }
 
-export const pagePanelPlugin = (editor, opts) => {
+export const pagePanelPlugin = (editor: Editor, opts) => {
   // create wrapper
   const el = document.createElement('div')
   el.classList.add('pages__wrapper')
@@ -125,9 +180,9 @@ export const pagePanelPlugin = (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) {
@@ -136,8 +191,13 @@ export const pagePanelPlugin = (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]))
   })
 }
-