@firecms/core 3.1.0 → 3.2.0-canary.4c3b8f2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.1.0",
+  "version": "3.2.0-canary.4c3b8f2",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,22 +53,46 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.1.0",
-    "@firecms/formex": "^3.1.0",
-    "@firecms/ui": "^3.1.0",
+    "@firecms/formex": "3.2.0-canary.4c3b8f2",
+    "@firecms/ui": "3.2.0-canary.4c3b8f2",
+    "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
+    "@radix-ui/react-slot": "^1.2.4",
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",
     "date-fns": "^3.6.0",
     "fuse.js": "^7.1.0",
     "history": "^5.3.0",
+    "i18next": "^23.16.4",
     "json-logic-js": "^2.0.5",
     "markdown-it": "^14.1.0",
+    "markdown-it-ins": "^4.0.0",
+    "markdown-it-mark": "^4.0.0",
+    "markdown-it-task-lists": "^2.1.1",
     "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
     "prism-react-renderer": "^2.4.1",
+    "prosemirror-commands": "^1.6.0",
+    "prosemirror-dropcursor": "^1.8.1",
+    "prosemirror-example-setup": "^1.2.3",
+    "prosemirror-gapcursor": "^1.3.2",
+    "prosemirror-history": "^1.4.1",
+    "prosemirror-inputrules": "^1.5.1",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-markdown": "^1.13.0",
+    "prosemirror-model": "^1.22.3",
+    "prosemirror-schema-basic": "^1.2.3",
+    "prosemirror-schema-list": "^1.4.1",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.8.5",
+    "prosemirror-transform": "^1.10.0",
+    "prosemirror-view": "^1.33.8",
     "react-dropzone": "^14.3.8",
     "react-fast-compare": "^3.2.2",
+    "react-i18next": "^14.1.3",
+    "react-image-crop": "^11.0.10",
+    "react-markdown": "^9.1.0",
+    "react-moveable": "^0.56.0",
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
@@ -95,6 +119,7 @@
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
     "cross-env": "^7.0.3",
+    "eslint-plugin-i18next": "^6.1.3",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
@@ -111,15 +136,27 @@
     "dist",
     "src"
   ],
-  "gitHead": "40f8d9860cb2649c0a195ecebd1a92ccb37f33a6",
+  "gitHead": "b86dabf4d939a8db1d84f4581c8cc3cfcccf0891",
   "publishConfig": {
     "access": "public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
-    ]
+      "react-app/jest",
+      "plugin:i18next/recommended"
+    ],
+    "plugins": [
+      "i18next"
+    ],
+    "rules": {
+      "i18next/no-literal-string": [
+        "warn",
+        {
+          "markupOnly": true
+        }
+      ]
+    }
   },
   "jest": {
     "transform": {
@@ -136,8 +173,7 @@
     ],
     "testEnvironment": "node",
     "moduleNameMapper": {
-      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
-      "^@firecms/editor$": "<rootDir>/test/__mocks__/editorMock.js"
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     }
   }
 }

package/src/app/Scaffold.tsx

@@ -4,6 +4,7 @@ import equal from "react-fast-compare"
 import { useLargeLayout } from "../hooks";
 import { ErrorBoundary } from "../components";
 import { AppContext } from "./useApp";
+import { useTranslation } from "../hooks/useTranslation";
 
 export const DRAWER_WIDTH = 280;
 
