Links in collaborative editor

frontend/src/board/CollaborativeTextView.tsx

@@ -6,21 +6,23 @@ import { QuillBinding } from "y-quill"
 import {
     AccessLevel,
     Board,
+    TextItem,
     canWrite,
     getAlign,
     getHorizontalAlign,
     getItemBackground,
-    TextItem,
 } from "../../../common/src/domain"
-import { Dispatch } from "../store/board-store"
 import { CRDTStore } from "../store/crdt-store"
+import { getAlignItems } from "./ItemView"
 import { BoardFocus } from "./board-focus"
 import { contrastingColor } from "./contrasting-color"
-import { getAlignItems } from "./ItemView"
-import { ToolController } from "./tool-selection"
 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>
@@ -56,6 +58,7 @@ export function CollaborativeTextView({
             modules: {
                 cursors: true,
                 toolbar: false,
+                pasteLinkOverText: true,
                 history: {
                     userOnly: true, // Local undo shouldn't undo changes from remote users
                 },

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

@@ -0,0 +1,28 @@
+import Quill from "quill"
+import { isURL } from "../components/sanitizeHTML"
+
+export default class PasteLinkOverText {
+    constructor(quill: Quill) {
+        quill.clipboard.addMatcher(Node.TEXT_NODE, (node, delta) => {
+            if (typeof node.data !== "string") {
+                return undefined as any // This is how it was written
+            }
+
+            const url = node.data
+            if (isURL(url)) {
+                const sel = (quill as any).selection.savedRange as { index: number; length: number } | null
+                if (sel && sel.length > 0) {
+                    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
+                        delta.ops = [{ insert: existingText, attributes: { link: url } }]
+                    }
+                } else {
+                    delta.ops = [{ insert: url, attributes: { link: url } }]
+                }
+            }
+
+            return delta
+        })
+    }
+}