Fix (graphiql) to allow editor overrides for unwanted behaviors

packages/graphiql-react/src/components/operation-editor.tsx

@@ -47,6 +47,7 @@ interface OperationEditorProps extends EditorProps {
 export const OperationEditor: FC<OperationEditorProps> = ({
   onClickReference,
   onEdit,
+  editorOverrides,
   ...props
 }) => {
   const {
@@ -231,6 +232,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
     const editor = createEditor(ref, {
       model,
       theme: monacoTheme,
+      ...editorOverrides,
     });
     setEditor({ queryEditor: editor });
 

packages/graphiql-react/src/components/request-headers-editor.tsx

@@ -23,6 +23,7 @@ interface RequestHeadersEditorProps extends EditorProps {
 
 export const RequestHeadersEditor: FC<RequestHeadersEditorProps> = ({
   onEdit,
+  editorOverrides,
   ...props
 }) => {
   const { setEditor, run, prettifyEditors, mergeQuery } = useGraphiQLActions();
@@ -44,7 +45,7 @@ export const RequestHeadersEditor: FC<RequestHeadersEditorProps> = ({
       uri: `${uriInstanceId}${URI_NAME.requestHeaders}`,
       value: initialHeaders,
     });
-    const editor = createEditor(ref, { model });
+    const editor = createEditor(ref, { model, ...editorOverrides });
     setEditor({ headerEditor: editor });
     const disposables = [
       editor.addAction({ ...KEY_BINDINGS.runQuery, run }),

packages/graphiql-react/src/components/response-editor.tsx

@@ -37,6 +37,7 @@ interface ResponseEditorProps extends EditorProps {
 
 export const ResponseEditor: FC<ResponseEditorProps> = ({
   responseTooltip: ResponseTooltip,
+  editorOverrides,
   ...props
 }) => {
   const { setEditor, run } = useGraphiQLActions();
@@ -69,6 +70,7 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
       lineNumbers: 'off',
       wordWrap: 'on', // Toggle word wrap on resizing editors
       contextmenu: false, // Disable the right-click context menu
+      ...editorOverrides,
     });
     setEditor({ responseEditor: editor });
 

packages/graphiql-react/src/components/variables-editor.tsx

@@ -23,6 +23,7 @@ interface VariablesEditorProps extends EditorProps {
 
 export const VariablesEditor: FC<VariablesEditorProps> = ({
   onEdit,
+  editorOverrides,
   ...props
 }) => {
   const { setEditor, run, prettifyEditors, mergeQuery } = useGraphiQLActions();
@@ -40,7 +41,7 @@ export const VariablesEditor: FC<VariablesEditorProps> = ({
       uri: `${uriInstanceId}${URI_NAME.variables}`,
       value: initialVariables,
     });
-    const editor = createEditor(ref, { model });
+    const editor = createEditor(ref, { model, ...editorOverrides });
     setEditor({ variableEditor: editor });
     const disposables = [
       editor.addAction({ ...KEY_BINDINGS.runQuery, run }),

packages/graphiql-react/src/types.ts

@@ -17,7 +17,16 @@ import type {
 } from './stores';
 import type { RuleKind } from 'graphql-language-service';
 
-export type EditorProps = ComponentPropsWithoutRef<'div'>;
+export type EditorProps = ComponentPropsWithoutRef<'div'> & {
+  /**
+   * for customizing editor options. Here are
+   * some options that may be useful to some users:
+   * - suggest: { showWords: false }
+   * - hover: { above: false }
+   * - scrollbar: { alwaysConsumeMouseWheel: false }
+   */
+  editorOverrides?: monaco.editor.IStandaloneEditorConstructionOptions;
+};
 
 export interface SchemaReference {
   kind: RuleKind;

packages/graphiql/src/GraphiQL.tsx

@@ -72,7 +72,7 @@ const GraphiQL_: FC<GraphiQLProps> = ({
   forcedTheme,
   confirmCloseTab,
   className,
-
+  editorOverrides,
   children,
   ...props
 }) => {
@@ -111,6 +111,7 @@ const GraphiQL_: FC<GraphiQLProps> = ({
     forcedTheme,
     confirmCloseTab,
     className,
+    editorOverrides,
   };
   const hasHistoryPlugin = plugins.includes(HISTORY_PLUGIN);
   const HistoryToUse = hasHistoryPlugin ? HistoryStore : Fragment;
@@ -202,6 +203,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
   onEditHeaders,
   responseTooltip,
   showPersistHeadersSettings,
+  editorOverrides,
 }) => {
   const { addTab, moveTab, closeTab, changeTab, setVisiblePlugin } =
     useGraphiQLActions();
@@ -359,6 +361,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
           <QueryEditor
             onClickReference={onClickReference}
             onEdit={onEditQuery}
+            editorOverrides={editorOverrides}
           />
         ) : (
           <Spinner />
@@ -427,11 +430,13 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
         <VariableEditor
           className={activeSecondaryEditor === 'variables' ? '' : 'hidden'}
           onEdit={onEditVariables}
+          editorOverrides={editorOverrides}
         />
         {isHeadersEditorEnabled && (
           <HeaderEditor
             className={activeSecondaryEditor === 'headers' ? '' : 'hidden'}
             onEdit={onEditHeaders}
+            editorOverrides={editorOverrides}
           />
         )}
       </section>
@@ -519,7 +524,10 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
               />
               <div className="graphiql-response" ref={editorResize.secondRef}>
                 {isFetching && <Spinner />}
-                <ResponseEditor responseTooltip={responseTooltip} />
+                <ResponseEditor
+                  responseTooltip={responseTooltip}
+                  editorOverrides={editorOverrides}
+                />
                 {footer}
               </div>
             </div>