Editor LinkSelector - Bug fix and update

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<string | null>(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<HTMLFormElement>) => {
+        if (isInputInvalid) setError(null);
+    };
+
+    const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
         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 = ({
             <form
                 onSubmit={handleSubmit}
                 className="flex p-1 gap-1"
+                onChange={handleChange}
             >
                 <input
                     ref={inputRef}
                     autoFocus={open}
                     placeholder={t("editor_paste_or_type_link")}
                     defaultValue={href}
-                    className={cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled)} />
+                    className={cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled)}
+                    aria-invalid={isInputInvalid} />
 
                 {href ? (
                     <Button
@@ -113,6 +126,18 @@ export const LinkSelector = ({
                     </Button>
                 )}
             </form>
+            {error && (
+                <div className="p-2">
+                    <Typography
+                        variant="caption"
+                        color="error"
+                        role="alert"
+                        aria-live="polite"
+                    >
+                        {error}
+                    </Typography>
+                </div>
+            )}
         </Popover>
     );
 };

packages/firecms_core/src/locales/de.ts

@@ -651,6 +651,7 @@ export const de: FireCMSTranslations = {
     editor_cancel: "Abbrechen",
     editor_remove_link: "Link entfernen",
     editor_paste_or_type_link: "Link einfügen oder eintippen",
+    editor_invalid_url: "Ungültige URL",
     editor_open_in_new_window: "In neuem Fenster öffnen",
     editor_bold: "Fett",
     editor_italic: "Kursiv",

packages/firecms_core/src/locales/en.ts

@@ -665,6 +665,7 @@ export const en: FireCMSTranslations = {
     editor_cancel: "Cancel",
     editor_remove_link: "Remove link",
     editor_paste_or_type_link: "Paste or type link",
+    editor_invalid_url: "Invalid URL",
     editor_open_in_new_window: "Open in new window",
     editor_bold: "Bold",
     editor_italic: "Italic",

packages/firecms_core/src/locales/es.ts

@@ -663,6 +663,7 @@ export const es: FireCMSTranslations = {
     editor_cancel: "Cancelar",
     editor_remove_link: "Eliminar enlace",
     editor_paste_or_type_link: "Pega o escribe el enlace",
+    editor_invalid_url: "URL no válida",
     editor_open_in_new_window: "Abrir en una ventana nueva",
     editor_bold: "Negrita",
     editor_italic: "Cursiva",

packages/firecms_core/src/locales/fr.ts

@@ -651,6 +651,7 @@ export const fr: FireCMSTranslations = {
     editor_cancel: "Annuler",
     editor_remove_link: "Supprimer le lien",
     editor_paste_or_type_link: "Coller ou taper le lien",
+    editor_invalid_url: "URL invalide",
     editor_open_in_new_window: "Ouvrir dans une nouvelle fenêtre",
     editor_bold: "Gras",
     editor_italic: "Italique",

packages/firecms_core/src/locales/hi.ts

@@ -651,6 +651,7 @@ export const hi: FireCMSTranslations = {
     editor_cancel: "रद्द करें",
     editor_remove_link: "लिंक हटाएं",
     editor_paste_or_type_link: "लिंक पेस्ट करें या टाइप करें",
+    editor_invalid_url: "अमान्य URL",
     editor_open_in_new_window: "नई विंडो में खोलें",
     editor_bold: "बोल्ड",
     editor_italic: "इटैलिक",

packages/firecms_core/src/locales/it.ts

@@ -651,6 +651,7 @@ export const it: FireCMSTranslations = {
     editor_cancel: "Annulla",
     editor_remove_link: "Rimuovi link",
     editor_paste_or_type_link: "Incolla o digita il link",
+    editor_invalid_url: "URL non valido",
     editor_open_in_new_window: "Apri in una nuova finestra",
     editor_bold: "Grassetto",
     editor_italic: "Corsivo",

packages/firecms_core/src/locales/pl.ts

@@ -655,6 +655,7 @@ export const pl: FireCMSTranslations = {
     editor_cancel: "Anuluj",
     editor_remove_link: "Usuń link",
     editor_paste_or_type_link: "Wklej lub wpisz link",
+    editor_invalid_url: "Nieprawidłowy URL",
     editor_open_in_new_window: "Otwórz w nowym oknie",
     editor_bold: "Pogrubienie",
     editor_italic: "Kursywa",

packages/firecms_core/src/locales/pt.ts

@@ -660,6 +660,7 @@ export const pt: FireCMSTranslations = {
     editor_cancel: "Cancelar",
     editor_remove_link: "Remover ligação",
     editor_paste_or_type_link: "Cole ou escreva a ligação",
+    editor_invalid_url: "URL inválido",
     editor_open_in_new_window: "Abrir numa nova janela",
     editor_bold: "Negrito",
     editor_italic: "Itálico",

packages/firecms_core/src/types/translations.ts

@@ -708,6 +708,7 @@ export interface FireCMSTranslations {
     editor_cancel: string;
     editor_remove_link: string;
     editor_paste_or_type_link: string;
+    editor_invalid_url: string;
     editor_open_in_new_window: string;
     editor_bold: string;
     editor_italic: string;