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

web/cm_plugins/util.ts

@@ -8,8 +8,33 @@ import {
   foldedRanges,
   SyntaxNodeRef,
   syntaxTree,
+  WidgetType,
 } from "../deps.ts";
 
+export class LinkWidget extends WidgetType {
+  constructor(
+    readonly text: string,
+    readonly title: string,
+    readonly cssClass: string,
+    readonly callback: (e: MouseEvent) => void,
+  ) {
+    super();
+  }
+  toDOM(): HTMLElement {
+    const anchor = document.createElement("a");
+    anchor.className = this.cssClass;
+    anchor.textContent = this.text;
+    anchor.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.callback(e);
+    });
+    anchor.setAttribute("title", this.title);
+    anchor.href = "#";
+    return anchor;
+  }
+}
+
 /**
  * Check if two ranges overlap
  * Based on the visual diagram on https://stackoverflow.com/a/25369187