diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx index fe651fa4e15..333edf78a1d 100644 --- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx +++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx @@ -1,6 +1,6 @@ -import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react"; import { Editor } from "@tiptap/core"; -import { Check, Link, Trash } from "lucide-react"; +import { Check, Link, Trash2 } from "lucide-react"; +import { Dispatch, FC, SetStateAction, useCallback, useRef, useState } from "react"; // plane utils import { cn } from "@plane/utils"; // helpers @@ -15,22 +15,26 @@ type Props = { export const BubbleMenuLinkSelector: FC = (props) => { const { editor, isOpen, setIsOpen } = props; + // states + const [error, setError] = useState(false); // refs const inputRef = useRef(null); - const onLinkSubmit = useCallback(() => { + const handleLinkSubmit = useCallback(() => { const input = inputRef.current; - const url = input?.value; - if (url && isValidHttpUrl(url)) { + if (!input) return; + let url = input.value; + if (!url) return; + if (!url.startsWith("http")) url = `http://${url}`; + if (isValidHttpUrl(url)) { setLinkEditor(editor, url); setIsOpen(false); + setError(false); + } else { + setError(true); } }, [editor, inputRef, setIsOpen]); - useEffect(() => { - inputRef.current && inputRef.current?.focus(); - }); - return (
{isOpen && ( -
{ - if (e.key === "Enter") { - e.preventDefault(); - onLinkSubmit(); - } - }} - > - { - e.stopPropagation(); - }} - className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400" - defaultValue={editor.getAttributes("link").href || ""} - /> - {editor.getAttributes("link").href ? ( - - ) : ( - + onFocus={() => setError(false)} + autoFocus + /> + {editor.getAttributes("link").href ? ( + + ) : ( + + )} +
+ {error && ( +

+ Please enter a valid URL +

)}
)}