@firecms/core 3.3.0 → 3.4.0-canary.00f9be5

package/src/core/EntitySidePanel.tsx

@@ -8,7 +8,7 @@ import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
 import { useLocation, useNavigate } from "react-router-dom";
-import { saveEntityToMemoryCache } from "../util/entity_cache";
+import { entityCacheKey, saveEntityToMemoryCache } from "../util/entity_cache";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -25,6 +25,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         path,
         entityId,
         fullIdPath,
+        pathSegments,
         formProps,
     } = props;
 
@@ -59,6 +60,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         if (params.status !== "existing") {
             sideEntityController.replace({
                 path: params.path,
+                pathSegments: params.pathSegments ?? pathSegments,
                 entityId: params.entityId,
                 fullIdPath: props.fullIdPath,
                 selectedTab: params.selectedTab,
@@ -75,10 +77,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }
 
     const parentCollectionIds = useMemo(() => {
-        return navigationController.getParentCollectionIds(path);
+        return navigationController.getParentCollectionIds(path, pathSegments);
     }, [navigationController, path]);
 
-    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path);
+    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path, false, pathSegments);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -116,6 +118,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                 <EntityEditView
                     {...props}
                     fullIdPath={fullIdPath}
+                    pathSegments={pathSegments}
                     layout={"side_panel"}
                     collection={collection as EntityCollection}
                     parentCollectionIds={parentCollectionIds}
@@ -135,7 +138,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                 className="self-center"
                                 size={"smallest"}
                                 onClick={() => {
-                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : entityCacheKey(path, entityId);
                                     saveEntityToMemoryCache(key, values);
                                     if (entityId)
                                         navigate(location.pathname + location.search);
@@ -152,6 +155,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     }) => {
                         sideEntityController.replace({
                             path,
+                            pathSegments,
                             entityId,
                             fullIdPath: props.fullIdPath,
                             selectedTab,

package/src/core/FireCMS.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import React, { useEffect, useMemo } from "react";
-import { CenteredView, Typography } from "@firecms/ui";
+import React, { useEffect, useMemo, useRef } from "react";
+import { CenteredView } from "@firecms/ui";
+import { AppliedBundles, applyPluginTranslations, createAppliedBundles } from "./plugin_translations";
+import { filterPausedPlugins, isProPaused } from "./pro_plugins";
 import { AuthController } from "../types";
 import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext, ModeControllerProvider } from "../contexts";
@@ -23,6 +25,7 @@ import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
 import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
+import { LicenseStatusContext, publishLicenseStatus } from "../contexts/LicenseStatusContext";
 
 /**
  * If you are using independent components of the CMS
@@ -54,6 +57,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         components,
         navigationController,
         apiKey,
+        telemetry,
         userManagement: _userManagement
     } = props;
 
@@ -61,11 +65,42 @@ 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 { i18n } = useTranslation();
 
     const modeController = useBuildModeController();
 
-    const plugins = navigationController.plugins ?? _pluginsProp;
+    // Every plugin the app mounts. The license check is sent all of their keys:
+    // the server decides from them whether the project needs a license.
+    const allPlugins = navigationController.plugins ?? _pluginsProp;
+
+    const licenseStatus = useProjectLog({
+        apiKey,
+        telemetry,
+        authController,
+        dataSourceDelegate,
+        plugins: allPlugins
+    });
+
+    // The CMS always renders. While PRO is paused, PRO plugins drop out of
+    // everything below (providers, form, collection view and home page
+    // contributions); `useBuildNavigationController` drops their collection,
+    // view and navigation contributions from the status published below.
+    const plugins = useMemo(
+        () => filterPausedPlugins(allPlugins, licenseStatus),
+        [allPlugins, licenseStatus]
+    );
+
+    useEffect(() => {
+        publishLicenseStatus(licenseStatus);
+        if (licenseStatus?.message) {
+            if (isProPaused(licenseStatus)) console.warn(licenseStatus.message);
+            else console.debug(licenseStatus.message);
+        }
+    }, [licenseStatus]);
+
+    // The status belongs to this FireCMS; do not leave it to a later one.
+    useEffect(() => () => publishLicenseStatus(null), []);
+
     const userManagement = plugins?.find(p => p.userManagement)?.userManagement
         ?? _userManagement
         ?? {
@@ -95,13 +130,6 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         onAnalyticsEvent
     }), []);
 
-    const accessResponse = useProjectLog({
-        apiKey,
-        authController,
-        dataSourceDelegate,
-        plugins
-    });
-
     /**
      * Controller in charge of fetching and persisting data
      */
@@ -112,27 +140,42 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController
     });
 
