Comment Line command cannot be used on German keyboards

[trych]

Nature of issue?

• Found a bug

Details about the bug:

• Web browser and version: Chrome, Firefox, Safari (and possibly others)
• Operating System: macOS
• Steps to reproduce this bug:

Using Cmd + / to comment lines does not work on a German (and possibly other) keyboard layouts as to type a / you have to use Shift + 7, so the comment keyboard shortcut becomes Cmd + Shift + 7. This shortcut however triggers some native browser functions (brings you to the menu search in Firefox and Chrome, brings you to some Tab overview in Safari).

So to allow for German/international users to utilize this shortcut would either require to overwrite the native browser commands or to add an alternative shortcut to comment lines.

[catarak]

Thanks for report this issue! The Cmd + / command is defined by a CodeMirror addon, specifically the Sublime Text keymap. I'm sure other folks have run into this issue using CodeMirror with non-US keyboards, but I'm having a hard time figuring out how others have solved this (here's an example of someone having the same issue: jupyter/notebook#3753).

I tried using a German keyboard with Sublime text, and I noticed that Cmd + Shift + 7 does work for commenting/uncommented. I'm a little stumped about how to fix this issue. I'm very open to thoughts and ideas!

[trych]

I tried using a German keyboard with Sublime text, and I noticed that Cmd + Shift + 7 does work for commenting/uncommented

Yes, I use it in Sublime all the time. Most other (standalone) code editors have the same shortcut that works well. The issue here is simply that it clashes with the predefined browser shortcuts, I think.

I just checked other code editors (CodePen and jsfiddle) and they suffer from the same problem. However, since accessibility is such an important part for p5.js, it would be great to find an actual solution to this problem.

I think by far the easiest approach would be to additionally offer an alternative shortcut for commenting, something like Cmd + K perhaps?

[catarak]

agreed! i wonder what another common shortcut for commenting code is? all i could find is in visual studio, it uses Cmd + K + C to comment and Cmd + K + U to uncomment.

[trych]

Not sure about common ones. But I seem to remember that somewhere I had to use Cmd + K. I can't for the life of me remember which package it was. Anyway, Cmd + K does not seem to conflict with anything else in the three browsers I tested it with (Safari, Chrome, Firefox), at least on Mac.

Could maybe somebody check on Windows/other browsers? Currently I am not even sure, if this is a Mac problem only, or if it only affects Windows users. Any German Windows p5 users here?

[catarak]

i should be able to test this by using browser stack + switching my keyboard to a german keyboard. let me try it and report back...

[catarak]

btw, i did some research, and apparently Cmd + K is a keyboard shortcut from notepad++.

[catarak]

hmm, i noticed that Cmd + K and Ctrl + K seemed to be mapped to a keyboard shortcut that deletes the text from where the cursor is to the end of the line. so i think, unfortunately, we'll have to figure out a different shortcut!

[trych]

Ah, okay. I didn't realize that all the Sublime Shortcuts are mapped into the p5 editor. Well, in this case it's probably best to have a close look at a Sublime Shortcut List and figure out which keys are still available.

[catarak]

It would be nice to not override them if possible, but I'm willing to do it where it makes sense!

[trych]

Hm, okay, I looked at the Sublime Shortcut list (which was highly educational btw 😄 ) and it seems most keys are taken. Those that are not taken are in turn taken by the browser. I thought Cmd + # might be a good shortcut, as it can be typed without using Shift on a German keyboard, but I figured that the Spanish keyboard layout probably suffers from the same commenting issue and on the spanish keyboard, the # symbol can only be typed by using alt.

The only shortcut that I found now that seems to neither interfere with default browser shortcuts, nor with Sublime shortcuts and is easy to type would be Cmd + .. At least as far as I can tell. I am not sure, seems a bit weird to map a commenting shortcut to such an important key. What do you think?

[catarak]

I like Cmd (Ctrl on windows) + .! I also like that it's close to the / key, at least on a QWERTY/US keyboard.

[seralouk]

I have a macbook and I use jupyter from Firefox. I have tried all possible combinations for commenting/uncommenting a part of code but no luck.

Any tip? How can I modify the shortcuts?

[trych]

Only two options that I know of currently:

1.) Use an external keyboard with a numpad and use Cmd + / (the / on the numpad)

2.) Use a third party software for remapping your keys. I did this on my Mac using Keyboard Maestro, and setting up a custom Macro for remapping my keys in Firefox, see attached screenshot.

[seralouk]

Thanks. I also found a crazy solution but it is not very convenient but it works regardless of the keyboard's language.

• Press the Option button and keep holding it. The cursor will change its shape into a big plus sign.

• Next, using your mouse, to point to the beginning of the first line you want to comment and while holding the Option button pull down your mouse until the last line you want to comment.

• Finally, you can release the Option button and then use the # to comment (on my mac # is Option + 3.

[trych]

Yeah, that is just inserting multiple cursor and works regardless of keyboard language, but does not really help you if you already have multiple selections that you want to comment out via shortcut.

[catarak]

After looking over this discussion again, I think the right solution is to add Command/Control + . as an alternative keyboard shortcut for different keyboard layouts.

[trych]

I agree. That should be simple to implement and give all those an easy alternative that cannot use the primary shortcut.

[SunFIow]

