Format keyboard shortcuts according to OS conventions

packages/commands/src/index.ts

@@ -1062,26 +1062,6 @@ export namespace CommandRegistry {
      */
     shift: boolean;
 
-    /**
-     * Whether `'ArrowLeft'` appears in the keystroke.
-     */
-    arrowLeft: boolean;
-
-    /**
-     * Whether `'ArrowUp'` appears in the keystroke.
-     */
-    arrowUp: boolean;
-
-    /**
-     * Whether `'ArrowRight'` appears in the keystroke.
-     */
-    arrowRight: boolean;
-
-    /**
-     * Whether `'ArrowDown'` appears in the keystroke.
-     */
-    arrowDown: boolean;
-
     /**
      * The primary key for the keystroke.
      */
@@ -1116,10 +1096,6 @@ export namespace CommandRegistry {
     let cmd = false;
     let ctrl = false;
     let shift = false;
-    let arrowLeft = false;
-    let arrowUp = false;
-    let arrowRight = false;
-    let arrowDown = false;
     for (let token of keystroke.split(/\s+/)) {
       if (token === 'Accel') {
         if (Platform.IS_MAC) {
@@ -1135,29 +1111,11 @@ export namespace CommandRegistry {
         ctrl = true;
       } else if (token === 'Shift') {
         shift = true;
-      } else if (token === 'ArrowLeft') {
-        arrowLeft = true;
-      } else if (token === 'ArrowUp') {
-        arrowUp = true;
-      } else if (token === 'ArrowRight') {
-        arrowRight = true;
-      } else if (token === 'ArrowDown') {
-        arrowDown = true;
       } else if (token.length > 0) {
         key = token;
       }
     }
-    return {
-      cmd,
-      ctrl,
-      alt,
-      shift,
-      key,
-      arrowLeft,
-      arrowUp,
-      arrowRight,
-      arrowDown
-    };
+    return { cmd, ctrl, alt, shift, key };
   }
 
   /**
@@ -1214,45 +1172,23 @@ export namespace CommandRegistry {
    * Format a keystroke for display on the local system.
    */
   export function formatKeystroke(keystroke: string): string {
-    let mods = '';
+    let mods = [];
+    let separator = Platform.IS_MAC ? ' ' : '+';
     let parts = parseKeystroke(keystroke);
-    if (Platform.IS_MAC) {
-      if (parts.ctrl) {
-        mods += '\u2303 ';
-      }
-      if (parts.alt) {
-        mods += '\u2325 ';
-      }
-      if (parts.shift) {
-        mods += '\u21E7 ';
-      }
-      if (parts.cmd) {
-        mods += '\u2318 ';
-      }
-      if (parts.arrowLeft) {
-        mods += '\u2190 ';
-      }
-      if (parts.arrowUp) {
-        mods += '\u2191 ';
-      }
-      if (parts.arrowRight) {
-        mods += '\u2192 ';
-      }
-      if (parts.arrowDown) {
-        mods += '\u2193 ';
-      }
-    } else {
-      if (parts.ctrl) {
-        mods += 'Ctrl+';
-      }
-      if (parts.alt) {
-        mods += 'Alt+';
-      }
-      if (parts.shift) {
-        mods += 'Shift+';
-      }
+    if (parts.ctrl) {
+      mods.push('Ctrl');
     }
-    return mods + parts.key;
+    if (parts.alt) {
+      mods.push('Alt');
+    }
+    if (parts.shift) {
+      mods.push('Shift');
+    }
+    if (Platform.IS_MAC && parts.cmd) {
+      mods.push('Cmd');
+    }
+    mods.push(parts.key);
+    return mods.map(Private.formatKey).join(separator);
   }
 
   /**
@@ -1282,20 +1218,21 @@ export namespace CommandRegistry {
     if (!key || layout.isModifierKey(key)) {
       return '';
     }
-    let mods = '';
+    let mods = [];
     if (event.ctrlKey) {
-      mods += 'Ctrl ';
+      mods.push('Ctrl');
     }
     if (event.altKey) {
-      mods += 'Alt ';
+      mods.push('Alt');
     }
     if (event.shiftKey) {
-      mods += 'Shift ';
+      mods.push('Shift');
     }
     if (event.metaKey && Platform.IS_MAC) {
-      mods += 'Cmd ';
+      mods.push('Cmd');
     }
-    return mods + key;
+    mods.push(key);
+    return mods.join(' ');
   }
 }
 
@@ -1492,6 +1429,45 @@ namespace Private {
     event.target!.dispatchEvent(cloneKeyboardEvent(event));
   }
 
+  export function formatKey(key: string): string {
+    if (Platform.IS_MAC) {
+      return MAC_DISPLAY.hasOwnProperty(key) ? MAC_DISPLAY[key] : key;
+    } else {
+      return WIN_DISPLAY.hasOwnProperty(key) ? WIN_DISPLAY[key] : key;
+    }
+  }
+
+  const MAC_DISPLAY: { [key: string]: string } = {
+    Backspace: '⌫',
+    Tab: '⇥',
+    Enter: '↩',
+    Shift: '⇧',
+    Ctrl: '⌃',
+    Alt: '⌥',
+    Escape: '⎋',
+    PageUp: '⇞',
+    PageDown: '⇟',
+    End: '↘',
+    Home: '↖',
+    ArrowLeft: '←',
+    ArrowUp: '↑',
+    ArrowRight: '→',
+    ArrowDown: '↓',
+    Delete: '⌦',
+    Cmd: '⌘'
+  };
+
+  const WIN_DISPLAY: { [key: string]: string } = {
+    Escape: 'Esc',
+    PageUp: 'Page Up',
+    PageDown: 'Page Down',
+    ArrowLeft: 'Left',
+    ArrowUp: 'Right',
+    ArrowRight: 'Up',
+    ArrowDown: 'Down',
+    Delete: 'Del'
+  };
+
   /**
    * A singleton empty string function.
    */

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

@@ -1068,6 +1068,11 @@ describe('@lumino/commands', () => {
         expect(parts.key).to.equal('S');
       });
 
+      it('should preserve arrow names in key without formatting', () => {
+        let parts = CommandRegistry.parseKeystroke('ArrowRight');
+        expect(parts.key).to.equal('ArrowRight');
+      });
+
       it('should be a tolerant parse', () => {
         let parts = CommandRegistry.parseKeystroke('G Ctrl Shift S Shift K');
         expect(parts.cmd).to.equal(false);
@@ -1078,6 +1083,26 @@ describe('@lumino/commands', () => {
       });
     });
 
+    describe('.formatKeystroke()', () => {
+      it('should prepend modifiers', () => {
+        let label = CommandRegistry.formatKeystroke('Ctrl Alt Shift S');
+        if (Platform.IS_MAC) {
+          expect(label).to.equal('\u2303 \u2325 \u21E7 S');
+        } else {
+          expect(label).to.equal('Ctrl+Alt+Shift+S');
+        }
+      });
+
+      it('should format arrow', () => {
+        let label = CommandRegistry.formatKeystroke('Alt ArrowDown');
+        if (Platform.IS_MAC) {
+          expect(label).to.equal('\u2325 \u2193');
+        } else {
+          expect(label).to.equal('Alt+Down');
+        }
+      });
+    });
+
     describe('.normalizeKeystroke()', () => {
       it('should normalize and validate a keystroke', () => {
         let stroke = CommandRegistry.normalizeKeystroke('Ctrl S');