Fix (graphiql) prettify button to turn red on error

packages/graphiql-react/src/components/toolbar-button/index.tsx

@@ -11,16 +11,17 @@ import './index.css';
 
 interface ToolbarButtonProps extends ComponentPropsWithoutRef<'button'> {
   label: string;
+  onClick?: (args?: any) => any | Promise<any>;
 }
 
 export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
   ({ label, onClick, ...props }, ref) => {
     const [error, setError] = useState<Error | null>(null);
-    const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+    const handleClick: MouseEventHandler<HTMLButtonElement> = async event => {
       try {
         // Optional chaining inside try-catch isn't supported yet by react-compiler
         if (onClick) {
-          onClick(event);
+          await onClick(event);
         }
         setError(null);
       } catch (err) {

packages/graphiql-react/src/stores/editor.ts

@@ -478,6 +478,8 @@ export const createEditorSlice: CreateEditorSlice = initial => (set, get) => {
       const { queryEditor, headerEditor, variableEditor, onPrettifyQuery } =
         get();
 
+      const errors: any[] = [];
+
       if (variableEditor) {
         try {
           const content = variableEditor.getValue();
@@ -491,6 +493,7 @@ export const createEditorSlice: CreateEditorSlice = initial => (set, get) => {
             'Parsing variables JSON failed, skip prettification.',
             error,
           );
+          errors.push(error);
         }
       }
 
@@ -507,21 +510,32 @@ export const createEditorSlice: CreateEditorSlice = initial => (set, get) => {
             'Parsing headers JSON failed, skip prettification.',
             error,
           );
+          errors.push(error);
         }
       }
 
-      if (!queryEditor) {
-        return;
+      if (queryEditor) {
+        try {
+          const content = queryEditor.getValue();
+          const formatted = await onPrettifyQuery(content);
+          if (formatted !== content) {
+            queryEditor.setValue(formatted);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.warn('Parsing query failed, skip prettification.', error);
+          errors.push(error);
+        }
       }
-      try {
-        const content = queryEditor.getValue();
-        const formatted = await onPrettifyQuery(content);
-        if (formatted !== content) {
-          queryEditor.setValue(formatted);
+
+      if (errors.length) {
+        if (errors.length > 1) {
+          const msg = errors
+            .map(err => err?.message || 'Error prettifying')
+            .join(', ');
+          throw new Error(msg);
         }
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.warn('Parsing query failed, skip prettification.', error);
+        throw errors[0];
       }
     },
     mergeQuery() {