Refactor hooks and utils to use props object pattern and add inline code styling

- text between backticks that is not a file symbol should have monospaced font
- map_raw_pos_to_display_pos should accept params variable, don't destructure
- use_drag_drop should accept params variable, don't destructure
- [Fragment] should accept props and input_ref as positional params
- [Fragment] should accept props variable
- use_ghost_text should accept variable params, don't destructure inside
- [Fragment] should accept two positional params: props and params variable, don't destructure
- updated prompt_type prop should focus and select text in the field
- updated prompt_type prop focuses field correctly, but text is not selected

Author: robertpiosik

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

@@ -587,3 +587,11 @@
     }
   }
 }
+
+.inline-code {
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 12px;
+  background-color: var(--cwc-bg-secondary);
+  border-radius: 4px;
+  padding: 2px 2px 1px 2px;
+}

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

@@ -114,16 +114,13 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
     set_is_invocation_dropdown_open((prev) => !prev)
   }, [])
 
-  const { is_alt_pressed, handle_container_key_down } = use_keyboard_shortcuts({
-    show_edit_format_selector: props.show_edit_format_selector,
-    on_edit_format_change: props.on_edit_format_change,
-    on_copy: props.on_copy,
-    on_invocation_count_change: props.on_invocation_count_change,
-    is_invocation_dropdown_open,
-    on_toggle_invocation_dropdown: toggle_invocation_dropdown,
-    is_recording: props.is_recording,
-    on_recording_finished: props.on_recording_finished
-  })
+  const { is_alt_pressed, handle_container_key_down } = use_keyboard_shortcuts(
+    props,
+    {
+      is_invocation_dropdown_open,
+      on_toggle_invocation_dropdown: toggle_invocation_dropdown
+    }
+  )
 
   const {
     is_dropdown_open,
@@ -160,12 +157,7 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
   })
 
   const { handle_drag_start, handle_drag_over, handle_drop, handle_drag_end } =
-    use_drag_drop({
-      input_ref,
-      value: props.value,
-      context_file_paths: props.context_file_paths,
-      on_change: props.on_change
-    })
+    use_drag_drop(props, input_ref)
 
   const mouse_down_pos_ref = useRef<{ x: number; y: number } | null>(null)
 
