@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.501d471

package/src/editor/selectors/node-selector.tsx

@@ -0,0 +1,157 @@
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorBubbleItem } from "../components";
+import { useTranslation } from "../../hooks/useTranslation";
+
+import {
+    Button,
+    CheckBoxIcon,
+    CheckIcon,
+    CodeIcon,
+    FormatListBulletedIcon,
+    FormatListNumberedIcon,
+    FormatQuoteIcon,
+    KeyboardArrowDownIcon,
+    Looks3Icon,
+    LooksOneIcon,
+    LooksTwoIcon,
+    Popover,
+    TextFieldsIcon
+} from "@firecms/ui";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { isNodeActive } from "../utils/prosemirror-utils";
+import { schema } from "../schema";
+import { setBlockType, wrapIn } from "prosemirror-commands";
+import { wrapInList } from "prosemirror-schema-list";
+
+export type SelectorItem = {
+    name: string;
+    labelKey: string;
+    icon: React.ElementType;
+    command: (state: EditorState, dispatch: (tr: Transaction) => void) => void;
+    isActive: (state: EditorState) => boolean;
+};
+
+const items: SelectorItem[] = [
+    {
+        name: "Text",
+        labelKey: "editor_text",
+        icon: TextFieldsIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.paragraph)(state, dispatch),
+        isActive: (state) =>
+            isNodeActive(state, schema.nodes.paragraph) &&
+            !isNodeActive(state, schema.nodes.bullet_list) &&
+            !isNodeActive(state, schema.nodes.ordered_list),
+    },
+    {
+        name: "Heading 1",
+        labelKey: "editor_heading_1",
+        icon: LooksOneIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 1 })(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 1 }),
+    },
+    {
+        name: "Heading 2",
+        labelKey: "editor_heading_2",
+        icon: LooksTwoIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 2 })(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 2 }),
+    },
+    {
+        name: "Heading 3",
+        labelKey: "editor_heading_3",
+        icon: Looks3Icon,
+        command: (state, dispatch) => setBlockType(schema.nodes.heading, { level: 3 })(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.heading, { level: 3 }),
+    },
+    {
+        name: "To-do List",
+        labelKey: "editor_todo_list",
+        icon: CheckBoxIcon,
+        command: (state, dispatch) => wrapInList(schema.nodes.task_list)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.task_item),
+    },
+    {
+        name: "Bullet List",
+        labelKey: "editor_bullet_list",
+        icon: FormatListBulletedIcon,
+        command: (state, dispatch) => wrapInList(schema.nodes.bullet_list)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.bullet_list),
+    },
+    {
+        name: "Numbered List",
+        labelKey: "editor_numbered_list",
+        icon: FormatListNumberedIcon,
+        command: (state, dispatch) => wrapInList(schema.nodes.ordered_list)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.ordered_list),
+    },
+    {
+        name: "Quote",
+        labelKey: "editor_quote",
+        icon: FormatQuoteIcon,
+        command: (state, dispatch) => wrapIn(schema.nodes.blockquote)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.blockquote),
+    },
+    {
+        name: "Code",
+        labelKey: "editor_code",
+        icon: CodeIcon,
+        command: (state, dispatch) => setBlockType(schema.nodes.code_block)(state, dispatch),
+        isActive: (state) => isNodeActive(state, schema.nodes.code_block),
+    },
+];
+
+interface NodeSelectorProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    portalContainer: HTMLElement | null;
+}
+
+export const NodeSelector = ({
+    open,
+    onOpenChange,
+    portalContainer
+}: NodeSelectorProps) => {
+    const { state, view } = useProseMirrorContext();
+    const { t } = useTranslation();
+    if (!state || !view) return null;
+
+    const activeItem = items.filter((item) => item.isActive(state)).pop() ?? {
+        name: "Multiple",
+        labelKey: "editor_multiple",
+    };
+
+    return (
+        <Popover
+            sideOffset={5}
+            align="start"
+            portalContainer={portalContainer}
+            className="w-48 p-1"
+            trigger={<Button variant="text"
+                className="gap-2 rounded-none"
+                color="text">
+                <span className="whitespace-nowrap text-sm">{t(activeItem.labelKey)}</span>
+                <KeyboardArrowDownIcon size={"small"} />
+            </Button>}
+            modal={true}
+            open={open}
+            onOpenChange={onOpenChange}>
+            {items.map((item, index) => (
+                <EditorBubbleItem
+                    key={index}
+                    onSelect={() => {
+                        item.command(view.state, view.dispatch);
+                        view.focus();
+                        onOpenChange(false);
+                    }}
+                    className="flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-surface-700 text-surface-900 dark:text-white"
+                >
+                    <div className="flex items-center space-x-2">
+                        <item.icon size="smallest" />
+                        <span>{t(item.labelKey)}</span>
+                    </div>
+                    {activeItem.name === item.name && <CheckIcon size="smallest" />}
+                </EditorBubbleItem>
+            ))}
+        </Popover>
+    );
+};

