@firecms/core 3.5.0 → 3.5.2-canary.09e1281

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -8,7 +8,6 @@ import {
     Entity,
     EntityAction,
     EntityCollection,
-    EntityReference,
     EntityTableController,
     FilterValues,
     PartialEntityCollection,
@@ -59,14 +58,9 @@ import {
     AddIcon,
     Button,
     cls,
-    focusedDisabled,
-    IconButton,
     KeyboardTabIcon,
     Markdown,
-    Popover,
-    SearchIcon,
     Skeleton,
-    Tooltip,
     Typography
 } from "@firecms/ui";
 import { setIn } from "@firecms/formex";
@@ -88,7 +82,8 @@ import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
 import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
-import { addRecentId, getRecentIds } from "./utils";
+import { addRecentId } from "./utils";
+import { EntityIdHeaderWidget } from "./EntityIdHeaderWidget";
 import { useScrollRestoration } from "../common/useScrollRestoration";
 import { entityCacheKey } from "../../util/entity_cache";
 
@@ -131,6 +126,12 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      */
     updateUrl?: boolean;
 
+    /**
+     * Called with the number of entities in the collection, with the current filters
+     * applied, each time it is counted: the count the breadcrumbs show.
+     */
+    onCountChange?: (count: number) => void;
+
 } & EntityCollection<M>;
 
 /**
@@ -166,6 +167,7 @@ export const EntityCollectionView = React.memo(
         isSubCollection,
         className,
         updateUrl,
+        onCountChange,
         ...collectionProp
     }: EntityCollectionViewProps<M>
     ) {
@@ -350,7 +352,7 @@ export const EntityCollectionView = React.memo(
             });
 
             if (collection) {
-                addRecentId(collection.id, clickedEntity.id);
+                addRecentId(fullIdPath ?? fullPath, clickedEntity.id);
             }
 
             // In a collection group the row's own path is the real one, so the row's segments
@@ -795,8 +797,9 @@ export const EntityCollectionView = React.memo(
         useEffect(() => {
             if (docsCount !== undefined) {
                 breadcrumbs.updateCount(fullPath, docsCount);
+                onCountChange?.(docsCount);
             }
-        }, [docsCount, fullPath, breadcrumbs.updateCount]);
+        }, [docsCount, fullPath, breadcrumbs.updateCount, onCountChange]);
 
         // EntitiesCount fetches count and updates breadcrumb - no visual rendering needed here
         const countFetcher = <EntitiesCount
@@ -1198,105 +1201,3 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
     }
     return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
 }
-
-function EntityIdHeaderWidget({
-    collection,
-    path,
-    pathSegments,
-    fullIdPath
-}: {
-    collection: EntityCollection,
-    path: string,
-    /** `path` split at its real segment boundaries, when the caller knows them. */
-    pathSegments?: string[],
-    fullIdPath: string
-}) {
-
-    const navigation = useNavigationController();
-    const [openPopup, setOpenPopup] = React.useState(false);
-    const [searchString, setSearchString] = React.useState("");
-    const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
-    const sideEntityController = useSideEntityController();
-    const { t } = useTranslation();
-
-    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
-
-    return (
-        <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
-            <Popover
-                open={openPopup}
-                onOpenChange={setOpenPopup}
-                sideOffset={0}
-                align={"start"}
-                alignOffset={-117}
-                trigger={
-                    <IconButton size={"small"}>
-                        <SearchIcon size={"small"} />
-                    </IconButton>
-                }>
-                <div
-                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
-                    <form noValidate={true}
-                        onSubmit={(e) => {
-                            e.preventDefault();
-                            if (!searchString) return;
-                            setOpenPopup(false);
-                            const entityId = searchString.trim();
-                            setRecentIds(addRecentId(collection.id, entityId));
-                            navigateToEntity({
-                                openEntityMode,
-                                collection,
-                                entityId,
-                                path,
-                                pathSegments,
-                                fullIdPath,
-                                sideEntityController,
-                                navigation
-                            })
-                        }}
-                        className={"w-96 max-w-full"}>
-
-                        <div className="flex p-2 w-full gap-2">
-                            <input
-                                autoFocus={openPopup}
-                                placeholder={t("find_entity_by_id")}
-                                // size={"small"}
-                                onChange={(e) => {
-                                    setSearchString(e.target.value);
-                                }}
-                                value={searchString}
-                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled} />
-                            <Button variant={"text"}
-                                disabled={!(searchString.trim())}
-                                type={"submit"}
-                            ><KeyboardTabIcon /></Button>
-                        </div>
-                    </form>
-                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
-                        {recentIds.map(id => (
-                            <ReferencePreview reference={new EntityReference(id, path, undefined, pathSegments)}
-                                key={id}
-                                hover={true}
-                                onClick={() => {
-                                    setOpenPopup(false);
-                                    navigateToEntity({
-                                        openEntityMode,
-                                        collection,
-                                        entityId: id,
-                                        path,
-                                        pathSegments,
-                                        fullIdPath,
-                                        sideEntityController,
-                                        navigation
-                                    })
-                                }}
-                                includeEntityLink={false}
-                                size={"small"} />
-                        ))}
-                    </div>}
-                </div>
-            </Popover>
-
-        </Tooltip>
-    );
-}

