From c1c3651e8c1654ab707472b8dcf978e5c23f4ebc Mon Sep 17 00:00:00 2001 From: Thomas Heyenbrock Date: Thu, 21 Jul 2022 10:46:01 +0200 Subject: [PATCH] fix opening doc explorer when clicking references (#2578) --- .../graphiql-react/src/editor/completion.ts | 10 +++++++- .../src/editor/header-editor.tsx | 5 +--- packages/graphiql-react/src/editor/hooks.ts | 10 ++++++-- .../src/editor/query-editor.tsx | 5 ++-- .../src/editor/variable-editor.tsx | 7 ++++-- packages/graphiql/src/components/GraphiQL.tsx | 24 +++++++++---------- 6 files changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/graphiql-react/src/editor/completion.ts b/packages/graphiql-react/src/editor/completion.ts index 4855f15dcec..1dc399388a4 100644 --- a/packages/graphiql-react/src/editor/completion.ts +++ b/packages/graphiql-react/src/editor/completion.ts @@ -1,6 +1,12 @@ import type { Editor, EditorChange } from 'codemirror'; import type { IHint } from 'codemirror-graphql/hint'; -import { GraphQLSchema, GraphQLType, isListType, isNonNullType } from 'graphql'; +import { + GraphQLNamedType, + GraphQLSchema, + GraphQLType, + isListType, + isNonNullType, +} from 'graphql'; import { ExplorerContextType } from '../explorer'; import { markdown } from '../markdown'; @@ -15,6 +21,7 @@ export function onHasCompletion( data: EditorChange | undefined, schema: GraphQLSchema | null | undefined, explorer: ExplorerContextType | null, + callback?: (type: GraphQLNamedType) => void, ) { importCodeMirror([], { useCommonAddons: false }).then(CodeMirror => { let information: HTMLDivElement | null; @@ -232,6 +239,7 @@ export function onHasCompletion( if (type) { explorer.show(); explorer.push({ name: type.name, def: type }); + callback?.(type); } } } diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx index cca8624c437..f25dde8fa93 100644 --- a/packages/graphiql-react/src/editor/header-editor.tsx +++ b/packages/graphiql-react/src/editor/header-editor.tsx @@ -11,7 +11,6 @@ import { useEditorContext } from './context'; import { EditCallback, useChangeHandler, - useCompletion, useKeyMap, useMergeQuery, usePrettifyEditors, @@ -21,9 +20,9 @@ import { KeyMap } from './types'; export type UseHeaderEditorArgs = { editorTheme?: string; + keyMap?: KeyMap; onEdit?: EditCallback; readOnly?: boolean; - keyMap?: KeyMap; }; export function useHeaderEditor( @@ -126,8 +125,6 @@ export function useHeaderEditor( useHeaderEditor, ); - useCompletion(headerEditor, useHeaderEditor); - useKeyMap(headerEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run); useKeyMap(headerEditor, ['Shift-Ctrl-P'], prettify); useKeyMap(headerEditor, ['Shift-Ctrl-M'], merge); diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts index 922a9862952..7968062e3fb 100644 --- a/packages/graphiql-react/src/editor/hooks.ts +++ b/packages/graphiql-react/src/editor/hooks.ts @@ -1,5 +1,6 @@ import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit'; import type { EditorChange, EditorConfiguration } from 'codemirror'; +import type { SchemaReference } from 'codemirror-graphql/utils/SchemaReference'; import copyToClipboard from 'copy-to-clipboard'; import { parse, print } from 'graphql'; import { useCallback, useEffect } from 'react'; @@ -90,8 +91,11 @@ export function useChangeHandler( ]); } +export type OnClickReference = (reference: SchemaReference) => void; + export function useCompletion( editor: CodeMirrorEditor | null, + callback: OnClickReference | null, caller: Function, ) { const { schema } = useSchemaContext({ nonNull: true, caller }); @@ -105,7 +109,9 @@ export function useCompletion( instance: CodeMirrorEditor, changeObj?: EditorChange, ) => { - onHasCompletion(instance, changeObj, schema, explorer); + onHasCompletion(instance, changeObj, schema, explorer, type => { + callback?.({ kind: 'Type', type, schema: schema || undefined }); + }); }; editor.on( // @ts-expect-error @TODO additional args for hasCompletion event @@ -118,7 +124,7 @@ export function useCompletion( 'hasCompletion', handleCompletion, ); - }, [editor, explorer, schema]); + }, [callback, editor, explorer, schema]); } type EmptyCallback = () => void; diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx index ad3c334b065..f26d77595c9 100644 --- a/packages/graphiql-react/src/editor/query-editor.tsx +++ b/packages/graphiql-react/src/editor/query-editor.tsx @@ -28,6 +28,7 @@ import { import { CopyQueryCallback, EditCallback, + OnClickReference, useCompletion, useCopyQuery, useKeyMap, @@ -38,8 +39,6 @@ import { import { CodeMirrorEditor, CodeMirrorType, KeyMap } from './types'; import { normalizeWhitespace } from './whitespace'; -type OnClickReference = (reference: SchemaReference) => void; - export type UseQueryEditorArgs = { editorTheme?: string; onClickReference?: OnClickReference; @@ -332,7 +331,7 @@ export function useQueryEditor( codeMirrorRef, ); - useCompletion(queryEditor, useQueryEditor); + useCompletion(queryEditor, onClickReference || null, useQueryEditor); useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run); useKeyMap(queryEditor, ['Shift-Ctrl-C'], copy); diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx index 82751785027..762dcef92a7 100644 --- a/packages/graphiql-react/src/editor/variable-editor.tsx +++ b/packages/graphiql-react/src/editor/variable-editor.tsx @@ -10,6 +10,7 @@ import { import { useEditorContext } from './context'; import { EditCallback, + OnClickReference, useChangeHandler, useCompletion, useKeyMap, @@ -21,15 +22,17 @@ import { CodeMirrorType, KeyMap } from './types'; export type UseVariableEditorArgs = { editorTheme?: string; + keyMap?: KeyMap; + onClickReference?: OnClickReference; onEdit?: EditCallback; readOnly?: boolean; - keyMap?: KeyMap; }; export function useVariableEditor( { editorTheme = DEFAULT_EDITOR_THEME, keyMap = DEFAULT_KEY_MAP, + onClickReference, onEdit, readOnly = false, }: UseVariableEditorArgs = {}, @@ -140,7 +143,7 @@ export function useVariableEditor( useVariableEditor, ); - useCompletion(variableEditor, useVariableEditor); + useCompletion(variableEditor, onClickReference || null, useVariableEditor); useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run); useKeyMap(variableEditor, ['Shift-Ctrl-P'], prettify); diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx index e65c06bdc19..c5905587516 100644 --- a/packages/graphiql/src/components/GraphiQL.tsx +++ b/packages/graphiql/src/components/GraphiQL.tsx @@ -689,6 +689,12 @@ class GraphiQLWithContext extends React.Component< const headerEditorEnabled = this.props.headerEditorEnabled ?? true; + const onClickReference = () => { + if (this.props.pluginResize.hiddenElement === 'first') { + this.props.pluginResize.setHiddenElement(null); + } + }; + return (
@@ -842,14 +848,7 @@ class GraphiQLWithContext extends React.Component< { - if ( - this.props.pluginResize.hiddenElement === - 'first' - ) { - this.props.pluginResize.setHiddenElement(null); - } - }} + onClickReference={onClickReference} onCopyQuery={this.props.onCopyQuery} onEdit={this.props.onEditQuery} onEditOperationName={this.props.onEditOperationName} @@ -940,23 +939,24 @@ class GraphiQLWithContext extends React.Component< : 'Headers' }> {headerEditorEnabled && ( )}