package/src/editor/selectors/text-buttons.tsx

@@ -0,0 +1,86 @@
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorBubbleItem } from "../components";
+import type { SelectorItem } from "./node-selector";
+import {
+    Button,
+    cls,
+    CodeIcon,
+    FormatBoldIcon,
+    FormatItalicIcon,
+    FormatStrikethroughIcon,
+    FormatUnderlinedIcon
+} from "@firecms/ui";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { isMarkActive } from "../utils/prosemirror-utils";
+import { schema } from "../schema";
+import { toggleMark } from "prosemirror-commands";
+
+export const TextButtons = () => {
+    const { state, view } = useProseMirrorContext();
+    if (!state || !view) return null;
+
+    // We pass state directly to isActive, and dispatch to command
+    const items = [
+        {
+            name: "bold",
+            labelKey: "editor_bold",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.bold),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.bold)(s, dispatch),
+            icon: FormatBoldIcon,
+        },
+        {
+            name: "italic",
+            labelKey: "editor_italic",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.italic),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.italic)(s, dispatch),
+            icon: FormatItalicIcon,
+        },
+        {
+            name: "underline",
+            labelKey: "editor_underline",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.underline),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.underline)(s, dispatch),
+            icon: FormatUnderlinedIcon,
+        },
+        {
+            name: "strike",
+            labelKey: "editor_strikethrough",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.strike),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.strike)(s, dispatch),
+            icon: FormatStrikethroughIcon,
+        },
+        {
+            name: "code",
+            labelKey: "editor_code",
+            isActive: (s: EditorState) => isMarkActive(s, schema.marks.code),
+            command: (s: EditorState, dispatch: (tr: Transaction) => void) => toggleMark(schema.marks.code)(s, dispatch),
+            icon: CodeIcon,
+        },
+    ];
+
+    return (
+        <div className="flex">
+            {items.map((item, index) => (
+                <EditorBubbleItem
+                    key={index}
+                    onSelect={() => {
+                        item.command(view.state, view.dispatch);
+                        view.focus();
+                    }}
+                >
+                    <Button size={"small"}
+                        color="text"
+                        className="gap-2 rounded-none h-full"
+                        variant="text">
+                        <item.icon
+                            className={cls({
+                                "text-inherit": !item.isActive(state),
+                                "text-blue-500": item.isActive(state),
+                            })}
+                        />
+                    </Button>
+                </EditorBubbleItem>
+            ))}
+        </div>
+    );
+};

package/src/editor/types.ts

@@ -0,0 +1,6 @@
+import { JSONContent } from "./components";
+export type { JSONContent };
+
+export type EditorAIController = {
+    autocomplete: (textBefore: string, textAfter: string, onUpdate: (delta: string) => void) => Promise<string>;
+}

package/src/editor/useProseMirror.ts

