fix(core): allow using + as a key in key combinations (#1693)

* fix(core): allow using `+` as a key in key combinations Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> * chore(core): cleanup Signed-off-by: braks <[email protected]> --------- Signed-off-by: braks <[email protected]>
bcakmakoglu · Nov 13, 2024 · 2e2fa9a · 2e2fa9a
1 parent 129d543
commit 2e2fa9a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/.changeset/selfish-falcons-run.md b/.changeset/selfish-falcons-run.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Allow using the `+` key in key combinations
diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
@@ -25,7 +25,11 @@ function wasModifierPressed(event: KeyboardEvent) {
 }
 
 function isKeyMatch(pressedKey: string, keyToMatch: string, pressedKeys: Set<string>, isKeyUp: boolean) {
-  const keyCombination = keyToMatch.split('+').map((k) => k.trim().toLowerCase())
+  const keyCombination = keyToMatch
+    .replace('+', '\n')
+    .replace('\n\n', '\n+')
+    .split('\n')
+    .map((k) => k.trim().toLowerCase())
 
   if (keyCombination.length === 1) {
     return pressedKey.toLowerCase() === keyToMatch.toLowerCase()
@@ -50,13 +54,16 @@ function createKeyPredicate(keyFilter: string | string[], pressedKeys: Set<strin
 
     const keyOrCode = useKeyOrCode(event.code, keyFilter)
 
+    const isKeyUp = event.type === 'keyup'
+    const pressedKey = event[keyOrCode]
+
     // if the keyFilter is an array of multiple keys, we need to check each possible key combination
     if (Array.isArray(keyFilter)) {
-      return keyFilter.some((key) => isKeyMatch(event[keyOrCode], key, pressedKeys, event.type === 'keyup'))
+      return keyFilter.some((key) => isKeyMatch(pressedKey, key, pressedKeys, isKeyUp))
     }
 
     // if the keyFilter is a string, we need to check if the key matches the string
-    return isKeyMatch(event[keyOrCode], keyFilter, pressedKeys, event.type === 'keyup')
+    return isKeyMatch(pressedKey, keyFilter, pressedKeys, isKeyUp)
   }
 }
 
@@ -126,7 +133,9 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
   )
 
   onKeyStroke(
-    (...args) => currentFilter(...args),
+    (...args) => {
+      return currentFilter(...args)
+    },
     (e) => {
       if (isPressed.value) {
         const preventAction = (!modifierPressed || (modifierPressed && !actInsideInputWithModifier.value)) && isInputDOMNode(e)