Add support for onPrettifyQuery callback to enable customised query formatting

.changeset/add-on-prettify-callback.md

@@ -0,0 +1,6 @@
+---
+"@graphiql/react": minor
+"graphiql": minor
+---
+
+Add support for `onPrettifyQuery` callback to enable customised query formatting

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

@@ -204,14 +204,23 @@
   }, [queryEditor, schema]);
 }
 
-type UsePrettifyEditorsArgs = {
+export type UsePrettifyEditorsArgs = {
   /**
    * This is only meant to be used internally in `@graphiql/react`.
    */
   caller?: Function;
+  /**
+   * Invoked when the prettify callback is invoked
+   * @param query The current value of the query editor.
+   * @returns {string} The formatted query
+   */
+  onPrettifyQuery?: (query: string) => string;
 };
 
-export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
+export function usePrettifyEditors({
+  caller,
+  onPrettifyQuery,
+}: UsePrettifyEditorsArgs = {}) {
   const { queryEditor, headerEditor, variableEditor } = useEditorContext({
     nonNull: true,
     caller: caller || usePrettifyEditors,
@@ -252,13 +261,15 @@
 
     if (queryEditor) {
       const editorContent = queryEditor.getValue();
-      const prettifiedEditorContent = print(parse(editorContent));
+      const prettifiedEditorContent = onPrettifyQuery
+        ? onPrettifyQuery(editorContent)
+        : print(parse(editorContent));
 
       if (prettifiedEditorContent !== editorContent) {
         queryEditor.setValue(prettifiedEditorContent);
       }
     }
-  }, [queryEditor, variableEditor, headerEditor]);
+  }, [queryEditor, variableEditor, headerEditor, onPrettifyQuery]);
 }
 
 export type UseAutoCompleteLeafsArgs = {

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

@@ -39,6 +39,7 @@ import {
   useCompletion,
   useCopyQuery,
   UseCopyQueryArgs,
+  UsePrettifyEditorsArgs,
   useKeyMap,
   useMergeQuery,
   usePrettifyEditors,
@@ -52,7 +53,8 @@ import {
 import { normalizeWhitespace } from './whitespace';
 
 export type UseQueryEditorArgs = WriteableEditorProps &
-  Pick<UseCopyQueryArgs, 'onCopyQuery'> & {
+  Pick<UseCopyQueryArgs, 'onCopyQuery'> &
+  Pick<UsePrettifyEditorsArgs, 'onPrettifyQuery'> & {
     /**
      * Invoked when a reference to the GraphQL schema (type or field) is clicked
      * as part of the editor or one of its tooltips.
@@ -74,6 +76,7 @@ export function useQueryEditor(
     onClickReference,
     onCopyQuery,
     onEdit,
+    onPrettifyQuery,
     readOnly = false,
   }: UseQueryEditorArgs = {},
   caller?: Function,
@@ -101,7 +104,10 @@ export function useQueryEditor(
   const plugin = usePluginContext();
   const copy = useCopyQuery({ caller: caller || useQueryEditor, onCopyQuery });
   const merge = useMergeQuery({ caller: caller || useQueryEditor });
-  const prettify = usePrettifyEditors({ caller: caller || useQueryEditor });
+  const prettify = usePrettifyEditors({
+    caller: caller || useQueryEditor,
+    onPrettifyQuery,
+  });
   const ref = useRef<HTMLDivElement>(null);
   const codeMirrorRef = useRef<CodeMirrorType>();
 

packages/graphiql/cypress/e2e/prettify.cy.ts

@@ -1,8 +1,9 @@
 import { version } from 'graphql';
+
 let describeOrSkip = describe.skip;
 
 // hard to account for the extra \n between 15/16 so these only run for 16 for now
-if (version.includes('16')) {
+if (parseInt(version, 10) > 15) {
   describeOrSkip = describe;
 }
 
@@ -25,6 +26,26 @@ const brokenQuery = 'longDescriptionType {id}}';
 const brokenVariables = '"a": 1}';
 
 describeOrSkip('GraphiQL Prettify', () => {
+  describe('onPrettifyQuery', () => {
+    const rawQuery = '{  test\n\nid  }';
+    const resultQuery = '{ test id }';
+
+    it('should work while click on prettify button', () => {
+      cy.visit(`/?query=${rawQuery}&onPrettifyQuery=true`);
+      cy.clickPrettify();
+      cy.assertHasValues({ query: resultQuery });
+    });
+
+    it('should work while click on key map short cut', () => {
+      cy.visit(`/?query=${rawQuery}&onPrettifyQuery=true`);
+      cy.get('.graphiql-query-editor textarea').type('{shift}{ctrl}P', {
+        force: true,
+      });
+      cy.get('.graphiql-query-editor textarea').type('{esc}');
+      cy.assertHasValues({ query: resultQuery });
+    });
+  });
+
   it('Regular prettification', () => {
     cy.visitWithOp({ query: uglyQuery, variablesString: uglyVariables });
 

packages/graphiql/resources/renderExample.js

@@ -47,6 +47,10 @@ function confirmCloseTab(index) {
   return confirm(`Are you sure you want to close tab with index ${index}?`);
 }
 
+function onPrettifyQuery(query) {
+  return query.replaceAll(/([ \n])+/g, ' ');
+}
+
 function updateURL() {
   const newSearch = Object.entries(parameters)
     .filter(([_key, value]) => value)
@@ -93,6 +97,8 @@ root.render(
     inputValueDeprecation: !graphqlVersion.includes('15.5'),
     confirmCloseTab:
       parameters.confirmCloseTab === 'true' ? confirmCloseTab : undefined,
+    onPrettifyQuery:
+      parameters.onPrettifyQuery === 'true' ? onPrettifyQuery : undefined,
     onTabChange,
     forcedTheme: parameters.forcedTheme,
     defaultQuery: parameters.defaultQuery,

packages/graphiql/src/components/GraphiQL.tsx

@@ -189,7 +189,7 @@ type AddSuffix<Obj extends Record<string, any>, Suffix extends string> = {
 
 export type GraphiQLInterfaceProps = WriteableEditorProps &
   AddSuffix<Pick<UseQueryEditorArgs, 'onEdit'>, 'Query'> &
-  Pick<UseQueryEditorArgs, 'onCopyQuery'> &
+  Pick<UseQueryEditorArgs, 'onCopyQuery' | 'onPrettifyQuery'> &
   AddSuffix<Pick<UseVariableEditorArgs, 'onEdit'>, 'Variables'> &
   AddSuffix<Pick<UseHeaderEditorArgs, 'onEdit'>, 'Headers'> &
   Pick<UseResponseEditorArgs, 'responseTooltip'> & {
@@ -328,8 +328,13 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
 
   const {
     logo = <GraphiQL.Logo />,
-    // @ts-expect-error -- Prop exists but hidden for users
-    toolbar = <GraphiQL.Toolbar onCopyQuery={props.onCopyQuery} />,
+    toolbar = (
+      <GraphiQL.Toolbar
+        // @ts-expect-error -- Prop exists but hidden for users
+        onCopyQuery={props.onCopyQuery}
+        onPrettifyQuery={props.onPrettifyQuery}
+      />
+    ),
     footer,
   } = useMemo(
     () =>
@@ -346,6 +351,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
             // @ts-expect-error -- fix type error
             acc.toolbar = cloneElement(curr, {
               onCopyQuery: props.onCopyQuery,
+              onPrettifyQuery: props.onPrettifyQuery,
             });
             break;
           case GraphiQL.Footer:
@@ -354,7 +360,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
         }
         return acc;
       }, {}),
-    [props.children, props.onCopyQuery],
+    [props.children, props.onCopyQuery, props.onPrettifyQuery],
   );
 
   const onClickReference = useCallback(() => {
@@ -628,6 +634,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                         keyMap={props.keyMap}
                         onClickReference={onClickReference}
                         onCopyQuery={props.onCopyQuery}
+                        onPrettifyQuery={props.onPrettifyQuery}
                         onEdit={props.onEditQuery}
                         readOnly={props.readOnly}
                       />
@@ -981,6 +988,8 @@ function GraphiQLToolbar({
   children = DefaultToolbarRenderProps,
   // @ts-expect-error -- Hide this prop for user, we use cloneElement to pass onCopyQuery
   onCopyQuery,
+  // @ts-expect-error -- Hide this prop for user, we use cloneElement to pass onPrettifyQuery
+  onPrettifyQuery,
 }: {
   children?: ToolbarRenderProps;
 }) {
@@ -991,7 +1000,7 @@ function GraphiQLToolbar({
   }
   const onCopy = useCopyQuery({ onCopyQuery });
   const onMerge = useMergeQuery();
-  const onPrettify = usePrettifyEditors();
+  const onPrettify = usePrettifyEditors({ onPrettifyQuery });
 
   const prettify = (
     <ToolbarButton onClick={onPrettify} label="Prettify query (Shift-Ctrl-P)">