Hey, not sure if this is the right place or a new issue should be opened.
Came across this issue after trying to use shortcuts on a german keyboard.
They aren't document under the Help -> Keyboard Shortcuts popup.
I managed to find most of them, but others may gave up and couldn't enjoy the p5-webeditor in all it's glory.
So properly good to add them into the popup as well, unfortunately i don't know how, but following is a list of my corresponding shortcuts.

Currently Listed	Description	Working for me
⇧ + Tab	Tidy	⇧ + Tab
⌃ + F	Find Text	Ctrl + F
⌃ + G	Find Next Text Match	Ctrl + G
⌃ + ⇧ + G	Find Previous Text Match	Ctrl + ⇧ + G
⌃ + [	Indent Code Left	Ctrl + ß
⌃ + ]	Indent Code Right	Ctrl + ´
⌃ + /	Comment Line	Ctrl + #
⌃ + S	Save	Ctrl + S
⌃ + Enter	Start Sketch	Ctrl + Enter
⌃ + ⇧ + Enter	Stop Sketch	Ctrl + ⇧ + Enter
⌃ + ⇧ + 1	Turn On Accessible Output	NONE
⌃ + ⇧ + 2	Turn Off Accessible Output	NONE

Note:
On my keyboard ß is left to ´, which is left to return.

[catarak]

Thank you @SunFIow for the research! Maybe this is only true for American keyboards or Mac OS keyboards, but the Control key is also denoted by the shorthand ⌃. I think it would make sense to change the keyboard shortcuts to say Ctrl if that feels more clear!

[cuspime]

For several days I had been looking for a real answer. Thanks to this post (https://stackoverflow.com/questions/19318298/how-can-i-block-comment-code-in-the-ipython-notebook/54762141#54762141 ) I did!! It was as simple as a notebook extension on which you can customise the comment command!!!

Lovely!

[arathorn76]

@catarak another German here...
the control key is most often (or at least often) marked "Strg" on german keyboards.
I assume (I know, dangerous territory) that most users of German keyboards who are interested in programming would be ok with "ctrl" as well as "Strg".
I did occasionally stumble ober the shorthand "^"-button-graphic but it is much less usual (in my experience).

In effect I would like to second the idea of @SunFIow . It would be a great help to have documentation about the keyboard shortcuts that work on German keyboards.
I just checked and while the texts are translated according to language settings the depicted shortcuts are not changed by language setting.

On the other hand I like the uncluttered UI as it is.
Maybe it would be possible to leave the pop-up as it is at the moment but add a new option to the "help" menu.
I´d suggest "Alternate Shortcuts" in between "Keyboard Shortcuts" and "Reference". It´s function would be a link to a page similar to the Reference page giving a choice of keyboard layouts as links to individual keyboard shortcut pages.
(another assumption here: German keyboards are not the only keyboard layouts causing this kind of trouble. If it were only German keyboards then the additional menu option could just be called "Keyb. Shortcuts (de)" or similar and open a different pop-up)

As for my motivation for adding to this seemingly old and low-priority Issue:
In my day job I´m an ABAP developer. I just had the urge to make myself familiar with yet another programming language an chose js because why not and p5.js because of Coding Train videos.
The (perceivedly) not working shortcuts nearly drove me away.
IMO those keyboard shortcuts and the associated cheat sheet definitely are belonging to those "small things" that can make or break user experience.

[catarak]

@arathorn76 thank you for your thoughts and apologies for not being on top of this issue! It's really helpful. It seems like there's an consensus around:

1. Adding Command/Control + . as an alternative keyboard shortcut for different keyboard layouts for commenting/uncommenting code
2. Changing instances of ⌃ to Ctrl.

Are there other keyboard shortcuts that aren't working for you? It would be great to know more.

I just checked and while the texts are translated according to language settings the depicted shortcuts are not changed by language setting.

I'm not sure it makes sense to tie the keyboard layout to the selected translation. My instinct is that these don't line up 100% of the time.

[arathorn76]

Are there other keyboard shortcuts that aren't working for you? It would be great to know more.

@catarak I composed a cheat sheet for my personal use that I just updated. It now reflects the answer to your question.
You can find it at https://arathorn76.github.io/p5.js-cheat-sheets/KeyboardShortcutsGerman.html or at https://github.com/arathorn76/p5.js-cheat-sheets.
(sorry for that kind of html source. My web editing days ended while html 3.x was a thing...)

I'm not sure it makes sense to tie the keyboard layout to the selected translation. My instinct is that these don't line up 100% of the time.

Your instinct is absolutely right. I´m an example of this. I´m using a German keyboard yet my editor settings point to English. I´m using and thinking most tchnical terms in english so I make my editor line up to that.

[huebinger]

Hey, I'm currently trying to get into contributing to open source and started looking into this issue!

I'm on a mac with a german keyboard as well.

I tried adding Meta + . to toggle comments in the extraKeys section in Editor.jsx which worked so far. If this is a viable solution to this problem I'd suggest to simply offer two ways to toggle comments and list them both in the shortcuts reference like so: (yes, missing white space after the 'or')

I also checked whether the discussed cheatsheet works for me, I found that

• Shift + Tab isn't listed in the editor for tidy (anymore?) but the working Cmd + Shift + Fis
• Cmd + ß toggles comments instead of indent left
• Cmd + ´ didn't indent right
  • funnily I can toggle open and close the console with Ctrl + ´
• I can comfortably toggle with Shift and Shift + Tab
• Cmd + # doesn't do anything.

If the Shift and Shift + Tab indentation method works for other setups too, it should also be listed in the shortcut reference.