Document the keyboard shortcuts

[dontsave]

I love GraphiQL but I can't find documentation anywhere for the shortcuts. I've basically just discovered them by pressing random key combinations. How was I supposed to know that ctrl-shift-space highlights the inner query? Very useful but should be easier to learn

[IvanGoncharov]

@dontsave Great idea 👍 Would be great to have a popup with all keyboards listed on it, similar to one that you get on GitHub with "Shift-?".

[corysimmons]

Please. I keep pressing x to get hints, but don't know any others.

---

I'll just start collecting them here. Maybe PR in future.

#  Prettify Query:  Shift-Ctrl-P (or press the prettify button above)
#
#       Run Query:  Ctrl-Enter (or press the play button above)
#
#   Auto Complete:  Ctrl-Space (or just start typing)

[alxiong]

@corysimmons Thanks for the answer, I'm using Ubuntu18.04, Ctrl-Space collide with my keyboard switch shortcut. Any suggestion or how can I change graphiql's default?

[corysimmons]

@AlexXiong97 No I don't think you can control that. Ctrl + Space is really common in editors, etc. so I'd suggest whatever custom binding you have, you bind to something else.

[nrivard]

Some additional ones i've found.

Cmd - /: comment out line
Cmd - m: jump to end of current scope/beginning of scope
Cmd - d: highlight current word
Cmd - f: regex search
Cmd - h: search + replace
Cmd - j: bring next line up to current-line (spacing applied automatically)
Cmd - k (twice): deletes rest of line past cursor
Cmd - l: highlight current line
Cmd - [: outdent current line
Cmd - ]: indent current line

Anyone know of a way to clear the results of a tab? I want run the query without previous info displaying. Cmd-k (a la Terminal/shell) I would think is the best way to accomplish this, but you can see above that it does something else entirely.

[ruzz311]

Looking at the source for the editor helps

From ~/src/components/QueryEditor.js#L107

	//...
    extraKeys: {
        'Cmd-Space': () => this.editor.showHint({ completeSingle: true }),
        'Ctrl-Space': () => this.editor.showHint({ completeSingle: true }),
        'Alt-Space': () => this.editor.showHint({ completeSingle: true }),
        'Shift-Space': () => this.editor.showHint({ completeSingle: true }),

        'Cmd-Enter': () => {
          if (this.props.onRunQuery) {
            this.props.onRunQuery();
          }
        },
        'Ctrl-Enter': () => {
          if (this.props.onRunQuery) {
            this.props.onRunQuery();
          }
        },

        'Shift-Ctrl-P': () => {
          if (this.props.onPrettifyQuery) {
            this.props.onPrettifyQuery();
          }
        },

        // Persistent search box in Query Editor
        'Cmd-F': 'findPersistent',
        'Ctrl-F': 'findPersistent',

        // Editor improvements
        'Ctrl-Left': 'goSubwordLeft',
        'Ctrl-Right': 'goSubwordRight',
        'Alt-Left': 'goGroupLeft',
        'Alt-Right': 'goGroupRight',
      },
    });
	//...

[msaspence]

It would also be cool for these to be a configurable setting

[acao]

This is already planned for 1.0.0! Will add to roadmap.

On Tue, Nov 26, 2019 at 9:28 AM Matthew Spence [email protected] wrote:

It would also be cool for these to be a configurable setting

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/graphql/graphiql/issues/670?email_source=notifications&email_token=AAKOFFZV6HMSOEWBWQYSSL3QVUW7PA5CNFSM4E3DT6BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFGGCTY#issuecomment-558653775, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKOFFYN2GUCN3VKY6XF7H3QVUW7PANCNFSM4E3DT6BA .

[corysimmons]

Awesome! Would be great if there was a little question mark icon somewhere in the ui (top right?) that had these listed.

[acao]

indeed! for the time being, a colleauge of mine has made a spreadsheet I will share, and we might be able to show the (for now) statically defined keymap.