-    // Inject plugin translations into the existing i18next instance
+    // Inject plugin translations into the live i18next instance.
+    //
+    // The work, and the reason repeat writes have to be suppressed, is in
+    // `applyPluginTranslations`. Paused plugins keep their strings: app code
+    // may render their components directly, and strings unlock nothing.
+    const appliedBundles = useRef<AppliedBundles>(createAppliedBundles());
+    const appliedTo = useRef<unknown>(null);
+
     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
-                    );
-                });
-            }
+
+        // A different instance has its own store and has been written nothing.
+        // Reset here rather than in an effect of its own, which would run after
+        // this one and wipe the record of what this pass just wrote.
+        if (appliedTo.current !== i18n) {
+            appliedTo.current = i18n;
+            appliedBundles.current = createAppliedBundles();
+        }
+
+        let active = true;
+        const isActive = () => active;
+        const applyFor = (language: string) => applyPluginTranslations({
+            i18n,
+            plugins: allPlugins,
+            language,
+            applied: appliedBundles.current,
+            isActive
         });
-    }, [i18n, plugins]);
 
-    if (accessResponse?.message) {
-        console.warn(accessResponse.message);
-    }
+        applyFor(i18n.language ?? "en");
+        i18n.on("languageChanged", applyFor);
+        return () => {
+            active = false;
+            i18n.off("languageChanged", applyFor);
+        };
+    }, [i18n, allPlugins]);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -154,26 +197,8 @@ 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>
-                    {t("license_needed")}
-                </Typography>
-                <Typography>
-                    {(() => {
-                        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>}
-            </CenteredView>
-        );
-    }
-
     return (
+        <LicenseStatusContext.Provider value={licenseStatus}>
         <AnalyticsContext.Provider value={analyticsController}>
             <CustomizationControllerContext.Provider value={customizationController}>
                 <UserConfigurationPersistenceContext.Provider
@@ -209,6 +234,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
                 </UserConfigurationPersistenceContext.Provider>
             </CustomizationControllerContext.Provider>
         </AnalyticsContext.Provider>
+        </LicenseStatusContext.Provider>
     );
 
 }

