Fix non selectable comment link (#186)

* Fix non selectable comment link

* Fix url match

* Fix lint

Author: pearmini

editor/commentLink.js

@@ -1,43 +1,17 @@
 import {syntaxTree} from "@codemirror/language";
-import {Decoration, ViewPlugin, WidgetType} from "@codemirror/view";
+import {Decoration, ViewPlugin, EditorView} from "@codemirror/view";
 
 const isWindows = navigator.userAgent.includes("Windows");
 
-class LinkWidget extends WidgetType {
-  constructor(url) {
-    super();
-    this.url = url;
-  }
-
-  toDOM() {
-    const link = document.createElement("a");
-    link.href = this.url;
-    link.textContent = this.url;
-    link.target = "_blank";
-    link.rel = "noopener noreferrer";
-    link.className = "cm-comment-link";
-    link.title = `Open in a new tab (${isWindows ? "Ctrl" : "Cmd"} + Click)`;
-
-    // Prevent default click behavior - only open on Cmd+Click
-    const preventDefault = (e) => !e.metaKey && !e.ctrlKey && e.preventDefault();
-    link.addEventListener("click", preventDefault);
-
-    // Change cursor to pointer when Ctrl/Cmd is held
-    const add = (e) => (e.metaKey || e.ctrlKey) && link.classList.add("cmd-clickable");
-    const remove = (e) => !e.metaKey && !e.ctrlKey && link.classList.remove("cmd-clickable");
-    link.addEventListener("mouseenter", add);
-    link.addEventListener("mousemove", add);
-    link.addEventListener("mouseleave", remove);
-    return link;
-  }
-
-  ignoreEvent(event) {
-    // Ignore click events when Cmd/Ctrl is held (for opening links)
-    if (event.type === "mousedown" || event.type === "click") {
-      return event.metaKey || event.ctrlKey;
-    }
-    return false;
-  }
+// Create a decoration that marks links but keeps text selectable.
+function createLinkDecoration(url) {
+  return Decoration.mark({
+    class: "cm-comment-link",
+    attributes: {
+      "data-url": url,
+      title: `Open in a new tab (${isWindows ? "Ctrl" : "Cmd"} + Click)`,
+    },
+  });
 }
 
 export const commentLink = ViewPlugin.fromClass(
@@ -53,7 +27,7 @@ export const commentLink = ViewPlugin.fromClass(
     }
 
     buildDeco(view) {
-      let widgets = [];
+      let decorations = [];
       let tree = syntaxTree(view.state);
 
       // Only iterate tree nodes that intersect with the viewport.
@@ -64,31 +38,55 @@ export const commentLink = ViewPlugin.fromClass(
           enter: ({type, from, to}) => {
             if (type.name === "BlockComment" || type.name === "LineComment") {
               const text = view.state.doc.sliceString(from, to);
-              let httpRegex = /https?:\/\/[^\s\)]+/g;
+              // Match URLs, allowing common URL characters, then trim trailing punctuation.
+              let httpRegex = /https?:\/\/[^\s\)\]\}]+/g;
               let m;
               while ((m = httpRegex.exec(text))) {
+                let url = m[0];
+                // Trim trailing punctuation that shouldn't be part of URL.
+                // These are common sentence/clause-ending punctuation.
+                url = url.replace(/[.,;:!?)\]}>]+$/, "");
+                if (!url || url.length < 11) continue; // Minimum valid URL length.
                 const tagStart = from + m.index;
-                const tagEnd = tagStart + m[0].length;
+                const tagEnd = tagStart + url.length;
                 if (tagEnd >= from && tagStart <= to) {
-                  const url = m[0];
-                  const widget = new LinkWidget(url);
-                  widgets.push(
-                    Decoration.replace({
-                      widget,
-                      inclusive: true,
-                    }).range(tagStart, tagEnd),
-                  );
+                  decorations.push(createLinkDecoration(url).range(tagStart, tagEnd));
                 }
               }
             }
           },
         });
       }
 
-      return Decoration.set(widgets, true);
+      return Decoration.set(decorations, true);
     }
   },
   {
     decorations: (v) => v.decorations,
   },
 );
+
+// Handle clicks and cursor updates on comment links.
+export const commentLinkClickHandler = EditorView.domEventHandlers({
+  mousedown(event) {
+    const target = event.target.closest?.(".cm-comment-link");
+    if (!target) return false;
+    const url = target.getAttribute("data-url");
+    if (!url) return false;
+    if (event.metaKey || event.ctrlKey) {
+      event.preventDefault();
+      window.open(url, "_blank", "noopener,noreferrer");
+      return true;
+    }
+    return false;
+  },
+  mousemove(event) {
+    const element = event.target;
+    const isCmdHeld = event.metaKey || event.ctrlKey;
+    const target = element?.closest?.(".cm-comment-link");
+    if (!target) return false;
+    if (isCmdHeld) target.classList.add("cmd-clickable");
+    else target.classList.remove("cmd-clickable");
+    return false;
+  },
+});

editor/index.css

@@ -168,7 +168,7 @@
     cursor: pointer;
   }
 
-  .cm-comment-link.cmd-clickable:hover {
-    color: #0550ae;
+  .cm-comment-link.cmd-clickable:hover > span {
+    color: #0550ae !important;
   }
 }

editor/index.js

@@ -16,7 +16,7 @@ import {dispatch as d3Dispatch} from "d3-dispatch";
 import {controls} from "./controls/index.js";
 import {rechoCompletion} from "./completion.js";
 import {docStringTag} from "./docStringTag.js";
-import {commentLink} from "./commentLink.js";
+import {commentLink, commentLinkClickHandler} from "./commentLink.js";
 
 // @see https://github.com/UziTech/eslint-linter-browserify/blob/master/example/script.js
 // @see https://codemirror.net/examples/lint/
@@ -74,6 +74,7 @@ export function createEditor(container, options) {
       // outputProtection(),
       docStringTag,
       commentLink,
+      commentLinkClickHandler,
       linter(esLint(new eslint.Linter(), eslintConfig)),
     ],
   });

test/js/comment-link.js

@@ -1,5 +1,5 @@
-export const commentLink = `// https://recho.dev
-// http://recho.dev
+export const commentLink = `// https://recho.dev!
+// http://recho.dev,
 
 /**
  * [Recho](https://recho.dev)