From bf49994d100a1aa16ea7f4e579868c503e316ac0 Mon Sep 17 00:00:00 2001
From: eugene <eugeneheiner14@gmail.com>
Date: Thu, 9 Jan 2025 12:03:00 +0800
Subject: [PATCH] feat(editor): Add keyboard shortcuts for completion
 navigation (#3382)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📝 Summary

Add Alt-J/K (Ctrl-J/K on macOS) shortcuts to navigate through the
completion menu, inspired by Vim:
- Alt-J/Ctrl-J: Move down in completion list
- Alt-K/Ctrl-K: Move up in completion list

This provides a more efficient way to navigate completions without using
arrow keys.


https://github.com/user-attachments/assets/3c261966-e2cb-454e-9862-d26380d32cdf


## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [x] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

## 📜 Reviewers

<!--
Tag potential reviewers from the community or maintainers who might be
interested in reviewing this pull request.

Your PR will be reviewed more quickly if you can figure out the right
person to tag with @ -->

@akshayka OR @mscolnick
---
 frontend/src/core/codemirror/cm.ts | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/frontend/src/core/codemirror/cm.ts b/frontend/src/core/codemirror/cm.ts
index e121df6663f..43a3358fb92 100644
--- a/frontend/src/core/codemirror/cm.ts
+++ b/frontend/src/core/codemirror/cm.ts
@@ -4,6 +4,8 @@ import {
   closeBrackets,
   closeBracketsKeymap,
   startCompletion,
+  moveCompletionSelection,
+  completionStatus,
 } from "@codemirror/autocomplete";
 import {
   history,
@@ -170,6 +172,30 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
         },
         preventDefault: true,
       },
+      {
+        key: "Alt-j",
+        mac: "Ctrl-j",
+        run: (cm) => {
+          if (completionStatus(cm.state) !== null) {
+            moveCompletionSelection(true)(cm);
+            return true;
+          }
+          return false;
+        },
+        preventDefault: true,
+      },
+      {
+        key: "Alt-k",
+        mac: "Ctrl-k",
+        run: (cm) => {
+          if (completionStatus(cm.state) !== null) {
+            moveCompletionSelection(false)(cm);
+            return true;
+          }
+          return false;
+        },
+        preventDefault: true,
+      },
     ]),
     keymap.of([...historyKeymap, indentWithTab]),
   ];