Custom template slash commands

web/hooks/slash_command.ts

@@ -4,6 +4,7 @@ import { Completion, CompletionContext, CompletionResult } from "../deps.ts";
 import { safeRun } from "../../common/util.ts";
 import { Client } from "../client.ts";
 import { syntaxTree } from "../deps.ts";
+import { SlashCompletion } from "$sb/app_event.ts";
 
 export type SlashCommandDef = {
   name: string;
@@ -53,9 +54,9 @@ export class SlashCommandHook implements Hook<SlashCommandHookT> {
   }
 
   // Completer for CodeMirror
-  public slashCommandCompleter(
+  public async slashCommandCompleter(
     ctx: CompletionContext,
-  ): CompletionResult | null {
+  ): Promise<CompletionResult | null> {
     const prefix = ctx.matchBefore(slashCommandRegexp);
     if (!prefix) {
       return null;
@@ -68,6 +69,7 @@ export class SlashCommandHook implements Hook<SlashCommandHookT> {
     if (currentNode.type.name === "CommentBlock") {
       return null;
     }
+
     for (const def of this.slashCommands.values()) {
       options.push({
         label: def.slashCommand.name,
@@ -90,6 +92,48 @@ export class SlashCommandHook implements Hook<SlashCommandHookT> {
         },
       });
     }
+
+    const slashCompletions: SlashCompletion[] | null = await this.editor
+      .completeWithEvent(
+        ctx,
+        "slash:complete",
+      ) as any;
+
+    if (slashCompletions) {
+      for (const slashCompletion of slashCompletions) {
+        options.push({
+          label: slashCompletion.label,
+          detail: slashCompletion.detail,
+          apply: () => {
+            // Delete slash command part
+            this.editor.editorView.dispatch({
+              changes: {
+                from: prefix!.from + prefixText.indexOf("/"),
+                to: ctx.pos,
+                insert: "",
+              },
+            });
+            // Replace with whatever the completion is
+            safeRun(async () => {
+              const [plugName, functionName] = slashCompletion.invoke.split(
+                ".",
+              );
+              const plug = this.editor.system.system.loadedPlugs.get(plugName);
+              if (!plug) {
+                this.editor.flashNotification(
+                  `Plug ${plugName} not found`,
+                  "error",
+                );
+                return;
+              }
+              await plug.invoke(functionName, [slashCompletion]);
+              this.editor.focus();
+            });
+          },
+        });
+      }
+    }
+
     return {
       // + 1 because of the '/'
       from: prefix.from + prefixText.indexOf("/") + 1,