graphiql 5: Use an additional Alt key for focus doc explorer search input instead of Cmd/Ctrl+K because monaco-editor has a built-in shortcut for Cmd/Ctrl+K (#4007)

* upd

* upd snapshots lines since graphql description was changed

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* polish

* polish

* polish

Author: dimaMachina

.changeset/four-carrots-leave.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+---
+
+Use an additional `Alt` key for focus doc explorer search input instead of `Cmd/Ctrl+K` because monaco-editor has a built-in shortcut for `Cmd/Ctrl+K`

packages/graphiql-plugin-doc-explorer/src/components/doc-explorer.css

@@ -38,7 +38,7 @@
 
   &:not(:focus-within) [role='combobox'] {
     height: 24px;
-    width: 5ch;
+    width: 6.5ch;
   }
 
   & [role='combobox']:focus {

packages/graphiql-plugin-doc-explorer/src/components/search.tsx

@@ -45,17 +45,6 @@ export const Search: FC = () => {
     debouncedGetSearchResults(searchValue);
   }, [debouncedGetSearchResults, searchValue]);
 
-  useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.metaKey && event.key === 'k') {
-        inputRef.current.focus();
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
   const navItem = explorerNavStack.at(-1)!;
 
   const onSelect = (def: TypeMatch | FieldMatch | null) => {
@@ -97,7 +86,7 @@ export const Search: FC = () => {
           autoComplete="off"
           onChange={event => setSearchValue(event.target.value)}
           placeholder={formatShortcutForOS(
-            KEY_MAP.searchInDocs.key.replace('-', ' '),
+            formatShortcutForOS(KEY_MAP.searchInDocs.key).replaceAll('-', ' '),
           )}
           ref={inputRef}
           value={searchValue}

packages/graphiql-plugin-doc-explorer/src/context.ts renamed to packages/graphiql-plugin-doc-explorer/src/context.tsx

@@ -20,9 +20,27 @@ import {
   useGraphiQL,
   pick,
   createBoundedUseStore,
+  GraphiQLPlugin,
+  DocsFilledIcon,
+  DocsIcon,
+  isMacOs,
 } from '@graphiql/react';
 import { createStore } from 'zustand';
 import { getSchemaReference } from './schema-reference';
+import { DocExplorer } from './components';
+
+export const DOC_EXPLORER_PLUGIN: GraphiQLPlugin = {
+  title: 'Documentation Explorer',
+  icon: function Icon() {
+    const visiblePlugin = useGraphiQL(state => state.visiblePlugin);
+    return visiblePlugin === DOC_EXPLORER_PLUGIN ? (
+      <DocsFilledIcon />
+    ) : (
+      <DocsIcon />
+    );
+  },
+  content: DocExplorer,
+};
 
 export type DocExplorerFieldDef =
   | GraphQLField<unknown, unknown>
@@ -275,6 +293,38 @@ export const DocExplorerStore: FC<{
     }
   }, [schema, validationErrors]);
 
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      const shouldFocusInput =
+        // Use an additional `Alt` key instead of `Cmd/Ctrl+K` because monaco-editor has a built-in
+        // shortcut for `Cmd/Ctrl+K`
+        event.altKey &&
+        event[isMacOs ? 'metaKey' : 'ctrlKey'] &&
+        // Using `event.code` because `event.key` will trigger different character
+        // in English `˚` and in French `È`
+        event.code === 'KeyK';
+      if (!shouldFocusInput) {
+        return;
+      }
+      const button = document.querySelector<HTMLButtonElement>(
+        '.graphiql-sidebar button[aria-label="Show Documentation Explorer"]',
+      );
+      button?.click();
+      // Execute on next tick when doc explorer is opened and input exists in DOM
+      requestAnimationFrame(() => {
+        const el = document.querySelector<HTMLDivElement>(
+          '.graphiql-doc-explorer-search-input',
+        );
+        el?.click();
+      });
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return children as ReactElement;
 };
 

packages/graphiql-plugin-doc-explorer/src/index.ts

@@ -0,0 +1,14 @@
+export * from './components';
+
+export {
+  DocExplorerStore,
+  useDocExplorer,
+  useDocExplorerActions,
+  DOC_EXPLORER_PLUGIN,
+} from './context';
+
+export type {
+  DocExplorerFieldDef,
+  DocExplorerNavStack,
+  DocExplorerNavStackItem,
+} from './context';

packages/graphiql-plugin-doc-explorer/src/index.tsx

@@ -36,7 +36,7 @@ export default defineConfig({
     minify: false,
     sourcemap: true,
     lib: {
-      entry: 'src/index.tsx',
+      entry: 'src/index.ts',
       fileName(_format, entryName) {
         const filePath = entryName.replace(/\.svg$/, '');
         return `${filePath}.js`;

packages/graphiql-plugin-doc-explorer/vite.config.mts

@@ -87,14 +87,16 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
       $model,
       position,
     ) => {
-      if ($model.uri !== model.uri) {
+      const sameModel = $model.uri === model.uri;
+      if (!sameModel) {
         return null; // Ignore for other editors
       }
       const wordAtPosition = $model.getWordAtPosition(position);
       if (!wordAtPosition?.word.startsWith('/')) {
         return null;
       }
-      if (!ImagePreview.shouldRender(wordAtPosition.word)) {
+      const shouldRender = ImagePreview.shouldRender(wordAtPosition.word);
+      if (!shouldRender) {
         return null;
       }
 
@@ -138,8 +140,9 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
         ],
       };
     };
+    const languageId = model.getLanguageId();
     const disposables = [
-      languages.registerHoverProvider(model.getLanguageId(), { provideHover }),
+      languages.registerHoverProvider(languageId, { provideHover }),
       editor.addAction({ ...KEY_BINDINGS.runQuery, run }),
       editor,
       model,

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

@@ -4,7 +4,7 @@ import { parse, print } from 'graphql';
 import { KeyCode, KeyMod, Uri, languages } from './monaco-editor';
 import { EditorSlice } from './stores';
 
-const isMacOs =
+export const isMacOs =
   typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');
 
 export function formatShortcutForOS(key: string, replaced = '⌘') {
@@ -38,7 +38,7 @@ export const KEY_MAP = Object.freeze({
     key: 'Ctrl-F',
   },
   searchInDocs: {
-    key: 'Ctrl-K',
+    key: 'Ctrl-Alt-K',
   },
 });
 
@@ -75,7 +75,7 @@ export const DEFAULT_QUERY = `# Welcome to GraphiQL
 
 `;
 
-export const KEY_BINDINGS = Object.freeze({
+export const KEY_BINDINGS = {
   prettify: {
     id: 'graphql-prettify',
     label: 'Prettify Editors',
@@ -100,7 +100,7 @@ export const KEY_BINDINGS = Object.freeze({
     contextMenuGroupId: 'graphql',
     keybindings: KEY_MAP.copyQuery.keybindings,
   },
-});
+} as const;
 
 export const QUERY_URI = Uri.file('query.graphql');
 export const VARIABLE_URI = Uri.file('variable.json');

packages/graphiql-react/src/constants.ts

@@ -9,4 +9,4 @@ export * from './components';
 
 export type { EditorProps, SchemaReference, AllSlices } from './types';
 export type { GraphiQLPlugin } from './stores/plugin';
-export { KEY_MAP, formatShortcutForOS } from './constants';
+export { KEY_MAP, formatShortcutForOS, isMacOs } from './constants';