fix(editor): Prevent keyboard shortcuts when ndv is open in new canvas (no-changelog) (#10601)

packages/editor-ui/src/composables/useKeybindings.spec.ts

@@ -0,0 +1,85 @@
+import { useKeybindings } from '@/composables/useKeybindings';
+import { ref } from 'vue';
+
+describe('useKeybindings', () => {
+	it('should call the correct handler for a single key press', async () => {
+		const handler = vi.fn();
+		const keymap = ref({ a: handler });
+
+		useKeybindings(keymap);
+
+		const event = new KeyboardEvent('keydown', { key: 'a' });
+		document.dispatchEvent(event);
+
+		expect(handler).toHaveBeenCalled();
+	});
+
+	it('should call the correct handler for a combination key press', async () => {
+		const handler = vi.fn();
+		const keymap = ref({ 'ctrl+a': handler });
+
+		useKeybindings(keymap);
+
+		const event = new KeyboardEvent('keydown', { key: 'a', ctrlKey: true });
+		document.dispatchEvent(event);
+
+		expect(handler).toHaveBeenCalled();
+	});
+
+	it('should not call handler if key press is ignored', async () => {
+		const handler = vi.fn();
+		const keymap = ref({ a: handler });
+
+		useKeybindings(keymap);
+
+		const input = document.createElement('input');
+		document.body.appendChild(input);
+		input.focus();
+
+		const event = new KeyboardEvent('keydown', { key: 'a' });
+		document.dispatchEvent(event);
+
+		expect(handler).not.toHaveBeenCalled();
+		document.body.removeChild(input);
+	});
+
+	it('should not call handler if disabled', async () => {
+		const handler = vi.fn();
+		const keymap = ref({ a: handler });
+		const disabled = ref(true);
+
+		useKeybindings(keymap, { disabled });
+
+		const event = new KeyboardEvent('keydown', { key: 'a' });
+		document.dispatchEvent(event);
+
+		expect(handler).not.toHaveBeenCalled();
+	});
+
+	it('should normalize shortcut strings correctly', async () => {
+		const handler = vi.fn();
+		const keymap = ref({ 'ctrl+shift+a': handler });
+
+		useKeybindings(keymap);
+
+		const event = new KeyboardEvent('keydown', { key: 'A', ctrlKey: true, shiftKey: true });
+		document.dispatchEvent(event);
+
+		expect(handler).toHaveBeenCalled();
+	});
+
+	it('should normalize shortcut string alternatives correctly', async () => {
+		const handler = vi.fn();
+		const keymap = ref({ 'a|b': handler });
+
+		useKeybindings(keymap);
+
+		const eventA = new KeyboardEvent('keydown', { key: 'A' });
+		document.dispatchEvent(eventA);
+		expect(handler).toHaveBeenCalled();
+
+		const eventB = new KeyboardEvent('keydown', { key: 'B' });
+		document.dispatchEvent(eventB);
+		expect(handler).toHaveBeenCalledTimes(2);
+	});
+});

packages/editor-ui/src/composables/useKeybindings.ts

@@ -1,13 +1,21 @@
 import { useActiveElement, useEventListener } from '@vueuse/core';
 import { useDeviceSupport } from 'n8n-design-system';
-import { computed, toValue, type MaybeRefOrGetter } from 'vue';
+import type { MaybeRef } from 'vue';
+import { computed, toValue, type MaybeRefOrGetter, unref } from 'vue';
 
 type KeyMap = Record<string, (event: KeyboardEvent) => void>;
 
-export const useKeybindings = (keymap: MaybeRefOrGetter<KeyMap>) => {
+export const useKeybindings = (
+	keymap: MaybeRefOrGetter<KeyMap>,
+	options?: {
+		disabled: MaybeRef<boolean>;
+	},
+) => {
 	const activeElement = useActiveElement();
 	const { isCtrlKeyPressed } = useDeviceSupport();
 
+	const isDisabled = computed(() => unref(options?.disabled));
+
 	const ignoreKeyPresses = computed(() => {
 		if (!activeElement.value) return false;
 
@@ -60,7 +68,7 @@ export const useKeybindings = (keymap: MaybeRefOrGetter<KeyMap>) => {
 	}
 
 	function onKeyDown(event: KeyboardEvent) {
-		if (ignoreKeyPresses.value) return;
+		if (ignoreKeyPresses.value || isDisabled.value) return;
 
 		const shortcutString = toShortcutString(event);