fix(editor): Add back keyboard shortcuts for log view in PiP (no-changelog) (#16563)

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

@@ -1,7 +1,8 @@
 import { useActiveElement, useEventListener } from '@vueuse/core';
 import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { MaybeRef, Ref } from 'vue';
-import { computed, unref } from 'vue';
+import { computed, inject, unref } from 'vue';
+import { PiPWindowSymbol } from '@/constants';
 
 type KeyboardEventHandler =
 	| ((event: KeyboardEvent) => void)
@@ -29,7 +30,8 @@ export const useKeybindings = (
 		disabled: MaybeRef<boolean>;
 	},
 ) => {
-	const activeElement = useActiveElement();
+	const pipWindow = inject(PiPWindowSymbol);
+	const activeElement = useActiveElement({ window: pipWindow?.value });
 	const { isCtrlKeyPressed } = useDeviceSupport();
 
 	const isDisabled = computed(() => unref(options?.disabled));
@@ -148,5 +150,5 @@ export const useKeybindings = (
 		}
 	}
 
-	useEventListener(document, 'keydown', onKeyDown);
+	useEventListener(pipWindow?.value?.document ?? document, 'keydown', onKeyDown);
 };

packages/frontend/editor-ui/src/features/logs/components/LogsPanel.vue

@@ -14,8 +14,8 @@ import { useLogsTreeExpand } from '@/features/logs/composables/useLogsTreeExpand
 import { type LogEntry } from '@/features/logs/logs.types';
 import { useLogsStore } from '@/stores/logs.store';
 import { useLogsPanelLayout } from '@/features/logs/composables/useLogsPanelLayout';
-import { type KeyMap, useKeybindings } from '@/composables/useKeybindings';
-import { useActiveElement } from '@vueuse/core';
+import { type KeyMap } from '@/composables/useKeybindings';
+import LogsViewKeyboardEventListener from './LogsViewKeyboardEventListener.vue';
 
 const props = withDefaults(defineProps<{ isReadOnly?: boolean }>(), { isReadOnly: false });
 
@@ -79,15 +79,8 @@ const logsPanelActionsProps = computed<InstanceType<typeof LogsPanelActions>['$p
 	onToggleOpen,
 	onToggleSyncSelection: logsStore.toggleLogSelectionSync,
 }));
-const activeElement = useActiveElement();
-const isBlurred = computed(
-	() =>
-		!activeElement.value ||
-		!container.value ||
-		(!container.value.contains(activeElement.value) && container.value !== activeElement.value),
-);
 
-const localKeyMap = computed<KeyMap>(() => ({
+const keyMap = computed<KeyMap>(() => ({
 	j: selectNext,
 	k: selectPrev,
 	Escape: () => select(undefined),
@@ -97,8 +90,6 @@ const localKeyMap = computed<KeyMap>(() => ({
 	Enter: () => selected.value && handleOpenNdv(selected.value),
 }));
 
-useKeybindings(localKeyMap, { disabled: isBlurred });
-
 function handleResizeOverviewPanelEnd() {
 	if (isOverviewPanelFullWidth.value) {
 		select(undefined);
@@ -123,6 +114,12 @@ function handleOpenNdv(treeNode: LogEntry) {
 
 <template>
 	<div ref="pipContainer">
+		<!-- force re-create with key for shortcuts to work in PiP window -->
+		<LogsViewKeyboardEventListener
+			:key="String(!!pipWindow)"
+			:key-map="keyMap"
+			:container="container"
+		/>
 		<div ref="pipContent" :class="$style.pipContent">
 			<N8nResizeWrapper
 				:height="height"

packages/frontend/editor-ui/src/features/logs/components/LogsViewKeyboardEventListener.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type KeyMap, useKeybindings } from '@/composables/useKeybindings';
+import { PiPWindowSymbol } from '@/constants';
+import { useActiveElement } from '@vueuse/core';
+import { computed, toRef, inject } from 'vue';
+
+const { container, keyMap } = defineProps<{ keyMap: KeyMap; container: HTMLElement | null }>();
+const pipWindow = inject(PiPWindowSymbol);
+
+const activeElement = useActiveElement({ window: pipWindow?.value });
+const isBlurred = computed(() => {
+	if (pipWindow?.value) {
+		return pipWindow.value.document.activeElement === null;
+	}
+
+	return (
+		!activeElement.value ||
+		!container ||
+		(!container.contains(activeElement.value) && container !== activeElement.value)
+	);
+});
+
+useKeybindings(
+	toRef(() => keyMap),
+	{ disabled: isBlurred },
+);
+</script>