Make Quill links clickable

frontend/src/board/CollaborativeTextView.tsx

@@ -18,9 +18,11 @@ import { BoardFocus } from "./board-focus"
 import { contrastingColor } from "./contrasting-color"
 import { preventDoubleClick } from "./double-click"
 import PasteLinkOverText from "./quillPasteLinkOverText"
+import ClickableLink from "./quillClickableLink"
 
 Quill.register("modules/cursors", QuillCursors)
 Quill.register("modules/pasteLinkOverText", PasteLinkOverText)
+Quill.register(ClickableLink)
 
 interface CollaborativeTextViewProps {
     item: L.Property<TextItem>

frontend/src/board/quillClickableLink.ts

@@ -0,0 +1,15 @@
+import Quill from "quill"
+var Link = Quill.import("formats/link")
+
+export default class ClickableLink extends Link {
+    static create(href: any) {
+        let node = super.create(href) as HTMLAnchorElement
+        node.title = href
+        node.addEventListener("click", (e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            window.open(href, "_blank")
+        })
+        return node
+    }
+}

frontend/src/board/quillPasteLinkOverText.ts

@@ -2,30 +2,18 @@ import Quill from "quill"
 import Delta from "quill-delta"
 import { isURL } from "../components/sanitizeHTML"
 
-declare global {
-    interface Window {
-        Quill?: typeof Quill
-    }
-}
-
 export default class PasteLinkOverText {
-    quill: Quill
-
     constructor(quill: Quill) {
-        this.quill = quill
-        this.registerPasteListener()
-    }
-    registerPasteListener() {
-        this.quill.clipboard.addMatcher(Node.TEXT_NODE, (node, delta) => {
+        quill.clipboard.addMatcher(Node.TEXT_NODE, (node, delta) => {
             if (typeof node.data !== "string") {
                 return undefined as any // This is how it was written
             }
             const newDelta = new Delta()
             const url = node.data
             if (isURL(url)) {
-                const sel = (this.quill as any).selection.savedRange as { index: number; length: number } | null
+                const sel = (quill as any).selection.savedRange as { index: number; length: number } | null
                 if (sel && sel.length > 0) {
-                    const existing = this.quill.getContents(sel.index, sel.length)
+                    const existing = quill.getContents(sel.index, sel.length)
                     if (existing.ops.length === 1 && typeof existing.ops[0].insert === "string") {
                         const existingText = existing.ops[0].insert
                         newDelta.insert(existingText, { link: url })
@@ -41,7 +29,3 @@ export default class PasteLinkOverText {
         })
     }
 }
-
-if (window != null && window.Quill) {
-    window.Quill.register("modules/pasteLinkOverText", PasteLinkOverText)
-}