add a dialog that shows all available shortkeys (#2601)

* add a dialog that shows all available shortkeys * use table in short key dialog * add shortkey for introspection * add link to codemirror keymaps
graphql · Aug 5, 2022 · aa22628 · aa22628
1 parent c044c0c
commit aa22628
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 26 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-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
@@ -111,21 +111,31 @@ body.graphiql-dark reach-portal {
 .graphiql-container,
 .CodeMirror-info,
 .CodeMirror-lint-tooltip,
-reach-portal,
-.graphiql-container:is(button) {
-  color: var(--color-neutral-100);
-  font-family: var(--font-family);
-  font-size: var(--font-size-body);
-  font-weight: var(----font-weight-regular);
-  line-height: var(--line-height);
-}
+reach-portal {
+  &,
+  &:is(button) {
+    color: var(--color-neutral-100);
+    font-family: var(--font-family);
+    font-size: var(--font-size-body);
+    font-weight: var(----font-weight-regular);
+    line-height: var(--line-height);
+  }
 
-.graphiql-container input {
-  color: var(--color-neutral-100);
-  font-family: var(--font-family);
-  font-size: var(--font-size-caption);
-}
+  & input {
+    color: var(--color-neutral-100);
+    font-family: var(--font-family);
+    font-size: var(--font-size-caption);
 
-.graphiql-container input::placeholder {
-  color: var(--color-neutral-60);
+    &::placeholder {
+      color: var(--color-neutral-60);
+    }
+  }
+
+  & a {
+    color: var(--color-pink);
+
+    &:visited {
+      color: var(--color-pink-dark);
+    }
+  }
 }
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -96,10 +96,6 @@ if (majorVersion < 16) {
   );
 }
 
-declare namespace window {
-  export let g: GraphiQL;
-}
-
 export type GraphiQLToolbarConfig = {
   additionalContent?: React.ReactNode;
 };
@@ -318,12 +314,6 @@ export class GraphiQL extends React.Component<GraphiQLProps> {
     super(props);
   }
 
-  componentDidMount() {
-    if (typeof window !== 'undefined') {
-      window.g = this;
-    }
-  }
-
   render() {
     return (
       <GraphiQLProviders
@@ -623,6 +613,7 @@ type GraphiQLWithContextConsumerProps = Omit<
 
 export type GraphiQLState = {
   activeSecondaryEditor: 'variable' | 'header';
+  showShortKeys: boolean;
   showSettings: boolean;
   clearStorageStatus: 'success' | 'error' | null;
 };
@@ -637,6 +628,7 @@ class GraphiQLWithContext extends React.Component<
     // Initialize state
     this.state = {
       activeSecondaryEditor: 'variable',
+      showShortKeys: false,
       showSettings: false,
       clearStorageStatus: null,
     };
@@ -695,6 +687,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">
@@ -758,7 +757,10 @@ class GraphiQLWithContext extends React.Component<
                 }
               />
             </UnStyledButton>
-            <UnStyledButton>
+            <UnStyledButton
+              onClick={() => {
+                this.setState({ showShortKeys: true });
+              }}>
               <KeyboardShortcutIcon />
             </UnStyledButton>
             <UnStyledButton
@@ -1007,6 +1009,111 @@ 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">
+            <div>
+              <table className="graphiql-table">
+                <thead>
+                  <tr>
+                    <th>Short key</th>
+                    <th>Function</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      {modifier}
+                      {' + '}
+                      <code className="graphiql-key">F</code>
+                    </td>
+                    <td>Search in editor</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      {modifier}
+                      {' + '}
+                      <code className="graphiql-key">K</code>
+                    </td>
+                    <td>Search in documentation</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      {modifier}
+                      {' + '}
+                      <code className="graphiql-key">Enter</code>
+                    </td>
+                    <td>Execute query</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <code className="graphiql-key">Ctrl</code>
+                      {' + '}
+                      <code className="graphiql-key">Shift</code>
+                      {' + '}
+                      <code className="graphiql-key">P</code>
+                    </td>
+                    <td>Prettify editors</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <code className="graphiql-key">Ctrl</code>
+                      {' + '}
+                      <code className="graphiql-key">Shift</code>
+                      {' + '}
+                      <code className="graphiql-key">M</code>
+                    </td>
+                    <td>
+                      Merge fragments definitions into operation definition
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <code className="graphiql-key">Ctrl</code>
+                      {' + '}
+                      <code className="graphiql-key">Shift</code>
+                      {' + '}
+                      <code className="graphiql-key">C</code>
+                    </td>
+                    <td>Copy query</td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <code className="graphiql-key">Ctrl</code>
+                      {' + '}
+                      <code className="graphiql-key">Shift</code>
+                      {' + '}
+                      <code className="graphiql-key">R</code>
+                    </td>
+                    <td>Re-fetch schema using introspection</td>
+                  </tr>
+                </tbody>
+              </table>
+              <p>
+                The editors use{' '}
+                <a
+                  href="https://codemirror.net/5/doc/manual.html#keymaps"
+                  target="_blank"
+                  rel="noopener noreferrer">
+                  CodeMirror Key Maps
+                </a>{' '}
+                that add more short keys. This instance of Graph<em>i</em>QL
+                uses <code>{this.props.keyMap || 'sublime'}</code>.
+              </p>
+            </div>
+          </div>
+        </Dialog>
         <Dialog
           isOpen={this.state.showSettings}
           onDismiss={() => {

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -269,3 +269,19 @@ reach-portal .graphiql-dialog-section-title {
 reach-portal .graphiql-dialog-section-caption {
   color: var(--color-neutral-60);
 }
+
+reach-portal .graphiql-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+reach-portal .graphiql-table :is(th, td) {
+  border: 1px solid var(--color-neutral-15);
+  padding: var(--px-8) 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);
+}