@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.75005e4

package/src/core/EntitySidePanel.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
 import { EntityCollection, EntitySidePanelProps } from "../types";
-import { useNavigationController, useSideEntityController } from "../hooks";
+import { useNavigationController, useSideEntityController, useTranslation } from "../hooks";
 
 import { ErrorBoundary } from "../components";
 import { EntityEditView, OnUpdateParams } from "./EntityEditView";
@@ -41,6 +41,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
     const sideDialogsController = useSideDialogContext();
+    const { t } = useTranslation();
 
     const onClose = () => {
         if (props.onClose) {
@@ -99,13 +100,13 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const onValuesModified = useCallback((modified: boolean) => {
         setBlockedNavigationMessage(modified
-            ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
+            ? t("unsaved_changes", { collectionName: collection?.singularName ?? collection?.name ?? "" })
             : undefined)
         setBlocked(modified);
-    }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
+    }, [collection?.name, setBlocked, setBlockedNavigationMessage, t]);
 
     if (!props || !collection) {
-        return <div className={"w-full"}/>;
+        return <div className={"w-full"} />;
     }
 
     return (
@@ -120,32 +121,34 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
                     barActions={({
-                                     status,
-                                     values
-                                 }) => <>
-                        <IconButton
-                            className="self-center"
-                            onClick={onClose}>
-                            <CloseIcon size={"small"}/>
-                        </IconButton>
-                        {allowFullScreen && <IconButton
-                            className="self-center"
-                            onClick={() => {
-                                const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-                                saveEntityToMemoryCache(key, values);
-                                if (entityId)
-                                    navigate(location.pathname);
-                                else
-                                    navigate(location.pathname + "#new");
-                            }}>
-                            <OpenInFullIcon size={"small"}/>
-                        </IconButton>}
-                    </>}
+                        status,
+                        values
+                    }) => <>
+                            <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={onClose}>
+                                <CloseIcon size={"smallest"} />
+                            </IconButton>
+                            {allowFullScreen && <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={() => {
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    saveEntityToMemoryCache(key, values);
+                                    if (entityId)
+                                        navigate(location.pathname + location.search);
+                                    else
+                                        navigate(location.pathname + location.search + "#new");
+                                }}>
+                                <OpenInFullIcon size={"smallest"} />
+                            </IconButton>}
+                        </>}
                     onTabChange={({
-                                      entityId,
-                                      selectedTab,
-                                      collection,
-                                  }) => {
+                        entityId,
+                        selectedTab,
+                        collection,
+                    }) => {
                         sideEntityController.replace({
                             path,
                             entityId,

package/src/core/FireCMS.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { CenteredView, Typography } from "@firecms/ui";
+import { AuthController } from "../types";
 import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext } from "../contexts";
+import { AuthControllerContext, ModeControllerProvider } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { useCustomizationController, useFireCMSContext } from "../hooks";
+import { useCustomizationController, useFireCMSContext, useTranslation, ModeController } from "../hooks";
+import { useBuildModeController } from "../hooks/useBuildModeController";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -59,6 +61,10 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
     }
 
+    const { t, i18n } = useTranslation();
+
+    const modeController = useBuildModeController();
+
     const plugins = navigationController.plugins ?? _pluginsProp;
     const userManagement = plugins?.find(p => p.userManagement)?.userManagement
         ?? _userManagement
@@ -106,6 +112,24 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController
     });
 
