Make link paste work

frontend/package.json

@@ -34,6 +34,7 @@
     "pretty-ms": "^7.0.1",
     "quill": "^1.3.7",
     "quill-cursors": "^4.0.2",
+    "quill-delta": "^5.1.0",
     "ramda": "^0.27.1",
     "rimraf": "^3.0.2",
     "sanitize-html": "^2.3.2",

frontend/src/board/CollaborativeTextView.tsx

@@ -6,21 +6,21 @@ 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"
 
 Quill.register("modules/cursors", QuillCursors)
+Quill.register("modules/pasteLinkOverText", PasteLinkOverText)
 
 interface CollaborativeTextViewProps {
     item: L.Property<TextItem>
@@ -56,6 +56,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/quillPasteLinkOverText.ts

@@ -0,0 +1,47 @@
+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) => {
+            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
+                if (sel && sel.length > 0) {
+                    const existing = this.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 })
+                        delta.ops = newDelta.ops
+                    }
+                } else {
+                    newDelta.insert(url, { link: url })
+                    delta.ops = newDelta.ops
+                }
+            }
+
+            return delta
+        })
+    }
+}
+
+if (window != null && window.Quill) {
+    window.Quill.register("modules/pasteLinkOverText", PasteLinkOverText)
+}