@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState } from "react";
+import { EditorState, Transaction, Plugin } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { schema } from "./schema";
+import { markdownParser, markdownSerializer } from "./markdown";
+import { removeClassesFromJson } from "./utils/remove_classes";
+import { DOMParser as ProseMirrorDOMParser, DOMSerializer } from "prosemirror-model";
+
+export interface UseProseMirrorOptions {
+    content?: any;
+    plugins?: Plugin[];
+    editable?: boolean;
+    onMarkdownContentChange?: (content: string) => void;
+    onJsonContentChange?: (content: any | null) => void;
+    onHtmlContentChange?: (content: string) => void;
+    version?: number;
+}
+
+export function useProseMirror(options: UseProseMirrorOptions) {
+    const mountRef = useRef<HTMLDivElement>(null);
+    const viewRef = useRef<EditorView | null>(null);
+    const [editorState, setEditorState] = useState<EditorState | null>(null);
+    const isUpdatingContentRef = useRef(false);
+
+    useEffect(() => {
+        if (!mountRef.current) return;
+
+        let doc;
+        try {
+            if (typeof options.content === "string") {
+                if (options.content.trim() === "") {
+                    doc = schema.node("doc", null, [schema.node("paragraph")]);
+                } else if (options.content.startsWith("<")) {
+                    const temp = document.createElement("div");
+                    temp.innerHTML = options.content;
+                    doc = ProseMirrorDOMParser.fromSchema(schema).parse(temp);
+                } else {
+                    doc = markdownParser.parse(options.content);
+                }
+            } else if (options.content && typeof options.content === "object" && Object.keys(options.content).length > 0) {
+                doc = schema.nodeFromJSON(options.content);
+            } else {
+                doc = schema.node("doc", null, [schema.node("paragraph")]);
+            }
+        } catch (e) {
+            console.warn("Failed to parse initial content, falling back to empty doc", e);
+            doc = schema.node("doc", null, [schema.node("paragraph")]);
+        }
+
+        const state = EditorState.create({
+            doc,
+            schema,
+            plugins: options.plugins || [],
+        });
+
+        const view = new EditorView(mountRef.current, {
+            state,
+            editable: () => options.editable !== false,
+            dispatchTransaction(transaction: Transaction) {
+                const newState = view.state.apply(transaction);
+                view.updateState(newState);
+                setEditorState(newState);
+
+                if (transaction.docChanged && !isUpdatingContentRef.current) {
+
+                    if (options.onMarkdownContentChange) {
+                        options.onMarkdownContentChange(markdownSerializer.serialize(newState.doc));
+                    }
+                    if (options.onJsonContentChange) {
+                        options.onJsonContentChange(removeClassesFromJson(newState.doc.toJSON()));
+                    }
+                    if (options.onHtmlContentChange) {
+                        const div = document.createElement("div");
+                        const fragment = DOMSerializer.fromSchema(schema).serializeFragment(newState.doc.content);
+                        div.appendChild(fragment);
+                        options.onHtmlContentChange(div.innerHTML);
+                    }
+                }
+            },
+        });
+
+
+
+
+
+        viewRef.current = view;
+        setEditorState(state);
+
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, []); // Initialize once
+
+    // Handle external content updates (like version change)
+    useEffect(() => {
+        if (!viewRef.current || options.version === undefined || options.version <= 0) return;
+        try {
+            isUpdatingContentRef.current = true;
+            let doc;
+            if (typeof options.content === "string") {
+                doc = markdownParser.parse(options.content) || schema.node("doc", null, [schema.node("paragraph")]);
+            } else if (options.content) {
+                doc = schema.nodeFromJSON(options.content);
+            } else {
+                doc = schema.node("doc", null, [schema.node("paragraph")]);
+            }
+
+            const tr = viewRef.current.state.tr.replaceWith(0, viewRef.current.state.doc.content.size, doc);
+            viewRef.current.dispatch(tr);
+            isUpdatingContentRef.current = false;
+        } catch (e) {
+            console.error("Error updating content manually via version bump:", e);
+            isUpdatingContentRef.current = false;
+        }
+    }, [options.version]);
+
+    // Handle editable prop change
+    useEffect(() => {
+        if (viewRef.current && editorState) {
+            viewRef.current.setProps({ editable: () => options.editable !== false });
+        }
+    }, [options.editable, editorState]);
+
+    return { mountRef, view: viewRef.current, editorState };
+}

package/src/editor/utils/prosemirror-utils.ts

@@ -0,0 +1,108 @@
+import { EditorState } from "prosemirror-state";
+
+export function isMarkActive(state: EditorState, type: any) {
+    if (!state || !type) return false;
+    const { from, $from, to, empty } = state.selection;
+    if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
+    return state.doc.rangeHasMark(from, to, type);
+}
+
+export function isNodeActive(state: EditorState, type: any, attrs: any = {}) {
+    if (!state || !type) return false;
+    const { $from, to, node } = state.selection as any;
+    if (node) {
+        return node.type === type && (!attrs || Object.keys(attrs).every((key) => node.attrs[key] === attrs[key]));
+    }
+    return to <= $from.end() && $from.parent.type === type && (!attrs || Object.keys(attrs).every((key) => $from.parent.attrs[key] === attrs[key]));
+}
+
+export function getMarkAttributes(state: EditorState, type: any) {
+    if (!state || !type) return {};
+    const { from, $from, to, empty } = state.selection;
+    let mark;
+    if (empty) {
+        mark = type.isInSet(state.storedMarks || $from.marks());
+    } else {
+        let found = false;
+        state.doc.nodesBetween(from, to, (node) => {
+            if (found) return false;
+            const m = type.isInSet(node.marks);
+            if (m) {
+                mark = m;
+                found = true;
+            }
+            return true;
+        });
+    }
+    return mark ? mark.attrs : {};
+}
+
+export function setMark(type: any, attrs?: any) {
+    return (state: EditorState, dispatch?: (tr: any) => void) => {
+        const { empty, $cursor, ranges } = state.selection as any;
+        if ((empty && !$cursor) || !type) return false;
+        if (dispatch) {
+            if ($cursor) {
+                dispatch(state.tr.addStoredMark(type.create(attrs)));
+            } else {
+                let tr = state.tr;
+                for (let i = 0; i < ranges.length; i++) {
+                    let { $from, $to } = ranges[i];
+                    tr.addMark($from.pos, $to.pos, type.create(attrs));
+                }
+                dispatch(tr.scrollIntoView());
+            }
+        }
+        return true;
+    };
+}
+
+export function unsetMark(type: any) {
+    return (state: EditorState, dispatch?: (tr: any) => void) => {
+        const { empty, $cursor, ranges } = state.selection as any;
+        if ((empty && !$cursor) || !type) return false;
+        if (dispatch) {
+            let tr = state.tr;
+            if ($cursor) {
+                const parent = $cursor.parent;
+                let markStart = -1;
+                let markEnd = -1;
+                let currentMarkStart = -1;
+                
+                parent.forEach((child: any, offset: number) => {
+                    const childStart = $cursor.start() + offset;
+                    const childEnd = childStart + child.nodeSize;
+                    
+                    if (type.isInSet(child.marks)) {
+                        if (currentMarkStart === -1) currentMarkStart = childStart;
+                        if ($cursor.pos >= childStart && $cursor.pos <= childEnd) {
+                            markStart = currentMarkStart;
+                        }
+                    } else {
+                        if (currentMarkStart !== -1) {
+                            if (markStart !== -1 && markEnd === -1) markEnd = childStart;
+                            currentMarkStart = -1;
+                        }
+                    }
+                });
+                
+                if (markStart !== -1 && markEnd === -1) {
+                    markEnd = $cursor.end();
+                }
+                
+                if (markStart !== -1 && markEnd !== -1) {
+                    tr.removeMark(markStart, markEnd, type);
+                }
+                tr.removeStoredMark(type);
+                dispatch(tr.scrollIntoView());
+            } else {
+                for (let i = 0; i < ranges.length; i++) {
+                    let { $from, $to } = ranges[i];
+                    tr.removeMark($from.pos, $to.pos, type);
+                }
+                dispatch(tr.scrollIntoView());
+            }
+        }
+        return true;
+    };
+}

package/src/editor/utils/remove_classes.ts

@@ -0,0 +1,17 @@
+export function removeClassesFromJson(jsonObj: any): any {
+    // If it's an array, apply the function to each element
+    if (Array.isArray(jsonObj)) {
+        return jsonObj.map(item => removeClassesFromJson(item));
+    } else if (typeof jsonObj === "object" && jsonObj !== null) { // If it's an object, recurse through its properties
+        // If the object has an `attrs` property and `class` field, delete the `class` field
+        if (jsonObj.attrs && typeof jsonObj.attrs === "object" && "class" in jsonObj.attrs) {
+            delete jsonObj.attrs.class;
+        }
+
+        // Apply the function recursively to object properties
+        Object.keys(jsonObj).forEach(key => {
+            jsonObj[key] = removeClassesFromJson(jsonObj[key]);
+        });
+    }
+    return jsonObj;
+}

package/src/editor/utils/useDebouncedCallback.ts

@@ -0,0 +1,25 @@
+import React from "react";
+
+export function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
+
+    const pendingUpdate = React.useRef(false);
+    const performUpdate = () => {
+        callback();
+        pendingUpdate.current = false;
+    };
+
+    const handlerRef = React.useRef<number | undefined>(undefined);
+
+    React.useEffect(
+        () => {
+            pendingUpdate.current = true;
+            clearTimeout(handlerRef.current);
+            handlerRef.current = setTimeout(performUpdate, timeoutMs) as any;
+            return () => {
+                if (immediate)
+                    performUpdate();
+            };
+        },
+        [immediate, value]
+    );
+}

