Underline https:// and http:// links, and make C+Click open them

electron/main/index.ts

@@ -132,7 +132,9 @@ async function createWindow() {
 
     // Make all links open with the browser, not with the application
     win.webContents.setWindowOpenHandler(({ url }) => {
-        if (url.startsWith('https:')) shell.openExternal(url)
+        if (url.startsWith('https:') || url.startsWith('http:')) {
+            shell.openExternal(url)
+        }
         return { action: 'deny' }
     })
 }

src/editor/editor.js

@@ -16,6 +16,7 @@ import { heynoteCopyPaste } from "./copy-paste"
 import { languageDetection } from "./language-detection/autodetect.js"
 import { autoSaveContent } from "./save.js"
 import { todoCheckboxPlugin} from "./todo-checkbox.ts"
+import { links } from "./links.js"
 
 export const LANGUAGE_SELECTOR_EVENT = "openLanguageSelector"
 
@@ -80,6 +81,7 @@ export class HeynoteEditor {
 
                 todoCheckboxPlugin,
                 markdown(),
+                links,
             ],
         })
 

src/editor/links.js

@@ -0,0 +1,40 @@
+import { Decoration, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view"
+import { MatchDecorator, WidgetType } from "@codemirror/view"
+
+
+const modChar = window.heynote.platform.isMac ? "⌘" : "Ctrl"
+
+const linkMatcher = new MatchDecorator({
+    regexp: /https?:\/\/[^\s]+/gi,
+    decoration: match => {
+        return Decoration.mark({
+            class: "heynote-link",
+            attributes: {title: `${modChar} + Click to open link`},
+        })
+    },
+})
+
+export const links = ViewPlugin.fromClass(class {
+    links
+
+    constructor(view) {
+        this.links = linkMatcher.createDeco(view)
+    }
+    update(update) {
+        this.links = linkMatcher.updateDeco(update, this.links)
+    }
+}, {
+    decorations: instance => instance.links,
+    eventHandlers: {
+        click: (e, view) => {
+            let target = e.target
+            if (target.classList.contains("heynote-link") && e.metaKey) {
+                let linkEl = document.createElement("a")
+                linkEl.href = target.textContent
+                linkEl.target = "_blank"
+                linkEl.click()
+                linkEl.remove()
+            }
+        }
+    },
+})

src/editor/theme/base.js

@@ -117,4 +117,7 @@ export const heynoteBase = EditorView.theme({
     '.heynote-math-result-copied.fade-out': {
         opacity: 0,
     },
+    '.heynote-link': {
+        textDecoration: "underline",
+    }
 })