From e2fab5543ffb2b231bb2ece983ed4b3a88e2f215 Mon Sep 17 00:00:00 2001 From: Thomas Heyenbrock Date: Wed, 25 May 2022 11:48:13 +0200 Subject: [PATCH] move prettify query functionality to editor context --- .changeset/early-queens-stare.md | 6 +++ .../graphiql-react/src/editor/context.tsx | 50 ++++++++++++++++++- .../src/editor/header-editor.tsx | 4 +- .../src/editor/query-editor.tsx | 4 +- .../src/editor/variable-editor.tsx | 4 +- packages/graphiql/src/components/GraphiQL.tsx | 49 ++---------------- 6 files changed, 61 insertions(+), 56 deletions(-) create mode 100644 .changeset/early-queens-stare.md diff --git a/.changeset/early-queens-stare.md b/.changeset/early-queens-stare.md new file mode 100644 index 00000000000..f3b7d2cbffa --- /dev/null +++ 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 index b05bc78ea69..e62a5c523dc 100644 --- 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({ }, 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( () => ({ 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 index da6f53c839a..a92a96224ba 100644 --- 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 index 0bb1510afaa..4e1365df667 100644 --- 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 index 43978d0eebd..4e612b9d6d6 100644 --- 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 index aefce725b45..8aeb7fc941a 100644 --- a/packages/graphiql/src/components/GraphiQL.tsx +++ b/packages/graphiql/src/components/GraphiQL.tsx @@ -713,7 +713,9 @@ class GraphiQLWithContext extends React.Component< ) || ( { + 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< { - 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 => ({