add a dialog that shows all available shortkeys

graphql · Jul 29, 2022 · 0dcddac · 0dcddac
1 parent 1c150ce
commit 0dcddac
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 11 deletions.
diff --git a/.changeset/green-mayflies-notice.md b/.changeset/green-mayflies-notice.md
@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+BREAKING: The `GraphiQL` component does no longer set a property `g` on the `window` object.
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -95,10 +95,6 @@ if (majorVersion < 16) {
   );
 }
 
-declare namespace window {
-  export let g: GraphiQL;
-}
-
 export type GraphiQLToolbarConfig = {
   additionalContent?: React.ReactNode;
 };
@@ -317,12 +313,6 @@ export class GraphiQL extends React.Component<GraphiQLProps> {
     super(props);
   }
 
-  componentDidMount() {
-    if (typeof window !== 'undefined') {
-      window.g = this;
-    }
-  }
-
   render() {
     return (
       <GraphiQLProviders
@@ -622,6 +612,7 @@ type GraphiQLWithContextConsumerProps = Omit<
 
 export type GraphiQLState = {
   activeSecondaryEditor: 'variable' | 'header';
+  showShortKeys: boolean;
   showSettings: boolean;
   clearStorageStatus: 'success' | 'error' | null;
 };
@@ -636,6 +627,7 @@ class GraphiQLWithContext extends React.Component<
     // Initialize state
     this.state = {
       activeSecondaryEditor: 'variable',
+      showShortKeys: false,
       showSettings: false,
       clearStorageStatus: null,
     };
@@ -694,6 +686,13 @@ class GraphiQLWithContext extends React.Component<
       }
     };
 
+    const modifier =
+      window.navigator.platform.toLowerCase().indexOf('mac') === 0 ? (
+        <code className="graphiql-key">Cmd</code>
+      ) : (
+        <code className="graphiql-key">Ctrl</code>
+      );
+
     return (
       <div data-testid="graphiql-container" className="graphiql-container">
         <div className="graphiql-sidebar">
@@ -748,7 +747,10 @@ class GraphiQLWithContext extends React.Component<
             ) : null}
           </div>
           <div>
-            <UnStyledButton>
+            <UnStyledButton
+              onClick={() => {
+                this.setState({ showShortKeys: true });
+              }}>
               <KeyboardShortcutIcon />
             </UnStyledButton>
             <UnStyledButton
@@ -997,6 +999,62 @@ class GraphiQLWithContext extends React.Component<
             </div>
           </div>
         </div>
+        <Dialog
+          isOpen={this.state.showShortKeys}
+          onDismiss={() => {
+            this.setState({ showShortKeys: false });
+          }}>
+          <div className="graphiql-dialog-header">
+            <div className="graphiql-dialog-title">Short Keys</div>
+            <Dialog.Close
+              onClick={() => {
+                this.setState({ showShortKeys: false });
+              }}
+            />
+          </div>
+          <div className="graphiql-dialog-section">
+            <ul className="graphiql-short-keys">
+              <li>
+                {modifier}
+                {' + '}
+                <code className="graphiql-key">F</code> : Search in editor
+              </li>
+              <li>
+                {modifier}
+                {' + '}
+                <code className="graphiql-key">K</code> : Search in
+                documentation
+              </li>
+              <li>
+                {modifier}
+                {' + '}
+                <code className="graphiql-key">Enter</code> : Execute query
+              </li>
+              <li>
+                <code className="graphiql-key">Ctrl</code>
+                {' + '}
+                <code className="graphiql-key">Shift</code>
+                {' + '}
+                <code className="graphiql-key">P</code> : Prettify editors
+              </li>
+              <li>
+                <code className="graphiql-key">Ctrl</code>
+                {' + '}
+                <code className="graphiql-key">Shift</code>
+                {' + '}
+                <code className="graphiql-key">M</code> : Merge fragments
+                definitions into operation definition
+              </li>
+              <li>
+                <code className="graphiql-key">Ctrl</code>
+                {' + '}
+                <code className="graphiql-key">Shift</code>
+                {' + '}
+                <code className="graphiql-key">C</code> : Copy query
+              </li>
+            </ul>
+          </div>
+        </Dialog>
         <Dialog
           isOpen={this.state.showSettings}
           onDismiss={() => {

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -256,3 +256,20 @@ reach-portal .graphiql-dialog-section-title {
 reach-portal .graphiql-dialog-section-caption {
   color: var(--color-neutral-60);
 }
+
+/* The list of short keys in the short-key dialog */
+reach-portal .graphiql-short-keys {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+reach-portal .graphiql-short-keys > li + li {
+  margin-top: var(--px-12);
+}
+
+/* A single key the short-key dialog */
+reach-portal .graphiql-key {
+  background-color: var(--color-neutral-10);
+  border-radius: var(--border-radius-4);
+  padding: var(--px-4);
+}