fix: adjust command palette width, border and remove box-shadow (#4081)

* feat: add loader for initial loading of operation editor
fix: adjust command palette `width`, `border` and remove `box-shadow`
feat: add short cut `Cmd/Ctrl + ,` for opening GraphiQL settings dialog

* feat: add loader for initial loading of operation editor
fix: adjust command palette `width`, `border` and remove `box-shadow`
feat: add short cut `Cmd/Ctrl + ,` for opening GraphiQL settings dialog

* prettier

Author: dimaMachina

.changeset/shaggy-panthers-grin.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/react': patch
+'graphiql': minor
+---
+
+feat: add loader for initial loading of operation editor
+fix: adjust command palette `width`, `border` and remove `box-shadow`
+feat: add short cut `Cmd/Ctrl + ,` for opening GraphiQL settings dialog

packages/graphiql-react/README.md

@@ -96,19 +96,19 @@ React hooks.
 The `useGraphiQLActions` hook **exposes all actions** across store slices.
 The `useGraphiQL` hook **provides access to the following store slices**:
 
-| Store Slice | Responsibilities                                                                                          |
-| ----------- | --------------------------------------------------------------------------------------------------------- |
-| `storage`   | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |
-| `editor`    | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |
-| `execution` | Handles the execution of GraphQL requests                                                                 |
-| `plugin`    | Manages plugins and the currently active plugin                                                           |
-| `schema`    | Fetches, validates, and stores the GraphQL schema                                                         |
-| `theme`     | Manages the current theme and provides a method to update it                                              |
+| Store Slice                              | Responsibilities                                                                                          |
+| ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| [`storage`](./src/stores/storage.ts)     | Provides a storage API that can be used to persist state in the browser (by default using `localStorage`) |
+| [`editor`](./src/stores/editor.ts)       | Manages **query**, **variables**, **headers**, and **response** editors and tabs                          |
+| [`execution`](./src/stores/execution.ts) | Handles the execution of GraphQL requests                                                                 |
+| [`plugin`](./src/stores/plugin.ts)       | Manages plugins and the currently active plugin                                                           |
+| [`schema`](./src/stores/schema.ts)       | Fetches, validates, and stores the GraphQL schema                                                         |
+| [`theme`](./src/stores/theme.ts)         | Manages the current theme and provides a method to update it                                              |
 
 ### Usage Example
 
 ```js
-import { useGraphiQL, useGraphiQLActions, useTheme } from '@graphiql/react';
+import { useGraphiQL, useGraphiQLActions } from '@graphiql/react';
 
 // Get an action to fetch the schema and an action to change theme
 const { introspect, setTheme } = useGraphiQLActions();

packages/graphiql-react/src/style/editor.css

@@ -19,9 +19,22 @@
   .highlight {
     color: hsl(var(--color-primary)) !important;
   }
+
   input:focus-visible {
     outline-color: hsl(var(--color-primary));
   }
+
+  /* Command pallet F1 styles */
+  .overflow-guard {
+    overflow: unset !important;
+  }
+
+  .quick-input-widget {
+    min-width: min(500px, 70vw) !important;
+    box-shadow: none !important;
+    /* Make quick input widget border same as editor hover widget  */
+    --vscode-widget-border: var(--vscode-editorHoverWidget-border);
+  }
 }
 
 /* Make hover contents be dynamic */

packages/graphiql/src/GraphiQL.tsx

@@ -32,6 +32,7 @@ import {
   EditorProps,
   cn,
   useGraphiQLActions,
+  useMonaco,
 } from '@graphiql/react';
 import { HistoryStore, HISTORY_PLUGIN } from '@graphiql/plugin-history';
 import {
@@ -221,6 +222,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
       'visiblePlugin',
     ),
   );
+  const hasMonaco = useMonaco(state => Boolean(state.monaco));
 
   const PluginContent = visiblePlugin?.content;
 
@@ -353,7 +355,15 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
         aria-label="Operation Editor"
         ref={editorToolsResize.firstRef}
       >
-        <QueryEditor onClickReference={onClickReference} onEdit={onEditQuery} />
+        {hasMonaco ? (
+          <QueryEditor
+            onClickReference={onClickReference}
+            onEdit={onEditQuery}
+          />
+        ) : (
+          <Spinner />
+        )}
+
         <div
           className="graphiql-toolbar"
           role="toolbar"

packages/graphiql/src/ui/sidebar.tsx

@@ -4,6 +4,7 @@ import {
   ButtonGroup,
   cn,
   Dialog,
+  isMacOs,
   KEY_MAP,
   KeyboardShortcutIcon,
   pick,
@@ -87,6 +88,20 @@ export const Sidebar: FC<SidebarProps> = ({
     'success' | 'error' | undefined
   >();
 
+  useEffect(() => {
+    function openSettings(event: KeyboardEvent) {
+      if ((isMacOs ? event.metaKey : event.ctrlKey) && event.key === ',') {
+        event.preventDefault(); // prevent default browser settings dialog
+        setShowDialog(prev => (prev === 'settings' ? null : 'settings'));
+      }
+    }
+
+    window.addEventListener('keydown', openSettings);
+    return () => {
+      window.removeEventListener('keydown', openSettings);
+    };
+  }, []);
+
   function handleOpenShortKeysDialog(isOpen: boolean) {
     if (!isOpen) {
       setShowDialog(null);