Skip to content

Commit e23bd90

Browse files
thomasheyenbrockthomasheyenbrock
committed
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
1 parent dfb6601 commit e23bd90

File tree

4 files changed

+164
-26
lines changed

4 files changed

+164
-26
lines changed

‎.changeset/green-mayflies-notice.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'graphiql': major
3+
---
4+
5+
BREAKING: The `GraphiQL` component does no longer set a property `g` on the `window` object.

‎packages/graphiql-react/src/style/root.css

+25-15
Original file line numberDiff line numberDiff line change
@@ -111,21 +111,31 @@ body.graphiql-dark reach-portal {
111111
.graphiql-container,
112112
.CodeMirror-info,
113113
.CodeMirror-lint-tooltip,
114-
reach-portal,
115-
.graphiql-container:is(button) {
116-
color: var(--color-neutral-100);
117-
font-family: var(--font-family);
118-
font-size: var(--font-size-body);
119-
font-weight: var(----font-weight-regular);
120-
line-height: var(--line-height);
121-
}
114+
reach-portal {
115+
&,
116+
&:is(button) {
117+
color: var(--color-neutral-100);
118+
font-family: var(--font-family);
119+
font-size: var(--font-size-body);
120+
font-weight: var(----font-weight-regular);
121+
line-height: var(--line-height);
122+
}
122123

123-
.graphiql-container input {
124-
color: var(--color-neutral-100);
125-
font-family: var(--font-family);
126-
font-size: var(--font-size-caption);
127-
}
124+
& input {
125+
color: var(--color-neutral-100);
126+
font-family: var(--font-family);
127+
font-size: var(--font-size-caption);
128128

129-
.graphiql-container input::placeholder {
130-
color: var(--color-neutral-60);
129+
&::placeholder {
130+
color: var(--color-neutral-60);
131+
}
132+
}
133+
134+
& a {
135+
color: var(--color-pink);
136+
137+
&:visited {
138+
color: var(--color-pink-dark);
139+
}
140+
}
131141
}

‎packages/graphiql/src/components/GraphiQL.tsx

+118-11
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,6 @@ if (majorVersion < 16) {
9696
);
9797
}
9898

99-
declare namespace window {
100-
export let g: GraphiQL;
101-
}
102-
10399
export type GraphiQLToolbarConfig = {
104100
additionalContent?: React.ReactNode;
105101
};
@@ -318,12 +314,6 @@ export class GraphiQL extends React.Component<GraphiQLProps> {
318314
super(props);
319315
}
320316

321-
componentDidMount() {
322-
if (typeof window !== 'undefined') {
323-
window.g = this;
324-
}
325-
}
326-
327317
render() {
328318
return (
329319
<GraphiQLProviders
@@ -623,6 +613,7 @@ type GraphiQLWithContextConsumerProps = Omit<
623613

624614
export type GraphiQLState = {
625615
activeSecondaryEditor: 'variable' | 'header';
616+
showShortKeys: boolean;
626617
showSettings: boolean;
627618
clearStorageStatus: 'success' | 'error' | null;
628619
};
@@ -637,6 +628,7 @@ class GraphiQLWithContext extends React.Component<
637628
// Initialize state
638629
this.state = {
639630
activeSecondaryEditor: 'variable',
631+
showShortKeys: false,
640632
showSettings: false,
641633
clearStorageStatus: null,
642634
};
@@ -695,6 +687,13 @@ class GraphiQLWithContext extends React.Component<
695687
}
696688
};
697689

690+
const modifier =
691+
window.navigator.platform.toLowerCase().indexOf('mac') === 0 ? (
692+
<code className="graphiql-key">Cmd</code>
693+
) : (
694+
<code className="graphiql-key">Ctrl</code>
695+
);
696+
698697
return (
699698
<div data-testid="graphiql-container" className="graphiql-container">
700699
<div className="graphiql-sidebar">
@@ -758,7 +757,10 @@ class GraphiQLWithContext extends React.Component<
758757
}
759758
/>
760759
</UnStyledButton>
761-
<UnStyledButton>
760+
<UnStyledButton
761+
onClick={() => {
762+
this.setState({ showShortKeys: true });
763+
}}>
762764
<KeyboardShortcutIcon />
763765
</UnStyledButton>
764766
<UnStyledButton
@@ -1007,6 +1009,111 @@ class GraphiQLWithContext extends React.Component<
10071009
</div>
10081010
</div>
10091011
</div>
1012+
<Dialog
1013+
isOpen={this.state.showShortKeys}
1014+
onDismiss={() => {
1015+
this.setState({ showShortKeys: false });
1016+
}}>
1017+
<div className="graphiql-dialog-header">
1018+
<div className="graphiql-dialog-title">Short Keys</div>
1019+
<Dialog.Close
1020+
onClick={() => {
1021+
this.setState({ showShortKeys: false });
1022+
}}
1023+
/>
1024+
</div>
1025+
<div className="graphiql-dialog-section">
1026+
<div>
1027+
<table className="graphiql-table">
1028+
<thead>
1029+
<tr>
1030+
<th>Short key</th>
1031+
<th>Function</th>
1032+
</tr>
1033+
</thead>
1034+
<tbody>
1035+
<tr>
1036+
<td>
1037+
{modifier}
1038+
{' + '}
1039+
<code className="graphiql-key">F</code>
1040+
</td>
1041+
<td>Search in editor</td>
1042+
</tr>
1043+
<tr>
1044+
<td>
1045+
{modifier}
1046+
{' + '}
1047+
<code className="graphiql-key">K</code>
1048+
</td>
1049+
<td>Search in documentation</td>
1050+
</tr>
1051+
<tr>
1052+
<td>
1053+
{modifier}
1054+
{' + '}
1055+
<code className="graphiql-key">Enter</code>
1056+
</td>
1057+
<td>Execute query</td>
1058+
</tr>
1059+
<tr>
1060+
<td>
1061+
<code className="graphiql-key">Ctrl</code>
1062+
{' + '}
1063+
<code className="graphiql-key">Shift</code>
1064+
{' + '}
1065+
<code className="graphiql-key">P</code>
1066+
</td>
1067+
<td>Prettify editors</td>
1068+
</tr>
1069+
<tr>
1070+
<td>
1071+
<code className="graphiql-key">Ctrl</code>
1072+
{' + '}
1073+
<code className="graphiql-key">Shift</code>
1074+
{' + '}
1075+
<code className="graphiql-key">M</code>
1076+
</td>
1077+
<td>
1078+
Merge fragments definitions into operation definition
1079+
</td>
1080+
</tr>
1081+
<tr>
1082+
<td>
1083+
<code className="graphiql-key">Ctrl</code>
1084+
{' + '}
1085+
<code className="graphiql-key">Shift</code>
1086+
{' + '}
1087+
<code className="graphiql-key">C</code>
1088+
</td>
1089+
<td>Copy query</td>
1090+
</tr>
1091+
<tr>
1092+
<td>
1093+
<code className="graphiql-key">Ctrl</code>
1094+
{' + '}
1095+
<code className="graphiql-key">Shift</code>
1096+
{' + '}
1097+
<code className="graphiql-key">R</code>
1098+
</td>
1099+
<td>Re-fetch schema using introspection</td>
1100+
</tr>
1101+
</tbody>
1102+
</table>
1103+
<p>
1104+
The editors use{' '}
1105+
<a
1106+
href="https://codemirror.net/5/doc/manual.html#keymaps"
1107+
target="_blank"
1108+
rel="noopener noreferrer">
1109+
CodeMirror Key Maps
1110+
</a>{' '}
1111+
that add more short keys. This instance of Graph<em>i</em>QL
1112+
uses <code>{this.props.keyMap || 'sublime'}</code>.
1113+
</p>
1114+
</div>
1115+
</div>
1116+
</Dialog>
10101117
<Dialog
10111118
isOpen={this.state.showSettings}
10121119
onDismiss={() => {

‎packages/graphiql/src/style.css

+16
Original file line numberDiff line numberDiff line change
@@ -269,3 +269,19 @@ reach-portal .graphiql-dialog-section-title {
269269
reach-portal .graphiql-dialog-section-caption {
270270
color: var(--color-neutral-60);
271271
}
272+
273+
reach-portal .graphiql-table {
274+
border-collapse: collapse;
275+
width: 100%;
276+
}
277+
reach-portal .graphiql-table :is(th, td) {
278+
border: 1px solid var(--color-neutral-15);
279+
padding: var(--px-8) var(--px-12);
280+
}
281+
282+
/* A single key the short-key dialog */
283+
reach-portal .graphiql-key {
284+
background-color: var(--color-neutral-10);
285+
border-radius: var(--border-radius-4);
286+
padding: var(--px-4);
287+
}

0 commit comments

Comments
 (0)