feat(editor): Enable saving workflow when node details view is open (#5856)

* feat(editor): Enable saving workflow when node details view is open
* ⚡ Preventing event propagation
* ⚡ Move save event handler to `NodeDetailsView`
* ✅ Added e2e tests
* 👕 Fixing linting and removing unnecessary event logic

---------

Co-authored-by: Oleg Ivaniv <oleg@n8n.io>

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -28,7 +28,13 @@
 			</div>
 		</n8n-tooltip>
 
-		<div class="data-display" v-if="activeNode">
+		<div
+			v-if="activeNode"
+			class="data-display"
+			ref="container"
+			@keydown.capture="onKeyDown"
+			tabindex="0"
+		>
 			<div @click="close" :class="$style.modalBackground"></div>
 			<NDVDraggablePanels
 				:isTriggerNode="isTriggerNode"
@@ -156,6 +162,7 @@ import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
+import useDeviceSupport from '@/composables/useDeviceSupport';
 
 export default mixins(
 	externalHooks,
@@ -184,6 +191,11 @@ export default mixins(
 			default: false,
 		},
 	},
+	setup() {
+		return {
+			...useDeviceSupport(),
+		};
+	},
 	data() {
 		return {
 			settingsEventBus: new Vue(),
@@ -469,6 +481,16 @@ export default mixins(
 		},
 	},
 	methods: {
+		onKeyDown(e: KeyboardEvent) {
+			if (e.key === 's' && this.isCtrlKeyPressed(e)) {
+				e.stopPropagation();
+				e.preventDefault();
+
+				if (this.readOnly) return;
+
+				this.$emit('saveKeyboardShortcut', e);
+			}
+		},
 		onInputItemHover(e: { itemIndex: number; outputIndex: number } | null) {
 			if (!this.inputNodeName) {
 				return;