-
Notifications
You must be signed in to change notification settings - Fork 525
fix(shortcuts): handle command palette in terminal #2701
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
janburzinski
wants to merge
9
commits into
main
Choose a base branch
from
emdash/cmdk-not-working-windows-wovyp
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+321
−1
Open
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
e46da10
fix(shortcuts): handle command palette in terminal
janburzinski 44f71a6
test(shortcuts): cover xterm keyboard propagation
janburzinski 7c4250a
fix(shortcuts): type terminal keyboard test hotkey
janburzinski cd52da4
fix(shortcuts): preserve terminal hotkey dispatch behavior
janburzinski 7039677
fix(shortcuts): allow task navigation in terminal
janburzinski 9679f40
fix(shortcuts): preserve app navigation in terminal
janburzinski 829187e
Merge remote-tracking branch 'origin/main' into emdash/cmdk-not-worki…
janburzinski 84d8945
fix(shortcuts): guard terminal focus check against null activeElement
janburzinski 3617ef5
fix(shortcuts): guard monaco focus check against null activeElement
janburzinski File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
apps/emdash-desktop/src/renderer/lib/components/terminal-keyboard-bridge.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { detectPlatform, normalizeHotkey } from '@tanstack/hotkeys'; | ||
| import { useLayoutEffect, useMemo } from 'react'; | ||
| import { useAppSettingsKey } from '@renderer/features/settings/use-app-settings-key'; | ||
| import { | ||
| APP_SHORTCUTS, | ||
| getEffectiveHotkey, | ||
| type ShortcutSettingsKey, | ||
| } from '@renderer/lib/hooks/useKeyboardShortcuts'; | ||
| import { dispatchMatchingHotkeys } from '@renderer/lib/hotkeys/dispatch-matching-hotkeys'; | ||
|
|
||
| function isTerminalFocused(): boolean { | ||
| return document.activeElement?.closest('.xterm') !== null; | ||
| } | ||
|
|
||
| /** | ||
| * Fires the small allowlist of app shortcuts flagged `overrideTerminalFocus` | ||
| * (e.g. the command palette) when an xterm terminal has focus. | ||
| * | ||
| * xterm.js maps Ctrl+<key> combinations to terminal control codes on | ||
| * Windows/Linux and calls stopPropagation() on the keydown, so TanStack's | ||
| * document-level (bubbling phase) listeners never see them — which is why | ||
| * Ctrl+K does nothing from inside a terminal on Windows while Cmd+K works on | ||
| * macOS (xterm lets Cmd combos through). This bridge listens at capture phase, | ||
| * which runs before xterm's textarea handler, so it cannot be blocked by it. | ||
| * | ||
| * Only the flagged shortcuts are intercepted; every other key still reaches the | ||
| * terminal so essential control keys (Ctrl+C, Ctrl+D, Ctrl+L, …) keep working. | ||
| * When no terminal is focused the handler returns immediately and normal | ||
| * TanStack bubbling-phase handling takes over unchanged. | ||
| */ | ||
| export function TerminalKeyboardBridge() { | ||
| const { value: keyboard } = useAppSettingsKey('keyboard'); | ||
| const overrideHotkeys = useMemo(() => { | ||
| const platform = detectPlatform(); | ||
| const next = new Set<string>(); | ||
| const shortcuts = Object.entries(APP_SHORTCUTS) as [ | ||
| ShortcutSettingsKey, | ||
| (typeof APP_SHORTCUTS)[ShortcutSettingsKey], | ||
| ][]; | ||
|
|
||
| for (const [key, def] of shortcuts) { | ||
| if (!def.overrideTerminalFocus) continue; | ||
| const hotkey = getEffectiveHotkey(key, keyboard); | ||
| if (hotkey !== null) next.add(normalizeHotkey(hotkey, platform)); | ||
| } | ||
|
|
||
| return next; | ||
| }, [keyboard]); | ||
|
|
||
| useLayoutEffect(() => { | ||
| if (overrideHotkeys.size === 0) return; | ||
| const platform = detectPlatform(); | ||
|
|
||
| const handler = (e: KeyboardEvent) => { | ||
| if (!isTerminalFocused()) return; | ||
|
|
||
| const handled = dispatchMatchingHotkeys(e, { | ||
| dispatch: 'first', | ||
| filter: (registration) => | ||
| overrideHotkeys.has(normalizeHotkey(registration.hotkey, platform)), | ||
| }); | ||
|
|
||
| // Prevent the event from reaching xterm and skip the TanStack bubbling | ||
| // listener, which would otherwise double-dispatch the same shortcut. | ||
| if (handled) e.stopImmediatePropagation(); | ||
|
janburzinski marked this conversation as resolved.
Outdated
|
||
| }; | ||
|
|
||
| document.addEventListener('keydown', handler, { capture: true }); | ||
| return () => document.removeEventListener('keydown', handler, { capture: true }); | ||
| }, [overrideHotkeys]); | ||
|
|
||
| return null; | ||
| } | ||
142 changes: 142 additions & 0 deletions
142
apps/emdash-desktop/src/renderer/tests/browser/terminal-keyboard-bridge.test.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import { detectPlatform, getHotkeyManager, type HotkeyRegistrationHandle } from '@tanstack/hotkeys'; | ||
| import { createElement } from 'react'; | ||
| import { createRoot, type Root } from 'react-dom/client'; | ||
| import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; | ||
|
|
||
| // The bridge reads the command-palette hotkey from app settings; with no | ||
| // overrides it falls back to the 'Mod+K' default. | ||
| vi.mock('@renderer/features/settings/use-app-settings-key', () => ({ | ||
| useAppSettingsKey: () => ({ value: undefined }), | ||
| })); | ||
|
|
||
| import { TerminalKeyboardBridge } from '@renderer/lib/components/terminal-keyboard-bridge'; | ||
|
|
||
| // 'Mod' resolves to Cmd on macOS and Ctrl on Windows/Linux. This test is the | ||
| // non-mac case (xterm only swallows Ctrl combos), but stay portable so it also | ||
| // passes on a macOS CI runner. | ||
| const PRIMARY_MODIFIER: 'metaKey' | 'ctrlKey' = detectPlatform() === 'mac' ? 'metaKey' : 'ctrlKey'; | ||
|
|
||
| function pressKey(target: EventTarget, key: string): KeyboardEvent { | ||
| const event = new KeyboardEvent('keydown', { | ||
| key, | ||
| [PRIMARY_MODIFIER]: true, | ||
| bubbles: true, | ||
| cancelable: true, | ||
| }); | ||
| target.dispatchEvent(event); | ||
| return event; | ||
| } | ||
|
|
||
| function flush(): Promise<void> { | ||
| return new Promise((resolve) => | ||
| requestAnimationFrame(() => requestAnimationFrame(() => resolve())) | ||
| ); | ||
| } | ||
|
|
||
| describe('TerminalKeyboardBridge', () => { | ||
| let root: Root; | ||
| let rootContainer: HTMLDivElement; | ||
| let xtermHost: HTMLDivElement; | ||
| let xtermInput: HTMLTextAreaElement; | ||
| let outsideInput: HTMLInputElement; | ||
| const handles: HotkeyRegistrationHandle[] = []; | ||
|
|
||
| function registerHotkey(hotkey: string, callback: () => void): void { | ||
| handles.push( | ||
| getHotkeyManager().register(hotkey, () => callback(), { | ||
| // Disable the manager's own preventDefault/stopPropagation so a | ||
| // document bubble-phase spy can observe whether the bridge stopped the | ||
| // event during the capture phase. | ||
| preventDefault: false, | ||
| stopPropagation: false, | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| beforeEach(async () => { | ||
| rootContainer = document.createElement('div'); | ||
| document.body.appendChild(rootContainer); | ||
| root = createRoot(rootContainer); | ||
| root.render(createElement(TerminalKeyboardBridge)); | ||
| await flush(); | ||
|
|
||
| xtermHost = document.createElement('div'); | ||
| xtermHost.className = 'xterm'; | ||
| xtermInput = document.createElement('textarea'); | ||
| xtermHost.appendChild(xtermInput); | ||
| document.body.appendChild(xtermHost); | ||
|
|
||
| outsideInput = document.createElement('input'); | ||
| document.body.appendChild(outsideInput); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| for (const handle of handles.splice(0)) handle.unregister(); | ||
| root.unmount(); | ||
| rootContainer.remove(); | ||
| xtermHost.remove(); | ||
| outsideInput.remove(); | ||
| vi.restoreAllMocks(); | ||
| }); | ||
|
|
||
| it('fires the command palette shortcut when a terminal is focused', async () => { | ||
| const paletteSpy = vi.fn(); | ||
| const bubbleSpy = vi.fn(); | ||
| const xtermSpy = vi.fn((event: KeyboardEvent) => event.stopPropagation()); | ||
| registerHotkey('Mod+K', paletteSpy); | ||
| xtermInput.addEventListener('keydown', xtermSpy); | ||
| document.addEventListener('keydown', bubbleSpy); | ||
|
|
||
| xtermInput.focus(); | ||
| expect(document.activeElement).toBe(xtermInput); | ||
| pressKey(xtermInput, 'k'); | ||
|
|
||
| expect(paletteSpy).toHaveBeenCalledTimes(1); | ||
| // The bridge stops propagation so the manager's bubble listener doesn't | ||
| // double-dispatch and xterm never consumes the key. | ||
| expect(xtermSpy).not.toHaveBeenCalled(); | ||
| expect(bubbleSpy).not.toHaveBeenCalled(); | ||
|
|
||
| xtermInput.removeEventListener('keydown', xtermSpy); | ||
| document.removeEventListener('keydown', bubbleSpy); | ||
| }); | ||
|
|
||
| it('stays out of the way when no terminal is focused', async () => { | ||
| const paletteSpy = vi.fn(); | ||
| const bubbleSpy = vi.fn(); | ||
| registerHotkey('Mod+K', paletteSpy); | ||
| document.addEventListener('keydown', bubbleSpy); | ||
|
|
||
| outsideInput.focus(); | ||
| pressKey(outsideInput, 'k'); | ||
|
|
||
| // The bridge is inert: the event propagates normally to document listeners. | ||
| expect(paletteSpy).toHaveBeenCalledTimes(1); | ||
| expect(bubbleSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| document.removeEventListener('keydown', bubbleSpy); | ||
| }); | ||
|
|
||
| it('lets non-flagged shortcuts reach the terminal so control keys keep working', async () => { | ||
| const drawerSpy = vi.fn(); | ||
| const bubbleSpy = vi.fn(); | ||
| const xtermSpy = vi.fn((event: KeyboardEvent) => event.stopPropagation()); | ||
| // Mod+J (terminal drawer) is NOT flagged overrideTerminalFocus, so the | ||
| // bridge must not intercept it — Ctrl+J stays available to the shell. | ||
| registerHotkey('Mod+J', drawerSpy); | ||
| xtermInput.addEventListener('keydown', xtermSpy); | ||
| document.addEventListener('keydown', bubbleSpy); | ||
|
|
||
| xtermInput.focus(); | ||
| pressKey(xtermInput, 'j'); | ||
|
|
||
| // Bridge does not stop the event, so xterm receives and consumes it before | ||
| // TanStack's document-level bubble listener can dispatch the shortcut. | ||
| expect(xtermSpy).toHaveBeenCalledTimes(1); | ||
| expect(drawerSpy).not.toHaveBeenCalled(); | ||
| expect(bubbleSpy).not.toHaveBeenCalled(); | ||
|
|
||
| xtermInput.removeEventListener('keydown', xtermSpy); | ||
| document.removeEventListener('keydown', bubbleSpy); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.