diff --git a/frontend/src/board/CollaborativeTextView.tsx b/frontend/src/board/CollaborativeTextView.tsx index cdef54a0..f0432d2a 100644 --- a/frontend/src/board/CollaborativeTextView.tsx +++ b/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 diff --git a/frontend/src/board/quillClickableLink.ts b/frontend/src/board/quillClickableLink.ts new file mode 100644 index 00000000..f17956d7 --- /dev/null +++ b/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 + } +} diff --git a/frontend/src/board/quillPasteLinkOverText.ts b/frontend/src/board/quillPasteLinkOverText.ts index a40bfb37..439cd058 100644 --- a/frontend/src/board/quillPasteLinkOverText.ts +++ b/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) -}