Skip to content

Commit

Permalink
add a dialog that shows all available shortkeys (#2601)
Browse files Browse the repository at this point in the history
* add a dialog that shows all available shortkeys

* use table in short key dialog

* add shortkey for introspection

* add link to codemirror keymaps
  • Loading branch information
thomasheyenbrock authored Aug 2, 2022
1 parent b5e42f5 commit bb992f4
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 26 deletions.
5 changes: 5 additions & 0 deletions .changeset/green-mayflies-notice.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

BREAKING: The `GraphiQL` component does no longer set a property `g` on the `window` object.
40 changes: 25 additions & 15 deletions packages/graphiql-react/src/style/root.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
128 changes: 117 additions & 11 deletions packages/graphiql/src/components/GraphiQL.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,6 @@ if (majorVersion < 16) {
);
}

declare namespace window {
export let g: GraphiQL;
}

export type GraphiQLToolbarConfig = {
additionalContent?: React.ReactNode;
};
Expand Down Expand Up @@ -318,12 +314,6 @@ export class GraphiQL extends React.Component<GraphiQLProps> {
super(props);
}

componentDidMount() {
if (typeof window !== 'undefined') {
window.g = this;
}
}

render() {
return (
<GraphiQLProviders
Expand Down Expand Up @@ -623,6 +613,7 @@ type GraphiQLWithContextConsumerProps = Omit<

export type GraphiQLState = {
activeSecondaryEditor: 'variable' | 'header';
showShortKeys: boolean;
showSettings: boolean;
clearStorageStatus: 'success' | 'error' | null;
};
Expand All @@ -637,6 +628,7 @@ class GraphiQLWithContext extends React.Component<
// Initialize state
this.state = {
activeSecondaryEditor: 'variable',
showShortKeys: false,
showSettings: false,
clearStorageStatus: null,
};
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -758,7 +757,10 @@ class GraphiQLWithContext extends React.Component<
}
/>
</UnStyledButton>
<UnStyledButton>
<UnStyledButton
onClick={() => {
this.setState({ showShortKeys: true });
}}>
<KeyboardShortcutIcon />
</UnStyledButton>
<UnStyledButton
Expand Down Expand Up @@ -1007,6 +1009,110 @@ 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. The default is <code>sublime</code>.
</p>
</div>
</div>
</Dialog>
<Dialog
isOpen={this.state.showSettings}
onDismiss={() => {
Expand Down
16 changes: 16 additions & 0 deletions packages/graphiql/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

0 comments on commit bb992f4

Please sign in to comment.