Fixes to missing link marking

web/cm_plugins/link.ts

@@ -56,10 +56,12 @@ export function linkPlugin(editor: Editor) {
             widgets.push(
               Decoration.widget({
                 widget: new LinkWidget(
-                  cleanAnchor,
+                  {
-                  `Click to visit ${cleanLink}`,
+                    text: cleanAnchor,
-                  "sb-link",
+                    title: `Click to visit ${cleanLink}`,
-                  (e) => {
+                    cssClass: "sb-link",
+                    href: cleanLink,
+                    callback: (e) => {
                       if (e.altKey) {
                         // Move cursor into the link, approximate location
                         return view.dispatch({
@@ -78,6 +80,7 @@ export function linkPlugin(editor: Editor) {
                         console.error,
                       );
                     },
+                  },
                 ),
               }).range(from),
             );

web/cm_plugins/util.ts

@@ -11,26 +11,30 @@ import {
   WidgetType,
 } from "../deps.ts";
 
+type LinkOptions = {
+  text: string;
+  href?: string;
+  title: string;
+  cssClass: string;
+  callback: (e: MouseEvent) => void;
+};
 export class LinkWidget extends WidgetType {
   constructor(
-    readonly text: string,
+    readonly options: LinkOptions,
-    readonly title: string,
-    readonly cssClass: string,
-    readonly callback: (e: MouseEvent) => void,
   ) {
     super();
   }
   toDOM(): HTMLElement {
     const anchor = document.createElement("a");
-    anchor.className = this.cssClass;
+    anchor.className = this.options.cssClass;
-    anchor.textContent = this.text;
+    anchor.textContent = this.options.text;
     anchor.addEventListener("click", (e) => {
       e.preventDefault();
       e.stopPropagation();
-      this.callback(e);
+      this.options.callback(e);
     });
-    anchor.setAttribute("title", this.title);
+    anchor.setAttribute("title", this.options.title);
-    anchor.href = "#";
+    anchor.href = this.options.href || "#";
     return anchor;
   }
 }

web/cm_plugins/wiki_link.ts

@@ -89,12 +89,16 @@ export function cleanWikiLinkPlugin(editor: Editor) {
             widgets.push(
               Decoration.widget({
                 widget: new LinkWidget(
-                  linkText,
+                  {
-                  pageExists ? `Navigate to ${page}` : `Create ${page}`,
+                    text: linkText,
-                  pageExists
+                    title: pageExists
+                      ? `Navigate to ${page}`
+                      : `Create ${page}`,
+                    href: `/${page.replaceAll(" ", "_")}`,
+                    cssClass: pageExists
                       ? "sb-wiki-link-page"
                       : "sb-wiki-link-page-missing",
-                  (e) => {
+                    callback: (e) => {
                       if (e.altKey) {
                         // Move cursor into the link
                         return view.dispatch({
@@ -113,6 +117,7 @@ export function cleanWikiLinkPlugin(editor: Editor) {
                         console.error,
                       );
                     },
+                  },
                 ),
               }).range(from),
             );

web/styles/theme.scss

@@ -348,7 +348,7 @@
   text-decoration: none;
   cursor: pointer;
 }
-.sb-wiki-link-page-missing, .sb-wiki-link-page-missing > .sb-wiki-link-page {
+a.sb-wiki-link-page-missing, .sb-wiki-link-page-missing > .sb-wiki-link-page {
   color: #9e4705;
   background-color: rgba(77, 141, 255, 0.07);
   border-radius: 5px;