Add default protocol, basic validation

Author: zgavin1

src/components/ui/coaching-sessions/coaching-notes/extended-link-extension.tsx

@@ -0,0 +1,92 @@
+import Link from "@tiptap/extension-link";
+
+const LinkWithTitle = Link.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      title: {
+        default: null,
+        renderHTML: (attributes) => {
+          if (!attributes.href) {
+            return {};
+          }
+          return {
+            title: `Right-click to open ${attributes.href}`,
+          };
+        },
+      },
+    };
+  },
+});
+
+export const ConfiguredLink = LinkWithTitle.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;
+      }
+
+      // Placeholder for future disallowed domains if we want to add any
+      // 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;
+      // }
+
+      // Placeholder for future disallowed domains if we want to add any
+      // 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;
+    }
+  },
+});

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

@@ -19,6 +19,7 @@ import { createLowlight } from "lowlight";
 import { all } from "lowlight";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { TiptapCollabProvider } from "@hocuspocus/provider";
+import { ConfiguredLink } from "./extended-link-extension";
 // Initialize lowlight with all languages
 const lowlight = createLowlight(all);
 
@@ -44,77 +45,7 @@ export const Extensions = (
     Strike,
     Text,
     Underline,
-    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;
-          }
-
-          // Placeholder for future disallowed domains if we want to add any
-          // 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;
-          // }
-
-          // Placeholder for future disallowed domains if we want to add any
-          // 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;
-        }
-      },
-    }),
+    ConfiguredLink,
     Collaboration.configure({
       document: doc,
     }),

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

@@ -46,12 +46,17 @@ export const LinkDialog = ({
 
     // update link
     try {
+      const linkWithProtocol = /^https?:\/\//.test(linkUrl)
+        ? linkUrl
+        : `https://${linkUrl}`;
+
+      // basic validation for a real url
+      const urlHref = new URL(linkWithProtocol).toString();
       editor
         .chain()
         .focus()
         .extendMarkRange("link")
-        .setLink({ href: linkUrl })
-        .updateAttributes("link", { title: linkUrl })
+        .setLink({ href: urlHref })
         .run();
       setLinkUrl("");
       onOpenChange(false);
@@ -65,9 +70,7 @@ export const LinkDialog = ({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Insert Link</DialogTitle>
-          <DialogDescription>
-            Insert a url for a link in your document.
-          </DialogDescription>
+          <DialogDescription>Insert URL for your link</DialogDescription>
         </DialogHeader>
         <div className="grid grid-cols-6 gap-4 items-center">
           <Label htmlFor="url" className="text-right">