diff --git a/packages/graphiql-react/src/editor/components/header-editor.tsx b/packages/graphiql-react/src/editor/components/header-editor.tsx
index dd3acdad175..d59b9922294 100644
--- a/packages/graphiql-react/src/editor/components/header-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/header-editor.tsx
@@ -14,7 +14,7 @@ export function HeaderEditor({ isHidden, ...hookArgs }: HeaderEditorProps) {
     nonNull: true,
     caller: HeaderEditor,
   });
-  const ref = useHeaderEditor(hookArgs);
+  const ref = useHeaderEditor(hookArgs, HeaderEditor);
 
   useEffect(() => {
     if (headerEditor && !isHidden) {
diff --git a/packages/graphiql-react/src/editor/components/query-editor.tsx b/packages/graphiql-react/src/editor/components/query-editor.tsx
index 368b395cd4f..79d6f2b4646 100644
--- a/packages/graphiql-react/src/editor/components/query-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/query-editor.tsx
@@ -10,6 +10,6 @@ import '../style/auto-insertion.css';
 import '../style/editor.css';
 
 export function QueryEditor(props: UseQueryEditorArgs) {
-  const ref = useQueryEditor(props);
+  const ref = useQueryEditor(props, QueryEditor);
   return <div className="graphiql-editor" ref={ref} />;
 }
diff --git a/packages/graphiql-react/src/editor/components/response-editor.tsx b/packages/graphiql-react/src/editor/components/response-editor.tsx
index a70e54d0bfa..ae8150ee2e9 100644
--- a/packages/graphiql-react/src/editor/components/response-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/response-editor.tsx
@@ -6,7 +6,7 @@ import '../style/info.css';
 import '../style/editor.css';
 
 export function ResponseEditor(props: UseResponseEditorArgs) {
-  const ref = useResponseEditor(props);
+  const ref = useResponseEditor(props, ResponseEditor);
   return (
     <section
       className="result-window"
diff --git a/packages/graphiql-react/src/editor/components/variable-editor.tsx b/packages/graphiql-react/src/editor/components/variable-editor.tsx
index 81c0b4395f6..5a9e5d81680 100644
--- a/packages/graphiql-react/src/editor/components/variable-editor.tsx
+++ b/packages/graphiql-react/src/editor/components/variable-editor.tsx
@@ -18,7 +18,7 @@ export function VariableEditor({ isHidden, ...hookArgs }: VariableEditorProps) {
     nonNull: true,
     caller: VariableEditor,
   });
-  const ref = useVariableEditor(hookArgs);
+  const ref = useVariableEditor(hookArgs, VariableEditor);
 
   useEffect(() => {
     if (variableEditor && !isHidden) {
diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx
index f0f41256183..cca8624c437 100644
--- a/packages/graphiql-react/src/editor/header-editor.tsx
+++ b/packages/graphiql-react/src/editor/header-editor.tsx
@@ -26,12 +26,15 @@ export type UseHeaderEditorArgs = {
   keyMap?: KeyMap;
 };
 
-export function useHeaderEditor({
-  editorTheme = DEFAULT_EDITOR_THEME,
-  keyMap = DEFAULT_KEY_MAP,
-  onEdit,
-  readOnly = false,
-}: UseHeaderEditorArgs = {}) {
+export function useHeaderEditor(
+  {
+    editorTheme = DEFAULT_EDITOR_THEME,
+    keyMap = DEFAULT_KEY_MAP,
+    onEdit,
+    readOnly = false,
+  }: UseHeaderEditorArgs = {},
+  caller?: Function,
+) {
   const {
     initialHeaders,
     headerEditor,
@@ -39,11 +42,11 @@ export function useHeaderEditor({
     shouldPersistHeaders,
   } = useEditorContext({
     nonNull: true,
-    caller: useHeaderEditor,
+    caller: caller || useHeaderEditor,
   });
   const executionContext = useExecutionContext();
-  const merge = useMergeQuery({ caller: useHeaderEditor });
-  const prettify = usePrettifyEditors({ caller: useHeaderEditor });
+  const merge = useMergeQuery({ caller: caller || useHeaderEditor });
+  const prettify = usePrettifyEditors({ caller: caller || useHeaderEditor });
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
index b6d200a890f..47ea93b79c9 100644
--- a/packages/graphiql-react/src/editor/query-editor.tsx
+++ b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -54,17 +54,20 @@ export type UseQueryEditorArgs = {
   keyMap?: KeyMap;
 };
 
-export function useQueryEditor({
-  editorTheme = DEFAULT_EDITOR_THEME,
-  keyMap = DEFAULT_KEY_MAP,
-  onClickReference,
-  onCopyQuery,
-  onEdit,
-  readOnly = false,
-}: UseQueryEditorArgs = {}) {
+export function useQueryEditor(
+  {
+    editorTheme = DEFAULT_EDITOR_THEME,
+    keyMap = DEFAULT_KEY_MAP,
+    onClickReference,
+    onCopyQuery,
+    onEdit,
+    readOnly = false,
+  }: UseQueryEditorArgs = {},
+  caller?: Function,
+) {
   const { schema } = useSchemaContext({
     nonNull: true,
-    caller: useQueryEditor,
+    caller: caller || useQueryEditor,
   });
   const {
     externalFragments,
@@ -77,14 +80,14 @@ export function useQueryEditor({
     updateActiveTabValues,
   } = useEditorContext({
     nonNull: true,
-    caller: useQueryEditor,
+    caller: caller || useQueryEditor,
   });
   const executionContext = useExecutionContext();
   const storage = useStorageContext();
   const explorer = useExplorerContext();
-  const copy = useCopyQuery({ caller: useQueryEditor, onCopyQuery });
-  const merge = useMergeQuery({ caller: useQueryEditor });
-  const prettify = usePrettifyEditors({ caller: useQueryEditor });
+  const copy = useCopyQuery({ caller: caller || useQueryEditor, onCopyQuery });
+  const merge = useMergeQuery({ caller: caller || useQueryEditor });
+  const prettify = usePrettifyEditors({ caller: caller || useQueryEditor });
   const ref = useRef<HTMLDivElement>(null);
   const codeMirrorRef = useRef<CodeMirrorType>();
 
diff --git a/packages/graphiql-react/src/editor/response-editor.tsx b/packages/graphiql-react/src/editor/response-editor.tsx
index ee2cc05227e..f651690b9a3 100644
--- a/packages/graphiql-react/src/editor/response-editor.tsx
+++ b/packages/graphiql-react/src/editor/response-editor.tsx
@@ -23,14 +23,17 @@ export type UseResponseEditorArgs = {
   keyMap?: KeyMap;
 };
 
-export function useResponseEditor({
-  ResponseTooltip,
-  editorTheme = DEFAULT_EDITOR_THEME,
-  keyMap = DEFAULT_KEY_MAP,
-}: UseResponseEditorArgs = {}) {
+export function useResponseEditor(
+  {
+    ResponseTooltip,
+    editorTheme = DEFAULT_EDITOR_THEME,
+    keyMap = DEFAULT_KEY_MAP,
+  }: UseResponseEditorArgs = {},
+  caller?: Function,
+) {
   const { fetchError, validationErrors } = useSchemaContext({
     nonNull: true,
-    caller: useResponseEditor,
+    caller: caller || useResponseEditor,
   });
   const {
     initialResponse,
@@ -38,7 +41,7 @@ export function useResponseEditor({
     setResponseEditor,
   } = useEditorContext({
     nonNull: true,
-    caller: useResponseEditor,
+    caller: caller || useResponseEditor,
   });
   const ref = useRef<HTMLDivElement>(null);
 
diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx
index e88fa666ebd..82751785027 100644
--- a/packages/graphiql-react/src/editor/variable-editor.tsx
+++ b/packages/graphiql-react/src/editor/variable-editor.tsx
@@ -26,23 +26,26 @@ export type UseVariableEditorArgs = {
   keyMap?: KeyMap;
 };
 
-export function useVariableEditor({
-  editorTheme = DEFAULT_EDITOR_THEME,
-  keyMap = DEFAULT_KEY_MAP,
-  onEdit,
-  readOnly = false,
-}: UseVariableEditorArgs = {}) {
+export function useVariableEditor(
+  {
+    editorTheme = DEFAULT_EDITOR_THEME,
+    keyMap = DEFAULT_KEY_MAP,
+    onEdit,
+    readOnly = false,
+  }: UseVariableEditorArgs = {},
+  caller?: Function,
+) {
   const {
     initialVariables,
     variableEditor,
     setVariableEditor,
   } = useEditorContext({
     nonNull: true,
-    caller: useVariableEditor,
+    caller: caller || useVariableEditor,
   });
   const executionContext = useExecutionContext();
-  const merge = useMergeQuery({ caller: useVariableEditor });
-  const prettify = usePrettifyEditors({ caller: useVariableEditor });
+  const merge = useMergeQuery({ caller: caller || useVariableEditor });
+  const prettify = usePrettifyEditors({ caller: caller || useVariableEditor });
   const ref = useRef<HTMLDivElement>(null);
   const codeMirrorRef = useRef<CodeMirrorType>();