@firecms/core 3.4.0-canary.cb27f16 → 3.4.0-canary.ce97da7

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";

package/src/hooks/index.tsx

@@ -14,6 +14,7 @@ export * from "./useDialogsController";
 export * from "./useSideDialogsController";
 export * from "./useSideEntityController";
 export * from "./useFireCMSContext";
+export * from "./useAnalyticsController";
 export * from "./useSnackbarController";
 export * from "./useModeController";
 export * from "./useClipboard";
@@ -32,3 +33,4 @@ export * from "./useBuildModeController";
 
 export * from "./useValidateAuthenticator";
 export * from "./useTranslation";
+export * from "./useLicenseStatus";

package/src/hooks/useBuildNavigationController.tsx

@@ -1,6 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import equal from "react-fast-compare"
 import { useBlocker, useNavigate } from "react-router-dom";
+import { filterPausedPlugins, isProPaused } from "../core/pro_plugins";
+import { useLicenseStatus } from "./useLicenseStatus";
 
 import {
     AuthController,
@@ -115,7 +117,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         views: viewsProp,
         adminViews: adminViewsProp,
         viewsOrder,
-        plugins,
+        plugins: allPlugins,
         userConfigPersistence,
         dataSourceDelegate,
         disabled,
@@ -124,6 +126,27 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const navigate = useNavigate();
 
+    // While PRO is paused, PRO plugins contribute no collections, collection
+    // modifications, views or navigation entries. This hook runs above
+    // `FireCMS`, so the status arrives through the store `FireCMS` publishes to,
+    // and its arrival re-renders this hook, which resolves navigation again.
+    const licenseStatus = useLicenseStatus();
+    const proPaused = isProPaused(licenseStatus);
+    const plugins = useMemo(
+        () => filterPausedPlugins(allPlugins, licenseStatus),
+        [allPlugins, licenseStatus]
+    );
+
+    // Navigation resolves asynchronously, so a resolution started before the
+    // pause changed can finish after one started since. This ref holds the
+    // current pause so the older one is dropped instead of restoring what the
+    // paused plugins contributed. Declared before the effect that refreshes.
+    const proPausedRef = useRef(proPaused);
+    useEffect(() => {
+        proPausedRef.current = proPaused;
+    }, [proPaused]);
+    const resolvedProPausedRef = useRef<boolean | undefined>(undefined);
+
     const collectionsRef = useRef<EntityCollection[] | undefined>(undefined);
     const viewsRef = useRef<CMSView[] | undefined>(undefined);
     const adminViewsRef = useRef<CMSView[] | undefined>(undefined);
@@ -302,7 +325,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             groups: uniqueGroups,
             onNavigationEntriesUpdate: onNavigationEntriesUpdateCallback!,
         };
-    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, plugins]);
 
     const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
         if (!plugins) {
@@ -342,6 +365,8 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
         console.debug("Refreshing navigation");
 
+        const resolvingWhilePaused = proPaused;
+
         try {
 
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
@@ -351,10 +376,21 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             ]
             );
 
+            // Superseded: a newer resolution runs with the current pause.
+            if (resolvingWhilePaused !== proPausedRef.current)
+                return;
+
             const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder, undefined, onNavigationEntriesOrderUpdate);
 
-            let shouldUpdateTopLevelNav = false;
-            if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
+            // When the pause changes, everything below is replaced, including
+            // what the comparisons ignore: they skip functions, and a plugin may
+            // have added only collection callbacks, or only regrouped entries.
+            const pauseChanged = resolvedProPausedRef.current !== undefined
+                && resolvedProPausedRef.current !== resolvingWhilePaused;
+            resolvedProPausedRef.current = resolvingWhilePaused;
+
+            let shouldUpdateTopLevelNav = pauseChanged;
+            if (pauseChanged || !areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
                 console.debug("Collections have changed", resolvedCollections);
                 shouldUpdateTopLevelNav = true;
@@ -363,7 +399,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
                 collectionsRef.current = resolvedCollections;
                 shouldUpdateTopLevelNav = true;
             }
-            if (!equal(viewsRef.current, resolvedViews)) {
+            if (pauseChanged || !equal(viewsRef.current, resolvedViews)) {
                 viewsRef.current = resolvedViews;
                 shouldUpdateTopLevelNav = true;
             }
@@ -400,6 +436,8 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         viewsProp,
         adminViewsProp,
         computeTopNavigation,
+        plugins,
+        proPaused
     ]);
 
     useEffect(() => {
@@ -588,7 +626,9 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         getParentCollectionIds,
         convertIdsToPaths,
         navigate,
-        plugins
+        // All of them, paused or not: `FireCMS` sends every key to the license
+        // check and applies the same pause to what it renders.
+        plugins: allPlugins
     };
 }
 

package/src/hooks/useFireCMSContext.tsx

@@ -12,6 +12,7 @@ import { useCustomizationController } from "./useCustomizationController";
 import { useAnalyticsController } from "./useAnalyticsController";
 import React, { useEffect } from "react";
 import { useInternalUserManagementController } from "./useInternalUserManagementController";
+import { useLicenseStatus } from "./useLicenseStatus";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -36,6 +37,7 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
     const userManagement = useInternalUserManagementController<USER>();
