Implement autocomplete for cd command

pindab0ter · Apr 10, 2024 · 528acce · 528acce
1 parent 5c9cd13
commit 528acce
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/assets/ts/terminal/Terminal.ts b/assets/ts/terminal/Terminal.ts
@@ -110,44 +110,43 @@ export class Terminal {
       return;
     }
 
+    this.clearOutput();
+
     const { command, args } = getCommandFromInput(input);
 
-    if (command) {
-      if (command instanceof AutocompletingCommand) {
-        const completions = command.autocomplete(args[args.length - 1]);
-        if (completions.length === 1) {
-          args[args.length - 1] = completions[0];
-          this.setInput(`${command.name} ${args.join(" ")}`);
-        }
+    // Autocomplete command arguments
+    if (command && command instanceof AutocompletingCommand && args.length > 0) {
+      const completions = command.autocomplete(args[args.length - 1]);
+      if (completions.length === 1) {
+        args[args.length - 1] = completions[0];
+        this.setInput(`${command.name} ${args.join(" ")}`);
+      }
+
+      if (completions.length > 1) {
+        this.print(...completions);
+        this.setInput(`${command.name} ${longestCommonPrefix(completions)}`);
       }
       return;
     }
 
-    const matchingCommands = Terminal.commands.filter((command: Command) =>
-      command.name.startsWith(input),
-    );
+    // Autocomplete command names
+    const matchingCommandNames = Terminal.commands
+      .filter((command: Command) => command.name.startsWith(input))
+      .map((command: Command) => command.name);
 
-    switch (matchingCommands.length) {
+    switch (matchingCommandNames.length) {
       case 0:
         return;
 
       case 1:
-        const matchingCommand = matchingCommands[0];
-        if (input.length < matchingCommand.name.length) {
-          this.inputElement.textContent = matchingCommand.name;
-          this.promptBlurElement.textContent = matchingCommand.name;
-          this.moveCaretToEnd();
+        if (input.length < matchingCommandNames[0].length) {
+          this.setInput(matchingCommandNames[0]);
         }
         return;
 
       default:
-        const matchingPrefix = longestCommonPrefix(
-          matchingCommands.map((command: Command) => command.name),
-        );
-        this.setInput("");
-        this.inputElement.textContent = matchingPrefix;
-        this.promptBlurElement.textContent = matchingPrefix;
-        this.moveCaretToEnd();
+        this.print(...matchingCommandNames);
+        this.setInput(longestCommonPrefix(matchingCommandNames));
     }
     return;
   }

diff --git a/assets/ts/terminal/commands/ChangeDirectory.ts b/assets/ts/terminal/commands/ChangeDirectory.ts
@@ -2,8 +2,9 @@ import { Command } from "../Command";
 import { HugoPage } from "../../types/hugo";
 import { Terminal } from "../Terminal";
 import { getAllPages, getPagesInPath, slugPath } from "../helpers";
+import { AutocompletingCommand } from "../AutocompletingCommand";
 
-export class ChangeDirectory extends Command {
+export class ChangeDirectory extends AutocompletingCommand {
   public readonly name: string = "cd";
   public readonly description: string = "Change directory";
   private readonly allPages: HugoPage[] = getAllPages();
@@ -80,4 +81,12 @@ export class ChangeDirectory extends Command {
       return;
     }
   }
+
+  public autocomplete(arg: string): string[] {
+    const suggestions = this.pagesInPath
+      .map((page: HugoPage) => slugPath(page))
+      .map((path: string) => path.replace(window.location.pathname, ""));
+
+    return suggestions.filter((path: string) => path.startsWith(arg));
+  }
 }