move prettify query functionality to editor context

graphql · May 25, 2022 · 0089a9f · 0089a9f
1 parent d677b60
commit 0089a9f
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 56 deletions.
diff --git a/.changeset/early-queens-stare.md b/.changeset/early-queens-stare.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Move preffity query functionality to editor context in `@graphiql/react`
diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
@@ -1,6 +1,6 @@
 import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 import copyToClipboard from 'copy-to-clipboard';
-import { DocumentNode, OperationDefinitionNode, print } from 'graphql';
+import { DocumentNode, OperationDefinitionNode, parse, print } from 'graphql';
 import { VariableToType } from 'graphql-language-service';
 import {
   createContext,
@@ -24,6 +24,7 @@ export type EditorContextType = {
   autoCompleteLeafs(): string | undefined;
   copy(): void;
   merge(): void;
+  prettify(): void;
   headerEditor: CodeMirrorEditor | null;
   queryEditor: CodeMirrorEditorWithOperationFacts | null;
   responseEditor: CodeMirrorEditor | null;
@@ -40,6 +41,7 @@ export const EditorContext = createContext<EditorContextType>({
   },
   copy() {},
   merge() {},
+  prettify() {},
   headerEditor: null,
   queryEditor: null,
   responseEditor: null,
@@ -138,11 +140,56 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     queryEditor.setValue(print(mergeAst(documentAST, schema)));
   }, [queryEditor, schema]);
 
+  const prettify = useCallback(() => {
+    if (queryEditor) {
+      const editorContent = queryEditor.getValue();
+      const prettifiedEditorContent = print(parse(editorContent));
+
+      if (prettifiedEditorContent !== editorContent) {
+        queryEditor.setValue(prettifiedEditorContent);
+      }
+    }
+
+    if (variableEditor) {
+      const variableEditorContent = variableEditor.getValue();
+      try {
+        const prettifiedVariableEditorContent = JSON.stringify(
+          JSON.parse(variableEditorContent),
+          null,
+          2,
+        );
+        if (prettifiedVariableEditorContent !== variableEditorContent) {
+          variableEditor.setValue(prettifiedVariableEditorContent);
+        }
+      } catch {
+        /* Parsing JSON failed, skip prettification */
+      }
+    }
+
+    if (headerEditor) {
+      const headerEditorContent = headerEditor.getValue();
+
+      try {
+        const prettifiedHeaderEditorContent = JSON.stringify(
+          JSON.parse(headerEditorContent),
+          null,
+          2,
+        );
+        if (prettifiedHeaderEditorContent !== headerEditorContent) {
+          headerEditor.setValue(prettifiedHeaderEditorContent);
+        }
+      } catch {
+        /* Parsing JSON failed, skip prettification */
+      }
+    }
+  }, [headerEditor, queryEditor, variableEditor]);
+
   const value = useMemo<EditorContextType>(
     () => ({
       autoCompleteLeafs,
       copy,
       merge,
+      prettify,
       headerEditor,
       queryEditor,
       responseEditor,
@@ -156,6 +203,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       autoCompleteLeafs,
       copy,
       merge,
+      prettify,
       headerEditor,
       queryEditor,
       responseEditor,

diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx
@@ -16,7 +16,6 @@ import {
 export type UseHeaderEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
-  onPrettifyQuery?: EmptyCallback;
   onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   shouldPersistHeaders?: boolean;
@@ -26,7 +25,6 @@ export type UseHeaderEditorArgs = {
 export function useHeaderEditor({
   editorTheme = 'graphiql',
   onEdit,
-  onPrettifyQuery,
   onRunQuery,
   readOnly = false,
   shouldPersistHeaders = false,
@@ -125,7 +123,7 @@ export function useHeaderEditor({
   useCompletion(headerEditor);
 
   useKeyMap(headerEditor, ['Cmd-Enter', 'Ctrl-Enter'], onRunQuery);
-  useKeyMap(headerEditor, ['Shift-Ctrl-P'], onPrettifyQuery);
+  useKeyMap(headerEditor, ['Shift-Ctrl-P'], context.prettify);
   useKeyMap(headerEditor, ['Shift-Ctrl-M'], context.merge);
 
   useResizeEditor(headerEditor, ref);

diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -34,7 +34,6 @@ export type UseQueryEditorArgs = {
   externalFragments?: string | FragmentDefinitionNode[];
   onEdit?: EditCallback;
   onEditOperationName?: EditCallback;
-  onPrettifyQuery?: EmptyCallback;
   onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   validationRules?: ValidationRule[];
@@ -47,7 +46,6 @@ export function useQueryEditor({
   externalFragments,
   onEdit,
   onEditOperationName,
-  onPrettifyQuery,
   onRunQuery,
   readOnly = false,
   validationRules,
@@ -325,7 +323,7 @@ export function useQueryEditor({
       // Shift-Ctrl-P is hard coded in Firefox for private browsing so adding an alternative to Pretiffy
       'Shift-Ctrl-F',
     ],
-    onPrettifyQuery,
+    editorContext.prettify,
   );
   useKeyMap(queryEditor, ['Shift-Ctrl-M'], editorContext.merge);
 

diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx
@@ -17,7 +17,6 @@ import { CodeMirrorType } from './types';
 export type UseVariableEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
-  onPrettifyQuery?: EmptyCallback;
   onRunQuery?: EmptyCallback;
   readOnly?: boolean;
   value?: string;
@@ -26,7 +25,6 @@ export type UseVariableEditorArgs = {
 export function useVariableEditor({
   editorTheme = 'graphiql',
   onEdit,
-  onPrettifyQuery,
   onRunQuery,
   readOnly = false,
   value,
@@ -135,7 +133,7 @@ export function useVariableEditor({
   useCompletion(variableEditor);
 
   useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], onRunQuery);
-  useKeyMap(variableEditor, ['Shift-Ctrl-P'], onPrettifyQuery);
+  useKeyMap(variableEditor, ['Shift-Ctrl-P'], context.prettify);
   useKeyMap(variableEditor, ['Shift-Ctrl-M'], context.merge);
 
   useResizeEditor(variableEditor, ref);

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -713,7 +713,9 @@ class GraphiQLWithContext extends React.Component<
     ) || (
       <GraphiQL.Toolbar>
         <ToolbarButton
-          onClick={this.handlePrettifyQuery}
+          onClick={() => {
+            this.props.editorContext.prettify();
+          }}
           title="Prettify Query (Shift-Ctrl-P)"
           label="Prettify"
         />
@@ -848,7 +850,6 @@ class GraphiQLWithContext extends React.Component<
                 externalFragments={this.props.externalFragments}
                 onEdit={this.handleEditQuery}
                 onEditOperationName={this.props.onEditOperationName}
-                onPrettifyQuery={this.handlePrettifyQuery}
                 onRunQuery={this.handleEditorRunQuery}
                 readOnly={this.props.readOnly}
                 validationRules={this.props.validationRules}
@@ -894,7 +895,6 @@ class GraphiQLWithContext extends React.Component<
                 <VariableEditor
                   value={this.props.variables}
                   onEdit={this.handleEditVariables}
-                  onPrettifyQuery={this.handlePrettifyQuery}
                   onRunQuery={this.handleEditorRunQuery}
                   editorTheme={this.props.editorTheme}
                   readOnly={this.props.readOnly}
@@ -905,7 +905,6 @@ class GraphiQLWithContext extends React.Component<
                     active={this.state.headerEditorActive}
                     editorTheme={this.props.editorTheme}
                     onEdit={this.handleEditHeaders}
-                    onPrettifyQuery={this.handlePrettifyQuery}
                     onRunQuery={this.handleEditorRunQuery}
                     readOnly={this.props.readOnly}
                     shouldPersistHeaders={this.props.shouldPersistHeaders}
@@ -1308,48 +1307,6 @@ class GraphiQLWithContext extends React.Component<
     this.handleRunQuery(operationName);
   }
 
-  handlePrettifyQuery = () => {
-    const editor = this.getQueryEditor();
-    const editorContent = editor?.getValue() ?? '';
-    const prettifiedEditorContent = print(parse(editorContent));
-
-    if (prettifiedEditorContent !== editorContent) {
-      editor?.setValue(prettifiedEditorContent);
-    }
-
-    const variableEditor = this.getVariableEditor();
-    const variableEditorContent = variableEditor?.getValue() ?? '';
-
-    try {
-      const prettifiedVariableEditorContent = JSON.stringify(
-        JSON.parse(variableEditorContent),
-        null,
-        2,
-      );
-      if (prettifiedVariableEditorContent !== variableEditorContent) {
-        variableEditor?.setValue(prettifiedVariableEditorContent);
-      }
-    } catch {
-      /* Parsing JSON failed, skip prettification */
-    }
-
-    const headerEditor = this.getHeaderEditor();
-    const headerEditorContent = headerEditor?.getValue() ?? '';
-
-    try {
-      const prettifiedHeaderEditorContent = JSON.stringify(
-        JSON.parse(headerEditorContent),
-        null,
-        2,
-      );
-      if (prettifiedHeaderEditorContent !== headerEditorContent) {
-        headerEditor?.setValue(prettifiedHeaderEditorContent);
-      }
-    } catch {
-      /* Parsing JSON failed, skip prettification */
-    }
-  };
-
   handleEditQuery = (value: string) => {
     this.setState(
       state => ({