Skip to content

Commit 590e5bd

Browse files
robertpiosikrobertpiosik
committed
Refactor keyboard shortcuts into a dedicated hook and improve edit format selector spacing and labels
1 parent 522e57a commit 590e5bd

4 files changed

Lines changed: 102 additions & 74 deletions

File tree

‎packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@
281281
&__edit-format {
282282
display: flex;
283283
align-items: center;
284-
gap: 6px;
284+
gap: 4px;
285285

286286
&__button {
287287
font-size: 11px;

‎packages/ui/src/components/editor/panel/PromptField/PromptField.tsx‎

Lines changed: 15 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { use_handlers } from './hooks/use-handlers'
77
import { use_dropdown } from './hooks/use-dropdown'
88
import { use_ghost_text } from './hooks/use-ghost-text'
99
import { use_drag_drop } from './hooks/use-drag-drop'
10+
import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
1011
import { DropdownMenu } from '../../common/DropdownMenu'
1112
import { use_is_narrow_viewport, use_is_mac } from '@shared/hooks'
1213
import {
@@ -81,59 +82,13 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
8182
const [show_submit_tooltip, set_show_submit_tooltip] = useState(false)
8283
const [is_text_selecting, set_is_text_selecting] = useState(false)
8384
const [is_focused, set_is_focused] = useState(false)
84-
85-
const [is_alt_pressed, set_is_alt_pressed] = useState(false)
86-
87-
useEffect(() => {
88-
const handle_key_down = (e: KeyboardEvent) => {
89-
if (e.key == 'Alt') set_is_alt_pressed(true)
90-
91-
if (
92-
e.altKey &&
93-
!e.shiftKey &&
94-
!e.ctrlKey &&
95-
!e.metaKey &&
96-
props.show_edit_format_selector &&
97-
props.on_edit_format_change
98-
) {
99-
let format: EditFormat | undefined
100-
switch (e.code) {
101-
case 'KeyW':
102-
format = 'whole'
103-
break
104-
case 'KeyT':
105-
format = 'truncated'
106-
break
107-
case 'KeyB':
108-
format = 'before-after'
109-
break
110-
case 'KeyD':
111-
format = 'diff'
112-
break
113-
}
114-
if (format) {
115-
e.preventDefault()
116-
props.on_edit_format_change(format)
117-
}
118-
}
119-
}
120-
const handle_key_up = (e: KeyboardEvent) => {
121-
if (e.key == 'Alt') set_is_alt_pressed(false)
122-
}
123-
const handle_blur = () => {
124-
set_is_alt_pressed(false)
125-
}
126-
window.addEventListener('keydown', handle_key_down)
127-
window.addEventListener('keyup', handle_key_up)
128-
window.addEventListener('blur', handle_blur)
129-
return () => {
130-
window.removeEventListener('keydown', handle_key_down)
131-
window.removeEventListener('keyup', handle_key_up)
132-
window.removeEventListener('blur', handle_blur)
133-
}
134-
}, [props.show_edit_format_selector, props.on_edit_format_change])
135-
136-
const is_narrow_viewport = use_is_narrow_viewport(268)
85+
const is_narrow_viewport = use_is_narrow_viewport(330)
86+
const { is_alt_pressed, handle_container_key_down } = use_keyboard_shortcuts({
87+
show_edit_format_selector: props.show_edit_format_selector,
88+
on_edit_format_change: props.on_edit_format_change,
89+
on_search_click: props.on_search_click,
90+
on_copy: props.on_copy
91+
})
13792
const {
13893
is_dropdown_open,
13994
toggle_dropdown,
@@ -337,23 +292,7 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
337292
(props.has_active_selection || !props.has_active_editor),
338293
[styles['container__inner--selecting']]: is_text_selecting
339294
})}
340-
onKeyDown={(e) => {
341-
if (e.key == 'Escape' && !e.ctrlKey && !e.metaKey) {
342-
e.stopPropagation()
343-
return
344-
}
345-
if (e.key == 'f' && (e.ctrlKey || e.metaKey)) {
346-
e.stopPropagation()
347-
props.on_search_click()
348-
}
349-
if (e.key == 'c' && e.altKey && (e.ctrlKey || e.metaKey)) {
350-
if (props.on_copy) {
351-
e.stopPropagation()
352-
e.preventDefault()
353-
props.on_copy()
354-
}
355-
}
356-
}}
295+
onKeyDown={handle_container_key_down}
357296
onClick={() => input_ref.current?.focus()}
358297
>
359298
{props.value && (
@@ -472,7 +411,9 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
472411
{(['whole', 'truncated', 'before-after', 'diff'] as const).map(
473412
(format) => {
474413
const button_text = is_narrow_viewport
475-
? format.charAt(0).toUpperCase()
414+
? format == 'before-after'
415+
? 'B/A'
416+
: format.charAt(0).toUpperCase()
476417
: format == 'before-after'
477418
? 'before/after'
478419
: format
@@ -490,7 +431,9 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
490431
]]: is_selected
491432
}
492433
)}
493-
title={`Edit format instructions to include with the prompt ${edit_format_shortcuts[format]}\n\n${
434+
title={`Edit format instructions '${
435+
format == 'before-after' ? 'before/after' : format
436+
}' to include with the prompt ${edit_format_shortcuts[format]}\n\n${
494437
props.edit_format_instructions?.[format]
495438
}`}
496439
onClick={() => props.on_edit_format_change?.(format)}

‎packages/ui/src/components/editor/panel/PromptField/hooks/use-keyboard-shortcuts.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { useState, useEffect } from 'react'
2+
import type { PromptFieldProps, EditFormat } from '../PromptField'
3+
4+
type UseKeyboardShortcutsParams = Pick<
5+
PromptFieldProps,
6+
| 'show_edit_format_selector'
7+
| 'on_edit_format_change'
8+
| 'on_search_click'
9+
| 'on_copy'
10+
>
11+
12+
export const use_keyboard_shortcuts = (params: UseKeyboardShortcutsParams) => {
13+
const [is_alt_pressed, set_is_alt_pressed] = useState(false)
14+
15+
useEffect(() => {
16+
const handle_key_down = (e: KeyboardEvent) => {
17+
if (e.key == 'Alt') set_is_alt_pressed(true)
18+
19+
if (
20+
e.altKey &&
21+
!e.shiftKey &&
22+
!e.ctrlKey &&
23+
!e.metaKey &&
24+
params.show_edit_format_selector &&
25+
params.on_edit_format_change
26+
) {
27+
let format: EditFormat | undefined
28+
switch (e.code) {
29+
case 'KeyW':
30+
format = 'whole'
31+
break
32+
case 'KeyT':
33+
format = 'truncated'
34+
break
35+
case 'KeyB':
36+
format = 'before-after'
37+
break
38+
case 'KeyD':
39+
format = 'diff'
40+
break
41+
}
42+
if (format) {
43+
e.preventDefault()
44+
params.on_edit_format_change(format)
45+
}
46+
}
47+
}
48+
const handle_key_up = (e: KeyboardEvent) => {
49+
if (e.key == 'Alt') set_is_alt_pressed(false)
50+
}
51+
const handle_blur = () => {
52+
set_is_alt_pressed(false)
53+
}
54+
window.addEventListener('keydown', handle_key_down)
55+
window.addEventListener('keyup', handle_key_up)
56+
window.addEventListener('blur', handle_blur)
57+
return () => {
58+
window.removeEventListener('keydown', handle_key_down)
59+
window.removeEventListener('keyup', handle_key_up)
60+
window.removeEventListener('blur', handle_blur)
61+
}
62+
}, [params.show_edit_format_selector, params.on_edit_format_change])
63+
64+
const handle_container_key_down = (
65+
e: React.KeyboardEvent<HTMLDivElement>
66+
) => {
67+
if (e.key == 'Escape' && !e.ctrlKey && !e.metaKey) {
68+
e.stopPropagation()
69+
return
70+
}
71+
if (e.key == 'f' && (e.ctrlKey || e.metaKey)) {
72+
e.stopPropagation()
73+
params.on_search_click()
74+
}
75+
if (e.key == 'c' && e.altKey && (e.ctrlKey || e.metaKey)) {
76+
if (params.on_copy) {
77+
e.stopPropagation()
78+
e.preventDefault()
79+
params.on_copy()
80+
}
81+
}
82+
}
83+
84+
return { is_alt_pressed, handle_container_key_down }
85+
}

‎packages/vscode/src/views/settings/frontend/Home/sections/GeneralSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
186186
/>
187187
<Item
188188
title="Before and After"
189-
description="Instructions for generating code in 'before-after' edit format."
189+
description="Instructions for generating code in 'before/after' edit format."
190190
slot_placement="below"
191191
slot={
192192
<Textarea

0 commit comments

Comments
 (0)