Refactor clear button to render inline with text instead of absolute positioning

Author: robertpiosik

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

@@ -1,5 +1,5 @@
 .container {
-  --padding: 5px 22px 5px 7px;
+  --padding: 5px 7px;
   position: relative;
 
   &__inner {
@@ -112,19 +112,14 @@
 }
 
 .clear-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
+  float: right;
+  position: relative;
   width: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   cursor: pointer;
   color: var(--vscode-icon-foreground);
   opacity: var(--dimmed-opacity);
-  padding-bottom: 6px;
-  line-height: 0;
+  transform: translate(5px, -3px);
+  padding-bottom: 2px;
 
   &::before {
     font-size: 13px !important;

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

@@ -355,17 +355,6 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
           />
         )}
         <div className={styles['input-wrapper']}>
-          {props.value && (
-            <button
-              className={cn(styles['clear-button'], 'codicon', 'codicon-close')}
-              onClick={() => {
-                set_should_show_ghost_text(false)
-                handle_clear()
-                input_ref.current?.focus()
-              }}
-              title="Clear"
-            />
-          )}
           <div
             ref={input_ref}
             contentEditable={true}

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

@@ -662,6 +662,7 @@ export const use_handlers = (
     const target = e.target as HTMLElement
     const icon_element = target.closest('[data-role="symbol-icon"]')
     const text_element = target.closest('[data-role="symbol-text"]')
+    const clear_button = target.closest('[data-role="clear-button"]')
 
     if (icon_element) {
       e.preventDefault()
@@ -745,6 +746,13 @@ export const use_handlers = (
         }
       }
 
+      if (input_ref.current) {
+        input_ref.current.focus()
+      }
+    } else if (clear_button) {
+      e.preventDefault()
+      e.stopPropagation()
+      handle_clear()
       if (input_ref.current) {
         input_ref.current.focus()
       }

packages/ui/src/components/editor/panel/PromptField/utils/get-highlighted-text.tsx

@@ -74,7 +74,7 @@ export const get_highlighted_text = (params: {
   )
   const parts = params.text.split(regex)
 
-  const result = parts
+  let result = parts
     .map((part) => {
       const fragment_match = part.match(
         /^<fragment path="([^"]+)"(?: start="([^"]+)")?(?: end="([^"]+)")?>([\s\S]*?)<\/fragment>$/
@@ -265,6 +265,15 @@ export const get_highlighted_text = (params: {
     })
     .join('')
 
+  if (params.text) {
+    result =
+      `<span class="${cn(
+        styles['clear-button'],
+        'codicon',
+        'codicon-close'
+      )}" contenteditable="false" data-role="clear-button"></span>` + result
+  }
+
   if (params.text.endsWith('\n')) {
     return result + '<br data-role="trailing-break">'
   }