Template cleanup, autocomplete for more query stuff

packages/web/editor.tsx

@@ -59,6 +59,7 @@ import { FilterList } from "./components/filter";
 import { FilterOption, PageMeta } from "@silverbulletmd/common/types";
 import { syntaxTree } from "@codemirror/language";
 import sandboxSyscalls from "@plugos/plugos/syscalls/sandbox";
+import { eventSyscalls } from "@plugos/plugos/syscalls/event";
 // import globalModules from "../common/dist/global.plug.json";
 
 class PageState {
@@ -148,6 +149,7 @@ export class Editor {
 
     this.system.registerSyscalls(
       [],
+      eventSyscalls(this.eventHook),
       editorSyscalls(this),
       spaceSyscalls(this),
       indexerSyscalls(this.space),
@@ -630,9 +632,15 @@ export class Editor {
               editor.focus();
               if (cmd) {
                 dispatch({ type: "command-run", command: cmd.command.name });
-                cmd.run().catch((e) => {
-                  console.error("Error running command", e.message);
-                });
+                cmd
+                  .run()
+                  .catch((e) => {
+                    console.error("Error running command", e.message);
+                  })
+                  .then(() => {
+                    // Always be focusing the editor after running a command
+                    editor.focus();
+                  });
               }
             }}
             commands={viewState.commands}

packages/web/hooks/slash_command.ts

@@ -8,9 +8,11 @@ import {
 import { slashCommandRegexp } from "../types";
 import { safeRun } from "../../common/util";
 import { Editor } from "../editor";
+import { syntaxTree } from "@codemirror/language";
 
 export type SlashCommandDef = {
   name: string;
+  description?: string;
 };
 
 export type AppSlashCommand = {
@@ -43,7 +45,7 @@ export class SlashCommandHook implements Hook<SlashCommandHookT> {
         this.slashCommands.set(cmd.name, {
           slashCommand: cmd,
           run: () => {
-            return plug.invoke(name, []);
+            return plug.invoke(name, [cmd]);
           },
         });
       }
@@ -59,10 +61,16 @@ export class SlashCommandHook implements Hook<SlashCommandHookT> {
       return null;
     }
     let options: Completion[] = [];
+
+    // No slash commands in comment blocks (queries and such)
+    let currentNode = syntaxTree(ctx.state).resolveInner(ctx.pos);
+    if (currentNode.type.name === "CommentBlock") {
+      return null;
+    }
     for (let [name, def] of this.slashCommands.entries()) {
       options.push({
         label: def.slashCommand.name,
-        detail: name,
+        detail: def.slashCommand.description,
         apply: () => {
           // Delete slash command part
           this.editor.editorView?.dispatch({
@@ -75,6 +83,7 @@ export class SlashCommandHook implements Hook<SlashCommandHookT> {
           // Replace with whatever the completion is
           safeRun(async () => {
             await def.run();
+            this.editor.focus();
           });
         },
       });

packages/web/style.ts

@@ -20,6 +20,7 @@ export default function highlightStyles(mdExtension: MDExt[]) {
     { tag: ct.CodeInfoTag, class: "code-info" },
     { tag: ct.CommentTag, class: "comment" },
     { tag: ct.CommentMarkerTag, class: "comment-marker" },
+    { tag: ct.Highlight, class: "highlight" },
     { tag: t.emphasis, class: "emphasis" },
     { tag: t.strong, class: "strong" },
     { tag: t.atom, class: "atom" },

packages/web/styles/editor.scss

@@ -81,6 +81,10 @@
     background-color: rgba(72, 72, 72, 0.1);
   }
 
+  .highlight {
+    background-color: rgba(255, 255, 0, 0.5);
+  }
+
   .line-fenced-code {
     background-color: rgba(72, 72, 72, 0.1);