graphiql icon indicating copy to clipboard operation
graphiql copied to clipboard

Gesture for multi-line comments

Open glennblock opened this issue 6 years ago • 10 comments

I've read the discussion in the GraphQL repo about not supporting multi-line to simplify the spec and because most editors support a gesture for commenting / uncommenting multiple lines.

Has any consideration been given to adding to graphiql the ability to comment / uncomment similarly with a single gesture? Basically a keystroke / button that you could press after highlighting some text in the query window and it would immediately add or remove # within the highlighted text.

glennblock avatar Apr 11 '19 03:04 glennblock

that works already @glennblock! try selecting a block of text and doing cmd + / or ctrl + /. try it here for example

acao avatar Jun 23 '19 13:06 acao

Doesn't work with a Danish keyboard, where / is on shift + 7. ctrl + shift + 7 does nothing :-(

pmorch avatar Dec 08 '21 11:12 pmorch

Doesn't work with a Danish keyboard, where / is on shift + 7. ctrl + shift + 7 does nothing :-(

Same situation with Spanish keyboard. Ctrl + shift + 7 does nothing. I tried with several keys and I found it right next to the ENTER key. In the Spanish Keyboard it is the ç key. So, in windows, Spanish layout keyboard, Ctrl+ç comments out a block of query. This ç key is in the same position as the * ' key in the Danish layout.

ananta-dev avatar Jan 30 '22 15:01 ananta-dev

Hola @freenrg - great that you found a workaround for Spanish keyboards. It doesn't work for Danish keyboards though. The button you're referring to gives ' when pressed and * when pressed with shift. Neither ctrl + ' nor ctrl + shift + ' do anything that was visible to me when I tried it here.

pmorch avatar Jan 30 '22 23:01 pmorch

This already works in monaco-graphql, so folks are free to backport it to codemirror-graphql

acao avatar Jan 31 '22 03:01 acao

In Portuguese keyboard this doesn't work either and the solutions provided above don't work because cmd+ç (I'm on a mac) maps to History Back shortcut in the browser. The only solution I have is to switch to US keyboard and then use the cmd + / to do block comments.

alias-mac avatar Feb 12 '22 13:02 alias-mac

This is a bug with codemirror from what I can tell? We just provide a simple string for the key combo to the codemirror api using extraKeys. I wish the codemirror docs had anchor links :/ . just find in page for extraKeys

https://codemirror.net/doc/manual.html

There is a single file where codemirror keeps all of these keymaps, and it biases for English keyboards I’m assuming, but this is the codemirror-graphql repo not the codemirror repo so there isn’t much we can do ourselves.

It might be we can just add more extraKeys to the graphiql/src/utilities/extraKeys.js helper so people have workarounds. This issue can only be solved internally in codemirror 5, or by adding more extraKeys

i only have access to US and german keyboards, can someone try https://monaco-graphql.netlify.com and see if this issue is resolved in monaco on their non-compatible keyboard?

acao avatar Feb 16 '22 11:02 acao

i only have access to US and german keyboards, can someone try https://monaco-graphql.netlify.com/ and see if this issue is resolved in monaco on their non-compatible keyboard?

@acao I just tried on a Swedish layout, doesn't work there.

aericson avatar Jul 13 '22 15:07 aericson

another solution may be to change the codemirror keyMap. graphiql 2.0.0 will still use codemirror 5 so it will remain the same for a while until 3.0.0

this is the current codemirror 5 sublime keyMap we use: https://github.com/codemirror/codemirror5/blob/c401c299ce13cd99d8b6798a9bb21b443dec4493/keymap/sublime.js#L590

you can now in 1.x configure for vim or emacs for keyMap instead of the default

perhaps we can also expose more codemirror methods as props to allow customization of the default codemirror 5 keymaps. You can also submit issues to the codemirror 5 repository where these keymaps are defined!

acao avatar Jul 14 '22 10:07 acao