package/src/components/EntityCollectionView/EntityIdHeaderWidget.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { Button, cls, focusedDisabled, IconButton, KeyboardTabIcon, Popover, SearchIcon, Tooltip } from "@firecms/ui";
+import { EntityCollection, EntityReference } from "../../types";
+import { navigateToEntity } from "../../util/navigation_utils";
+import { ReferencePreview } from "../../preview";
+import { useNavigationController } from "../../hooks/useNavigationController";
+import { useSideEntityController } from "../../hooks/useSideEntityController";
+import { useTranslation } from "../../hooks/useTranslation";
+import { addRecentId, getRecentIds } from "./utils";
+
+const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" = "side_panel";
+
+/**
+ * "Find by id" in the header of a collection's id column, listing the ids opened in it lately.
+ */
+export function EntityIdHeaderWidget({
+    collection,
+    path,
+    pathSegments,
+    fullIdPath
+}: {
+    collection: EntityCollection,
+    path: string,
+    /** `path` split at its real segment boundaries, when the caller knows them. */
+    pathSegments?: string[],
+    fullIdPath: string
+}) {
+
+    const navigation = useNavigationController();
+    const [openPopup, setOpenPopup] = React.useState(false);
+    const [searchString, setSearchString] = React.useState("");
+    // Kept per full path rather than per collection: a subcollection has the same id under
+    // every parent, and an id found under one parent does not exist under the others.
+    const [recentIds, setRecentIds] = React.useState<string[]>(() => getRecentIds(fullIdPath));
+    const sideEntityController = useSideEntityController();
+    const { t } = useTranslation();
+
+    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
+    return (
+        <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
+            <Popover
+                open={openPopup}
+                onOpenChange={(open) => {
+                    // rows opened since this header mounted are recent too
+                    if (open) setRecentIds(getRecentIds(fullIdPath));
+                    setOpenPopup(open);
+                }}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
+                trigger={
+                    <IconButton size={"small"}>
+                        <SearchIcon size={"small"} />
+                    </IconButton>
+                }>
+                <div
+                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
+                    <form noValidate={true}
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            const entityId = searchString.trim();
+                            // Enter submits even while the button is disabled, and an empty
+                            // id would open a new entity instead
+                            if (!entityId) return;
+                            setOpenPopup(false);
+                            setRecentIds(addRecentId(fullIdPath, entityId));
+                            navigateToEntity({
+                                openEntityMode,
+                                collection,
+                                entityId,
+                                path,
+                                pathSegments,
+                                fullIdPath,
+                                sideEntityController,
+                                navigation
+                            })
+                        }}
+                        className={"w-96 max-w-full"}>
+
+                        <div className="flex p-2 w-full gap-2">
+                            <input
+                                autoFocus={openPopup}
+                                placeholder={t("find_entity_by_id")}
+                                // size={"small"}
+                                onChange={(e) => {
+                                    setSearchString(e.target.value);
+                                }}
+                                value={searchString}
+                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled} />
+                            <Button variant={"text"}
+                                disabled={!(searchString.trim())}
+                                type={"submit"}
+                            ><KeyboardTabIcon /></Button>
+                        </div>
+                    </form>
+                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
+                        {recentIds.map(id => (
+                            <ReferencePreview reference={new EntityReference(id, path, undefined, pathSegments)}
+                                key={id}
+                                hover={true}
+                                onClick={() => {
+                                    setOpenPopup(false);
+                                    navigateToEntity({
+                                        openEntityMode,
+                                        collection,
+                                        entityId: id,
+                                        path,
+                                        pathSegments,
+                                        fullIdPath,
+                                        sideEntityController,
+                                        navigation
+                                    })
+                                }}
+                                includeEntityLink={false}
+                                size={"small"} />
+                        ))}
+                    </div>}
+                </div>
+            </Popover>
+
+        </Tooltip>
+    );
+}

package/src/components/EntityCollectionView/utils.ts

@@ -1,19 +1,19 @@
 import { getLocalStorageJSON, setLocalStorageItem } from "../../util/local_storage";
 