package/src/form/EntityForm.tsx

@@ -40,7 +40,10 @@ import {
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
-import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
+import { Formex, FormexController, getIn, setIn, useCreateFormex,
+    useFormex
+} from "@firecms/formex";
+import { useTranslation } from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
@@ -122,6 +125,35 @@ export function extractTouchedValues(values: any, touched: Record<string, boolea
     return acc;
 }
 
+/**
+ * Recursively removes empty plain objects `{}` and empty arrays `[]` from a value tree.
+ * This prevents ghost containers created by `setIn` intermediate path construction
+ * (e.g. `{ address: {} }` when only `address.city` was touched but value is undefined)
+ * from falsely triggering the unsaved local changes indicator.
+ */
+function removeEmptyContainers(obj: any): any {
+    if (Array.isArray(obj)) {
+        const cleaned = obj.map(removeEmptyContainers);
+        // Keep arrays even if they contain only nulls/undefined — that's intentional data
+        return cleaned;
+    }
+    if (obj && typeof obj === "object" && Object.getPrototypeOf(obj) === Object.prototype) {
+        const result: Record<string, any> = {};
+        for (const key of Object.keys(obj)) {
+            const cleaned = removeEmptyContainers(obj[key]);
+            // Skip empty plain objects
+            if (cleaned && typeof cleaned === "object" && !Array.isArray(cleaned)
+                && Object.getPrototypeOf(cleaned) === Object.prototype
+                && Object.keys(cleaned).length === 0) {
+                continue;
+            }
+            result[key] = cleaned;
+        }
+        return result;
+    }
+    return obj;
+}
+
 export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
     const changes: Partial<T> = {};
 
@@ -212,6 +244,7 @@ export function EntityForm<M extends Record<string, any>>({
 
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
+    const { t } = useTranslation();
 
     const navigateBack = useCallback(() => {
         if (openEntityMode === "side_panel") {
@@ -247,7 +280,7 @@ export function EntityForm<M extends Record<string, any>>({
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
 
-    const [underlyingChanges] = useState<Partial<EntityValues<M>>>({});
+    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
 
     const [customIdLoading, setCustomIdLoading] = useState<boolean>(false);
 
@@ -328,7 +361,15 @@ export function EntityForm<M extends Record<string, any>>({
         return [initialValues, initialDirty];
     }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
 
-    const hasLocalChanges = !localChangesCleared && localChangesDataRaw && Object.keys(localChangesDataRaw).length > 0;
+    const hasLocalChanges = useMemo(() => {
+        if (localChangesCleared || !localChangesDataRaw || Object.keys(localChangesDataRaw).length === 0) {
+            return false;
+        }
+        // Compare cached values against entity values to check for real differences
+        const entityValues = entity?.values ?? {};
+        const realChanges = getChanges(localChangesDataRaw as Partial<M>, entityValues as Partial<M>);
+        return Object.keys(realChanges).length > 0;
+    }, [localChangesCleared, localChangesDataRaw, entity?.values]);
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
@@ -348,8 +389,10 @@ export function EntityForm<M extends Record<string, any>>({
         onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
             const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
             if (controller.dirty) {
-                const touchedValues = extractTouchedValues(values, controller.touched);
-                saveEntityToCache(key, touchedValues);
+                const touchedValues = removeEmptyContainers(extractTouchedValues(values, controller.touched));
+                if (touchedValues && Object.keys(touchedValues).length > 0) {
+                    saveEntityToCache(key, touchedValues);
+                }
             }
         },
         validation: (values) => {
@@ -366,6 +409,15 @@ export function EntityForm<M extends Record<string, any>>({
     useEffect(() => {
 
         const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.defaultPrevented) return;
+            const activeElement = document.activeElement as HTMLElement;
+            const isInput = activeElement && (
+                activeElement.tagName === "INPUT" ||
+                activeElement.tagName === "TEXTAREA" ||
+                activeElement.isContentEditable
+            );
+            if (isInput) return;
+
             const isUndo = (e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z";
             const isRedo =
                 ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "z") ||
@@ -653,6 +705,27 @@ export function EntityForm<M extends Record<string, any>>({
 
     useOnAutoSave(autoSave, formex, lastSavedValues, save);
 
+    // Detect external changes to the entity (e.g. from onSnapshot after Admin SDK writes)
+    const prevEntityValuesRef = useRef<EntityValues<M> | undefined>(entity?.values);
+    useEffect(() => {
+        if (!entity?.values || status !== "existing") return;
+        const prev = prevEntityValuesRef.current;
+        prevEntityValuesRef.current = entity.values;
+        if (prev && !equal(prev, entity.values)) {
+            // Compute the diff between the old and new entity values
+            const changes: Partial<EntityValues<M>> = {};
+            const allKeys = new Set([...Object.keys(prev), ...Object.keys(entity.values)]);
+            for (const key of allKeys) {
+                if (!equal((prev as any)[key], (entity.values as any)[key])) {
+                    (changes as any)[key] = (entity.values as any)[key];
+                }
+            }
+            if (Object.keys(changes).length > 0) {
+                setUnderlyingChanges(changes);
+            }
+        }
+    }, [entity?.values, status]);
+
     useEffect(() => {
         if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
             // we update the form fields from the Firestore data
@@ -767,7 +840,7 @@ export function EntityForm<M extends Record<string, any>>({
 
                 {!entity?.values && initialStatus === "existing" &&
                     <Alert color={"warning"} size={"small"} outerClassName={"w-full mb-4 text-xs"}>
-                        This entity does not exist in the database
+                        {t("this_entity_not_exist")}
                     </Alert>}
 
                 {showEntityPath && <Alert color={"base"} outerClassName={"w-full"} size={"small"}>
@@ -781,7 +854,7 @@ export function EntityForm<M extends Record<string, any>>({
             {children}
 
             {initialEntityId && !entity && initialStatus !== "new" && <Alert color={"info"} size={"small"}>
-                This entity does not exist in the database
+                {t("this_entity_not_exist")}
             </Alert>}
 
             {!Builder && !collection.hideIdFromForm &&