Merge pull request #112 from github/plus-space

Add support for `Space` and `Plus`

Author: iansan5653

README.md

@@ -109,7 +109,8 @@ for (const el of document.querySelectorAll('[data-shortcut]')) {
    1. `"Mod+"` can appear in any order in a hotkey string. For example: `"Mod+Alt+Shift+KEY"`
    2. Neither the `Control` or `Meta` modifiers should appear in a hotkey string with `Mod`.
    3. Due to the inconsistent lowercasing of `event.key` on Mac and iOS when `Meta` is pressed along with `Shift`, it is recommended to avoid hotkey strings containing both `Mod` and `Shift`.
-7. You can use the comma key `,` as a hotkey, e.g. `a,,` would activate if the user typed `a` or `,`. `Control+,,x` would activate for `Control+,` or `x`.
+7. `"Plus"` and `"Space"` are special key names to represent the `+` and ` ` keys respectively, because these symbols cannot be represented in the normal hotkey string syntax.
+8. You can use the comma key `,` as a hotkey, e.g. `a,,` would activate if the user typed `a` or `,`. `Control+,,x` would activate for `Control+,` or `x`.
 
 ### Example
 

src/hotkey.ts

@@ -22,6 +22,11 @@ const normalizedHotkeyBrand = Symbol('normalizedHotkey')
  */
 export type NormalizedHotkeyString = NormalizedSequenceString & {[normalizedHotkeyBrand]: true}
 
+const syntheticKeyNames: Record<string, string> = {
+  ' ': 'Space',
+  '+': 'Plus'
+}
+
 /**
  * Returns a hotkey character string for keydown and keyup events.
  * @example
@@ -43,7 +48,8 @@ export function eventToHotkeyString(
 
   if (!modifierKeyNames.includes(key)) {
     const nonOptionPlaneKey = matchApplePlatform.test(platform) ? macosSymbolLayerKeys[key] ?? key : key
-    hotkeyString.push(nonOptionPlaneKey)
+    const syntheticKey = syntheticKeyNames[nonOptionPlaneKey] ?? nonOptionPlaneKey
+    hotkeyString.push(syntheticKey)
   }
 
   return hotkeyString.join('+') as NormalizedHotkeyString

test/test.js

@@ -284,7 +284,9 @@ describe('hotkey', function () {
       ['Alt+ArrowLeft', {altKey: true, key: 'ArrowLeft'}],
       ['Alt+ArrowLeft', {altKey: true, key: 'ArrowLeft'}, 'mac'],
       ['Alt+Shift+ArrowLeft', {altKey: true, shiftKey: true, key: 'ArrowLeft'}],
-      ['Alt+Shift+ArrowLeft', {altKey: true, shiftKey: true, key: 'ArrowLeft'}, 'mac']
+      ['Alt+Shift+ArrowLeft', {altKey: true, shiftKey: true, key: 'ArrowLeft'}, 'mac'],
+      ['Control+Space', {ctrlKey: true, key: ' '}],
+      ['Shift+Plus', {shiftKey: true, key: '+'}]
     ]
     for (const [expected, keyEvent, platform = 'win / linux'] of tests) {
       it(`${JSON.stringify(keyEvent)} => ${expected}`, function (done) {