Replace (wiki) links with proper link widgets for better click behavior

web/cm_plugins/link.ts

@@ -1,7 +1,4 @@
-// Forked from https://codeberg.org/retronav/ixora
-// Original author: Pranav Karawale
-// License: Apache License 2.0.
-
+import { ClickEvent } from "../../plug-api/app_event.ts";
 import {
   Decoration,
   DecorationSet,
@@ -9,54 +6,91 @@ import {
   ViewPlugin,
   ViewUpdate,
 } from "../deps.ts";
+import { Editor } from "../editor.tsx";
 import {
-  checkRangeOverlap,
   invisibleDecoration,
+  isCursorInRange,
   iterateTreeInVisibleRanges,
 } from "./util.ts";
+import { LinkWidget } from "./util.ts";
 
-function getLinkAnchor(view: EditorView) {
-  const widgets: any[] = [];
+export function linkPlugin(editor: Editor) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet = Decoration.none;
+      constructor(readonly view: EditorView) {
+        this.decorations = this.calculateDecorations();
+      }
+      calculateDecorations() {
+        const widgets: any[] = [];
+        const view = this.view;
 
-  iterateTreeInVisibleRanges(view, {
-    enter: ({ type, from, to, node }) => {
-      if (type.name !== "URL") return;
-      const parent = node.parent;
-      const blackListedParents = ["Image"];
-      if (parent && !blackListedParents.includes(parent.name)) {
-        const marks = parent.getChildren("LinkMark");
-        const ranges = view.state.selection.ranges;
-        const cursorOverlaps = ranges.some(({ from, to }) =>
-          checkRangeOverlap([from, to], [parent.from, parent.to])
-        );
-        if (!cursorOverlaps) {
-          widgets.push(
-            ...marks.map(({ from, to }) => invisibleDecoration.range(from, to)),
-            invisibleDecoration.range(from, to),
-          );
+        iterateTreeInVisibleRanges(this.view, {
+          enter: ({ type, from, to }) => {
+            if (type.name !== "Link") {
+              return;
+            }
+            // Adding 2 on each side due to [[ and ]] that are outside the WikiLinkPage node
+            if (isCursorInRange(view.state, [from, to])) {
+              return;
+            }
+            // Hide the whole thing
+            widgets.push(
+              invisibleDecoration.range(
+                from,
+                to,
+              ),
+            );
+
+            const text = view.state.sliceDoc(from, to);
+            // Links are of the form [hell](https://example.com)
+            const [anchorPart, linkPart] = text.split("]("); // Not pretty
+            const cleanAnchor = anchorPart.substring(1); // cut off the initial [
+            const cleanLink = linkPart.substring(0, linkPart.length - 1); // cut off the final )
+
+            widgets.push(
+              Decoration.widget({
+                widget: new LinkWidget(
+                  cleanAnchor,
+                  `Click to visit ${cleanLink}`,
+                  "sb-link",
+                  (e) => {
+                    if (e.altKey) {
+                      // Move cursor into the link, approximate location
+                      return view.dispatch({
+                        selection: { anchor: from + 1 },
+                      });
+                    }
+                    // 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);
+      }
+      update(update: ViewUpdate) {
+        if (
+          update.docChanged ||
+          update.viewportChanged ||
+          update.selectionSet
+        ) {
+          this.decorations = this.calculateDecorations();
         }
       }
     },
-  });
-
-  return Decoration.set(widgets, true);
+    { decorations: (v) => v.decorations },
+  );
 }
-
-export const goToLinkPlugin = ViewPlugin.fromClass(
-  class {
-    decorations: DecorationSet = Decoration.none;
-    constructor(view: EditorView) {
-      this.decorations = getLinkAnchor(view);
-    }
-    update(update: ViewUpdate) {
-      if (
-        update.docChanged ||
-        update.viewportChanged ||
-        update.selectionSet
-      ) {
-        this.decorations = getLinkAnchor(update.view);
-      }
-    }
-  },
-  { decorations: (v) => v.decorations },
-);