@rebasepro/cms 0.23.0 → 0.24.0

package/dist/components/EntityIdentityBar.d.ts

@@ -1,6 +1,24 @@
 import type { AdminCollection } from "@rebasepro/cms-types";
 import type { EntityStatus } from "@rebasepro/types";
 import React from "react";
+import type { PlacedEntityActions } from "../util/entity_actions.js";
+/**
+ * One of the record's own actions, resolved and ready to run — what the bar
+ * needs to draw it as a button or as a menu item.
+ */
+export interface RecordActionItem {
+    key: string;
+    name: string;
+    icon?: React.ReactNode;
+    enabled: boolean;
+    /** Why it is disabled, when it is and its action says. */
+    disabledReason?: string;
+    /**
+     * Runs the action, reporting its own failure. Returns a promise only when
+     * the action is asynchronous, which is what keeps a button's spinner up.
+     */
+    run: () => Promise<void> | undefined;
+}
 export interface EntityIdentityBarProps {
     /** Plural collection name, shown as the breadcrumb ahead of the title. */
     collection: AdminCollection;
@@ -68,10 +86,17 @@ export interface EntityIdentityBarProps {
     externalLink?: string;
     /**
      * Actions performed *on* the record — copy, delete, whatever the collection
-     * adds — as menu items under the overflow button. They live here rather
-     * than in a footer, which is what let the footer go away entirely.
+     * adds — already placed: `inline` ones are buttons ahead of Save, folding
+     * into the overflow menu when the bar runs short of room, and the rest are
+     * menu groups. They live here rather than in a footer, which is what let
+     * the footer go away entirely.
+     */
+    recordActions?: PlacedEntityActions<RecordActionItem>;
+    /**
+     * The read-only view's Edit: its main button, drawn where Save stands on
+     * the edit view — after the record's own buttons, ahead of the menu.
      */
-    recordActions?: React.ReactNode;
+    primaryAction?: React.ReactNode;
     /** Plugin-contributed actions, rendered inline before Save. */
     pluginActions?: React.ReactNode;
     /** Close / full-screen buttons supplied by the panel that owns this view. */
@@ -92,7 +117,7 @@ export interface EntityIdentityBarProps {
  * editing. They live here instead, and the left half of a bar that was
  * previously empty now does the work.
  */
-export declare function EntityIdentityBar({ collection, collectionUrl, title, entityId, status, dirty, saving, onSave, onDiscard, saveDisabled, hasErrors, onSaveAndClose, saveAndClosePlacement, onClose, onBack, onInspect, onViewHistory, externalLink, recordActions, pluginActions, trailing, leading }: EntityIdentityBarProps): React.JSX.Element;
+export declare function EntityIdentityBar({ collection, collectionUrl, title, entityId, status, dirty, saving, onSave, onDiscard, saveDisabled, hasErrors, onSaveAndClose, saveAndClosePlacement, onClose, onBack, onInspect, onViewHistory, externalLink, recordActions, primaryAction, pluginActions, trailing, leading }: EntityIdentityBarProps): React.JSX.Element;
 export type EntitySaveActionsProps = Pick<EntityIdentityBarProps, "status" | "dirty" | "saving" | "onSave" | "onDiscard" | "saveDisabled" | "hasErrors" | "onSaveAndClose" | "saveAndClosePlacement">;
 /**
  * Save, "save and close", Discard, and the words saying where the edit stands.

package/dist/components/NavigationLoadingErrorView.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+/**
+ * The collections or views could not be resolved: a `collections` or `views`
+ * builder threw, or a plugin's `modifyCollections` did, or something either of
+ * them awaited failed.
+ *
+ * That failure used to be caught, logged and stored as
+ * `navigationLoadingError`, and then read by nothing: the home page rendered
+ * an empty search bar and a deep link to a collection spun for ever, or said
+ * the collection was not registered — the wrong cause. This says what failed
+ * and offers the retry the navigation controller already had.
+ */
+export declare function NavigationLoadingErrorView({ error, onRetry }: {
+    error: Error;
+    onRetry?: () => void;
+}): React.JSX.Element;

package/dist/components/common/ActionMenuLabel.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/**
+ * An action's name in a menu and, when it is unavailable and says why, the
+ * reason on a line beneath it.
+ *
+ * In the text rather than a tooltip: a disabled menu item cannot be focused or
+ * hovered into anything, and on a touch screen there is no hover at all — the
+ * reason has to be readable where the item is. It is drawn in the label's own
+ * ink, a size down, because the item dims everything it holds: a muted colour
+ * under that dimming fell below legible.
+ */
+export declare function ActionMenuLabel({ name, disabledReason }: {
+    name: string;
+    disabledReason?: string;
+}): React.JSX.Element;

package/dist/components/common/default_entity_actions.d.ts

@@ -15,3 +15,40 @@ export declare function ResetPasswordActionDialog({ user, open, onClose }: {
     onClose: () => void;
 }): React.JSX.Element;
 export declare const resetPasswordAction: EntityAction;
+/** A user, as the two dialogs below need one. */
+interface AdminActionUser {
+    uid: string;
+    email: string;
+}
+/**
+ * Remove every second factor and recovery code an account has, and end its
+ * sessions — for someone who lost their authenticator and their codes.
+ */
+export declare function ResetMfaActionDialog({ user, open, onClose }: {
+    user: AdminActionUser;
+    open: boolean;
+    onClose: () => void;
+}): React.JSX.Element;
+/**
+ * Switch an account off, or back on. Off, it signs in nowhere and every session
+ * and token it holds ends; the switch reads the account's state first, because
+ * the users table does not carry it.
+ */
+export declare function AccountAccessDialog({ user, open, onClose }: {
+    user: AdminActionUser;
+    open: boolean;
+    onClose: () => void;
+}): React.JSX.Element;
+/**
+ * Reset a user's two-step verification. Offered to whoever holds
+ * `users:write`, as `DELETE /admin/users/:uid/mfa` is; the route also refuses
+ * an account that outranks the caller, and the dialog says so.
+ */
+export declare const resetMfaAction: EntityAction;
+/**
+ * Switch an account off or on. Offered to whoever holds `users:write`, as
+ * `PUT /admin/users/:uid { disabled }` is, and never on the caller's own
+ * account, which the route refuses.
+ */
+export declare const accountAccessAction: EntityAction;
+export {};

package/dist/data_import/components/ImportConversionProblems.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ImportConversionProblem } from "../utils/data.js";
+/**
+ * The cells of an import that do not convert to the type of the field they
+ * map to — per column, how many, and the first few with their row — shown in
+ * the preview, before anything is written. Those cells are left out of the
+ * rows; nothing is turned into `null`, `0` or `false` without saying so.
+ */
+export declare function ImportConversionProblems({ problems }: {
+    problems: ImportConversionProblem[];
+}): React.JSX.Element | null;

package/dist/data_import/components/index.d.ts

@@ -2,3 +2,4 @@ export * from "./DataNewPropertiesMapping.js";
 export * from "./ImportFileUpload.js";
 export * from "./ImportNewPropertyFieldPreview.js";
 export * from "./ImportSaveInProgress.js";
+export * from "./ImportConversionProblems.js";

package/dist/data_import/utils/data.d.ts

@@ -1,5 +1,82 @@
-import { Entity, CollectionRegistryController, Properties, Property } from "@rebasepro/types";
+import { DataType, Entity, CollectionRegistryController, Properties, Property } from "@rebasepro/types";
 import { AuthController } from "@rebasepro/cms-types";
-export declare function convertDataToEntity(authController: AuthController, navigation: CollectionRegistryController, data: Record<any, any>, idColumn: string | undefined, headersMapping: Record<string, string | null>, properties: Properties, path: string, defaultValues: Record<string, any>): Entity<any>;
-export declare function flattenEntry(obj: Record<string, unknown>, parent?: string): Record<string, unknown>;
-export declare function processValueMapping(authController: AuthController, value: any, navigation: CollectionRegistryController, property?: Property): any;
+import { ColumnTarget } from "./import_columns.js";
+/** What the conversion asks of the collection registry: the collection a reference points into. */
+export type ImportCollectionLookup = Pick<CollectionRegistryController, "getCollection">;
+/**
+ * Why a cell could not be converted to its property's type. Each one is a
+ * translation key under `import_problem_`.
+ */
+export type ImportProblemReason = "not_a_number" | "number_leading_zero" | "number_too_precise" | "not_a_boolean" | "not_a_date" | "ambiguous_date" | "not_a_vector" | "not_a_map" | "not_a_geopoint";
+/**
+ * A cell the import could not convert to the type of the property it maps
+ * to. It is left out of the row — the property's default applies — and shown
+ * to the person importing before anything is written.
+ */
+export type ImportConversionProblem = {
+    /** The row's index among the file's data rows, from 0. */
+    row: number;
+    /** The column, as the file names it. */
+    column: string;
+    /** The property the column maps to. */
+    property: string;
+    /** The type that property holds. */
+    expected: DataType;
+    /** The cell, as it was read from the file. */
+    value: unknown;
+    reason: ImportProblemReason;
+};
+/** Reports one cell that did not convert; the cell is then left out. */
+export type ImportProblemListener = (problem: {
+    reason: ImportProblemReason;
+}) => void;
+/**
+ * How a column writes the dates whose day and month are both numbers
+ * (`05/01/2024`): day first, month first, or — when the column holds both —
+ * each date by the only order that can read it.
+ */
+export type SlashDateOrder = "dmy" | "mdy" | "each";
+/**
+ * Convert every row of an imported file, and list each cell that did not
+ * convert. The previews call this, so the list is in front of the person
+ * importing before the first row is written.
+ */
+export declare function convertImportData(authController: AuthController, navigation: ImportCollectionLookup, data: object[], idColumn: string | undefined, headersMapping: Record<string, string | null>, properties: Properties, path: string, defaultValues: Record<string, any>): {
+    entities: Entity<any>[];
+    problems: ImportConversionProblem[];
+};
+export declare function convertDataToEntity(authController: AuthController, navigation: ImportCollectionLookup, data: Record<any, any>, idColumn: string | undefined, headersMapping: Record<string, string | null>, properties: Properties, path: string, defaultValues: Record<string, any>, onProblem?: (problem: Omit<ImportConversionProblem, "row">) => void, dateOrders?: Record<string, SlashDateOrder | undefined>): Entity<any>;
+/**
+ * Where a column lands under the import's mapping: the property the mapping
+ * names for it, `null` for "Do not import this property", and the property
+ * with the column's own name when the mapping does not mention the column.
+ */
+export declare function mappedColumnTarget(headersMapping: Record<string, string | null>): ColumnTarget;
+/**
+ * The cells of one imported row by column name (`address.street`): each
+ * value that is not split into columns of its own (see `importColumns`).
+ * Without `properties`, every object is split.
+ */
+export declare function flattenEntry(obj: Record<string, unknown>, properties?: Properties, targetOf?: ColumnTarget): Record<string, unknown>;
+/**
+ * Convert one cell to the type of the property it lands in.
+ *
+ * A cell is converted only when the property's type can hold what it says:
+ * text becomes a number when it spells one exactly (`readNumberExactly`, the
+ * same answer the inference uses), a boolean when it says yes or no, a date
+ * when it names a day. Anything else is reported to `onProblem`, and the
+ * result is `null` — the caller leaves such a cell out rather than writing
+ * that `null`, a `0` or a `false` in its place.
+ *
+ * @param dateOrder how the cell's column writes day/month dates, when it
+ * writes them with numbers only (see `slashDateOrdersByColumn`).
+ */
+export declare function processValueMapping(authController: AuthController, value: any, navigation: ImportCollectionLookup, property?: Property, onProblem?: ImportProblemListener, dateOrder?: SlashDateOrder): any;
+/**
+ * For each column of the file, how it writes day/month dates with numbers
+ * only, when its values say: a first number past 12 is a day, so the column
+ * is day first; a second number past 12, month first; both, and each date
+ * is read by the only order that fits it. A column that never says is read
+ * in the order of the browser's locale.
+ */
+export declare function slashDateOrdersByColumn(data: object[], properties?: Properties, targetOf?: ColumnTarget): Record<string, SlashDateOrder | undefined>;

package/dist/data_import/utils/import_columns.d.ts

@@ -0,0 +1,48 @@
+import { Properties, Property } from "@rebasepro/types";
+/**
+ * Whether a property's value is an object the import takes whole, from one
+ * column: a geopoint, a vector, or a map that declares no fields (a key-value
+ * map). These are the values the export writes as objects — in a JSON file
+ * as the object, in a CSV cell as its JSON — and splitting one into
+ * `location.latitude` columns left it in columns no property holds: it was
+ * dropped without a word.
+ *
+ * Any other object is read one column per key: a map with declared fields
+ * field by field, as the export writes it, and an object no property takes
+ * so that its keys can be mapped one by one.
+ */
+export declare function takesObjectWhole(property: Property): boolean;
+/** One column of an imported row, as the mapping step lists it. */
+export type ImportColumn = {
+    /** The column's name: a key of the row, or `parent.key` below one. */
+    column: string;
+    value: unknown;
+    /** The property path it lands in, or `null` for none. */
+    target: string | null;
+    /** Its value is an object that is read as one column per key, listed after it. */
+    split: boolean;
+};
+/**
+ * Where a column lands: the property path for it, or `null` for none. A
+ * column below another is given that parent; a top-level one is not.
+ */
+export type ColumnTarget = (column: string, key: string, parent?: Pick<ImportColumn, "column" | "target">) => string | null;
+/**
+ * The columns of one imported row, parents before their children.
+ *
+ * Each key of the row is a column. A key whose value is an object is also
+ * read as one column per key of that object (`address.street`) — unless the
+ * property it lands in takes the object whole (see {@link takesObjectWhole}).
+ *
+ * The mapping step lists these columns and the conversion reads them, so both
+ * get them from here: a list built one way and rows read another is a mapping
+ * whose keys match nothing.
+ */
+export declare function importColumns(row: Record<string, unknown>, properties: Properties | undefined, targetOf: ColumnTarget): ImportColumn[];
+/**
+ * The mapping the import starts from: each column of the file onto the
+ * property with its name, or with its name slugged (`First Name` →
+ * `first_name`); a column below a map onto that map's field. A column that
+ * matches nothing keeps its own name, for the person importing to map.
+ */
+export declare function buildHeadersMappingFromData(rows: object[], properties?: Properties): Record<string, string>;

package/dist/editor/editor.d.ts

@@ -12,6 +12,12 @@ export type RichTextEditorProps = {
     onJsonContentChange?: (content: JSONContent | null) => void;
     onHtmlContentChange?: (content: string) => void;
     handleImageUpload: (file: File) => Promise<string>;
+    /**
+     * Turns an image's stored `src` into a URL to show. `handleImageUpload`
+     * returns a `rebase-storage:` reference to keep in the text — a private
+     * object's URL expires — and the editor asks this for a URL to display it.
+     */
+    resolveImageSrc?: (src: string) => Promise<string | null | undefined>;
     version?: number;
     textSize?: RichTextEditorTextSize;
     highlight?: {
@@ -22,4 +28,4 @@ export type RichTextEditorProps = {
     customComponents?: CustomEditorComponent[];
     disabled?: boolean;
 };
-export declare const RichTextEditor: ({ content, onJsonContentChange, onHtmlContentChange, onMarkdownContentChange, version, textSize, highlight, handleImageUpload, aiController, disabled }: RichTextEditorProps) => React.JSX.Element;
+export declare const RichTextEditor: ({ content, onJsonContentChange, onHtmlContentChange, onMarkdownContentChange, version, textSize, highlight, handleImageUpload, resolveImageSrc, aiController, disabled }: RichTextEditorProps) => React.JSX.Element;

package/dist/editor/extensions/Image.d.ts

@@ -1,6 +1,27 @@
 import { EditorView } from "prosemirror-view";
-import { Plugin, PluginKey } from "prosemirror-state";
+import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 export type UploadFn = (image: File) => Promise<string>;
+/**
+ * Turns an image's stored `src` into one a browser can load.
+ *
+ * An uploaded image is stored as a `rebase-storage:` reference rather than a
+ * URL — a private object's URL carries a token that expires in minutes — so
+ * the editor asks for a URL each time it shows one.
+ */
+export type ImageSrcResolver = (src: string) => Promise<string | null | undefined>;
+/**
+ * Carries the resolver to the image node views. They render in their own React
+ * roots (see `ReactNodeView`), out of reach of any context, so the editor state
+ * is where they can find it.
+ */
+export declare const createImageSrcResolverPlugin: (resolve: ImageSrcResolver) => Plugin;
+/** The resolver this editor was given, if any. */
+export declare function imageSrcResolverOf(state: EditorState): ImageSrcResolver | undefined;
+/**
+ * The URL to load for a stored `src`: a reference resolved, anything else as
+ * it is, and `undefined` for a reference this editor cannot resolve.
+ */
+export declare function loadableImageSrc(state: EditorState, src: string): Promise<string | undefined>;
 export declare function onFileRead(view: EditorView, readerEvent: ProgressEvent<FileReader>, pos: number, upload: UploadFn, image: File): Promise<void>;
 export declare const ImagePluginKey: PluginKey<any>;
 export declare const createDropImagePlugin: (upload: UploadFn) => Plugin;

package/dist/editor/hooks/useProseMirror.d.ts

@@ -1,11 +1,14 @@
 import { EditorState } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+import { type ImageSrcResolver } from "../extensions/Image.js";
 interface UseProseMirrorProps {
     initialContent?: string | any;
     editable?: boolean;
     handleImageUpload?: (file: File) => Promise<string>;
+    /** See {@link RichTextEditorProps.resolveImageSrc}. */
+    resolveImageSrc?: ImageSrcResolver;
 }
-export declare function useProseMirror({ initialContent, editable, handleImageUpload }: UseProseMirrorProps): {
+export declare function useProseMirror({ initialContent, editable, handleImageUpload, resolveImageSrc }: UseProseMirrorProps): {
     state: EditorState;
     view: EditorView | null;
     editorRef: import("react").RefObject<HTMLDivElement | null>;

package/dist/editor.js

@@ -1,9 +1,10 @@
-import { o as sanitizeUrl } from "./util-CC0ozHoD.js";
+import { o as sanitizeUrl } from "./util-D7ebttKT.js";
 import { i as schema, n as parser, r as serializer } from "./markdown-CCqp8ibf.js";
 import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { BoldIcon, Button, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, CodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, IconButton, ImageIcon, ItalicIcon, Label, ListIcon, ListOrderedIcon, Popover, QuoteIcon, Separator, Slot, StrikethroughIcon, TableIcon, TextField, TextareaAutosize, Tooltip, Trash2Icon, TypeIcon, UnderlineIcon, Wand2Icon, cls, defaultBorderMixin, focusedDisabled, iconSize, useInjectStyles } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isStorageReference } from "@rebasepro/types";
 import { EditorState, NodeSelection, Plugin, PluginKey, Selection, TextSelection } from "prosemirror-state";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { DOMParser as DOMParser$1, DOMSerializer, Fragment as Fragment$1 } from "prosemirror-model";
@@ -167,6 +168,35 @@ function slashCommandPlugin() {
 }
 //#endregion
 //#region src/editor/extensions/Image.ts
+var ImageSrcResolverKey = new PluginKey("imageSrcResolver");
+/**
+* Carries the resolver to the image node views. They render in their own React
+* roots (see `ReactNodeView`), out of reach of any context, so the editor state
+* is where they can find it.
+*/
+var createImageSrcResolverPlugin = (resolve) => new Plugin({
+	key: ImageSrcResolverKey,
+	state: {
+		init: () => resolve,
+		apply: (_tr, value) => value
+	}
+});
+/** The resolver this editor was given, if any. */
+function imageSrcResolverOf(state) {
+	return ImageSrcResolverKey.getState(state);
+}
+/**
+* The URL to load for a stored `src`: a reference resolved, anything else as
+* it is, and `undefined` for a reference this editor cannot resolve.
+*/
+async function loadableImageSrc(state, src) {
+	if (!isStorageReference(src)) return src;
+	try {
+		return await imageSrcResolverOf(state)?.(src) ?? void 0;
+	} catch {
+		return;
+	}
+}
 async function onFileRead(view, readerEvent, pos, upload, image) {
 	const { schema } = view.state;
 	const plugin = view.state.plugins.find((p) => p.spec.key === ImagePluginKey);
@@ -200,8 +230,13 @@ async function onFileRead(view, readerEvent, pos, upload, image) {
 		tr.setMeta(plugin, { decorationSet: currentDecos });
 		view.dispatch(tr);
 	};
+	const preloadUrl = await loadableImageSrc(view.state, src);
+	if (!preloadUrl) {
+		replacePlaceholder();
+		return;
+	}
 	const preloader = new Image();
-	preloader.src = src;
+	preloader.src = preloadUrl;
 	preloader.onload = replacePlaceholder;
 	preloader.onerror = replacePlaceholder;
 }
@@ -1244,6 +1279,7 @@ var TableBubble = forwardRef(({ options, className }, ref) => {
 					/* @__PURE__ */ jsx(Tooltip, {
 						title: t("add_row_before"),
 						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": t("add_row_before"),
 							size: "small",
 							onClick: () => executeCommand(addRowBefore),
 							children: /* @__PURE__ */ jsxs("svg", {
@@ -1289,6 +1325,7 @@ var TableBubble = forwardRef(({ options, className }, ref) => {
 					/* @__PURE__ */ jsx(Tooltip, {
 						title: t("add_row_after"),
 						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": t("add_row_after"),
 							size: "small",
 							onClick: () => executeCommand(addRowAfter),
 							children: /* @__PURE__ */ jsxs("svg", {
@@ -1334,6 +1371,7 @@ var TableBubble = forwardRef(({ options, className }, ref) => {
 					/* @__PURE__ */ jsx(Tooltip, {
 						title: t("delete_row"),
 						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": t("delete_row"),
 							size: "small",
 							onClick: () => executeCommand(deleteRow),
 							children: /* @__PURE__ */ jsxs("svg", {
@@ -1378,6 +1416,7 @@ var TableBubble = forwardRef(({ options, className }, ref) => {
 					/* @__PURE__ */ jsx(Tooltip, {
 						title: t("add_column_before"),
 						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": t("add_column_before"),
 							size: "small",
 							onClick: () => executeCommand(addColumnBefore),
 							children: /* @__PURE__ */ jsxs("svg", {
@@ -1423,6 +1462,7 @@ var TableBubble = forwardRef(({ options, className }, ref) => {
 					/* @__PURE__ */ jsx(Tooltip, {
 						title: t("add_column_after"),
 						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": t("add_column_after"),
 							size: "small",
 							onClick: () => executeCommand(addColumnAfter),
 							children: /* @__PURE__ */ jsxs("svg", {
@@ -1468,6 +1508,7 @@ var TableBubble = forwardRef(({ options, className }, ref) => {
 					/* @__PURE__ */ jsx(Tooltip, {
 						title: t("delete_column"),
 						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": t("delete_column"),
 							size: "small",
 							onClick: () => executeCommand(deleteColumn),
 							children: /* @__PURE__ */ jsxs("svg", {
@@ -1509,6 +1550,7 @@ var TableBubble = forwardRef(({ options, className }, ref) => {
 			/* @__PURE__ */ jsx(Tooltip, {
 				title: t("delete_table"),
 				children: /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": t("delete_table"),
 					size: "small",
 					onClick: () => executeCommand(deleteTable),
 					children: /* @__PURE__ */ jsxs("svg", {
@@ -2573,8 +2615,24 @@ var TaskItemComponent = ({ node, view, getPos }) => {
 //#region src/editor/nodeViews/ImageComponent.tsx
 var ImageComponent = ({ node, view, getPos }) => {
 	const selected = view.state.selection.from === getPos();
+	const stored = node.attrs.src;
+	const [shown, setShown] = useState(isStorageReference(stored) ? void 0 : stored);
+	useEffect(() => {
+		let live = true;
+		if (!isStorageReference(stored)) {
+			setShown(stored);
+			return;
+		}
+		setShown(void 0);
+		loadableImageSrc(view.state, stored).then((url) => {
+			if (live) setShown(url);
+		});
+		return () => {
+			live = false;
+		};
+	}, [stored, view]);
 	return /* @__PURE__ */ jsx("img", {
-		src: node.attrs.src,
+		src: shown,
 		alt: node.attrs.alt || "",
 		title: node.attrs.title || "",
 		className: cls("rounded-lg max-w-full !m-0", selected ? "" : "")
@@ -2602,12 +2660,15 @@ var trailingNodePlugin = new Plugin({ appendTransaction: (_, oldState, newState)
 	if (doc.lastChild && doc.lastChild.type.name !== "paragraph") return newState.tr.insert(doc.content.size, newState.schema.nodes.paragraph.create());
 	return null;
 } });
-function useProseMirror({ initialContent, editable = true, handleImageUpload }) {
+function useProseMirror({ initialContent, editable = true, handleImageUpload, resolveImageSrc }) {
+	const resolveImageSrcRef = useRef(resolveImageSrc);
+	resolveImageSrcRef.current = resolveImageSrc;
 	const plugins = [
 		...getCorePlugins(),
 		columnResizing(),
 		tableEditing(),
-		trailingNodePlugin
+		trailingNodePlugin,
+		createImageSrcResolverPlugin(async (src) => resolveImageSrcRef.current ? resolveImageSrcRef.current(src) : void 0)
 	];
 	if (handleImageUpload) plugins.push(createDropImagePlugin(handleImageUpload));
 	const defaultState = EditorState.create({
@@ -2687,7 +2748,7 @@ var proseClasses = {
 	"base": "prose-base",
 	"lg": "prose-lg"
 };
-var RichTextEditor = ({ content, onJsonContentChange, onHtmlContentChange, onMarkdownContentChange, version, textSize = "base", highlight, handleImageUpload, aiController, disabled }) => {
+var RichTextEditor = ({ content, onJsonContentChange, onHtmlContentChange, onMarkdownContentChange, version, textSize = "base", highlight, handleImageUpload, resolveImageSrc, aiController, disabled }) => {
 	const { t } = useTranslation();
 	const [openNode, setOpenNode] = useState(false);
 	const [openLink, setOpenLink] = useState(false);
@@ -2751,7 +2812,8 @@ var RichTextEditor = ({ content, onJsonContentChange, onHtmlContentChange, onMar
 	const { state, view, editorRef } = useProseMirror({
 		initialContent: content,
 		editable: !disabled,
-		handleImageUpload
+		handleImageUpload,
+		resolveImageSrc
 	});
 	const versionRef = useRef(version);
 	useEffect(() => {