Type the 'help' event, test the shortcuts overlay

README.md

@@ -192,6 +192,7 @@ socket.onmessage = (e) => store.applyDiff(JSON.parse(e.data), 'remote')
 | `⌘+` / `⌘−` | Zoom in / out |
 | `⌫` / `⇧⌘⌫` | Delete selection / clear the board (undoable) |
 | `Enter` / `Esc` | Edit text / done |
+| `?` | Show this list on the board |
 
 ## Repository
 

packages/core/src/editor.js

@@ -1262,7 +1262,8 @@ export class Editor {
       else this.setTool('select')
       return
     }
-        if (k === '?') { e.preventDefault(); this.emit('help'); return }
+    // the UI layer listens for this and toggles the shortcuts overlay
+    if (k === '?') { e.preventDefault(); this.emit('help'); return }
     // wipe the board — two modifiers deep, and undoable like any other edit
     if (meta && e.shiftKey && (k === 'delete' || k === 'backspace')) {
       e.preventDefault()

packages/core/test/editor.test.js

@@ -652,3 +652,40 @@ describe('createQuickdraw UI', () => {
     c2.remove()
   })
 })
+
+describe('keyboard help overlay', () => {
+  const press = (board, key) =>
+    board.editor._keyDown({ key, shiftKey: true, metaKey: false, ctrlKey: false, preventDefault() {} })
+
+  it('? toggles the overlay, Esc closes it, destroy tears it down', () => {
+    const c2 = document.createElement('div')
+    document.body.appendChild(c2)
+    const board = createQuickdraw({ container: c2 })
+    const open = () => !!c2.querySelector('.qd-help-backdrop')
+
+    press(board, '?')
+    expect(open()).toBe(true)
+    expect(c2.querySelectorAll('.qd-help-row').length).toBeGreaterThan(20)
+    press(board, '?')
+    expect(open()).toBe(false)
+
+    press(board, '?')
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(open()).toBe(false)
+
+    press(board, '?')
+    board.destroy()
+    expect(document.querySelector('.qd-help-backdrop')).toBe(null)
+    c2.remove()
+  })
+
+  it('stays quiet on a readonly board', () => {
+    const c2 = document.createElement('div')
+    document.body.appendChild(c2)
+    const board = createQuickdraw({ container: c2, readonly: true })
+    press(board, '?')
+    expect(c2.querySelector('.qd-help-backdrop')).toBe(null)
+    board.destroy()
+    c2.remove()
+  })
+})

packages/core/types/index.d.ts

@@ -194,7 +194,7 @@ export interface EditorOptions {
 
 export type EditorEvent =
   | 'change' | 'history' | 'camera' | 'tool' | 'styles' | 'selection'
-  | 'theme' | 'grid' | 'edit' | 'scribbles' | 'penmode'
+  | 'theme' | 'grid' | 'edit' | 'scribbles' | 'penmode' | 'help'
 
 /**
  * The editor: camera, tools, selection, input and rendering over a Store.