Show response headers

src-web/components/core/Editor/Editor.css

@@ -47,7 +47,7 @@
         }
 
         .placeholder-widget {
-            @apply text-[0.9em] text-gray-800 dark:text-gray-900 px-1 rounded cursor-default dark:shadow;
+            @apply text-xs text-gray-800 dark:text-gray-900 px-1 rounded cursor-default dark:shadow;
 
             /* NOTE: Background and border are translucent so we can see text selection through it */
             @apply bg-gray-300/40 border border-gray-300 border-opacity-40 hover:border-opacity-80;

src-web/components/core/Editor/Editor.tsx

@@ -33,6 +33,7 @@ export interface EditorProps {
   useTemplating?: boolean;
   onChange?: (value: string) => void;
   onFocus?: () => void;
+  onBlur?: () => void;
   singleLine?: boolean;
   format?: (v: string) => string;
   autocomplete?: GenericCompletionConfig;
@@ -52,6 +53,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     forceUpdateKey,
     onChange,
     onFocus,
+    onBlur,
     className,
     singleLine,
     format,
@@ -75,6 +77,12 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     handleFocus.current = onFocus;
   }, [onFocus]);
 
+  // Use ref so we can update the onChange handler without re-initializing the editor
+  const handleBlur = useRef<EditorProps['onBlur']>(onBlur);
+  useEffect(() => {
+    handleBlur.current = onBlur;
+  }, [onBlur]);
+
   // Update placeholder
   const placeholderCompartment = useRef(new Compartment());
   useEffect(() => {
@@ -125,6 +133,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
             container,
             onChange: handleChange,
             onFocus: handleFocus,
+            onBlur: handleBlur,
             readOnly,
             singleLine,
           }),
@@ -195,10 +204,12 @@ function getExtensions({
   singleLine,
   onChange,
   onFocus,
+  onBlur,
 }: Pick<EditorProps, 'singleLine' | 'readOnly'> & {
   container: HTMLDivElement | null;
   onChange: MutableRefObject<EditorProps['onChange']>;
   onFocus: MutableRefObject<EditorProps['onFocus']>;
+  onBlur: MutableRefObject<EditorProps['onBlur']>;
 }) {
   // TODO: Ensure tooltips render inside the dialog if we are in one.
   const parent =
@@ -234,9 +245,8 @@ function getExtensions({
 
     // Handle onFocus
     EditorView.domEventHandlers({
-      focus: () => {
-        onFocus.current?.();
-      },
+      focus: onFocus.current,
+      blur: onBlur.current,
     }),
 
     // Handle onChange