+    const licenseStatus = useLicenseStatus();
 
     const fireCMSContextRef = React.useRef<FireCMSContext<USER, AuthControllerType>>({
         authController,
@@ -49,7 +51,8 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
         dialogsController,
         customizationController,
         analyticsController,
-        userManagement
+        userManagement,
+        licenseStatus
     });
 
     useEffect(() => {
@@ -65,9 +68,10 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
             dialogsController,
             customizationController,
             analyticsController,
-            userManagement
+            userManagement,
+            licenseStatus
         };
-    }, [authController, dialogsController, navigation, sideDialogsController]);
+    }, [authController, dialogsController, navigation, sideDialogsController, licenseStatus]);
 
     return fireCMSContextRef.current;
 }

package/src/hooks/useLicenseStatus.tsx

@@ -0,0 +1,32 @@
+import { useContext, useSyncExternalStore } from "react";
+import { AccessResponse } from "../types";
+import {
+    getLicenseStatusSnapshot,
+    getServerLicenseStatusSnapshot,
+    LicenseStatusContext,
+    subscribeLicenseStatus
+} from "../contexts/LicenseStatusContext";
+
+/**
+ * The FireCMS license status of this project: whether PRO runs on a trial, is
+ * licensed, or is paused, plus the link to get a license.
+ *
+ * `null` until the license check answers, and when it is not sent at all
+ * (`telemetry={false}` without an `apiKey`). A response from an older server
+ * may lack `licenseState`; treat that as unknown. PRO features are paused when
+ * `blocked` is true; use `isProPaused(status)` for that check.
+ *
+ * Works inside `FireCMS` and also above it, e.g. in the component that calls
+ * `useBuildNavigationController`.
+ *
+ * @group Hooks and utilities
+ */
+export function useLicenseStatus(): AccessResponse | null {
+    const fromContext = useContext(LicenseStatusContext);
+    const published = useSyncExternalStore(
+        subscribeLicenseStatus,
+        getLicenseStatusSnapshot,
+        getServerLicenseStatusSnapshot
+    );
+    return fromContext !== undefined ? fromContext : published;
+}

package/src/hooks/useProjectLog.tsx

@@ -1,14 +1,10 @@
 import { useEffect, useRef, useState } from "react";
-import { AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
+import { AccessResponse, AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
+import { PRO_PLUGIN_KEYS } from "../core/pro_plugins";
 
 export const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
 export const DEFAULT_SERVER = "https://api.firecms.co";
 
-export type AccessResponse = {
-    blocked?: boolean;
-    message?: string;
-}
-
 async function makeRequest(authController: AuthController, dataSourceKey: string, pluginKeys: string[] | undefined, apiKey?: string): Promise<AccessResponse> {
     let idToken: string | null;
     try {
@@ -40,24 +36,46 @@ export interface UseProjectLogParams {
     apiKey?: string;
     authController: AuthController;
     dataSourceDelegate: DataSourceDelegate;
+    /**
+     * Every plugin the app mounts, before any are paused: the server decides
+     * from these keys whether the project needs a license.
+     */
     plugins?: FireCMSPlugin<any, any, any>[];
+    /**
+     * When false, no request is sent, unless the request is a license check:
+     * with an `apiKey`, or with a PRO plugin mounted, it is always sent.
+     */
+    telemetry?: boolean;
 }
 
 export function useProjectLog({
                                   authController,
                                   dataSourceDelegate,
                                   plugins,
-                                  apiKey
+                                  apiKey,
+                                  telemetry = true
                               }: UseProjectLogParams): AccessResponse | null {
     const [accessResponse, setAccessResponse] = useState<AccessResponse | null>(null);
     const accessedUserRef = useRef<string | null>(null);
     const dataSourceKey = dataSourceDelegate.key;
     const pluginKeys = plugins?.map(plugin => plugin.key);
+    // Opting out is for apps without PRO plugins. With one mounted, the
+    // request is what starts the trial and pauses PRO when it ends, so
+    // skipping it would unlock PRO for good.
+    const runsProPlugin = (pluginKeys ?? []).some(key => PRO_PLUGIN_KEYS.includes(key));
+    const enabled = Boolean(apiKey) || runsProPlugin || telemetry !== false;
     useEffect(() => {
+        if (!enabled) return;
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController, dataSourceKey, pluginKeys, apiKey).then(setAccessResponse);
+            makeRequest(authController, dataSourceKey, pluginKeys, apiKey)
+                .then((response) => setAccessResponse(response && typeof response === "object" ? response : null))
+                .catch((error) => {
+                    // The check never gates the CMS, so a failed one only
+                    // leaves the license status unknown.
+                    console.debug("FireCMS license check failed", error);
+                });
             accessedUserRef.current = authController.user.uid;
         }
-    }, [authController, dataSourceKey, pluginKeys]);
+    }, [authController, dataSourceKey, pluginKeys, enabled]);
     return accessResponse;
 }

package/src/hooks/useTranslation.ts

@@ -23,8 +23,10 @@ export function useTranslation() {
      * Also supports i18next interpolation variables, e.g.
      *   t("add_to_field", { fieldName: "Tags" })
      *   t("error_deleting", { message: err.message })
+     * Pass `count` as a number to pick a plural form (`key_one`, falling back
+     * to `key`); i18next ignores a string `count`.
      */
-    const typedT = (key: string, vars?: Record<string, string>): string =>
+    const typedT = (key: string, vars?: Record<string, string | number>): string =>
         t(key, vars) as string;
 
     return { t: typedT, i18n };