diff --git a/frontend/dashboard/components/editor/hyperlink.tsx b/frontend/dashboard/components/editor/hyperlink.tsx index c4ad5d5a..a01074c9 100644 --- a/frontend/dashboard/components/editor/hyperlink.tsx +++ b/frontend/dashboard/components/editor/hyperlink.tsx @@ -1,13 +1,9 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Editor } from "@tiptap/react"; import { Link } from "lucide-react"; -import { useCallback, useEffect, useState } from "react"; +import { useEffect } from "react"; import { z } from "zod"; import { useForm, Controller } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; @@ -24,10 +20,6 @@ const linkSchema = z.object({ type LinkData = z.infer; export const HyperlinkButton: React.FC = ({ editor, disabled }) => { - if (!editor) { - return null; - } - const { control, handleSubmit, @@ -36,36 +28,33 @@ export const HyperlinkButton: React.FC = ({ editor, disabled }) } = useForm({ resolver: zodResolver(linkSchema), defaultValues: { - link: editor.getAttributes("link").href, + link: editor?.getAttributes("link").href || "", // Use optional chaining here }, }); - // set hyperlink - const setLinkInEditor = (data: LinkData) => { - const url = data.link; - if (!url) { - editor.chain().focus().unsetLink().run(); - return; - } - editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run(); - }; - - // update the link input when users unlink or link useEffect(() => { + if (!editor) return; + const updateLink = () => { const currentLink = editor.getAttributes("link").href; - if (currentLink) { - setValue("link", currentLink); - } else { - setValue("link", ""); - } + setValue("link", currentLink || ""); }; + editor.on("transaction", updateLink); return () => { editor.off("transaction", updateLink); }; }, [editor, setValue]); + const setLinkInEditor = (data: LinkData) => { + const url = data.link; + if (!url) { + editor?.chain().focus().unsetLink().run(); + return; + } + editor?.chain().focus().extendMarkRange("link").setLink({ href: url }).run(); + }; + const onSubmit = handleSubmit((data) => { setLinkInEditor(data); }); @@ -75,7 +64,7 @@ export const HyperlinkButton: React.FC = ({ editor, disabled })