impr(command line): add 'ctrl p' and 'ctrl n' navigation key binds (@xaskii) (#5949)

### Description

Adds `<Ctrl-p>` and `<Ctrl-n>` binds to the command-line. These are from
Emacs, but you can navigate up and down menus all over macOS and its
apps with these keybinds.

#### Relevant PRs
Refactor that removed the binds:
https://github.com/monkeytypegame/monkeytype/pull/5180
adding "vim keybinds":
https://github.com/monkeytypegame/monkeytype/pull/4019

Confirmed working on macOS (safari, firefox, and chrome). On windows,
`<Ctrl-n>`: opening a new window takes priority, but that's expected
behaviour.

### Checks

- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language or a theme?
- [ ] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
  - [ ] If is a theme, did you add the theme.css?
- Also please add a screenshot of the theme, it would be extra awesome
if you do so!
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->

Closes issue discussed in discord.

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
This commit is contained in:
xaskii 2024-10-07 07:40:49 -04:00 committed by GitHub
parent 006af5aff8
commit 0a8aac26c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -619,11 +619,19 @@ const modal = new AnimatedModal({
input.addEventListener("keydown", async (e) => {
mouseMode = false;
if (e.key === "ArrowUp" || (e.key.toLowerCase() === "k" && e.ctrlKey)) {
if (
e.key === "ArrowUp" ||
(e.ctrlKey &&
(e.key.toLowerCase() === "k" || e.key.toLowerCase() === "p"))
) {
e.preventDefault();
await decrementActiveIndex();
}
if (e.key === "ArrowDown" || (e.key.toLowerCase() === "j" && e.ctrlKey)) {
if (
e.key === "ArrowDown" ||
(e.ctrlKey &&
(e.key.toLowerCase() === "j" || e.key.toLowerCase() === "n"))
) {
e.preventDefault();
await incrementActiveIndex();
}