diff --git a/apps/app/components/tiptap/bubble-menu/link-selector.tsx b/apps/app/components/tiptap/bubble-menu/link-selector.tsx index 4a2859155..7d8e079c6 100644 --- a/apps/app/components/tiptap/bubble-menu/link-selector.tsx +++ b/apps/app/components/tiptap/bubble-menu/link-selector.tsx @@ -2,7 +2,7 @@ import { Editor } from "@tiptap/core"; import { Check, Trash } from "lucide-react"; import { Dispatch, FC, SetStateAction, useEffect, useRef } from "react"; import { cn } from "../utils"; - +import isValidHttpUrl from "./utils/link-validator"; interface LinkSelectorProps { editor: Editor; isOpen: boolean; @@ -38,14 +38,7 @@ export const LinkSelector: FC = ({ editor, isOpen, setIsOpen

{isOpen && ( -
{ - e.preventDefault(); - const form = e.target as HTMLFormElement; - const input = form.elements[0] as HTMLInputElement; - editor.chain().focus().setLink({ href: input.value }).run(); - setIsOpen(false); - }} +
= ({ editor, isOpen, setIsOpen /> {editor.getAttributes("link").href ? ( ) : ( - )} - +
)} ); diff --git a/apps/app/components/tiptap/bubble-menu/utils/link-validator.tsx b/apps/app/components/tiptap/bubble-menu/utils/link-validator.tsx new file mode 100644 index 000000000..5b05811d6 --- /dev/null +++ b/apps/app/components/tiptap/bubble-menu/utils/link-validator.tsx @@ -0,0 +1,12 @@ +export default function isValidHttpUrl(string: string): boolean { + let url; + + try { + url = new URL(string); + } catch (_) { + return false; + } + + return url.protocol === "http:" || url.protocol === "https:"; +} + diff --git a/apps/app/components/tiptap/extensions/index.tsx b/apps/app/components/tiptap/extensions/index.tsx index 7e1f5657d..37e9e1df9 100644 --- a/apps/app/components/tiptap/extensions/index.tsx +++ b/apps/app/components/tiptap/extensions/index.tsx @@ -21,6 +21,7 @@ import "highlight.js/styles/github-dark.css"; import UploadImagesPlugin from "../plugins/upload-image"; import UniqueID from "@tiptap-pro/extension-unique-id"; import UpdatedImage from "./updated-image"; +import isValidHttpUrl from "../bubble-menu/utils/link-validator"; lowlight.registerLanguage("ts", ts); @@ -94,6 +95,8 @@ export const TiptapExtensions = [ }, }), TiptapLink.configure({ + protocols: ["http", "https"], + validate: (url) => isValidHttpUrl(url), HTMLAttributes: { class: "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",