From 2e2fa9a93c149ace318dc65e1cf683ba7fb20522 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 13 Nov 2024 16:00:14 +0100
Subject: [PATCH] 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 <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(core): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/selfish-falcons-run.md            |  5 +++++
 packages/core/src/composables/useKeyPress.ts | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/selfish-falcons-run.md

diff --git a/.changeset/selfish-falcons-run.md b/.changeset/selfish-falcons-run.md
new file mode 100644
index 00000000..ee0a9fad
--- /dev/null
+++ 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
index 02cd4e8f..e3c7602c 100644
--- 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)