-export function addRecentId(collectionId: string, id: string) {
-    const recentIds = getRecentIds(collectionId);
+export function addRecentId(key: string, id: string) {
+    const recentIds = getRecentIds(key);
     const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
     if (newRecentIds.length > 5) {
         newRecentIds.pop();
     }
-    saveSearchedIdsLocally(collectionId, newRecentIds);
+    saveSearchedIdsLocally(key, newRecentIds);
     return newRecentIds;
 }
 
-export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
-    setLocalStorageItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+export function saveSearchedIdsLocally(key: string, ids: string[]) {
+    setLocalStorageItem("recent_id_searches::" + key, JSON.stringify(ids));
 }
 
-export function getRecentIds(collectionId: string): string[] {
-    return getLocalStorageJSON("recent_id_searches::" + collectionId, []);
+export function getRecentIds(key: string): string[] {
+    return getLocalStorageJSON("recent_id_searches::" + key, []);
 }

package/src/components/HomePage/DefaultHomePage.tsx

@@ -465,6 +465,7 @@ export function DefaultHomePage({
                                             isPotentialCardDropTarget={
                                                 isDraggingCardOnly
                                             }
+                                            disabled={dndDisabled}
                                         >
                                             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
                                                 {entriesInGroup.map(
@@ -472,6 +473,7 @@ export function DefaultHomePage({
                                                         <SortableNavigationCard
                                                             key={entry.url}
                                                             entry={entry}
+                                                            disabled={dndDisabled}
                                                             onClick={() => {
                                                                 let event: CMSAnalyticsEvent =
                                                                     "unmapped_event";

package/src/components/HomePage/HomePageDnD.tsx

@@ -67,10 +67,12 @@ const cloneItemsForDnd = (items: { name: string; entries: NavigationEntry[] }[])
 /* ─────────────────────────────────────────────────────────── */
 export function SortableNavigationCard({
     entry,
-    onClick
+    onClick,
+    disabled
 }: {
     entry: NavigationEntry;
     onClick?: () => void;
+    disabled?: boolean;
 }) {
     const {
         setNodeRef,
@@ -82,7 +84,8 @@ export function SortableNavigationCard({
     } =
         useSortable({
             id: entry.url,
-            animateLayoutChanges
+            animateLayoutChanges,
+            disabled
         });
 
     const style = {
@@ -102,14 +105,19 @@ export function NavigationGroupDroppable({
     id,
     itemIds,
     children,
-    isPotentialCardDropTarget = false
+    isPotentialCardDropTarget = false,
+    disabled
 }: {
     id: UniqueIdentifier;
     itemIds: UniqueIdentifier[];
     children: React.ReactNode;
     isPotentialCardDropTarget?: boolean;
+    disabled?: boolean;
 }) {
-    const { setNodeRef } = useDroppable({ id });
+    const { setNodeRef } = useDroppable({
+        id,
+        disabled
+    });
 
     return (
         <div

package/src/components/common/default_entity_actions.tsx

@@ -38,7 +38,8 @@ export const editEntityAction: EntityAction = {
         });
 
         if (collection) {
-            addRecentId(collection.id, entity.id);
+            // the same key the collection view's "find by id" reads them with
+            addRecentId(fullIdPath ?? fullPath ?? collection.id, entity.id);
         }
 
         const path = collection?.collectionGroup ? entity.path : (fullPath ?? collection?.path ?? entity.path);

package/src/core/DefaultAppBar.tsx

@@ -21,6 +21,8 @@ import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { DrawerLogo } from "./DefaultDrawer";
+import { CollectionCountBadge } from "../components/EntityCollectionView/CollectionCountBadge";
+import { PathTitle } from "../components/EntityCollectionView/CollectionPathTitle";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
@@ -81,6 +83,7 @@ export const DefaultAppBar = function DefaultAppBar({
     const navigation = useNavigationController();
 
     const breadcrumbs = useBreadcrumbsController();
+    const lastBreadcrumb = breadcrumbs.breadcrumbs?.[breadcrumbs.breadcrumbs.length - 1];
 
     const authController = useAuthController();
     const {
@@ -177,15 +180,7 @@ export const DefaultAppBar = function DefaultAppBar({
                                         {breadcrumb.title}
                                     </Typography>
                                     {/* Show count badge for collection breadcrumbs: undefined = not applicable, null = loading, number = count */}
-                                    {breadcrumb.count !== undefined && (
-                                        breadcrumb.count !== null ? (
-                                            <span className="text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-700 px-1 py-0 rounded">
-                                                {breadcrumb.count}
-                                            </span>
-                                        ) : (
-                                            <Skeleton className="w-8 h-4 rounded-md" />
-                                        )
-                                    )}
+                                    <CollectionCountBadge count={breadcrumb.count}/>
                                 </div>
                             </Link>
                         </React.Fragment>;
@@ -193,6 +188,14 @@ export const DefaultAppBar = function DefaultAppBar({
                 </div>
             </div>}
 
+            {/* A row of breadcrumbs does not fit a small screen, but where you are and how
+                many entities are there still matter, so they are folded on two lines. */}
+            {lastBreadcrumb && <PathTitle
+                className={"lg:hidden min-w-0 mr-2"}
+                parents={breadcrumbs.breadcrumbs.slice(0, -1).map(breadcrumb => breadcrumb.title)}
+                name={lastBreadcrumb.title}
+                count={lastBreadcrumb.count}/>}
+
 
             {startAdornment}
 

package/src/core/EntityEditView.tsx

@@ -24,6 +24,7 @@ import {
 import {
     useAuthController,
     useCustomizationController,
+    useDataSource,
     useEntityFetch,
     useFireCMSContext,
     useLargeLayout
@@ -35,6 +36,7 @@ import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 import { createFormexStub } from "../util/createFormexStub";
 import { useTranslation } from "../hooks/useTranslation";
+import { CollectionPathTitle } from "../components/EntityCollectionView/CollectionPathTitle";
 
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
@@ -238,6 +240,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
+
+    // The number of entities in each subcollection tab, as its collection view counts them.
+    const [subcollectionCounts, setSubcollectionCounts] = useState<Record<string, number>>({});
+    const selectedSubcollection = subcollections.find(subcollection => (subcollection.id ?? subcollection.path) === selectedTab);
+    const selectedSubcollectionDataSource = useDataSource(selectedSubcollection ?? collection);
     const customViews = collection.entityViews ?? [];
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
@@ -386,7 +393,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             isSubCollection={true}
                             updateUrl={false}
                             {...subcollection}
-                            openEntityMode={layout} />
+                            openEntityMode={layout}
+                            onCountChange={(count) => setSubcollectionCounts(counts =>
+                                counts[subcollectionId] === count ? counts : { ...counts, [subcollectionId]: count })} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
                                 {t("youd_need_to_save_before_additional_collections")}
@@ -534,6 +543,20 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
+    // A side panel covers the app bar's breadcrumbs, which show where a collection is and
+    // how many entities it has, so the panel shows its subcollection's in its own top bar.
+    const subcollectionTitle = layout === "side_panel" && selectedSubcollection && usedEntity
+        ? (() => {
+            const subcollectionId = selectedSubcollection.id ?? selectedSubcollection.path;
+            return <CollectionPathTitle
+                path={fullIdPath
+                    ? `${fullIdPath}/${encodeEntityId(usedEntity.id)}/${removeInitialAndTrailingSlashes(subcollectionId)}`
+                    : `${path}/${usedEntity.id}/${removeInitialAndTrailingSlashes(selectedSubcollection.path)}`}
+                name={selectedSubcollection.name}
+                count={subcollectionCounts[subcollectionId] ?? (selectedSubcollectionDataSource.countEntities ? null : undefined)}/>;
+        })()
+        : null;
+
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
         {shouldShowTopBar && <div
@@ -546,6 +569,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 status
             })}
 
+            {subcollectionTitle}
+
             <div className={"flex-grow"} />
 
             {pluginActionsTop}

package/src/core/SideDialogs.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { EntitySidePanelProps, SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
-import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
+import { useLeavePageConfirmation } from "../internal/useLeavePageConfirmation";
 import { ErrorBoundary } from "../components";
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 import { EntitySidePanel } from "./EntitySidePanel";
@@ -123,14 +123,7 @@ function SideDialogView({
 
     const sideDialogsController = useSideDialogsController();
 
-    const {
-        navigationWasBlocked,
-        handleOk: handleNavigationOk,
-        handleCancel: handleNavigationCancel
-    } = useNavigationUnsavedChangesDialog(
-        blocked && !drawerCloseRequested,
-        () => setBlocked(false)
-    );
+    useLeavePageConfirmation(blocked && !drawerCloseRequested);
 
     useEffect(() => {
         if (panel)
@@ -140,7 +133,7 @@ function SideDialogView({
     const handleDrawerCloseOk = () => {
         setBlocked(false);
         setDrawerCloseRequested(false);
-        sideDialogsController.close();
+        sideDialogsController.close(panel?.key);
         panel?.onClose?.();
     };
 
@@ -152,7 +145,7 @@ function SideDialogView({
         if (blocked && !force) {
             setDrawerCloseRequested(true);
         } else {
-            sideDialogsController.close();
+            sideDialogsController.close(panel?.key);
             panel?.onClose?.();
         }
     };
@@ -212,8 +205,8 @@ function SideDialogView({
 
             <UnsavedChangesDialog
                 open={drawerCloseRequested}
-                handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
-                handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
+                handleOk={handleDrawerCloseOk}
+                handleCancel={handleDrawerCloseCancel}
                 body={blockedNavigationMessage} />
 
         </SideDialogContext.Provider>

package/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>
     );
 };