@@ -234,11 +226,11 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
 
       if (tab_changed) {
         prev_tab_index_ref.current = props.active_tab_index
-        const display_pos = map_raw_pos_to_display_pos(
-          props.value.length,
-          props.value,
-          props.context_file_paths ?? []
-        )
+        const display_pos = map_raw_pos_to_display_pos({
+          raw_pos: props.value.length,
+          raw_text: props.value,
+          context_file_paths: props.context_file_paths ?? []
+        })
         input_ref.current.focus()
         set_caret_position_for_div(input_ref.current, display_pos)
       } else if (is_focused) {

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

@@ -6,19 +6,10 @@ import {
 import { set_caret_position_for_div } from '../utils/caret'
 import type { PromptFieldProps } from '../PromptField'
 
-type UseDragDropParams = {
+export const use_drag_drop = (
+  props: PromptFieldProps,
   input_ref: RefObject<HTMLDivElement>
-  value: PromptFieldProps['value']
-  context_file_paths: PromptFieldProps['context_file_paths']
-  on_change: PromptFieldProps['on_change']
-}
-
-export const use_drag_drop = ({
-  input_ref,
-  value,
-  context_file_paths,
-  on_change
-}: UseDragDropParams) => {
+) => {
   const dragged_text_range_ref = useRef<{ start: number; end: number } | null>(
     null
   )
@@ -44,17 +35,17 @@ export const use_drag_drop = ({
 
     const raw_start = map_display_pos_to_raw_pos({
       display_pos: display_start,
-      raw_text: value,
-      context_file_paths: context_file_paths ?? []
+      raw_text: props.value,
+      context_file_paths: props.context_file_paths ?? []
     })
     const raw_end = map_display_pos_to_raw_pos({
       display_pos: display_end,
-      raw_text: value,
-      context_file_paths: context_file_paths ?? []
+      raw_text: props.value,
+      context_file_paths: props.context_file_paths ?? []
     })
 
     dragged_text_range_ref.current = { start: raw_start, end: raw_end }
-    const dragged_text = value.substring(raw_start, raw_end)
+    const dragged_text = props.value.substring(raw_start, raw_end)
     e.dataTransfer.setData('text/plain', dragged_text)
   }
 
@@ -98,11 +89,14 @@ export const use_drag_drop = ({
 
     let raw_drop_pos = map_display_pos_to_raw_pos({
       display_pos: display_drop_pos,
-      raw_text: value,
-      context_file_paths: context_file_paths ?? []
+      raw_text: props.value,
+      context_file_paths: props.context_file_paths ?? []
     })
 
-    const dragged_text = value.substring(dragged_range.start, dragged_range.end)
+    const dragged_text = props.value.substring(
+      dragged_range.start,
+      dragged_range.end
+    )
 
     if (
       raw_drop_pos >= dragged_range.start &&
@@ -112,8 +106,8 @@ export const use_drag_drop = ({
     }
 
     const value_without_dragged =
-      value.substring(0, dragged_range.start) +
-      value.substring(dragged_range.end)
+      props.value.substring(0, dragged_range.start) +
+      props.value.substring(dragged_range.end)
 
     if (raw_drop_pos > dragged_range.start) {
       raw_drop_pos -= dragged_text.length
@@ -124,22 +118,22 @@ export const use_drag_drop = ({
       dragged_text +
       value_without_dragged.substring(raw_drop_pos)
 
-    on_change(new_value)
+    props.on_change(new_value)
 
     const new_raw_selection_start = raw_drop_pos
     const new_raw_selection_end = raw_drop_pos + dragged_text.length
     setTimeout(() => {
       if (input_ref.current) {
-        const display_start = map_raw_pos_to_display_pos(
-          new_raw_selection_start,
-          new_value,
-          context_file_paths ?? []
-        )
-        const display_end = map_raw_pos_to_display_pos(
-          new_raw_selection_end,
-          new_value,
-          context_file_paths ?? []
-        )
+        const display_start = map_raw_pos_to_display_pos({
+          raw_pos: new_raw_selection_start,
+          raw_text: new_value,
+          context_file_paths: props.context_file_paths ?? []
+        })
+        const display_end = map_raw_pos_to_display_pos({
+          raw_pos: new_raw_selection_end,
+          raw_text: new_value,
+          context_file_paths: props.context_file_paths ?? []
+        })
         set_caret_position_for_div(
           input_ref.current,
           display_start,

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

@@ -1,15 +1,7 @@
 import { useState, useRef, useEffect } from 'react'
 import type { PromptFieldProps } from '../PromptField'
 
-type UseDropdownParams = Pick<
-  PromptFieldProps,
-  'on_copy' | 'on_submit_with_control'
->
-
-export const use_dropdown = ({
-  on_copy,
-  on_submit_with_control
-}: UseDropdownParams) => {
+export const use_dropdown = (props: PromptFieldProps) => {
   const dropdown_ref = useRef<HTMLDivElement>(null)
   const [is_dropdown_open, set_is_dropdown_open] = useState(false)
 
@@ -38,12 +30,12 @@ export const use_dropdown = ({
   }, [])
 
   const handle_copy_click = () => {
-    on_copy()
+    props.on_copy()
     close_dropdown()
   }
 
   const handle_select_click = () => {
-    on_submit_with_control()
+    props.on_submit_with_control()
     close_dropdown()
   }
 

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

@@ -7,49 +7,43 @@ import {
   useCallback
 } from 'react'
 
-type UseGhostTextParams = {
+export const use_ghost_text = (params: {
   value: string
   input_ref: RefObject<HTMLDivElement>
   is_focused: boolean
   currently_open_file_text?: string
   caret_position: number
-}
-
-export const use_ghost_text = ({
-  value,
-  input_ref,
-  is_focused,
-  currently_open_file_text,
-  caret_position
-}: UseGhostTextParams) => {
+}) => {
   const [ghost_text, set_ghost_text] = useState('')
   const ghost_text_debounce_timer_ref = useRef<ReturnType<
     typeof setTimeout
   > | null>(null)
   const [can_show_ghost_text, set_can_show_ghost_text] = useState(false)
-  const prev_is_focused_ref = useRef(is_focused)
+  const prev_is_focused_ref = useRef(params.is_focused)
   const initial_value_on_focus_ref = useRef('')
 
   useEffect(() => {
-    if (is_focused && !prev_is_focused_ref.current) {
+    if (params.is_focused && !prev_is_focused_ref.current) {
       set_can_show_ghost_text(false)
-      initial_value_on_focus_ref.current = value
+      initial_value_on_focus_ref.current = params.value
     } else if (
-      is_focused &&
+      params.is_focused &&
       !can_show_ghost_text &&
-      value !== initial_value_on_focus_ref.current
+      params.value !== initial_value_on_focus_ref.current
     ) {
       set_can_show_ghost_text(true)
     }
-    prev_is_focused_ref.current = is_focused
-  }, [is_focused, value, can_show_ghost_text])
+    prev_is_focused_ref.current = params.is_focused
+  }, [params.is_focused, params.value, can_show_ghost_text])
 
   const identifiers = useMemo(() => {
-    if (!currently_open_file_text) return new Set<string>()
-    const matches = currently_open_file_text.match(/[a-zA-Z_][a-zA-Z0-9_]*/g)
+    if (!params.currently_open_file_text) return new Set<string>()
+    const matches = params.currently_open_file_text.match(
+      /[a-zA-Z_][a-zA-Z0-9_]*/g
+    )
     if (!matches) return new Set<string>()
     return new Set(matches.filter((id) => id.length >= 3))
-  }, [currently_open_file_text])
+  }, [params.currently_open_file_text])
 
   useEffect(() => {
     if (ghost_text_debounce_timer_ref.current) {
@@ -59,14 +53,14 @@ export const use_ghost_text = ({
 
     let potential_ghost_text = ''
 
-    if (input_ref.current && is_focused && can_show_ghost_text) {
+    if (params.input_ref.current && params.is_focused && can_show_ghost_text) {
       const selection = window.getSelection()
       if (selection && selection.rangeCount > 0) {
         const range = selection.getRangeAt(0)
         if (range.collapsed) {
           let is_inside_symbol = false
           let current_node: Node | null = range.startContainer
-          while (current_node && current_node !== input_ref.current) {
+          while (current_node && current_node !== params.input_ref.current) {
             if (
               current_node.nodeType === Node.ELEMENT_NODE &&
               (current_node as HTMLElement).dataset.type?.endsWith('-symbol')
@@ -79,13 +73,13 @@ export const use_ghost_text = ({
 
           if (!is_inside_symbol) {
             const post_caret_range = range.cloneRange()
-            post_caret_range.selectNodeContents(input_ref.current)
+            post_caret_range.selectNodeContents(params.input_ref.current)
             post_caret_range.setStart(range.endContainer, range.endOffset)
             const text_after_cursor = post_caret_range.toString()
 
             if (text_after_cursor == '' || /^\s/.test(text_after_cursor)) {
               const pre_caret_range = range.cloneRange()
-              pre_caret_range.selectNodeContents(input_ref.current)
+              pre_caret_range.selectNodeContents(params.input_ref.current)
               pre_caret_range.setEnd(range.startContainer, range.startOffset)
               const text_before_cursor = pre_caret_range.toString()
               const last_word_match = text_before_cursor.match(/[\S]+$/)
@@ -132,17 +126,17 @@ export const use_ghost_text = ({
       }
     }
   }, [
-    value,
-    caret_position,
+    params.value,
+    params.caret_position,
     identifiers,
-    is_focused,
+    params.is_focused,
     ghost_text,
-    input_ref,
+    params.input_ref,
     can_show_ghost_text
   ])
 
   useEffect(() => {
-    const input = input_ref.current
+    const input = params.input_ref.current
     if (!input) return
 
     const existing_ghost = input.querySelector('span[data-type="ghost-text"]')
@@ -170,12 +164,12 @@ export const use_ghost_text = ({
         }
       }
     }
-  }, [ghost_text, input_ref])
+  }, [ghost_text, params.input_ref])
 
   const handle_accept_ghost_text = useCallback(() => {
-    if (!ghost_text || !input_ref.current) return
+    if (!ghost_text || !params.input_ref.current) return
 
-    const ghost_node = input_ref.current.querySelector(
+    const ghost_node = params.input_ref.current.querySelector(
       'span[data-type="ghost-text"]'
     )
     if (ghost_node) {
@@ -195,11 +189,11 @@ export const use_ghost_text = ({
         }
       }
 
-      input_ref.current.dispatchEvent(
+      params.input_ref.current.dispatchEvent(
         new Event('input', { bubbles: true, cancelable: true })
       )
     }
-  }, [ghost_text, input_ref])
+  }, [ghost_text, params.input_ref])
 
   return { ghost_text, handle_accept_ghost_text }
 }