Improve key binding rendering (eclipse-theia#10801)

eclipsesource · Feb 25, 2022 · 6b45b27 · 6b45b27
1 parent f0cdf69
commit 6b45b27
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 160 deletions.
diff --git a/packages/core/src/browser/keybinding.ts b/packages/core/src/browser/keybinding.ts
@@ -337,23 +337,28 @@ export class KeybindingRegistry {
      * @param asciiOnly if `true`, no special characters will be substituted into the string returned. Ensures correct keyboard shortcuts in Electron menus.
      */
     acceleratorForKeyCode(keyCode: KeyCode, separator: string = ' ', asciiOnly = false): string {
+        return this.componentsForKeyCode(keyCode, asciiOnly).join(separator);
+    }
+
+    componentsForKeyCode(keyCode: KeyCode, asciiOnly = false): string[] {
         const keyCodeResult = [];
+        const useSymbols = isOSX && !asciiOnly;
         if (keyCode.meta && isOSX) {
-            keyCodeResult.push('Cmd');
+            keyCodeResult.push(useSymbols ? '⌘' : 'Cmd');
         }
         if (keyCode.ctrl) {
-            keyCodeResult.push('Ctrl');
+            keyCodeResult.push(useSymbols ? '⌃' : 'Ctrl');
         }
         if (keyCode.alt) {
-            keyCodeResult.push('Alt');
+            keyCodeResult.push(useSymbols ? '⌥' : 'Alt');
         }
         if (keyCode.shift) {
-            keyCodeResult.push('Shift');
+            keyCodeResult.push(useSymbols ? '⇧' : 'Shift');
         }
         if (keyCode.key) {
             keyCodeResult.push(this.acceleratorForKey(keyCode.key, asciiOnly));
         }
-        return keyCodeResult.join(separator);
+        return keyCodeResult;
     }
 
     /**

diff --git a/packages/core/src/browser/keyboard/keyboard-layout-service.ts b/packages/core/src/browser/keyboard/keyboard-layout-service.ts
@@ -98,8 +98,18 @@ export class KeyboardLayoutService {
     getKeyboardCharacter(key: Key): string {
         const layout = this.currentLayout;
         if (layout) {
-            const value = layout.code2Character[key.code];
-            if (value && value.replace(/[\n\r\t]/g, '')) {
+            const value = layout.code2Character[key.code]?.trim();
+            // Special cases from native keymap
+            if (value === '\u001b') {
+                return 'escape';
+            }
+            if (value === '\u007f') {
+                return 'delete';
+            }
+            if (value === '\u0008') {
+                return 'backspace';
+            }
+            if (value?.replace(/[\n\r\t]/g, '')) {
                 return value;
             }
         }