Accept individual modifier keys as valid keybindings

packages/application/src/index.ts

@@ -575,6 +575,9 @@ export class Application<T extends Widget = Widget> {
       case 'keydown':
         this.evtKeydown(event as KeyboardEvent);
         break;
+      case 'keyup':
+        this.evtKeyup(event as KeyboardEvent);
+        break;
       case 'contextmenu':
         this.evtContextMenu(event as PointerEvent);
         break;
@@ -610,6 +613,7 @@ export class Application<T extends Widget = Widget> {
   protected addEventListeners(): void {
     document.addEventListener('contextmenu', this);
     document.addEventListener('keydown', this, !this._bubblingKeydown);
+    document.addEventListener('keyup', this, !this._bubblingKeydown);
     window.addEventListener('resize', this);
   }
 
@@ -626,6 +630,19 @@ export class Application<T extends Widget = Widget> {
     this.commands.processKeydownEvent(event);
   }
 
+  /**
+   * A method invoked on a document `'keyup'` event.
+   *
+   * #### Notes
+   * The default implementation of this method invokes the key up
+   * processing method of the application command registry.
+   *
+   * A subclass may reimplement this method as needed.
+   */
+  protected evtKeyup(event: KeyboardEvent): void {
+    this.commands.processKeyupEvent(event);
+  }
+
   /**
    * A method invoked on a document `'contextmenu'` event.
    *

packages/commands/src/index.ts

@@ -511,13 +511,8 @@ export class CommandRegistry {
    * events will not invoke commands.
    */
   processKeydownEvent(event: KeyboardEvent): void {
-    // Bail immediately if playing back keystrokes
-    // or if the event has been processed
-    if (
-      event.defaultPrevented ||
-      this._replaying ||
-      CommandRegistry.isModifierKeyPressed(event)
-    ) {
+    // Bail immediately if playing back keystrokes.
+    if (event.defaultPrevented || this._replaying) {
       return;
     }
 
@@ -532,6 +527,26 @@ export class CommandRegistry {
       return;
     }
 
+    // Check that only mod key(s) have been pressed.
+    if (CommandRegistry.isModifierKeyPressed(event)) {
+      // Find the exact match for the modifier keys.
+      let { exact } = Private.matchKeyBinding(
+        this._keyBindings,
+        [keystroke],
+        event
+      );
+      if (exact) {
+        // If the mod keys match an exact shortcut, start a dedicated timer.
+        event.preventDefault();
+        event.stopPropagation();
+        this._startModifierTimer(exact);
+      } else {
+        // Otherwise stop potential existing timer.
+        this._clearModifierTimer();
+      }
+      return;
+    }
+
     // Add the keystroke to the current key sequence.
     this._keystrokes.push(keystroke);
 
@@ -599,6 +614,36 @@ export class CommandRegistry {
     this._holdKeyBindingPromises.set(event, permission);
   }
 
+  /**
+   * Process a ``keyup`` event to clear the timer on the modifier, if it exists.
+   *
+   * @param event - The event object for a `'keydown'` event.
+   */
+  processKeyupEvent(event: KeyboardEvent): void {
+    this._clearModifierTimer();
+  }
+
+  /**
+   * Start or restart the timeout on the modifier keys.
+   *
+   * This timeout will end only if the keys are hold.
+   */
+  private _startModifierTimer(exact: CommandRegistry.IKeyBinding): void {
+    this._clearModifierTimer();
+    this._timerModifierID = window.setTimeout(() => {
+      this._executeKeyBinding(exact);
+    }, Private.modifierkeyTimeOut);
+  }
+
+  /**
+   * Clear the timeout on modifier keys.
+   */
+  private _clearModifierTimer(): void {
+    if (this._timerModifierID !== 0) {
+      clearTimeout(this._timerModifierID);
+      this._timerModifierID = 0;
+    }
+  }
   /**
    * Start or restart the pending timeout.
    */
@@ -688,6 +733,7 @@ export class CommandRegistry {
    */
   private _clearPendingState(): void {
     this._clearTimer();
+    this._clearModifierTimer();
     this._exactKeyMatch = null;
     this._keystrokes.length = 0;
     this._keydownEvents.length = 0;
@@ -707,6 +753,7 @@ export class CommandRegistry {
   }
 
   private _timerID = 0;
+  private _timerModifierID = 0;
   private _replaying = false;
   private _keystrokes: string[] = [];
   private _keydownEvents: KeyboardEvent[] = [];
@@ -1245,6 +1292,9 @@ export namespace CommandRegistry {
     if (parts.cmd && Platform.IS_MAC) {
       mods += 'Cmd ';
     }
+    if (!parts.key) {
+      return mods.trim();
+    }
     return mods + parts.key;
   }
 
@@ -1328,9 +1378,6 @@ export namespace CommandRegistry {
   export function keystrokeForKeydownEvent(event: KeyboardEvent): string {
     let layout = getKeyboardLayout();
     let key = layout.keyForKeydownEvent(event);
-    if (!key || layout.isModifierKey(key)) {
-      return '';
-    }
     let mods = [];
     if (event.ctrlKey) {
       mods.push('Ctrl');
@@ -1344,7 +1391,10 @@ export namespace CommandRegistry {
     if (event.metaKey && Platform.IS_MAC) {
       mods.push('Cmd');
     }
-    mods.push(key);
+    if (!layout.isModifierKey(key)) {
+      mods.push(key);
+    }
+    // for purely modifier key strings
     return mods.join(' ');
   }
 }
@@ -1363,6 +1413,11 @@ namespace Private {
    */
   export const KEYBINDING_HOLD_TIMEOUT = 1000;
 
+  /**
+   * The timeout in ms for triggering a modifer key binding.
+   */
+  export const modifierkeyTimeOut = 500;
+
   /**
    * A convenience type alias for a command func.
    */

packages/commands/tests/src/index.spec.ts

@@ -1508,11 +1508,11 @@ describe('@lumino/commands', () => {
         expect(keystroke).to.equal('');
       });
 
-      it('should return nothing for keys that are marked as modifier in keyboard layout', () => {
+      it('should return keys that are marked as modifier in keyboard layout', () => {
         let keystroke = CommandRegistry.keystrokeForKeydownEvent(
           new KeyboardEvent('keydown', { keyCode: 17, ctrlKey: true })
         );
-        expect(keystroke).to.equal('');
+        expect(keystroke).to.equal('Ctrl');
       });
     });
   });

review/api/application.api.md

@@ -24,6 +24,7 @@ export class Application<T extends Widget = Widget> {
     deregisterPlugin(id: string, force?: boolean): void;
     protected evtContextMenu(event: PointerEvent): void;
     protected evtKeydown(event: KeyboardEvent): void;
+    protected evtKeyup(event: KeyboardEvent): void;
     protected evtResize(event: Event): void;
     getPluginDescription(id: string): string;
     handleEvent(event: Event): void;

review/api/commands.api.md

@@ -37,6 +37,7 @@ export class CommandRegistry {
     mnemonic(id: string, args?: ReadonlyPartialJSONObject): number;
     notifyCommandChanged(id?: string): void;
     processKeydownEvent(event: KeyboardEvent): void;
+    processKeyupEvent(event: KeyboardEvent): void;
     usage(id: string, args?: ReadonlyPartialJSONObject): string;
 }