@firecms/core 3.4.0-canary.f6a889a → 3.5.0

package/src/core/EntityEditView.tsx

@@ -12,6 +12,7 @@ import {
 
 import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
 import {
+    buildSubcollectionPathSegments,
     canEditEntity,
     encodeEntityId,
     removeInitialAndTrailingSlashes,
@@ -28,7 +29,7 @@ import {
     useLargeLayout
 } from "../hooks";
 import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography, Menu, MenuItem, ExpandMoreIcon } from "@firecms/ui";
-import { getEntityFromMemoryCache } from "../util/entity_cache";
+import { entityCacheKey, getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
@@ -42,6 +43,8 @@ export type OnUpdateParams = {
     entity: Entity<any>,
     status: EntityStatus,
     path: string,
+    /** `path` split at its real segment boundaries, when known. Never derived from `path`. */
+    pathSegments?: string[],
     entityId?: string;
     selectedTab?: string;
     collection: EntityCollection<any>
@@ -71,6 +74,12 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
      * The navigation path to the entity.
      */
     fullIdPath?: string;
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     * Forwarded to the datasource, and extended for any subcollection rendered inside this
+     * view, so a parent entity id containing "/" stays unambiguous.
+     */
+    pathSegments?: string[];
     collection: EntityCollection<M>;
     entityId?: string;
     databaseId?: string;
@@ -101,6 +110,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         dataLoadingError
     } = useEntityFetch<M, USER>({
         path: props.path,
+        pathSegments: props.pathSegments,
         entityId: entityId,
         collection: props.collection,
         databaseId: props.databaseId,
@@ -108,7 +118,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     });
 
     const initialDirtyValues = entityId
-        ? getEntityFromMemoryCache(props.path + "/" + entityId)
+        ? getEntityFromMemoryCache(entityCacheKey(props.path, entityId))
         : getEntityFromMemoryCache(props.path + "#new");
 
     const authController = useAuthController();
@@ -120,7 +130,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         if (status === "new" || status === "copy") {
             return true;
         } else {
-            return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : undefined;
+            return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null, props.pathSegments) : undefined;
         }
     }, [authController, entity, status]);
 
@@ -146,6 +156,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
 export function EntityEditViewInner<M extends Record<string, any>>({
     path,
     fullIdPath,
+    pathSegments,
     entityId,
     selectedTab: selectedTabProp,
     collection,
@@ -194,6 +205,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             entityId,
             parentCollectionIds,
             path,
+            pathSegments,
             status,
             collection,
             context,
@@ -351,6 +363,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.path)}` : undefined;
         // `newFullIdPath` is fed to buildUrlCollectionPath downstream, so it stays escaped.
         const newFullIdPath = fullIdPath && usedEntity ? `${fullIdPath}/${encodeEntityId(usedEntity.id)}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        // Only extendable when we were given real segments — deriving the parent chain
+        // from the flattened `path` would drop the boundary of a slash-bearing parent id.
+        const newPathSegments = buildSubcollectionPathSegments(pathSegments, usedEntity?.id, subcollection.path);
 
         if (selectedTab !== subcollectionId) return null;
         return (
@@ -365,6 +380,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     (usedEntity && newFullPath
                         ? <EntityCollectionView
                             fullPath={newFullPath}
+                            pathSegments={newPathSegments}
                             fullIdPath={newFullIdPath}
                             parentCollectionIds={[...parentCollectionIds, collection.id]}
                             isSubCollection={true}
@@ -414,6 +430,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         fullIdPath={fullIdPath}
         collection={collection}
         path={path}
+        pathSegments={pathSegments}
         entityId={entityId ?? usedEntity?.id}
         onValuesModified={onValuesModified}
         entity={entity}

package/src/core/EntityEditViewFormActions.tsx

@@ -39,6 +39,7 @@ import { ErrorTooltip } from "../components/ErrorTooltip";
 export function EntityEditViewFormActions({
                                               collection,
                                               path,
+                                              pathSegments,
                                               entity,
                                               layout,
                                               savingError,
@@ -63,8 +64,8 @@ export function EntityEditViewFormActions({
         const customEntityActions = (collection.entityActions ?? [])
             .map(action => resolveEntityAction(action, customizationController.entityActions))
             .filter(Boolean) as EntityAction[];
-        const createEnabled = canCreateEntity(collection, authController, path, null);
-        const deleteEnabled = entity ? canDeleteEntity(collection, authController, path, entity) : false;
+        const createEnabled = canCreateEntity(collection, authController, path, null, pathSegments);
+        const deleteEnabled = entity ? canDeleteEntity(collection, authController, path, entity, entity.pathSegments ?? pathSegments) : false;
         const actions: EntityAction[] = [];
         if (createEnabled)
             actions.push(copyEntityAction);

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/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);