Refactor keyboard shortcut handling to correctly display ⌘ C for copying the prompt on macOS and standardize word-jump logic

Author: robertpiosik

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

@@ -84,7 +84,9 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
   const [is_text_selecting, set_is_text_selecting] = useState(false)
   const [is_focused, set_is_focused] = useState(false)
   const [show_file_match_hint, set_show_file_match_hint] = useState(false)
-  const file_match_hint_timer_ref = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const file_match_hint_timer_ref = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null)
   const has_shown_hint_once_ref = useRef(false)
   const last_matching_word_ref = useRef<string | null>(null)
 
@@ -150,7 +152,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
   )
 
   const is_mac = use_is_mac()
-  const mod_key = is_mac ? '⌘' : 'Ctrl'
 
   const display_text = useMemo(() => {
     return get_display_text(props.value, props.context_file_paths ?? [])
@@ -529,12 +530,12 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
                       items={[
                         {
                           label: 'Select...',
-                          shortcut: is_mac ? `${mod_key} Return` : `${mod_key}+Enter`,
+                          shortcut: is_mac ? '⌘ Return' : 'Ctrl+Enter',
                           on_click: handle_select_click
                         },
                         {
                           label: 'Copy prompt',
-                          shortcut: is_mac ? `${mod_key}⌥C` : `${mod_key}+Alt+C`,
+                          shortcut: is_mac ? '⌘ C' : 'Ctrl+C',
                           on_click: handle_copy_click
                         }
                       ]}

packages/ui/src/components/editor/panel/PromptField/hooks/use-handlers.ts

@@ -766,11 +766,20 @@ export const use_handlers = (
       }
     }
 
+    if ((e.ctrlKey || e.metaKey) && !shiftKey && key.toLowerCase() == 'c') {
+      const selection = window.getSelection()
+      if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+        e.preventDefault()
+        props.on_copy()
+        return
+      }
+    }
+
     if ((e.ctrlKey || e.metaKey) && !shiftKey) {
       if (key == 'ArrowLeft') {
         e.preventDefault()
         const raw_pos = raw_caret_pos_ref.current
-        if (raw_pos === 0) return
+        if (raw_pos == 0) return
 
         const { value, context_file_paths = [] } = props
         let i = raw_pos - 1
@@ -804,7 +813,7 @@ export const use_handlers = (
           const is_word_char = /\w/.test(value[i])
           while (i >= 0) {
             const current_is_word = /\w/.test(value[i])
-            if (/\s/.test(value[i]) || current_is_word !== is_word_char) {
+            if (/\s/.test(value[i]) || current_is_word != is_word_char) {
               break
             }
             i--
@@ -825,7 +834,7 @@ export const use_handlers = (
         e.preventDefault()
         const { value, context_file_paths = [] } = props
         const raw_pos = raw_caret_pos_ref.current
-        if (raw_pos === value.length) return
+        if (raw_pos == value.length) return
 
         let i = raw_pos
 
@@ -867,7 +876,7 @@ export const use_handlers = (
       }
     }
 
-    if ((e.ctrlKey || e.metaKey) && !shiftKey && key.toLowerCase() === 'z') {
+    if ((e.ctrlKey || e.metaKey) && !shiftKey && key.toLowerCase() == 'z') {
       e.preventDefault()
       if (undo_stack.length > 0) {
         const prev_entry = undo_stack[undo_stack.length - 1]
@@ -888,8 +897,8 @@ export const use_handlers = (
       return
     }
     if (
-      ((e.ctrlKey || e.metaKey) && key.toLowerCase() === 'y') ||
-      ((e.ctrlKey || e.metaKey) && shiftKey && key.toLowerCase() === 'z')
+      ((e.ctrlKey || e.metaKey) && key.toLowerCase() == 'y') ||
+      ((e.ctrlKey || e.metaKey) && shiftKey && key.toLowerCase() == 'z')
     ) {
       e.preventDefault()
       if (redo_stack.length > 0) {