Freecodecamp: Editor focus and unfocus hotkeys

[systimotic]

Issue Description

In the switch to React, it seems like a lot features were lost. I fixed one of those previously (https://github.com/freeCodeCamp/freeCodeCamp/pull/11329), and now I found another one: https://github.com/freeCodeCamp/freeCodeCamp/pull/8241

I found this because I was searching issues about unfocusing the editor as suggested on the forum here. I ran into this myself previously, and I feel this would be a great addition. It's really annoying to have to grab the mouse to be able to the keyboard 😅

I managed to implement both of these, so if we agree these features would be good to have, I can create a PR. 👍

@freeCodeCamp/moderators Feedback?

[raisedadead]

Yes, please... and lets try and standardize this time, for simplicity

[systimotic]

@raisedadead PR is #12829
Can you elaborate on what you mean by "try and standardize?"

Edit: referenced wrong issue...

[QuincyLarson]

@systimotic I agree that this would be really helpful. Ideally, a single keystroke, rather than a sequence (kind of like how our ctrl+enter runs code).

[raisedadead]

@systimotic apologies for delay in getting back, we would want the keyboard shortcuts in tune with gmail and github and do that sitewide.

More reference:
https://help.github.com/articles/using-keyboard-shortcuts/

And maybe even list this in our wiki.

[systimotic]

@raisedadead No problem!
I wasn't able to spot hotkeys on GitHub that do what these keys should do.

You suggested Ctrl + Shift + E to focus the editor in #8193, so that's what I used. I can change it if it would be better as something else.
I used escape to unfocus the editor, as it's what I try automatically when I want to unfocus something.

I previously wrote a wiki article about our keyboard shortcuts, inspired by #8104.

I just noticed I linked my comment that should've gone to the PR to this issue itself 😅 I should put "Amazing at pasting the wrong links" in my portfolio 😄 The actual PR is https://github.com/freeCodeCamp/freeCodeCamp/issues/12829

[raisedadead]

I should be more clear in my views, sorry... :sweat_smile: !

So here you go:

• GitHub uses gi for navigating to issues.
• Note these are to pressed individually a
• This works only when the focus is not on any textarea etc.
• We should standardize to something similar only using fefor editor.
• We should probably standardize this for our other shortcuts as well, leaving the submission one of course because we don't want to break the existing user experience and "habit".
• These keys shortcuts should be distinct clearly and documented only in the wiki, etc. for power users.

Why f? Well because g is used by "gmail" and "github".
Wht do you think? Once again, sorry for not being clear earlier. And thanks a lot for the feature!

[systimotic]

@raisedadead No worries!

Note these are to pressed individually
These keys shortcuts should be distinct clearly and documented only in the wiki, etc. for power users.

✔️ 👍 This is what we currently do.

Why f? Well because g is used by "gmail" and "github".

I would agree, but we're already using g for so many shortcuts, I think it would probably be better to stick to that. I was also under the impression that the "g" stood for "go", rather than the name of the product. This especially makes sense as all the hotkeys that don't "go" anywhere do not start with "g".

This works only when the focus is not on any textarea etc.

Yep, which is why all editor hotkeys involve a modifier key. This is a large part of the reason why I want an unfocussing hotkey so bad, otherwise I can't use most of the other hotkeys without going to the mouse first. I think escape is a good choice for an unfocussing hotkey, but I'm open to suggestions for other keys.

To stick to the theme of all editor-related hotkeys being "a single keystroke, rather than a sequence" (quoting Quincy), I like Ctrl + Shift + E to focus the editor. If we want to be more like GitHub, I suggest we do something like e, like they have s to focus the search bar.

[raisedadead]

I suggest we do something like e, like they have s to focus the search bar.

:100: x :100: !

[dhcodes]

@raisedadead should I unmerge this then? I didn't realize there were other changes in the works.

[raisedadead]

@dhcodes we can have separate PRs if everyone agrees.

[systimotic]

I'm sorry, I'm not following what's going on. 😕 What other changes are in the works?

I may have to redo some of the changes as per https://github.com/freeCodeCamp/freeCodeCamp/pull/12832#discussion_r98515395

I previously shared this wiki article in this thread, showing that the hotkeys seem standardized and document as suggested.