From 6590c94fd704e90bc0e9642fdf09088447792588 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Tue, 12 Nov 2024 15:00:34 +0100
Subject: [PATCH] add: magic key palette keyboard handle

---
 src/extras/editor/magicKey.ts | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/extras/editor/magicKey.ts b/src/extras/editor/magicKey.ts
index 347219f..226e44c 100644
--- a/src/extras/editor/magicKey.ts
+++ b/src/extras/editor/magicKey.ts
@@ -313,7 +313,7 @@ class PluginState {
 </style>
 <div class="popup-content">
   <input type="text" class="popup-input" placeholder="Search commands" />
-  <div class="popup-list">
+  <div class="popup-list" tabindex="-1">
     ${Object.entries(this.commands)
       .map(
         ([id, command]) => `
@@ -375,6 +375,38 @@ class PluginState {
       } else if (event.key === "ArrowDown") {
         this._selectCommand(this.selectedCommandIndex + 1, "down");
         event.preventDefault();
+      } else if (event.key === "ArrowLeft") {
+        // Select the first command
+        this._selectCommand(this.commands.length, "up");
+        event.preventDefault();
+      } else if (event.key === "ArrowRight") {
+        // Select the last command
+        this._selectCommand(-1, "down");
+        event.preventDefault();
+      } else if (event.key === "Tab") {
+        // If has input, autocomplete the selected command to the first space
+        const command = this.commands[this.selectedCommandIndex];
+        if (!command) {
+          return;
+        }
+        if (!input.value) {
+          return;
+        }
+        const title = command.title!;
+        // Compute after the matched part
+        const matchedIndex = title
+          .toLowerCase()
+          .indexOf(input.value.toLowerCase());
+        const spaceIndex = title.indexOf(
+          " ",
+          matchedIndex + input.value.length,
+        );
+        if (spaceIndex >= 0) {
+          input.value = title.slice(0, spaceIndex);
+        } else {
+          input.value = title;
+        }
+        event.preventDefault();
       } else if (event.key === "Enter") {
         event.preventDefault();
         const command = this.commands[this.selectedCommandIndex];
@@ -384,6 +416,7 @@ class PluginState {
         }
         this._executeCommand(this.selectedCommandIndex, state);
       } else if (event.key === "Escape") {
+        event.preventDefault();
         this._closePopup();
       } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         this._closePopup();