Support comment link (#97)

* Support comment link

* Stop refreshing when press cmd key

* Fix conflicts

* Optimize CSS

* Fix style changing

* Ignore click events

* Optimize interaction

* Update README

Author: pearmini

README.md

@@ -7,7 +7,7 @@
 - [Editor](https://recho.dev/) 📝 - The quickest way to get started with Recho.
 - [Documentation](https://recho.dev/docs/introduction) 📚 - Learn how to use Recho with our comprehensive guides.
 - [Examples](https://recho.dev/examples) 🖼️ - See what you can create and draw some inspiration!
-- [Sharing](/CONTRIBUTING.md#contributing-to-recho) 🎨 - Follow the instructions to open a [pull request](https://github.com/recho-dev/recho/new/main/app/examples) to share your sketches!
+- [Sharing](/CONTRIBUTING.md#sharing-examples) 🎨 - Follow the instructions to open a [pull request](https://github.com/recho-dev/recho/new/main/app/examples) to share your sketches!
 - [Contributing](/CONTRIBUTING.md) 🙏 - We have [a bunch of things](https://github.com/recho-dev/recho/issues) that we would like you to help us build together!
 
 ## Why Recho 💡

editor/commentLink.js

@@ -0,0 +1,94 @@
+import {syntaxTree} from "@codemirror/language";
+import {Decoration, ViewPlugin, WidgetType} 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;
+  }
+}
+
+export const commentLink = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = this.buildDeco(view);
+    }
+
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.buildDeco(update.view);
+      }
+    }
+
+    buildDeco(view) {
+      let widgets = [];
+      let tree = syntaxTree(view.state);
+
+      // Only iterate tree nodes that intersect with the viewport.
+      for (const {from, to} of view.visibleRanges) {
+        tree.iterate({
+          from,
+          to,
+          enter: ({type, from, to}) => {
+            if (type.name === "BlockComment" || type.name === "LineComment") {
+              const text = view.state.doc.sliceString(from, to);
+              let httpRegex = /https?:\/\/[^\s\)]+/g;
+              let m;
+              while ((m = httpRegex.exec(text))) {
+                const tagStart = from + m.index;
+                const tagEnd = tagStart + m[0].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),
+                  );
+                }
+              }
+            }
+          },
+        });
+      }
+
+      return Decoration.set(widgets, true);
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);

editor/index.css

@@ -64,6 +64,20 @@
   }
 
   .cm-doc-tag span {
-    color: #cf222e !important;
+    color: #cf222e;
+  }
+
+  .cm-comment-link {
+    color: #6a737d;
+    text-decoration: underline;
+    cursor: text;
+  }
+
+  .cm-comment-link.cmd-clickable {
+    cursor: pointer;
+  }
+
+  .cm-comment-link.cmd-clickable:hover {
+    color: #0550ae;
   }
 }

editor/index.js

@@ -12,11 +12,11 @@ import {outputProtection} from "./protection.js";
 import {dispatch as d3Dispatch} from "d3-dispatch";
 import {rechoCompletion} from "./completion.js";
 import {docStringTag} from "./docStringTag.js";
+import {commentLink} from "./commentLink.js";
 
 export function createEditor(container, options) {
   const {code} = options;
   const dispatcher = d3Dispatch("userInput");
-
   const runtimeRef = {current: null};
 
   const state = EditorState.create({
@@ -51,17 +51,19 @@ export function createEditor(container, options) {
       // Disable this for now, because it prevents copying/pasting the code.
       // outputProtection(),
       docStringTag,
+      commentLink,
     ],
   });
 
-  const view = new EditorView({
-    state,
-    parent: container,
-  });
+  const view = new EditorView({state, parent: container});
+
+  let isStopByMetaKey = false;
 
   function initRuntime() {
     runtimeRef.current = createRuntime(view.state.doc.toString());
     runtimeRef.current.onChanges(dispatch);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
   }
 
   function dispatch(changes) {
@@ -84,6 +86,25 @@ export function createEditor(container, options) {
     }
   }
 
+  // Stop running when press cmd key. This is useful when we want to open a link
+  // in the comment by cmd + click. If we don't stop running, the links consistently
+  // create and destroy, and there is no way to click them. This also makes sense
+  // when we want to copy/paste/select code using the shortcut with cmd key.
+  function onKeyDown(e) {
+    if (e.metaKey || e.ctrlKey) {
+      if (runtimeRef.current?.isRunning()) isStopByMetaKey = true;
+      runtimeRef.current?.setIsRunning(false);
+    }
+  }
+
+  function onKeyUp(e) {
+    const key = e.key;
+    if ((key === "Meta" || key === "Control") && isStopByMetaKey) {
+      isStopByMetaKey = false;
+      runtimeRef.current?.setIsRunning(true);
+    }
+  }
+
   return {
     run: () => {
       if (!runtimeRef.current) initRuntime();
@@ -92,10 +113,14 @@ export function createEditor(container, options) {
     stop: () => {
       runtimeRef.current?.destroy();
       runtimeRef.current = null;
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
     },
     on: (event, callback) => dispatcher.on(event, callback),
     destroy: () => {
       runtimeRef.current?.destroy();
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
       view.destroy();
     },
   };

runtime/index.js

@@ -305,5 +305,5 @@ export function createRuntime(initialCode) {
     rerun(code);
   }
 
-  return {setCode, setIsRunning, run, onChanges, destroy};
+  return {setCode, setIsRunning, run, onChanges, destroy, isRunning: () => isRunning};
 }

test/js/comment-link.js

@@ -0,0 +1,12 @@
+export const commentLink = `// https://recho.dev
+// http://recho.dev
+
+/**
+ * [Recho](https://recho.dev)
+ * [Recho](http://recho.dev)
+ */
+
+const now = recho.now();
+
+echo(now);
+`;

test/js/index.js

@@ -13,3 +13,4 @@ export {randomHistogram} from "./random-histogram.js";
 export {mandelbrotSet} from "./mandelbrot-set.js";
 export {matrixRain} from "./matrix-rain.js";
 export {jsDocString} from "./js-doc-string.js";
+export {commentLink} from "./comment-link.js";