add keymap option

.changeset/cool-owls-drop.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Allow Codemirror 5 `keyMap` to be defined, default `vim` or `emacs` allowed in addition to the original default of `sublime`.

.eslintignore

@@ -58,6 +58,7 @@ working-group/
 **/codemirror-graphql/lint.*
 **/codemirror-graphql/info.*
 **/codemirror-graphql/hint.*
+**/codemirror-graphql/cm6-legacy
 **/codemirror-graphql/__tests__
 
 # Vendored files

packages/graphiql-react/src/editor/header-editor.tsx

@@ -11,16 +11,19 @@ import {
   useMergeQuery,
   usePrettifyEditors,
 } from './hooks';
+import { KeyMap } from './types';
 
 export type UseHeaderEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
   readOnly?: boolean;
   shouldPersistHeaders?: boolean;
+  keyMap?: KeyMap;
 };
 
 export function useHeaderEditor({
   editorTheme = 'graphiql',
+  keyMap,
   onEdit,
   readOnly = false,
   shouldPersistHeaders = false,
@@ -57,7 +60,7 @@ export function useHeaderEditor({
         tabSize: 2,
         mode: { name: 'javascript', json: true },
         theme: editorTheme,
-        keyMap: 'sublime',
+        keyMap: keyMap ?? 'sublime',
         autoCloseBrackets: true,
         matchBrackets: true,
         showCursorWhenSelecting: true,

packages/graphiql-react/src/editor/index.ts

@@ -1,53 +1,29 @@
-import { onHasCompletion } from './completion';
-import { ImagePreview } from './components';
-import {
+export { onHasCompletion } from './completion';
+export { ImagePreview } from './components';
+export {
   EditorContext,
   EditorContextProvider,
   useEditorContext,
 } from './context';
-import { useHeaderEditor } from './header-editor';
-import {
+export { useHeaderEditor } from './header-editor';
+export {
   useAutoCompleteLeafs,
   useCopyQuery,
   useMergeQuery,
   usePrettifyEditors,
 } from './hooks';
-import { useQueryEditor } from './query-editor';
-import { useResponseEditor } from './response-editor';
-import { useVariableEditor } from './variable-editor';
+export { useQueryEditor } from './query-editor';
+export { useResponseEditor } from './response-editor';
+export { useVariableEditor } from './variable-editor';
 
-import type { EditorContextType } from './context';
-import type { UseHeaderEditorArgs } from './header-editor';
-import type { UseQueryEditorArgs } from './query-editor';
-import type {
+export type { EditorContextType } from './context';
+export type { UseHeaderEditorArgs } from './header-editor';
+export type { UseQueryEditorArgs } from './query-editor';
+export type {
   ResponseTooltipType,
   UseResponseEditorArgs,
 } from './response-editor';
-import type { TabsState } from './tabs';
-import type { UseVariableEditorArgs } from './variable-editor';
+export type { TabsState } from './tabs';
+export type { UseVariableEditorArgs } from './variable-editor';
 
-export {
-  onHasCompletion,
-  ImagePreview,
-  EditorContext,
-  EditorContextProvider,
-  useAutoCompleteLeafs,
-  useCopyQuery,
-  useEditorContext,
-  useHeaderEditor,
-  useMergeQuery,
-  usePrettifyEditors,
-  useQueryEditor,
-  useResponseEditor,
-  useVariableEditor,
-};
-
-export type {
-  EditorContextType,
-  ResponseTooltipType,
-  TabsState,
-  UseHeaderEditorArgs,
-  UseQueryEditorArgs,
-  UseResponseEditorArgs,
-  UseVariableEditorArgs,
-};
+export type { KeyMap } from './types';

packages/graphiql-react/src/editor/query-editor.tsx

@@ -29,7 +29,7 @@ import {
   useMergeQuery,
   usePrettifyEditors,
 } from './hooks';
-import { CodeMirrorEditor, CodeMirrorType } from './types';
+import { CodeMirrorEditor, CodeMirrorType, KeyMap } from './types';
 import { normalizeWhitespace } from './whitespace';
 
 type OnClickReference = (reference: SchemaReference) => void;
@@ -43,10 +43,12 @@ export type UseQueryEditorArgs = {
   onEditOperationName?: EditCallback;
   readOnly?: boolean;
   validationRules?: ValidationRule[];
+  keyMap?: KeyMap;
 };
 
 export function useQueryEditor({
   editorTheme = 'graphiql',
+  keyMap,
   externalFragments,
   onClickReference,
   onCopyQuery,
@@ -129,7 +131,7 @@ export function useQueryEditor({
         foldGutter: true,
         mode: 'graphql',
         theme: editorTheme,
-        keyMap: 'sublime',
+        keyMap: keyMap ?? 'sublime',
         autoCloseBrackets: true,
         matchBrackets: true,
         showCursorWhenSelecting: true,

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

@@ -8,19 +8,21 @@ import { commonKeys, importCodeMirror } from './common';
 import { ImagePreview } from './components';
 import { useEditorContext } from './context';
 import { useSynchronizeValue } from './hooks';
-import { CodeMirrorEditor } from './types';
+import { CodeMirrorEditor, KeyMap } from './types';
 
 export type ResponseTooltipType = ComponentType<{ pos: Position }>;
 
 export type UseResponseEditorArgs = {
   ResponseTooltip?: ResponseTooltipType;
   editorTheme?: string;
   value?: string;
+  keyMap?: KeyMap;
 };
 
 export function useResponseEditor({
   ResponseTooltip,
   editorTheme = 'graphiql',
+  keyMap,
   value,
 }: UseResponseEditorArgs = {}) {
   const { fetchError, validationErrors } = useSchemaContext({
@@ -103,7 +105,7 @@ export function useResponseEditor({
         readOnly: true,
         theme: editorTheme,
         mode: 'graphql-results',
-        keyMap: 'sublime',
+        keyMap: keyMap ?? 'sublime',
         foldGutter: true,
         gutters: ['CodeMirror-foldgutter'],
         // @ts-expect-error

packages/graphiql-react/src/editor/types.ts

@@ -3,3 +3,5 @@ import type { Editor } from 'codemirror';
 export type CodeMirrorType = typeof import('codemirror');
 
 export type CodeMirrorEditor = Editor & { options?: any };
+
+export type KeyMap = 'sublime' | 'emacs' | 'vim';

packages/graphiql-react/src/editor/variable-editor.tsx

@@ -11,16 +11,18 @@ import {
   useMergeQuery,
   usePrettifyEditors,
 } from './hooks';
-import { CodeMirrorType } from './types';
+import { CodeMirrorType, KeyMap } from './types';
 
 export type UseVariableEditorArgs = {
   editorTheme?: string;
   onEdit?: EditCallback;
   readOnly?: boolean;
+  keyMap?: KeyMap;
 };
 
 export function useVariableEditor({
   editorTheme = 'graphiql',
+  keyMap,
   onEdit,
   readOnly = false,
 }: UseVariableEditorArgs = {}) {
@@ -64,7 +66,7 @@ export function useVariableEditor({
         tabSize: 2,
         mode: 'graphql-variables',
         theme: editorTheme,
-        keyMap: 'sublime',
+        keyMap: keyMap ?? 'sublime',
         autoCloseBrackets: true,
         matchBrackets: true,
         showCursorWhenSelecting: true,

packages/graphiql-react/src/index.ts

@@ -1,4 +1,4 @@
-import {
+export {
   EditorContext,
   EditorContextProvider,
   ImagePreview,
@@ -13,114 +13,51 @@ import {
   useResponseEditor,
   useVariableEditor,
 } from './editor';
-import {
+export {
   ExecutionContext,
   ExecutionContextProvider,
   useExecutionContext,
 } from './execution';
-import {
+export {
   ExplorerContext,
   ExplorerContextProvider,
   useExplorerContext,
 } from './explorer';
-import {
+export {
   HistoryContext,
   HistoryContextProvider,
   useHistoryContext,
   useSelectHistoryItem,
 } from './history';
-import {
+export {
   SchemaContext,
   SchemaContextProvider,
   useSchemaContext,
 } from './schema';
-import {
+export {
   StorageContext,
   StorageContextProvider,
   useStorageContext,
 } from './storage';
-import { useDragResize } from './utility/resize';
+export { useDragResize } from './utility/resize';
 
-import type {
+export type {
   EditorContextType,
   ResponseTooltipType,
   TabsState,
   UseHeaderEditorArgs,
   UseQueryEditorArgs,
   UseResponseEditorArgs,
   UseVariableEditorArgs,
+  KeyMap,
 } from './editor';
-import type { ExecutionContextType } from './execution';
-import type {
-  ExplorerContextType,
-  ExplorerFieldDef,
-  ExplorerNavStack,
-  ExplorerNavStackItem,
-} from './explorer';
-import type { HistoryContextType } from './history';
-import type { SchemaContextType } from './schema';
-import type { StorageContextType } from './storage';
-
-export {
-  // editor
-  EditorContext,
-  EditorContextProvider,
-  ImagePreview,
-  onHasCompletion,
-  useAutoCompleteLeafs,
-  useCopyQuery,
-  useEditorContext,
-  useHeaderEditor,
-  useMergeQuery,
-  usePrettifyEditors,
-  useQueryEditor,
-  useResponseEditor,
-  useVariableEditor,
-  // execution
-  ExecutionContext,
-  ExecutionContextProvider,
-  useExecutionContext,
-  // explorer
-  ExplorerContext,
-  ExplorerContextProvider,
-  useExplorerContext,
-  // history
-  HistoryContext,
-  HistoryContextProvider,
-  useHistoryContext,
-  useSelectHistoryItem,
-  // schema
-  SchemaContext,
-  SchemaContextProvider,
-  useSchemaContext,
-  // storage
-  StorageContext,
-  StorageContextProvider,
-  useStorageContext,
-  // utility/resize
-  useDragResize,
-};
-
+export type { ExecutionContextType } from './execution';
 export type {
-  // editor
-  EditorContextType,
-  ResponseTooltipType,
-  TabsState,
-  UseHeaderEditorArgs,
-  UseQueryEditorArgs,
-  UseResponseEditorArgs,
-  UseVariableEditorArgs,
-  // execution
-  ExecutionContextType,
-  // explorer
   ExplorerContextType,
   ExplorerFieldDef,
   ExplorerNavStack,
   ExplorerNavStackItem,
-  // history
-  HistoryContextType,
-  // schema
-  SchemaContextType,
-  // storage
-  StorageContextType,
-};
+} from './explorer';
+export type { HistoryContextType } from './history';
+export type { SchemaContextType } from './schema';
+export type { StorageContextType } from './storage';