+    // Inject plugin translations into the existing i18next instance
+    useEffect(() => {
+        if (!i18n) return;
+        plugins?.forEach(plugin => {
+            if (plugin.i18n) {
+                Object.keys(plugin.i18n).forEach(locale => {
+                    i18n.addResourceBundle(
+                        locale,
+                        "firecms_core",
+                        plugin.i18n![locale],
+                        true,  // deep merge
+                        true   // overwrite
+                    );
+                });
+            }
+        });
+    }, [i18n, plugins]);
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }
@@ -133,12 +157,15 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
     if (accessResponse?.blocked) {
         return (
             <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
+                {/* eslint-disable-next-line i18next/no-literal-string */}
                 <Typography variant={"h4"} gutterBottom>
-                    License needed
+                    {t("license_needed")}
                 </Typography>
                 <Typography>
-                    You need a valid license to use FireCMS PRO. Please reach out at <a
-                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                    {(() => {
+                        const parts = t("license_description", { email: "%%EMAIL%%" }).split("%%EMAIL%%");
+                        return <>{parts[0]}<a href={"mailto:hello@firecms.co"}>hello@firecms.co</a>{parts[1]}</>;
+                    })()}
                 </Typography>
                 {accessResponse?.message &&
                     <Typography>{accessResponse?.message}</Typography>}

package/src/core/field_configs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ArrayProperty, FieldProps, Property, PropertyConfig, ResolvedProperty } from "../types";
+import { ArrayProperty, FieldProps, NumberProperty, Property, PropertyConfig, ResolvedProperty, StringProperty } from "../types";
 import {
     ArrayCustomShapedFieldBinding,
     ArrayOfReferencesFieldBinding,
@@ -397,14 +397,19 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "custom_array";
         } else if (isPropertyBuilder(of)) {
             return "repeat";
-        } else if (of?.dataType === "string" && of.enumValues) {
-            return "multi_select";
-        } else if (of?.dataType === "number" && of.enumValues) {
-            return "multi_number_select";
-        } else if (of?.dataType === "string" && of.storage) {
-            return "multi_file_upload";
-        } else if (of?.dataType === "reference") {
-            return "multi_references";
+        } else if (of) {
+            const ofProperty = of as Property;
+            if (ofProperty.dataType === "string" && (ofProperty as StringProperty).enumValues) {
+                return "multi_select";
+            } else if (ofProperty.dataType === "number" && (ofProperty as NumberProperty).enumValues) {
+                return "multi_number_select";
+            } else if (ofProperty.dataType === "string" && (ofProperty as StringProperty).storage) {
+                return "multi_file_upload";
+            } else if (ofProperty.dataType === "reference") {
+                return "multi_references";
+            } else {
+                return "repeat";
+            }
         } else {
             return "repeat";
         }

package/src/editor/components/SlashCommandMenu.tsx

@@ -0,0 +1,348 @@
+import React, { useEffect, useRef, useState, ReactNode } from "react";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { SlashCommandPluginKey } from "../plugins/slashCommandPlugin";
+import {
+    cls,
+    defaultBorderMixin,
+    TextFieldsIcon,
+    CheckBoxIcon,
+    LooksOneIcon,
+    LooksTwoIcon,
+    Looks3Icon,
+    FormatListBulletedIcon,
+    FormatListNumberedIcon,
+    FormatQuoteIcon,
+    CodeIcon,
+    ImageIcon,
+    AutoFixHighIcon
+} from "@firecms/ui";
+import { setBlockType, wrapIn } from "prosemirror-commands";
+import { wrapInList } from "prosemirror-schema-list";
+import { schema } from "../schema";
+import { EditorView } from "prosemirror-view";
+import { EditorAIController } from "../types";
+import { onFileRead, UploadFn } from "../extensions/Image";
+import { textLoadingCommands } from "../extensions/TextLoadingDecorationExtension";
+import { parser } from "../markdown";
+
+interface SuggestionItem {
+    title: string;
+    description: string;
+    icon: ReactNode;
+    searchTerms?: string[];
+    command: (view: EditorView, range: { from: number; to: number }, upload: UploadFn, aiController?: EditorAIController) => void;
+}
+
+const suggestionItems: SuggestionItem[] = [
+    {
+        title: "Text",
+        description: "Just start typing with plain text.",
+        searchTerms: ["p", "paragraph"],
+        icon: <TextFieldsIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            setBlockType(schema.nodes.paragraph)(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "To-do List",
+        description: "Track tasks with a to-do list.",
+        searchTerms: ["todo", "task", "list", "check", "checkbox"],
+        icon: <CheckBoxIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            wrapInList(schema.nodes.task_list)(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Heading 1",
+        description: "Big section heading.",
+        searchTerms: ["title", "big", "large"],
+        icon: <LooksOneIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            setBlockType(schema.nodes.heading, { level: 1 })(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Heading 2",
+        description: "Medium section heading.",
+        searchTerms: ["subtitle", "medium"],
+        icon: <LooksTwoIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            setBlockType(schema.nodes.heading, { level: 2 })(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Heading 3",
+        description: "Small section heading.",
+        searchTerms: ["subtitle", "small"],
+        icon: <Looks3Icon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            setBlockType(schema.nodes.heading, { level: 3 })(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Bullet List",
+        description: "Create a simple bullet list.",
+        searchTerms: ["unordered", "point"],
+        icon: <FormatListBulletedIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            wrapInList(schema.nodes.bullet_list)(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Numbered List",
+        description: "Create a list with numbering.",
+        searchTerms: ["ordered"],
+        icon: <FormatListNumberedIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            wrapInList(schema.nodes.ordered_list)(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Quote",
+        description: "Capture a quote.",
+        searchTerms: ["blockquote"],
+        icon: <FormatQuoteIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            wrapIn(schema.nodes.blockquote)(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Code",
+        description: "Capture a code snippet.",
+        searchTerms: ["codeblock"],
+        icon: <CodeIcon size={18} />,
+        command: (view, range) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+            setBlockType(schema.nodes.code_block)(view.state, view.dispatch);
+        }
+    },
+    {
+        title: "Image",
+        description: "Upload an image from your computer.",
+        searchTerms: ["photo", "picture", "media", "upload", "file"],
+        icon: <ImageIcon size={18} />,
+        command: (view, range, upload) => {
+            view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = "image/*";
+            input.onchange = async () => {
+                if (input.files?.length) {
+                    const file = input.files[0];
+                    if (!file) return;
+                    const pos = view.state.selection.from;
+
+                    const images = Array.from(input.files).filter(f => /image/i.test(f.type));
+                    if (images.length === 0) return false;
+
+                    images.forEach(image => {
+                        const reader = new FileReader();
+                        reader.onload = async (readerEvent) => {
+                            await onFileRead(view, readerEvent, pos, upload, image);
+                        };
+                        reader.readAsDataURL(image);
+                    });
+                }
+                return true;
+            };
+            input.click();
+        }
+    }
+];
+
+const autocompleteSuggestionItem: SuggestionItem = {
+    title: "Autocomplete",
+    description: "Add text based on the context.",
+    searchTerms: ["ai"],
+    icon: <AutoFixHighIcon size={18} />,
+    command: async (view, range, upload, aiController) => {
+        if (!aiController) throw Error("No AiController");
+
+        view.dispatch(view.state.tr.deleteRange(range.from, range.to));
+        setBlockType(schema.nodes.paragraph)(view.state, view.dispatch);
+
+        const { state } = view;
+        const { from, to } = state.selection;
+
+        const textBeforeCursor = state.doc.textBetween(0, from, "\n");
+        const textAfterCursor = state.doc.textBetween(to, state.doc.content.size, "\n");
+
+        let buffer = "";
+        const result = await aiController.autocomplete(textBeforeCursor, textAfterCursor, (delta) => {
+            buffer += delta;
+            if (delta.length !== 0) {
+                textLoadingCommands.toggleLoadingDecoration(view.state, view.dispatch, buffer);
+            }
+        });
+
+        // Insert parsed text result at cursor natively
+        try {
+            // The AI controller might stream literal "\n" characters depending on its JSON decoding layer.
+            // We need to un-escape these back to genuine newlines so MarkdownIt block-parsing works.
+            const unescapedResult = result.replace(/\\n/g, '\n').replace(/\\t/g, '\t');
+
+            const parsedDoc = parser.parse(unescapedResult);
+            if (parsedDoc) {
+                const tr = view.state.tr.replaceWith(view.state.selection.from, view.state.selection.from, parsedDoc.content);
+                view.dispatch(tr);
+            } else {
+                view.dispatch(view.state.tr.insertText(unescapedResult));
+            }
+        } catch (e) {
+            console.error(e);
+            view.dispatch(view.state.tr.insertText(result));
+        }
+    }
+};
+
+export const SlashCommandMenu = ({ upload, aiController }: { upload: UploadFn, aiController?: EditorAIController }) => {
+    const { view, state } = useProseMirrorContext();
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const pluginState = state ? SlashCommandPluginKey.getState(state) : null;
+    const isActive = pluginState?.active;
+    const query = pluginState?.query || "";
+    const range = pluginState?.range;
+
+    const filteredItems = React.useMemo(() => {
+        if (!isActive) return [];
+        const availableItems = [...suggestionItems];
+        if (aiController) availableItems.push(autocompleteSuggestionItem);
+
+        return availableItems.filter(item => {
+            const inTitle = item.title.toLowerCase().includes(query.toLowerCase());
+            if (inTitle) return inTitle;
+            return item.searchTerms?.some(term => term.toLowerCase().includes(query.toLowerCase()));
+        });
+    }, [query, isActive, aiController]);
+
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [query]);
+
+    useEffect(() => {
+        if (!view || !isActive || !range || !menuRef.current) return;
+
+        const start = view.coordsAtPos(range.from);
+        const virtualEl = {
+            getBoundingClientRect() {
+                return {
+                    width: 0,
+                    height: start.bottom - start.top,
+                    x: start.left,
+                    y: start.top,
+                    top: start.top,
+                    left: start.left,
+                    right: start.left,
+                    bottom: start.bottom,
+                };
+            }
+        };
+
+        const cleanup = autoUpdate(virtualEl as any, menuRef.current, () => {
+            if (!menuRef.current) return;
+            computePosition(virtualEl as any, menuRef.current, {
+                placement: "bottom-start",
+                middleware: [offset(4), flip(), shift()],
+                strategy: "fixed"
+            }).then(({ x, y }) => {
+                if (menuRef.current) {
+                    Object.assign(menuRef.current.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                        visibility: "visible",
+                    });
+                }
+            });
+        });
+        return () => cleanup();
+    }, [view, isActive, range]);
+
+    useEffect(() => {
+        if (!isActive || !view) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                e.stopPropagation();
+                setSelectedIndex(prev => (prev + filteredItems.length - 1) % filteredItems.length);
+            } else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                e.stopPropagation();
+                setSelectedIndex(prev => (prev + 1) % filteredItems.length);
+            } else if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                if (filteredItems[selectedIndex] && range) {
+                    filteredItems[selectedIndex].command(view, range, upload, aiController);
+                    view.focus();
+                }
+            } else if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                // Close menu gracefully
+                view.dispatch(view.state.tr.setMeta(SlashCommandPluginKey, { active: false }));
+            }
+        };
+
+        const dom = view.dom;
+        dom.addEventListener("keydown", handleKeyDown, { capture: true });
+        return () => dom.removeEventListener("keydown", handleKeyDown, { capture: true });
+    }, [isActive, selectedIndex, filteredItems, view, range, upload, aiController]);
+
+    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+    useEffect(() => {
+        if (itemRefs.current[selectedIndex]) {
+            itemRefs.current[selectedIndex]?.scrollIntoView({ block: "nearest" });
+        }
+    }, [selectedIndex]);
+
+    if (!isActive || filteredItems.length === 0) return null;
+
+    return (
+        <div
+            ref={menuRef}
+            style={{ position: "fixed", zIndex: 9999, visibility: "hidden" }}
+            className={cls("text-surface-900 dark:text-white max-h-[280px] w-72 overflow-y-auto rounded-md border bg-white dark:bg-surface-900 px-1 py-2 shadow transition-none", defaultBorderMixin)}
+        >
+            {filteredItems.map((item, index) => (
+                <button
+                    key={item.title}
+                    ref={el => { itemRefs.current[index] = el; }}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        if (range && view) {
+                            item.command(view, range, upload, aiController);
+                            view.focus();
+                        }
+                    }}
+                    onMouseDown={(e) => e.preventDefault()}
+                    className={cls("flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-surface-700",
+                        index === selectedIndex ? "bg-blue-100 dark:bg-surface-accent-950" : "")}
+                >
+                    <div className={cls("flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-white dark:bg-surface-900", defaultBorderMixin)}>
+                        {item.icon}
+                    </div>
+                    <div className="flex flex-col overflow-hidden">
+                        <p className="font-medium truncate">{item.title}</p>
+                        <p className="text-xs text-surface-700 dark:text-surface-accent-300 truncate">
+                            {item.description}
+                        </p>
+                    </div>
+                </button>
+            ))}
+        </div>
+    );
+};

package/src/editor/components/editor-bubble-item.tsx

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
+
+interface EditorBubbleItemProps {
+  children: ReactNode;
+  asChild?: boolean;
+  onSelect?: () => void;
+}
+
+export const EditorBubbleItem = forwardRef<
+  HTMLDivElement,
+  EditorBubbleItemProps & Omit<ComponentPropsWithoutRef<"div">, "onSelect">
+>(({ children, asChild, onSelect, ...rest }, ref) => {
+  const { view } = useProseMirrorContext();
+  const Comp = asChild ? Slot : "div";
+
+  if (!view) return null;
+
+  return (
+    <Comp ref={ref} {...rest} onMouseDown={(e: React.MouseEvent) => {
+      // Prevent default to avoid losing focus
+      e.preventDefault();
+    }} onClick={() => onSelect?.()}>
+      {children}
+    </Comp>
+  );
+});
+
+EditorBubbleItem.displayName = "EditorBubbleItem";
+
+export default EditorBubbleItem;