diff --git a/packages/firecms_core/src/editor/selectors/link-selector.tsx b/packages/firecms_core/src/editor/selectors/link-selector.tsx index ffcae69aa0..4760d8e221 100644 --- a/packages/firecms_core/src/editor/selectors/link-selector.tsx +++ b/packages/firecms_core/src/editor/selectors/link-selector.tsx @@ -1,5 +1,5 @@ -import { useEffect, useRef, } from "react"; -import { Button, CheckIcon, cls, DeleteIcon, focusedDisabled, Popover } from "@firecms/ui"; +import { useEffect, useRef, useState} from "react"; +import { Button, CheckIcon, cls, DeleteIcon, focusedDisabled, Popover, Typography } from "@firecms/ui"; import { useTranslation } from "../../hooks/useTranslation"; import { useProseMirrorContext } from "../hooks/useProseMirrorContext"; import { getMarkAttributes, isMarkActive, setMark, unsetMark } from "../utils/prosemirror-utils"; @@ -39,25 +39,36 @@ export const LinkSelector = ({ const { state, view } = useProseMirrorContext(); const { t } = useTranslation(); - // Autofocus on input by default + const [error, setError] = useState(null); + const isInputInvalid = !!error; + useEffect(() => { - if (open && inputRef.current) { - inputRef.current.focus(); - } + setError(null); }, [open]); if (!state || !view) return null; - const handleSubmit = (e: any) => { + const handleChange = (e: React.ChangeEvent) => { + if (isInputInvalid) setError(null); + }; + + const handleSubmit = (e: React.SubmitEvent) => { e.preventDefault(); + e.stopPropagation(); + setError(null); + const value = inputRef.current?.value; if (!value) return; const url = getUrlFromString(value); - if (url) { - setMark(schema.marks.link, { href: url })(view.state, view.dispatch); - view.focus(); - onOpenChange(false); + + if (!url) { + setError(t("editor_invalid_url")); + return; } + + setMark(schema.marks.link, { href: url })(view.state, view.dispatch); + view.focus(); + onOpenChange(false); }; const handleRemoveLink = () => { @@ -86,13 +97,15 @@ export const LinkSelector = ({
+ className={cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled)} + aria-invalid={isInputInvalid} /> {href ? (