@@ -163,6 +164,7 @@ function DrawerWrapper(props: {
     onMouseLeave: () => void
 }) {
 
+    const { t } = useTranslation();
     const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
     const innerDrawer = <div
         className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
@@ -173,7 +175,7 @@ function DrawerWrapper(props: {
     >
 
         {!props.open && props.displayed && (
-            <Tooltip title="Open menu"
+            <Tooltip title={t("open_menu")}
                 side="right"
                 sideOffset={12}
                 asChild={true}>
@@ -181,7 +183,7 @@ function DrawerWrapper(props: {
                     className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
                     <IconButton
                         color="inherit"
-                        aria-label="Open menu"
+                        aria-label={t("open_menu")}
                         onClick={() => props.setDrawerOpen(true)}
                         size="large"
                     >
@@ -195,7 +197,7 @@ function DrawerWrapper(props: {
             className={`z-20 absolute right-0 top-4 ${props.open ? "opacity-100" : "opacity-0 invisible"
                 } transition-opacity duration-200 ease-in-out`}>
             <IconButton
-                aria-label="Close drawer"
+                aria-label={t("close_drawer")}
                 onClick={() => props.setDrawerOpen(false)}
             >
                 <ChevronLeftIcon />
@@ -215,7 +217,7 @@ function DrawerWrapper(props: {
         return <>
             <IconButton
                 color="inherit"
-                aria-label="Open drawer"
+                aria-label={t("open_menu")}
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
                 className="absolute sm:top-2 sm:left-4 top-1 left-2"
@@ -226,7 +228,7 @@ function DrawerWrapper(props: {
                 transparent={true}
                 open={props.open}
                 onOpenChange={props.setDrawerOpen}
-                title={"Navigation drawer"}
+                title={t("navigation_drawer")}
                 overlayClassName={"bg-white bg-opacity-80 bg-white/80"}
             >
                 {innerDrawer}

package/src/components/AIIcon.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { AutoAwesomeIcon } from "@firecms/ui";
+import { useTranslation } from "../hooks";
 
 export interface AIIconProps {
     size?: "smallest" | "small" | "medium" | "large";
@@ -30,10 +31,11 @@ export function AIIcon({ size = "small", className }: AIIconProps) {
  * Shows a pulsing gradient dot.
  */
 export function AIModifiedIndicator({ className }: { className?: string }) {
+    const { t } = useTranslation();
     return (
         <div
             className={`w-2 h-2 rounded-full bg-gradient-to-r from-primary to-secondary animate-pulse ${className ?? ""}`}
-            title="AI modified"
+            title={t("ai_modified")}
         />
     );
 }

package/src/components/ArrayContainer.tsx

@@ -13,6 +13,7 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { getHashValue } from "../util";
+import { useTranslation } from "../hooks";
 import {
     AddIcon,
     Button,
@@ -235,6 +236,7 @@ export function ArrayItemOptions({
     canAddElements?: boolean;
     addInIndex?: (index: number) => void;
 }) {
+    const { t } = useTranslation();
     const [menuOpen, setMenuOpen] = useState(false);
     const iconRef = useRef<HTMLDivElement>(null);
     useOutsideAlerter(iconRef, () => {
@@ -296,7 +298,7 @@ export function ArrayItemOptions({
                         }}
                     >
                         <RemoveIcon size={"small"}/>
-                        Remove
+                        {t("remove")}
                     </MenuItem>
                     <MenuItem
                         dense
@@ -306,7 +308,7 @@ export function ArrayItemOptions({
                         }}
                     >
                         <ContentCopyIcon size={"small"}/>
-                        Copy
+                        {t("copy")}
                     </MenuItem>
                     {addInIndex && (
                         <MenuItem
@@ -317,7 +319,7 @@ export function ArrayItemOptions({
                             }}
                         >
                             <KeyboardArrowUpIcon size={"small"}/>
-                            Add on top
+                            {t("add_on_top")}
                         </MenuItem>
                     )}
                     {addInIndex && (
@@ -329,7 +331,7 @@ export function ArrayItemOptions({
                             }}
                         >
                             <KeyboardArrowDownIcon size={"small"}/>
-                            Add below
+                            {t("add_below")}
                         </MenuItem>
                     )}
                 </Menu>

package/src/components/ClearFilterSortButton.tsx

@@ -1,5 +1,6 @@
 import { FilterListOffIcon, Button, Tooltip } from "@firecms/ui";
 import { EntityTableController } from "../types";
+import { useTranslation } from "../hooks";
 
 export function ClearFilterSortButton({
     tableController,
@@ -8,6 +9,8 @@ export function ClearFilterSortButton({
     enabled: boolean;
     tableController: EntityTableController
 }) {
+    const { t } = useTranslation();
+
     if (!enabled) {
         return null;
     }
@@ -18,11 +21,11 @@ export function ClearFilterSortButton({
     if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
         let label;
         if (filterIsSet && sortIsSet) {
-            label = "Clear filter/sort";
+            label = t("clear_filter_sort");
         } else if (filterIsSet) {
-            label = "Clear filter";
+            label = t("clear_filter");
         } else {
-            label = "Clear sort";
+            label = t("clear_sort");
         }
         return (
             <Tooltip title={label}>

package/src/components/ConfirmationDialog.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton } from "@firecms/ui";
+import { useTranslation } from "../hooks/useTranslation";
 
 export function ConfirmationDialog({
                                        open,
@@ -17,6 +18,7 @@ export function ConfirmationDialog({
     title: React.ReactNode,
     body?: React.ReactNode,
 }) {
+    const { t } = useTranslation();
     return (
         <Dialog
             open={open}
@@ -31,14 +33,14 @@ export function ConfirmationDialog({
                 <Button
                     variant={"text"}
                     onClick={onCancel}
-                    autoFocus>Cancel</Button>
+                    autoFocus>{t("cancel")}</Button>
 
                 <LoadingButton
                     type="submit"
                     loading={loading}
                     onClick={onAccept}
                     autoFocus>
-                    Ok
+                    {t("ok")}
                 </LoadingButton>
             </DialogActions>
         </Dialog>

package/src/components/DeleteEntityDialog.tsx

@@ -11,6 +11,7 @@ import {
 } from "../hooks";
 import { resolveCollection } from "../util";
 import { EntityView } from "./EntityView";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface DeleteEntityDialogProps<M extends Record<string, any>> {
     entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
@@ -39,6 +40,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
+
     const [loading, setLoading] = useState(false);
 
     const context = useFireCMSContext();
@@ -66,7 +69,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const onDeleteFailure = useCallback((entity: Entity<any>, e: Error) => {
         snackbarController.open({
             type: "error",
-            message: "Error deleting: " + e?.message
+            message: t("error_deleting", { message: e?.message })
         });
 
         console.error("Error deleting entity");
@@ -76,7 +79,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const onPreDeleteHookError = useCallback((entity: Entity<any>, e: Error) => {
         snackbarController.open({
             type: "error",
-            message: "Error before deleting: " + e?.message
+            message: t("error_before_delete", { message: e?.message })
         });
         console.error(e);
     }, [resolvedCollection.name]);
@@ -153,7 +156,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
 
     let content: React.ReactNode;
     if (entityOrEntities && multipleEntities) {
-        content = <>Multiple entities</>;
+        content = <>{t("multiple_entities")}</>;
     } else {
         const entity = entityOrEntities as Entity<M> | undefined;
         content = entity
@@ -165,8 +168,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     }
 
     const dialogTitle = multipleEntities
-        ? <><b>{resolvedCollection.name}</b>: Confirm multiple delete?</>
-        : `Would you like to delete this ${resolvedCollection.singularName ?? resolvedCollection.name}?`;
+        ? <><b>{resolvedCollection.name}</b>: {t("confirm_multiple_delete")}</>
+        : t("delete_entity_confirm_title", { entityName: resolvedCollection.singularName ?? resolvedCollection.name });
 
     return (
         <Dialog
@@ -188,14 +191,14 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                 <Button onClick={handleCancel}
                         disabled={loading}
                         variant="text">
-                    Cancel
+                    {t("cancel")}
                 </Button>
                 <Button
                     autoFocus
                     disabled={loading}
                     onClick={handleOk}
                     variant="filled">
-                    Ok
+                    {t("ok")}
                 </Button>
             </DialogActions>
 

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -10,6 +10,7 @@ import { useCustomizationController, useNavigationController, useReferenceDialog
 import { ErrorView } from "../../ErrorView";
 import { cls, EditIcon } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
+import { useTranslation } from "../../../hooks";
 
 type TableReferenceFieldProps = {
     name: string;
@@ -62,6 +63,8 @@ export const TableReferenceFieldInternal = React.memo(
             includeEntityLink
         } = props;
 
+        const { t } = useTranslation();
+
         const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
             updateValue(entity ? getReferenceFrom(entity) : null);
         }, [updateValue]);
@@ -111,7 +114,7 @@ export const TableReferenceFieldInternal = React.memo(
                 return <EntityPreviewContainer
                     onClick={disabled ? undefined : handleOpen}
                     size={getPreviewSizeFrom(size)}>
-                    <ErrorView title="Value is not a reference." error={"Click to edit"}/>
+                    <ErrorView title={t("value_is_not_reference")} error={t("click_to_edit")}/>
                 </EntityPreviewContainer>;
         };
 
@@ -136,11 +139,11 @@ export const TableReferenceFieldInternal = React.memo(
                     }
                 </>;
             else
-                return <ErrorView error={"Data is not an array of references"}/>;
+                return <ErrorView error={t("data_is_not_array_of_references")}/>;
         };
 
         if (!collection)
-            return <ErrorView error={"The specified collection does not exist"}/>;
+            return <ErrorView error={t("collection_does_not_exist")}/>;
 
         return (
             <div className="w-full group">

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -6,7 +6,7 @@ import {
     defaultBorderMixin,
     SearchBar
 } from "@firecms/ui";
-import { useLargeLayout } from "../../../hooks";
+import { useLargeLayout, useTranslation } from "../../../hooks";
 
 interface CollectionTableToolbarProps {
     loading: boolean;
@@ -33,6 +33,7 @@ export function CollectionTableToolbar({
     viewModeToggle
 }: CollectionTableToolbarProps) {
 
+    const { t } = useTranslation();
     const searchInputRef = React.useRef<HTMLInputElement>(null);
     const largeLayout = useLargeLayout();
 
@@ -78,6 +79,7 @@ export function CollectionTableToolbar({
                         disabled={Boolean(onTextSearchClick)}
                         onClick={onTextSearchClick}
                         onTextSearch={onTextSearchClick ? undefined : onTextSearch}
+                        placeholder={t("search")}
                         expandable={true} />}
 
                 {actions}

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -20,7 +20,7 @@ import { useWindowSize } from "./useWindowSize";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
-import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
+import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext, useTranslation } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
@@ -108,6 +108,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     const fireCMSContext = useFireCMSContext();
     const authController = useAuthController();
     const customizationController = useCustomizationController();
+    const { t } = useTranslation();
 
     const [savingError, setSavingError] = React.useState<any>();
     const [popupLocation, setPopupLocation] = useState<{
@@ -345,7 +346,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                         type="submit"
                         disabled={disabled}
                     >
-                        Save
+                        {t("save")}
                     </Button>
                 </DialogActions>
 

package/src/components/EntityCollectionView/BoardSortableList.tsx

@@ -4,6 +4,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { CircularProgress, cls } from "@firecms/ui";
 import { BoardItem, BoardItemViewProps } from "./board_types";
+import { useTranslation } from "../../hooks";
 
 interface BoardSortableListProps<M extends Record<string, any>> {
     columnId: string;
@@ -26,6 +27,7 @@ export function BoardSortableList<M extends Record<string, any>>({
     hasMore = false,
     onLoadMore,
 }: BoardSortableListProps<M>) {
+    const { t } = useTranslation();
     const {
         setNodeRef,
     } = useDroppable({
@@ -97,7 +99,7 @@ export function BoardSortableList<M extends Record<string, any>>({
             {items.length === 0 && !loading ? (
                 <div className="flex-1 flex items-center justify-center">
                     <span className="text-xs text-surface-400 dark:text-surface-500">
-                        No items
+                        {t("no_items")}
                     </span>
                 </div>
             ) : (

package/src/components/EntityCollectionView/CollectionDataErrorBanner.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Typography, IconButton, RefreshIcon, Button, Tooltip } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
+
+export function CollectionDataErrorBanner({ error, onRetry }: { error?: Error, onRetry?: () => void }) {
+    const { t } = useTranslation();
+    if (!error) return null;
+
+    const errorMessage = error.message || "";
+    // Only extract standard Firestore index errors using the standard matching pattern
+    const indexUrl = errorMessage.match(/https:\/\/console\.firebase\.google\.com[^\s]+/)?.[0];
+
+    return (
+        <div className="flex w-full items-center gap-4 px-4 py-3 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800">
+            <Typography variant="body2" className="text-red-700 dark:text-red-300 flex-1 break-words">
+                <strong>{t("error")}:</strong>{" "}
+                {indexUrl
+                    ? t("error_firestore_index")
+                    : errorMessage}
+            </Typography>
+            {onRetry && (
+                <Tooltip title={t("refresh_data")}>
+                    <IconButton
+                        size="small"
+                        onClick={onRetry}
+                    >
+                        <RefreshIcon size="small" />
+                    </IconButton>
+                </Tooltip>
+            )}
+            {indexUrl && (
+                <Button
+                    size="small"
+                    variant="outlined"
+                    color="error"
+                    onClick={() => window.open(indexUrl, "_blank")}
+                >
+                    {t("create_index")}
+                </Button>
+            )}
+        </div>
+    );
+}