Add hotkey options for preventDefault and stopPropagation (#362)

newcat · Jan 21, 2024 · 60f0c88 · 60f0c88
1 parent 2f4de43
commit 60f0c88
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/packages/renderer-vue/src/commands/hotkeyHandler.ts b/packages/renderer-vue/src/commands/hotkeyHandler.ts
@@ -1,9 +1,28 @@
 import { ref } from "vue";
 import { isInputElement } from "../utility";
 
+export interface HotkeyRegistrationOptions {
+    /**
+     * Whether to prevent the default action of the hotkey.
+     * @default false
+     */
+    preventDefault?: boolean;
+    /**
+     * Whether to stop the propagation of the hotkey.
+     * @default false
+     */
+    stopPropagation?: boolean;
+}
+
+interface HotkeyHandler {
+    keys: string[];
+    commandName: string;
+    options?: HotkeyRegistrationOptions;
+}
+
 export function useHotkeyHandler(executeCommand: (name: string) => void) {
     const pressedKeys = ref<string[]>([]);
-    const handlers = ref<Array<{ keys: string[]; commandName: string }>>([]);
+    const handlers = ref<HotkeyHandler[]>([]);
 
     const handleKeyDown = (ev: KeyboardEvent) => {
         if (!pressedKeys.value.includes(ev.key)) {
@@ -16,6 +35,13 @@ export function useHotkeyHandler(executeCommand: (name: string) => void) {
 
         handlers.value.forEach((h) => {
             if (h.keys.every((k) => pressedKeys.value.includes(k))) {
+                if (h.options?.preventDefault) {
+                    ev.preventDefault();
+                }
+                if (h.options?.stopPropagation) {
+                    ev.stopPropagation();
+                }
+
                 executeCommand(h.commandName);
             }
         });
@@ -28,8 +54,8 @@ export function useHotkeyHandler(executeCommand: (name: string) => void) {
         }
     };
 
-    const registerHotkey = (keys: string[], commandName: string) => {
-        handlers.value.push({ keys, commandName });
+    const registerHotkey = (keys: string[], commandName: string, options?: HotkeyRegistrationOptions) => {
+        handlers.value.push({ keys, commandName, options });
     };
 
     return { pressedKeys, handleKeyDown, handleKeyUp, registerHotkey };

diff --git a/packages/renderer-vue/src/commands/index.ts b/packages/renderer-vue/src/commands/index.ts
@@ -1,6 +1,6 @@
 import { reactive, ref } from "vue";
 import { ICommand } from "./command";
-import { useHotkeyHandler } from "./hotkeyHandler";
+import { useHotkeyHandler, HotkeyRegistrationOptions } from "./hotkeyHandler";
 
 export * from "./command";
 
@@ -55,8 +55,9 @@ export interface ICommandHandler {
      * Register a new hotkey combination for the command.
      * @param keys Combination of keys. When all keys in the given array are pressed at the same time, the command will be executed.
      * @param commandName Name of the command that should be executed when the keys are pressed.
+     * @param options Options for the hotkey registration.
      */
-    registerHotkey(keys: string[], commandName: string): void;
+    registerHotkey(keys: string[], commandName: string, options?: HotkeyRegistrationOptions): void;
     /** @internal */
     handleKeyUp(ev: KeyboardEvent): void;
     /** @internal */