Get links working in editor

Author: zgavin1

src/components/ui/coaching-sessions/coaching-notes/extensions.tsx

@@ -44,7 +44,77 @@ export const Extensions = (
     Strike,
     Text,
     Underline,
-    Link,
+    Link.configure({
+      openOnClick: false,
+      autolink: true,
+      defaultProtocol: "https",
+      protocols: ["http", "https"],
+      isAllowedUri: (url, ctx) => {
+        try {
+          // construct URL
+          const parsedUrl = url.includes(":")
+            ? new URL(url)
+            : new URL(`${ctx.defaultProtocol}://${url}`);
+
+          // use default validation
+          if (!ctx.defaultValidate(parsedUrl.href)) {
+            return false;
+          }
+
+          // disallowed protocols
+          const disallowedProtocols = ["ftp", "file", "mailto"];
+          const protocol = parsedUrl.protocol.replace(":", "");
+
+          if (disallowedProtocols.includes(protocol)) {
+            return false;
+          }
+
+          // only allow protocols specified in ctx.protocols
+          const allowedProtocols = ctx.protocols.map((p) =>
+            typeof p === "string" ? p : p.scheme
+          );
+
+          if (!allowedProtocols.includes(protocol)) {
+            return false;
+          }
+
+          // disallowed domains
+          const disallowedDomains = [
+            "example-phishing.com",
+            "malicious-site.net",
+          ];
+          const domain = parsedUrl.hostname;
+
+          if (disallowedDomains.includes(domain)) {
+            return false;
+          }
+
+          // all checks have passed
+          return true;
+        } catch {
+          return false;
+        }
+      },
+      shouldAutoLink: (url) => {
+        try {
+          // construct URL
+          const parsedUrl = url.includes(":")
+            ? new URL(url)
+            : new URL(`https://${url}`);
+
+          // only auto-link if the domain is not in the disallowed list
+          const disallowedDomains = [
+            "example-no-autolink.com",
+            "another-no-autolink.com",
+          ];
+          const domain = parsedUrl.hostname;
+
+          return !disallowedDomains.includes(domain);
+        } catch {
+          return false;
+        }
+      },
+    }),
     Collaboration.configure({
       document: doc,
     }),

src/components/ui/coaching-sessions/coaching-notes/link-dialog.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { Editor } from "@tiptap/core";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface LinkDialogProps {
+  editor: Editor;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const LinkDialog = ({
+  editor,
+  isOpen,
+  onOpenChange,
+}: LinkDialogProps) => {
+  const [linkUrl, setLinkUrl] = React.useState("");
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setLinkUrl(editor.getAttributes("link").href || "");
+    }
+  }, [isOpen, editor]);
+
+  const setLink = React.useCallback(() => {
+    // cancelled
+    if (linkUrl === null) {
+      return;
+    }
+
+    // empty
+    if (linkUrl === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      onOpenChange(false);
+      return;
+    }
+
+    // update link
+    try {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .setLink({ href: linkUrl })
+        .run();
+      setLinkUrl("");
+      onOpenChange(false);
+    } catch (e) {
+      console.error("Error inserting link:", e);
+    }
+  }, [editor, linkUrl, onOpenChange]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Insert Link</DialogTitle>
+          <DialogDescription>
+            Insert a url for a link in your document.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid grid-cols-6 gap-4 items-center">
+          <Label htmlFor="url" className="text-right">
+            URL
+          </Label>
+          <Input
+            id="url"
+            value={linkUrl}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setLinkUrl(e.target.value)
+            }
+            className="col-span-5"
+          />
+        </div>
+        <DialogFooter>
+          <Button onClick={setLink}>Submit</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/ui/coaching-sessions/coaching-notes/toolbar.tsx

@@ -15,35 +15,17 @@ import {
   Link,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
 import { useState } from "react";
+import { LinkDialog } from "./link-dialog";
 
 export const Toolbar = () => {
   const { editor } = useCurrentEditor();
-
   const [isLinkDialogOpen, setIsLinkDialogOpen] = useState(false);
-  const [linkUrl, setLinkUrl] = useState("");
-  const [linkText, setLinkText] = useState("");
 
   if (!editor) {
     return null;
   }
 
-  const handleLinkButtonClick = () => {
-    editor.isActive("link")
-      ? editor.chain().focus().toggleLink({ href: linkUrl }).run()
-      : setIsLinkDialogOpen(true);
-  };
-
   return (
     <>
       <div className="flex items-center gap-0 mt-1 mx-1 mb-0">
@@ -120,61 +102,18 @@ export const Toolbar = () => {
           title="Code Block"
         />
         <ToolbarButton
-          onClick={() => handleLinkButtonClick()}
+          onClick={() => setIsLinkDialogOpen(true)}
           isActive={editor.isActive("link")}
           icon={<Link className="h-4 w-4" />}
           title="Link"
         />
       </div>
 
-      <Dialog open={isLinkDialogOpen} onOpenChange={setIsLinkDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Insert Link</DialogTitle>
-          </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="linkText" className="text-right">
-                Text
-              </Label>
-              <Input
-                id="linkText"
-                value={linkText}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setLinkText(e.target.value)
-                }
-                className="col-span-3"
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="url" className="text-right">
-                URL
-              </Label>
-              <Input
-                id="url"
-                value={linkUrl}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setLinkUrl(e.target.value)
-                }
-                className="col-span-3"
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button
-              onClick={() => {
-                editor.chain().focus().insertContent(linkText).run();
-                editor.chain().focus().toggleLink({ href: linkUrl }).run();
-                setIsLinkDialogOpen(false);
-                setLinkUrl("");
-                setLinkText("");
-              }}
-            >
-              Insert Link
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <LinkDialog
+        editor={editor}
+        isOpen={isLinkDialogOpen}
+        onOpenChange={setIsLinkDialogOpen}
+      />
     </>
   );
 };