CommandLink alias syntax

web/cm_plugins/clean.ts

@@ -10,6 +10,7 @@ import { listBulletPlugin } from "./list.ts";
 import { tablePlugin } from "./table.ts";
 import { taskListPlugin } from "./task.ts";
 import { cleanWikiLinkPlugin } from "./wiki_link.ts";
+import { cleanCommandLinkPlugin } from "./command_link.ts";
 
 export function cleanModePlugins(editor: Editor) {
   return [
@@ -36,5 +37,6 @@ export function cleanModePlugins(editor: Editor) {
     listBulletPlugin,
     tablePlugin,
     cleanWikiLinkPlugin(editor),
+    cleanCommandLinkPlugin(editor),
   ] as Extension[];
 }

web/cm_plugins/command_link.ts

@@ -0,0 +1,99 @@
+import { commandLinkRegex, pageLinkRegex } from "../../common/parser.ts";
+import { ClickEvent } from "../../plug-api/app_event.ts";
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+} from "../deps.ts";
+import { Editor } from "../editor.tsx";
+import {
+  ButtonWidget,
+  invisibleDecoration,
+  isCursorInRange,
+  iterateTreeInVisibleRanges,
+} from "./util.ts";
+
+/**
+ * Plugin to hide path prefix when the cursor is not inside.
+ */
+export function cleanCommandLinkPlugin(editor: Editor) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+      constructor(view: EditorView) {
+        this.decorations = this.compute(view);
+      }
+      update(update: ViewUpdate) {
+        if (
+          update.docChanged || update.viewportChanged || update.selectionSet
+        ) {
+          this.decorations = this.compute(update.view);
+        }
+      }
+      compute(view: EditorView): DecorationSet {
+        const widgets: any[] = [];
+        // let parentRange: [number, number];
+        iterateTreeInVisibleRanges(view, {
+          enter: ({ type, from, to }) => {
+            if (type.name !== "CommandLink") {
+              return;
+            }
+            if (isCursorInRange(view.state, [from, to])) {
+              return;
+            }
+
+            const text = view.state.sliceDoc(from, to);
+            const match = commandLinkRegex.exec(text);
+            if (!match) return;
+            const [_fullMatch, command, _pipePart, alias] = match;
+
+            // Hide the whole thing
+            widgets.push(
+              invisibleDecoration.range(
+                from,
+                to,
+              ),
+            );
+
+            const linkText = alias || command;
+            // And replace it with a widget
+            widgets.push(
+              Decoration.widget({
+                widget: new ButtonWidget(
+                  linkText,
+                  `Run command: ${command}`,
+                  "sb-command-button",
+                  (e) => {
+                    if (e.altKey) {
+                      // Move cursor into the link
+                      return view.dispatch({
+                        selection: { anchor: from + 2 },
+                      });
+                    }
+                    // Dispatch click event to navigate there without moving the cursor
+                    const clickEvent: ClickEvent = {
+                      page: editor.currentPage!,
+                      ctrlKey: e.ctrlKey,
+                      metaKey: e.metaKey,
+                      altKey: e.altKey,
+                      pos: from,
+                    };
+                    editor.dispatchAppEvent("page:click", clickEvent).catch(
+                      console.error,
+                    );
+                  },
+                ),
+              }).range(from),
+            );
+          },
+        });
+        return Decoration.set(widgets, true);
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+}

web/cm_plugins/hide_mark.ts

@@ -25,7 +25,7 @@ const typesWithMarks = [
   "InlineCode",
   "Highlight",
   "Strikethrough",
-  "CommandLink",
+  // "CommandLink",
 ];
 /**
  * The elements which are used as marks.
@@ -35,7 +35,7 @@ const markTypes = [
   "CodeMark",
   "HighlightMark",
   "StrikethroughMark",
-  "CommandLinkMark",
+  // "CommandLinkMark",
 ];
 
 /**

web/cm_plugins/util.ts

@@ -35,6 +35,29 @@ export class LinkWidget extends WidgetType {
   }
 }
 
+export class ButtonWidget extends WidgetType {
+  constructor(
+    readonly text: string,
+    readonly title: string,
+    readonly cssClass: string,
+    readonly callback: (e: MouseEvent) => void,
+  ) {
+    super();
+  }
+  toDOM(): HTMLElement {
+    const anchor = document.createElement("button");
+    anchor.className = this.cssClass;
+    anchor.textContent = this.text;
+    anchor.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.callback(e);
+    });
+    anchor.setAttribute("title", this.title);
+    return anchor;
+  }
+}
+
 /**
  * Check if two ranges overlap
  * Based on the visual diagram on https://stackoverflow.com/a/25369187

web/cm_plugins/wiki_link.ts

@@ -6,7 +6,6 @@ import {
   EditorView,
   ViewPlugin,
   ViewUpdate,
-  WidgetType,
 } from "../deps.ts";
 import { Editor } from "../editor.tsx";
 import {
@@ -41,7 +40,6 @@ export function cleanWikiLinkPlugin(editor: Editor) {
             if (type.name !== "WikiLink") {
               return;
             }
-            // Adding 2 on each side due to [[ and ]] that are outside the WikiLinkPage node
             if (isCursorInRange(view.state, [from, to])) {
               return;
             }