package/src/core/SideDialogs.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { EntitySidePanelProps, SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
@@ -67,6 +67,40 @@ export function SideDialogs() {
     </>;
 }
 
+// Menus, selects and popovers opened inside a side dialog are dismissed by Radix as
+// soon as the pointer goes down, but the dialog underneath only makes up its mind on
+// the click that follows, when that layer is already gone and the dialog looks like
+// the topmost one. Without this, the click that dismisses an open menu also asks the
+// panel to close, and an edited entity greets the user with the unsaved changes dialog.
+const NESTED_LAYER_SELECTOR = [
+    "[data-radix-menu-content]",
+    "[data-radix-select-viewport]",
+    "[data-radix-popper-content-wrapper] [role=\"dialog\"]",
+    "[data-suggestion-menu=\"true\"]"
+].join(",");
+
+function useNestedLayerOpenOnPointerDown() {
+    const ref = useRef(false);
+    useEffect(() => {
+        const onPointerDown = () => {
+            ref.current = Array.from(document.querySelectorAll(NESTED_LAYER_SELECTOR))
+                .some(element => window.getComputedStyle(element).visibility !== "hidden");
+        };
+        // the keyboard dismisses one layer at a time on its own, so a stale pointer
+        // interaction must not swallow a close requested with Escape
+        const onKeyDown = () => {
+            ref.current = false;
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        document.addEventListener("keydown", onKeyDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown, true);
+            document.removeEventListener("keydown", onKeyDown, true);
+        };
+    }, []);
+    return ref;
+}
+
 function SideDialogView({
     offsetPosition,
     panel
@@ -82,6 +116,8 @@ function SideDialogView({
 
     const [pendingClose, setPendingClose] = useState(false);
 
+    const nestedLayerOpenOnPointerDown = useNestedLayerOpenOnPointerDown();
+
     const widthRef = React.useRef<string | undefined>(panel?.width);
     const width = widthRef.current;
 
@@ -144,6 +180,13 @@ function SideDialogView({
                             // Let Tiptap handle closing the menu first
                             return;
                         }
+                        // this interaction started on top of a menu or popover: it dismissed
+                        // that layer, it was not a request to close the panel. The flag is
+                        // left alone because a single click asks to close more than once;
+                        // the next pointer or key interaction recomputes it.
+                        if (nestedLayerOpenOnPointerDown.current) {
+                            return;
+                        }
                         onCloseRequest();
                     }
                 }}

package/src/core/field_configs.tsx

@@ -6,6 +6,7 @@ import {
     ArrayOfReferencesFieldBinding,
     BlockFieldBinding,
     DateTimeFieldBinding,
+    GeopointFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
     MultiSelectFieldBinding,
@@ -34,6 +35,7 @@ import {
     ListAltIcon,
     ListIcon,
     MailIcon,
+    LocationOnIcon,
     NumbersIcon, PersonIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -273,6 +275,17 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: DateTimeFieldBinding
         }
     },
+    geopoint: {
+        key: "geopoint",
+        name: "Geopoint",
+        description: "Latitude and longitude pair",
+        Icon: LocationOnIcon,
+        color: "#0ea5e9",
+        property: {
+            dataType: "geopoint",
+            Field: GeopointFieldBinding
+        }
+    },
     group: {
         key: "group",
         name: "Group",
@@ -419,6 +432,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
         return "switch";
     } else if (property.dataType === "date") {
         return "date_time";
+    } else if (property.dataType === "geopoint") {
+        return "geopoint";
     } else if (property.dataType === "reference") {
         return "reference";
     }

package/src/core/index.tsx

@@ -1,4 +1,5 @@
 export * from "./FireCMS";
+export * from "./pro_plugins";
 
 export * from "./DefaultDrawer";
 export * from "./DrawerNavigationItem";

package/src/core/plugin_translations.ts

@@ -0,0 +1,87 @@
+import type { i18n } from "i18next";
+import { FireCMSPlugin, PluginTranslations } from "../types";
+
+const FIRECMS_NS = "firecms_core";
+
+/**
+ * Record of which bundles have already been written to which locale, so the
+ * same one is never written twice.
+ *
+ * Plugin translation objects are module-level constants and a lazily loaded one
+ * resolves to the same module object every time, so identity is a sound test.
+ */
+export type AppliedBundles = Map<string, Set<object>>;
+
+export function createAppliedBundles(): AppliedBundles {
+    return new Map();
+}
+
+/**
+ * Write the plugins' strings for one language into a live i18next instance.
+ *
+ * Only the language in use is resolved, plus English, which every other language
+ * falls back to — a locale given as a function is a bundle that has not been
+ * downloaded yet, and downloading all of them would undo the point of deferring
+ * them. Plain records are applied for every locale, as before: they are already
+ * in the bundle, so there is nothing to save by holding them back.
+ *
+ * `applied` is what stops the injection feeding itself. A write raises a store
+ * event; the event repaints everything subscribed to this instance, including
+ * the component that owns the `plugins` array — the collection editor and SaaS
+ * plugin hooks both call `useTranslation` — and that array is an inline literal,
+ * so its fresh identity re-runs the effect that called this. react-i18next
+ * happens to stop re-rendering after one pass, but that is a bail-out rather
+ * than a guarantee, and the redundant writes are worth avoiding regardless.
+ *
+ * Returns a function that reports whether the caller is still mounted, so a
+ * bundle that arrives after unmount is dropped rather than written.
+ */
+export function applyPluginTranslations({
+    i18n,
+    plugins,
+    language,
+    applied,
+    isActive = () => true
+}: {
+    i18n: i18n;
+    plugins?: FireCMSPlugin<any, any, any>[];
+    language: string;
+    applied: AppliedBundles;
+    isActive?: () => boolean;
+}) {
+    const wanted = new Set([language.split("-")[0], "en"]);
+
+    const add = (locale: string, bundle: PluginTranslations) => {
+        if (!isActive()) return;
+        let written = applied.get(locale);
+        if (!written) {
+            written = new Set();
+            applied.set(locale, written);
+        }
+        if (written.has(bundle)) return;
+        written.add(bundle);
+        i18n.addResourceBundle(
+            locale,
+            FIRECMS_NS,
+            bundle,
+            true,  // deep merge
+            true   // overwrite
+        );
+    };
+
+    plugins?.forEach((plugin) => {
+        if (!plugin.i18n) return;
+        Object.entries(plugin.i18n).forEach(([locale, translations]) => {
+            if (typeof translations === "function") {
+                if (!wanted.has(locale.split("-")[0])) return;
+                translations()
+                    .then((bundle) => add(locale, bundle))
+                    .catch(() => {
+                        // A locale that fails to load falls back to English.
+                    });
+            } else {
+                add(locale, translations);
+            }
+        });
+    });
+}

package/src/core/pro_plugins.ts

@@ -0,0 +1,79 @@
+import { AccessResponse, FireCMSPlugin } from "../types";
+
+/**
+ * Keys of the plugins that need a FireCMS PRO license.
+ *
+ * Kept in sync by hand with `PRO_PLUGIN_KEYS` in
+ * `saas_backend/functions/src/business_rules/licenses.ts`, which decides from
+ * the same list whether a project needs a license. Change both together.
+ *
+ * @group Core
+ */
+export const PRO_PLUGIN_KEYS: readonly string[] = [
+    "collection_editor",
+    "user_management",
+    "import_export",
+    "import",
+    "export",
+    "entity_history",
+    "data_enhancement",
+    "datatalk"
+];
+
+/**
+ * PRO plugins that stay mounted while PRO is paused. `user_management` supplies
+ * sign-in checks and roles, so removing it would lock users out of the CMS
+ * instead of pausing a feature; its own Users and Roles views show a notice.
+ */
+const KEPT_WHILE_PAUSED: readonly string[] = ["user_management"];
+
+/**
+ * Whether PRO features are paused for this license status. Any `blocked`
+ * response pauses them, whatever its `licenseState` (`expired` and
+ * `invalid_project` both come with it). An unknown status pauses nothing.
+ *
+ * @group Core
+ */
+export function isProPaused(licenseStatus?: AccessResponse | null): boolean {
+    return Boolean(licenseStatus?.blocked);
+}
+
+/**
+ * Whether this plugin is dropped while PRO is paused.
+ *
+ * @group Core
+ */
+export function isPausedPlugin(plugin: Pick<FireCMSPlugin, "key">): boolean {
+    return PRO_PLUGIN_KEYS.includes(plugin.key) && !KEPT_WHILE_PAUSED.includes(plugin.key);
+}
+
+/**
+ * Where to get or fix the license for this status: the server's
+ * `subscribeUrl` when it is an https URL, otherwise the license page on
+ * app.firecms.co with the project, when known.
+ *
+ * @group Core
+ */
+export function getLicenseSubscribeUrl(licenseStatus?: AccessResponse | null): string {
+    const subscribeUrl = licenseStatus?.subscribeUrl;
+    if (subscribeUrl && /^https:\/\//i.test(subscribeUrl))
+        return subscribeUrl;
+    const params = new URLSearchParams({ intent: "pro" });
+    if (licenseStatus?.projectId) params.set("projectId", licenseStatus.projectId);
+    return `https://app.firecms.co/subscriptions?${params.toString()}`;
+}
+
+/**
+ * The plugins that stay active under this license status. Returns the same
+ * array when nothing is dropped, so it can feed memo and effect dependencies.
+ *
+ * @group Core
+ */
+export function filterPausedPlugins<P extends Pick<FireCMSPlugin, "key">>(
+    plugins: P[] | undefined,
+    licenseStatus?: AccessResponse | null
+): P[] | undefined {
+    if (!plugins || !isProPaused(licenseStatus)) return plugins;
+    const active = plugins.filter(plugin => !isPausedPlugin(plugin));
+    return active.length === plugins.length ? plugins : active;
+}

package/src/editor/components/SlashCommandMenu.tsx

@@ -198,11 +198,14 @@ const autocompleteSuggestionItem: SuggestionItem = {
         let buffer = "";
         const result = await aiController.autocomplete(textBeforeCursor, textAfterCursor, (delta) => {
             buffer += delta;
-            if (delta.length !== 0) {
+            if (delta.length !== 0 && !view.isDestroyed) {
                 textLoadingCommands.toggleLoadingDecoration(view.state, view.dispatch, buffer);
             }
         });
 
+        // The editor may have been unmounted while the completion streamed in.
+        if (view.isDestroyed) return;
+
         // Insert parsed text result at cursor natively
         try {
             // The AI controller might stream literal "\n" characters depending on its JSON decoding layer.

package/src/editor/extensions/Image.ts

@@ -4,9 +4,20 @@ import { Plugin, PluginKey } from "prosemirror-state";
 
 export type UploadFn = (image: File) => Promise<string>;
 
+/**
+ * Shows the image as a placeholder at `pos`, uploads it, and swaps the
+ * placeholder for the uploaded image once it has loaded.
+ *
+ * Every step after the first runs asynchronously — the FileReader callback that
+ * calls this, the upload, and the preload of the uploaded image — and the editor
+ * can be unmounted during any of them (the user closes the entity or navigates
+ * away while an image is still uploading). Dispatching on a destroyed
+ * `EditorView` throws inside ProseMirror (`docView` is null), so each step
+ * checks the view is still alive before touching it.
+ */
 export async function onFileRead(view: EditorView, readerEvent: ProgressEvent<FileReader>, pos: number, upload: UploadFn, image: File) {
 
-    const { schema } = view.state;
+    if (view.isDestroyed) return;
 
     // @ts-ignore
     const plugin = view.state.plugins.find((p: Plugin) => p.key === ImagePluginKey.key);
@@ -31,7 +42,12 @@ export async function onFileRead(view: EditorView, readerEvent: ProgressEvent<Fi
     const src = await upload(image);
     console.debug("Uploaded image", src);
 
+    // The upload is kept (the caller stored the file), but there is no longer
+    // an editor to put it in.
+    if (view.isDestroyed) return;
+
     const replacePlaceholder = () => {
+        if (view.isDestroyed) return;
         // Retrieve the LATEST state after the async upload
         let currentDecos = plugin.getState(view.state) as DecorationSet;
         const foundDecos = currentDecos.find(undefined, undefined, spec => spec.id === decoId);

package/src/editor/hooks/useProseMirror.ts

@@ -58,6 +58,11 @@ export function useProseMirror({ initialContent, editable = true, handleImageUpl
             state: defaultState,
             editable: () => editable,
             dispatchTransaction: (tr: Transaction) => {
+                // Async work (image uploads and their preload, AI autocomplete
+                // streams) can finish after the editor unmounted. Applying a
+                // transaction to a destroyed view throws inside ProseMirror
+                // (`docView` is null), so drop it: there is nothing to update.
+                if (editorView.isDestroyed) return;
                 const newState = editorView.state.apply(tr);
                 editorView.updateState(newState);
                 setState(newState);

package/src/editor/index.ts

@@ -1,2 +1,12 @@
-export * from "./editor";
+// The editor's runtime entry point is the lazy wrapper, not the implementation:
+// a static re-export here would pull ProseMirror into every consumer of
+// `@firecms/core`. The types come straight from the implementation and are
+// erased at build time, so they cost nothing.
+export { FireCMSEditor } from "./lazy_editor";
+export type {
+    CustomEditorComponent,
+    MarkdownEditorConfig,
+    FireCMSEditorTextSize,
+    FireCMSEditorProps
+} from "./editor";
 export * from "./types";

package/src/editor/lazy_editor.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+
+import { CircularProgressCenter } from "../components/CircularProgressCenter";
+import type { FireCMSEditorProps } from "./editor";
+
+/**
+ * `FireCMSEditor`, loaded on demand.
+ *
+ * The editor is built on ProseMirror — roughly 250KB across a dozen packages —
+ * and is only reachable from a markdown field, which most views never render.
+ * `MarkdownEditorFieldBinding` already loaded it lazily, but that split was
+ * defeated by `src/index.ts` re-exporting the editor from the package barrel:
+ * a static re-export puts the module back in the entry graph regardless of who
+ * imports it dynamically. So ProseMirror sat in `@firecms/core` for everyone.
+ *
+ * The name and props are unchanged, and this component carries its own Suspense
+ * boundary, so it stays a drop-in for the synchronous component it replaces —
+ * a consumer rendering it without a boundary of their own still works.
+ */
+const LazyFireCMSEditor = React.lazy(() =>
+    import("./editor").then((module) => ({ default: module.FireCMSEditor })));
+
+export function FireCMSEditor(props: FireCMSEditorProps) {
+    return (
+        <React.Suspense fallback={<CircularProgressCenter/>}>
+            <LazyFireCMSEditor {...props}/>
+        </React.Suspense>
+    );
+}
+
+FireCMSEditor.displayName = "FireCMSEditor";