the new mini-ide we will be building out will have a few layers of settings, and also plugins that will allow you to switch between different predefined keymap modes .vim, emacs, etc bindings already exist for monaco. you'll eventually be able to configure them one-by-one as well. and yes there will be a plugin for a keymap dropdown that will be enabled in the default preset.

we will make our own sublime one to give folks the "classic" graphiql feel, since monaco will give us more vscode style bindings by default. the jury is still out on which should be enabled by default in our preset after the migration from codemirror to monaco.

essentially, our custom keybindings are defined as extraKeys in the example @ruzz311 provided above and now in a commonKeys constant, and then all the sublime keymaps:

mac: https://github.com/codemirror/CodeMirror/blob/master/keymap/sublime.js#L573 pc: https://github.com/codemirror/CodeMirror/blob/master/keymap/sublime.js#L633

since, as you can see, each of the editor components loads in the sublime keymap as well

[benjie]

@acao I'm tempted to remove "potential plugin" from this as I feel this should be baked in. Other plugins should be able to register shortcuts with the system, but keyboard shortcuts are a cross-cutting concern and should be managed centrally. What do you think?

[acao]

agreed, i was thinking that the tool for displaying and overiding the shortcuts should definately be a plugin though

[benjie]

Agreed; editing the keyboard shortcuts would be a plugin such as #795 - but the keyboard shortcut system should be baked in. "potential plugin" tag removed :+1:

[vicary]

In macOS ctrl+shift+P behaves like shift+up which selects one line upwards, not prettifying.

[narajaon]

Is there a way to deactive those custom keybindings ? I'm on linux so I have emacs bindings everywhere and this is such a bad idea to force people to use random shortcuts...

The only reasonable one to keep would be ctrl + enter since it's a standard way to send a submit event to forms.

[acao]

in the past we did discuss the idea of making the extraKeys overrideable with props, though the sublime-style keybindings are still baked in for 1.0 until we move to monaco editor. each keybinding was chosen by users as you can see in past github issues

[narajaon]

Fair enough, I didn't really mean that they were useless. I was just a bit irritated by the fact that we could not have an option to disable them.

[acao]

several good takeaways are coming out of this very old conversation:

• [ ] document graphiql 1.x custom extraKeys keymap, cross-reference sublime keymap (@ToniTepes made this spreadsheet which is a fantastic start)
• [ ] make custom extraKeys keymap extensible/overrideable somehow? on a per-editor or global basis?
• [ ] discuss/document plans for how monaco will change this for 2.x
• [ ] discuss/document plans for a user configurable keybindings configuration for 2.x
• [ ] how will users enable vim/emacs/etc style keybindings plugins alongside the custom configuration?

[acao]

here's a hack for now, we're going to introduce a prop for extraKeys in 1 and 2 that allows you to override the keys and essentially abstracts what we are doing here to a prop

const editor = GraphiQL.getQueryEditor()
   editor.setOption(`extraKeys`, {
     ...(editor.options.extraKeys || {}),
     "CTRL-F": () => // do something or no-op to disable codemirror behavior
   })

[thomasheyenbrock]

Some updates here:

• The new design for v2 will have a modal built-in that shows shortkeys (see here)
• After refactoring the codebase to more modern React we won't introduce props for adding custom keymaps. The editor instances are exposed via context providers, which will allow you to access them and do whatever customizations you like. (Docs for all of this will follow.)

[corysimmons]

omg, that redesign looks so good! 😍

[acao]

@thomasheyenbrock why reinvent the wheel for the modal short key menu when monaco editor already has that built in?

[thomasheyenbrock]

I think the idea here was just to show our custom shortkeys (executing, prettifying, etc.) and not an exhaustive list of the complete CodeMirror keymap (hard to tell since the design is not fully finished). Anyways, we'll have a modal component anyways for the settings, so adding a second one for shortkeys is a kinda low-hanging fruit that improves the overall CodeMirror experience.

[thomasheyenbrock]

graphiql@2 now has a dialog built-in that shows all custom short keys, and it also links to the CodeMirror docs that shows editor-specific short keys.