From 01248b858599a802ea9b2da51f01e11fef6299ff Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 25 Nov 2024 15:28:32 +0200
Subject: [PATCH] feat: change rename node keyboard shortcut to space

---
 .../src/components/ContextMenu/ContextMenu.vue      | 12 +++++++++---
 packages/editor-ui/src/components/canvas/Canvas.vue | 13 +++++++++----
 .../editor-ui/src/composables/useContextMenu.ts     | 11 +++++++++--
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue b/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue
index 0fd54b0a73..2c6d95f3b8 100644
--- a/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue
+++ b/packages/editor-ui/src/components/ContextMenu/ContextMenu.vue
@@ -1,13 +1,19 @@
 <script lang="ts" setup>
-import { type ContextMenuAction, useContextMenu } from '@/composables/useContextMenu';
+import type { ContextMenuOptions, ContextMenuAction } from '@/composables/useContextMenu';
+import { useContextMenu } from '@/composables/useContextMenu';
 import { N8nActionDropdown } from 'n8n-design-system';
 import { watch, ref } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 
-const contextMenu = useContextMenu();
+const emit = defineEmits<{ action: [action: ContextMenuAction, nodeIds: string[]] }>();
+
+const props = defineProps<{
+	shortcuts?: ContextMenuOptions['shortcuts'];
+}>();
+
+const contextMenu = useContextMenu(() => {}, props);
 const { position, isOpen, actions, target } = contextMenu;
 const dropdown = ref<InstanceType<typeof N8nActionDropdown>>();
-const emit = defineEmits<{ action: [action: ContextMenuAction, nodeIds: string[]] }>();
 const container = ref<HTMLDivElement>();
 
 watch(
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 0d2b2cb4a3..da5766ca50 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -146,7 +146,7 @@ const disableKeyBindings = computed(() => !props.keyBindings);
 /**
  * @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
  */
-const panningKeyCode = ref<string[]>([' ', controlKeyCode]);
+const panningKeyCode = ref<string[]>([controlKeyCode]);
 const panningMouseButton = ref<number[]>([1]);
 const selectionKeyCode = ref<true | null>(true);
 
@@ -230,7 +230,8 @@ const keyMap = computed(() => ({
 				ctrl_d: emitWithSelectedNodes((ids) => emit('duplicate:nodes', ids)),
 				d: emitWithSelectedNodes((ids) => emit('update:nodes:enabled', ids)),
 				p: emitWithSelectedNodes((ids) => emit('update:nodes:pin', ids, 'keyboard-shortcut')),
-				f2: emitWithLastSelectedNode((id) => emit('update:node:name', id)),
+				o: emitWithLastSelectedNode((id) => onSetNodeActive(id)),
+				' |f2': emitWithLastSelectedNode((id) => emit('update:node:name', id)),
 				tab: () => emit('create:node', 'tab'),
 				shift_s: () => emit('create:sticky'),
 				ctrl_alt_n: () => emit('create:workflow'),
@@ -486,7 +487,11 @@ function onPaneMoveEnd() {
  * Context menu
  */
 
-const contextMenu = useContextMenu();
+const contextMenuShortcuts = {
+	rename: { keys: ['⎵'] },
+};
+
+const contextMenu = useContextMenu(() => {}, { shortcuts: contextMenuShortcuts });
 
 function onOpenContextMenu(event: MouseEvent) {
 	contextMenu.open(event, {
@@ -720,7 +725,7 @@ provide(CanvasKey, {
 		/>
 
 		<Suspense>
-			<ContextMenu @action="onContextMenuAction" />
+			<ContextMenu :shortcuts="contextMenuShortcuts" @action="onContextMenuAction" />
 		</Suspense>
 	</VueFlow>
 </template>
diff --git a/packages/editor-ui/src/composables/useContextMenu.ts b/packages/editor-ui/src/composables/useContextMenu.ts
index 21322cc910..4758aad23a 100644
--- a/packages/editor-ui/src/composables/useContextMenu.ts
+++ b/packages/editor-ui/src/composables/useContextMenu.ts
@@ -33,13 +33,20 @@ export type ContextMenuAction =
 	| 'add_sticky'
 	| 'change_color';
 
+export type ContextMenuOptions = {
+	shortcuts?: Record<ContextMenuAction, { metaKey?: boolean; keys: string[] }>;
+};
+
 const position = ref<XYPosition>([0, 0]);
 const isOpen = ref(false);
 const target = ref<ContextMenuTarget>();
 const actions = ref<ActionDropdownItem[]>([]);
 const actionCallback = ref<ContextMenuActionCallback>(() => {});
 
-export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) => {
+export const useContextMenu = (
+	onAction: ContextMenuActionCallback = () => {},
+	options: ContextMenuOptions = {},
+) => {
 	const uiStore = useUIStore();
 	const nodeTypesStore = useNodeTypesStore();
 	const workflowsStore = useWorkflowsStore();
@@ -219,7 +226,7 @@ export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) =
 							{
 								id: 'rename',
 								label: i18n.baseText('contextMenu.rename'),
-								shortcut: { keys: ['F2'] },
+								shortcut: options.shortcuts?.rename ?? { keys: ['F2'] },
 								disabled: isReadOnly.value,
 							},
 						];