From a41695bc67c81b72f8fc62740b11a06bf254ded5 Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Wed, 30 Nov 2022 15:28:43 +0100
Subject: [PATCH] Fixes to missing link marking

---
 web/cm_plugins/link.ts      | 45 +++++++++++++++++---------------
 web/cm_plugins/util.ts      | 22 +++++++++-------
 web/cm_plugins/wiki_link.ts | 51 ++++++++++++++++++++-----------------
 web/styles/theme.scss       |  2 +-
 4 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/web/cm_plugins/link.ts b/web/cm_plugins/link.ts
index ee351c74..9dc53264 100644
--- a/web/cm_plugins/link.ts
+++ b/web/cm_plugins/link.ts
@@ -56,27 +56,30 @@ export function linkPlugin(editor: Editor) {
             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,
-                    );
+                  {
+                    text: cleanAnchor,
+                    title: `Click to visit ${cleanLink}`,
+                    cssClass: "sb-link",
+                    href: cleanLink,
+                    callback: (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),
diff --git a/web/cm_plugins/util.ts b/web/cm_plugins/util.ts
index db324952..490bee8d 100644
--- a/web/cm_plugins/util.ts
+++ b/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 title: string,
-    readonly cssClass: string,
-    readonly callback: (e: MouseEvent) => void,
+    readonly options: LinkOptions,
   ) {
     super();
   }
   toDOM(): HTMLElement {
     const anchor = document.createElement("a");
-    anchor.className = this.cssClass;
-    anchor.textContent = this.text;
+    anchor.className = this.options.cssClass;
+    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.href = "#";
+    anchor.setAttribute("title", this.options.title);
+    anchor.href = this.options.href || "#";
     return anchor;
   }
 }
diff --git a/web/cm_plugins/wiki_link.ts b/web/cm_plugins/wiki_link.ts
index 7393d89d..c78f444c 100644
--- a/web/cm_plugins/wiki_link.ts
+++ b/web/cm_plugins/wiki_link.ts
@@ -89,29 +89,34 @@ export function cleanWikiLinkPlugin(editor: Editor) {
             widgets.push(
               Decoration.widget({
                 widget: new LinkWidget(
-                  linkText,
-                  pageExists ? `Navigate to ${page}` : `Create ${page}`,
-                  pageExists
-                    ? "sb-wiki-link-page"
-                    : "sb-wiki-link-page-missing",
-                  (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,
-                    );
+                  {
+                    text: linkText,
+                    title: pageExists
+                      ? `Navigate to ${page}`
+                      : `Create ${page}`,
+                    href: `/${page.replaceAll(" ", "_")}`,
+                    cssClass: pageExists
+                      ? "sb-wiki-link-page"
+                      : "sb-wiki-link-page-missing",
+                    callback: (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),
diff --git a/web/styles/theme.scss b/web/styles/theme.scss
index 5f6e9d61..902ee55b 100644
--- a/web/styles/theme.scss
+++ b/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;