Skip to content

Commit fdcd905

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 855e18f commit fdcd905

4 files changed

Lines changed: 168 additions & 26 deletions

File tree

‎.changeset/green-mayflies-notice.md‎

Lines changed: 5 additions & 0 deletions
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‎

Lines changed: 25 additions & 15 deletions
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‎

Lines changed: 122 additions & 11 deletions
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
@@ -645,6 +635,7 @@ type GraphiQLWithContextConsumerProps = Omit<
645635

646636
export type GraphiQLState = {
647637
activeSecondaryEditor: 'variable' | 'header';
638+
showShortKeys: boolean;
648639
showSettings: boolean;
649640
clearStorageStatus: 'success' | 'error' | null;
650641
};
@@ -659,6 +650,7 @@ class GraphiQLWithContext extends React.Component<
659650
// Initialize state
660651
this.state = {
661652
activeSecondaryEditor: 'variable',
653+
showShortKeys: false,
662654
showSettings: false,
663655
clearStorageStatus: null,
664656
};
@@ -720,6 +712,13 @@ class GraphiQLWithContext extends React.Component<
720712
}
721713
};
722714

715+
const modifier =
716+
window.navigator.platform.toLowerCase().indexOf('mac') === 0 ? (
717+
<code className="graphiql-key">Cmd</code>
718+
) : (
719+
<code className="graphiql-key">Ctrl</code>
720+
);
721+
723722
return (
724723
<div data-testid="graphiql-container" className="graphiql-container">
725724
<div className="graphiql-sidebar">
@@ -789,7 +788,12 @@ class GraphiQLWithContext extends React.Component<
789788
}
790789
/>
791790
</UnStyledButton>
792-
<UnStyledButton type="button">
791+
<UnStyledButton
792+
type="button"
793+
onClick={() => {
794+
this.setState({ showShortKeys: true });
795+
}}
796+
>
793797
<KeyboardShortcutIcon />
794798
</UnStyledButton>
795799
<UnStyledButton
@@ -1051,6 +1055,113 @@ class GraphiQLWithContext extends React.Component<
10511055
</div>
10521056
</div>
10531057
</div>
1058+
<Dialog
1059+
isOpen={this.state.showShortKeys}
1060+
onDismiss={() => {
1061+
this.setState({ showShortKeys: false });
1062+
}}
1063+
>
1064+
<div className="graphiql-dialog-header">
1065+
<div className="graphiql-dialog-title">Short Keys</div>
1066+
<Dialog.Close
1067+
onClick={() => {
1068+
this.setState({ showShortKeys: false });
1069+
}}
1070+
/>
1071+
</div>
1072+
<div className="graphiql-dialog-section">
1073+
<div>
1074+
<table className="graphiql-table">
1075+
<thead>
1076+
<tr>
1077+
<th>Short key</th>
1078+
<th>Function</th>
1079+
</tr>
1080+
</thead>
1081+
<tbody>
1082+
<tr>
1083+
<td>
1084+
{modifier}
1085+
{' + '}
1086+
<code className="graphiql-key">F</code>
1087+
</td>
1088+
<td>Search in editor</td>
1089+
</tr>
1090+
<tr>
1091+
<td>
1092+
{modifier}
1093+
{' + '}
1094+
<code className="graphiql-key">K</code>
1095+
</td>
1096+
<td>Search in documentation</td>
1097+
</tr>
1098+
<tr>
1099+
<td>
1100+
{modifier}
1101+
{' + '}
1102+
<code className="graphiql-key">Enter</code>
1103+
</td>
1104+
<td>Execute query</td>
1105+
</tr>
1106+
<tr>
1107+
<td>
1108+
<code className="graphiql-key">Ctrl</code>
1109+
{' + '}
1110+
<code className="graphiql-key">Shift</code>
1111+
{' + '}
1112+
<code className="graphiql-key">P</code>
1113+
</td>
1114+
<td>Prettify editors</td>
1115+
</tr>
1116+
<tr>
1117+
<td>
1118+
<code className="graphiql-key">Ctrl</code>
1119+
{' + '}
1120+
<code className="graphiql-key">Shift</code>
1121+
{' + '}
1122+
<code className="graphiql-key">M</code>
1123+
</td>
1124+
<td>
1125+
Merge fragments definitions into operation definition
1126+
</td>
1127+
</tr>
1128+
<tr>
1129+
<td>
1130+
<code className="graphiql-key">Ctrl</code>
1131+
{' + '}
1132+
<code className="graphiql-key">Shift</code>
1133+
{' + '}
1134+
<code className="graphiql-key">C</code>
1135+
</td>
1136+
<td>Copy query</td>
1137+
</tr>
1138+
<tr>
1139+
<td>
1140+
<code className="graphiql-key">Ctrl</code>
1141+
{' + '}
1142+
<code className="graphiql-key">Shift</code>
1143+
{' + '}
1144+
<code className="graphiql-key">R</code>
1145+
</td>
1146+
<td>Re-fetch schema using introspection</td>
1147+
</tr>
1148+
</tbody>
1149+
</table>
1150+
<p>
1151+
The editors use{' '}
1152+
<a
1153+
href="https://codemirror.net/5/doc/manual.html#keymaps"
1154+
target="_blank"
1155+
rel="noopener noreferrer"
1156+
>
1157+
CodeMirror Key Maps
1158+
</a>{' '}
1159+
that add more short keys. This instance of Graph<em>i</em>QL
1160+
uses <code>{this.props.keyMap || 'sublime'}</code>.
1161+
</p>
1162+
</div>
1163+
</div>
1164+
</Dialog>
10541165
<Dialog
10551166
isOpen={this.state.showSettings}
10561167
onDismiss={() => {

‎packages/graphiql/src/style.css‎

Lines changed: 16 additions & 0 deletions
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)