Skip to content

Commit

Permalink
add link to codemirror keymaps
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasheyenbrock
thomasheyenbrock committed Aug 1, 2022
1 parent 84c6486 commit 37908a0
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 89 deletions.
40 changes: 25 additions & 15 deletions packages/graphiql-react/src/style/root.css
View file
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);
}
}
}
162 changes: 88 additions & 74 deletions packages/graphiql/src/components/GraphiQL.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1023,80 +1023,94 @@ class GraphiQLWithContext extends React.Component<
/>
</div>
<div className="graphiql-dialog-section">
<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>
<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
Expand Down

0 comments on commit 37908a0

Please sign in to comment.