@firecms/core 3.0.0-canary.99 → 3.0.0-rc.1

package/src/util/index.ts

@@ -7,6 +7,7 @@ export * from "./objects";
 export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
+export * from "./entity_actions";
 export * from "./useDebouncedCallback";
 export * from "./property_utils";
 export * from "./resolutions";
@@ -21,3 +22,5 @@ export * from "./make_properties_editable";
 export * from "./join_collections";
 export * from "./builders";
 export * from "./useTraceUpdate";
+export * from "./storage";
+export * from "./callbacks";

package/src/util/join_collections.ts

@@ -78,6 +78,7 @@ export function mergeCollection(target: EntityCollection,
                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
 ): EntityCollection {
 
+
     const subcollectionsMerged = joinCollectionLists(
         target?.subcollections ?? [],
         source?.subcollections ?? [],
@@ -94,18 +95,20 @@ export function mergeCollection(target: EntityCollection,
             propertiesMerged[key] = source.properties[key] as PropertyOrBuilder;
     });
 
-    const mergedCollection = mergeDeep(target, source);
+    const mergedCollection = mergeDeep(target, source, true);
     const targetPropertiesOrder = getCollectionKeys(target);
     const sourcePropertiesOrder = getCollectionKeys(source);
     const mergedPropertiesOrder = [...new Set([...sourcePropertiesOrder, ...targetPropertiesOrder])];
     const mergedEntityViews = [...new Set([...(target.entityViews ?? []), ...(source.entityViews ?? [])])];
+    const mergedEntityActions = [...new Set([...(target.entityActions ?? []), ...(source.entityActions ?? [])])];
 
     let resultCollection: EntityCollection = {
         ...mergedCollection,
         subcollections: subcollectionsMerged,
         properties: sortProperties(propertiesMerged, mergedPropertiesOrder),
         propertiesOrder: mergedPropertiesOrder,
-        entityViews: mergedEntityViews
+        entityViews: mergedEntityViews,
+        entityActions: mergedEntityActions,
     };
     if (modifyCollection) {
         const modifiedCollection = modifyCollection({
@@ -115,6 +118,10 @@ export function mergeCollection(target: EntityCollection,
         if (modifiedCollection)
             resultCollection = modifiedCollection;
     }
+
+    // @ts-ignore
+    resultCollection["merged"] = true;
+
     return resultCollection
 }
 

package/src/util/make_properties_editable.ts

@@ -4,9 +4,11 @@ import { isPropertyBuilder } from "./entities";
 export function makePropertiesEditable(properties: Properties) {
     Object.keys(properties).forEach((key) => {
         const property = properties[key];
-        property.editable = true;
-        if (property.dataType === "map" && property.properties) {
-            makePropertiesEditable(property.properties as Properties);
+        if (property) {
+            property.editable = true;
+            if (property.dataType === "map" && property.properties) {
+                makePropertiesEditable(property.properties as Properties);
+            }
         }
     });
     return properties;
@@ -15,13 +17,19 @@ export function makePropertiesEditable(properties: Properties) {
 export function makePropertiesNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders {
     return Object.entries(properties).reduce((acc, [key, property]) => {
         if (!isPropertyBuilder(property) && property.dataType === "map" && property.properties) {
-            const updated = { ...property, properties: makePropertiesNonEditable(property.properties as PropertiesOrBuilders) };
+            const updated = {
+                ...property,
+                properties: makePropertiesNonEditable(property.properties as PropertiesOrBuilders)
+            };
             acc[key] = updated;
         }
         if (isPropertyBuilder(property)) {
             acc[key] = property;
         } else {
-            acc[key] = { ...property, editable: false };
+            acc[key] = {
+                ...property,
+                editable: false
+            };
         }
         return acc;
     }, {} as PropertiesOrBuilders);

package/src/util/navigation_from_path.ts

@@ -11,32 +11,42 @@ export interface NavigationViewEntityInternal<M extends Record<string, any>> {
     type: "entity";
     entityId: string;
     path: string;
+    fullIdPath: string;
+    fullPath: string;
     parentCollection: EntityCollection<M>;
 }
 
 export interface NavigationViewCollectionInternal<M extends Record<string, any>> {
     type: "collection";
+    id: string;
     path: string;
+    fullIdPath: string;
+    fullPath: string;
     collection: EntityCollection<M>;
 }
 
 export interface NavigationViewEntityCustomInternal<M extends Record<string, any>> {
     type: "custom_view";
     path: string;
+    fullIdPath: string;
+    fullPath: string;
+    entityId: string;
     view: EntityCustomView<M>;
 }
 
-export function getNavigationEntriesFromPathInternal(props: {
+export function getNavigationEntriesFromPath(props: {
     path: string,
     collections: EntityCollection[] | undefined,
     currentFullPath?: string,
+    currentFullIdPath?: string,
     contextEntityViews?: EntityCustomView<any>[]
 }): NavigationViewInternal [] {
 
     const {
         path,
         collections = [],
-        currentFullPath
+        currentFullPath,
+        currentFullIdPath
     } = props;
 
     const subpaths = removeInitialAndTrailingSlashes(path).split("/");
@@ -46,17 +56,25 @@ export function getNavigationEntriesFromPathInternal(props: {
     for (let i = 0; i < subpathCombinations.length; i++) {
         const subpathCombination = subpathCombinations[i];
 
-        const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
+        let collection: EntityCollection<any> | undefined;
+        collection = collections && collections.find((entry) => entry.id === subpathCombination);
+        if (!collection) {
+            collection = collections && collections.find((entry) => entry.path === subpathCombination);
+        }
 
         if (collection) {
-            const pathOrAlias = collection.id ?? collection.path;
             const collectionPath = currentFullPath && currentFullPath.length > 0
-                ? (currentFullPath + "/" + pathOrAlias)
-                : pathOrAlias;
-
+                ? (currentFullPath + "/" + collection.path)
+                : collection.path;
+            const fullIdPath = currentFullIdPath && currentFullIdPath.length > 0
+                ? (currentFullIdPath + "/" + collection.id)
+                : collection.id;
             result.push({
                 type: "collection",
+                id: collection.id,
                 path: collectionPath,
+                fullPath: collectionPath,
+                fullIdPath,
                 collection
             });
             const restOfThePath = removeInitialAndTrailingSlashes(removeInitialAndTrailingSlashes(path).replace(subpathCombination, ""));
@@ -68,6 +86,8 @@ export function getNavigationEntriesFromPathInternal(props: {
                     type: "entity",
                     entityId,
                     path: collectionPath,
+                    fullIdPath,
+                    fullPath: fullPath,
                     parentCollection: collection
                 });
                 if (nextSegments.length > 1) {
@@ -81,19 +101,20 @@ export function getNavigationEntriesFromPathInternal(props: {
                         .filter(Boolean)
                         .find((entry) => entry!.key === newPath);
                     if (customView) {
-                        const path = currentFullPath && currentFullPath.length > 0
-                            ? (currentFullPath + "/" + customView.key)
-                            : customView.key;
                         result.push({
                             type: "custom_view",
-                            path,
+                            path: collectionPath,
+                            entityId: entityId,
+                            fullIdPath,
+                            fullPath: fullPath + "/" + customView.key,
                             view: customView
                         });
                     } else if (collection.subcollections) {
-                        result.push(...getNavigationEntriesFromPathInternal({
+                        result.push(...getNavigationEntriesFromPath({
                             path: newPath,
                             collections: collection.subcollections,
                             currentFullPath: fullPath,
+                            currentFullIdPath: fullIdPath,
                             contextEntityViews: props.contextEntityViews
                         }));
                     }

package/src/util/navigation_utils.ts

@@ -1,4 +1,4 @@
-import { EntityCollection } from "../types";
+import { EntityCollection, NavigationController, SideEntityController } from "../types";
 
 export function removeInitialAndTrailingSlashes(s: string): string {
     return removeInitialSlash(removeTrailingSlash(s));
@@ -32,29 +32,90 @@ export function getLastSegment(path: string) {
 }
 
 export function resolveCollectionPathIds(path: string, allCollections: EntityCollection[]): string {
-
-    const cleanPath = removeInitialAndTrailingSlashes(path);
-    const subpaths = cleanPath.split("/");
-    if (subpaths.length % 2 === 0) {
-        throw Error(`resolveCollectionPathAliases: Collection paths must have an odd number of segments: ${path}`);
+    let remainingPath = removeInitialAndTrailingSlashes(path);
+    if (!remainingPath) {
+        return "";
     }
 
-    const aliasedCollection = allCollections.find((col) => col.id === subpaths[0]);
-    let resolvedAliased;
-    if (aliasedCollection) {
-        resolvedAliased = aliasedCollection.path;
-    }
+    let currentCollections: EntityCollection[] | undefined = allCollections;
+    const resolvedPathParts: string[] = [];
 
-    if (subpaths.length > 1) {
-        const segmentCollection = getCollectionByPathOrId(resolvedAliased ?? subpaths[0], allCollections);
-        if (!segmentCollection?.subcollections) {
-            return cleanPath;
+    while (remainingPath.length > 0) {
+        if (!currentCollections || currentCollections.length === 0) {
+            // We have remaining path segments but no more collections to match against
+            console.warn(`resolveCollectionPathIds: Path structure implies subcollections, but none found before segment starting with "${remainingPath}" in original path "${path}". Appending remaining original path.`);
+            resolvedPathParts.push(remainingPath);
+            remainingPath = ""; // Stop processing
+            break;
+        }
+
+        let foundMatch = false;
+        // Sort potential matches by length descending to prioritize longer matches (e.g., "a/b" over "a")
+        const potentialMatches: { col: EntityCollection; match: string; }[] = currentCollections
+            .flatMap(col => [{
+                col,
+                match: col.path
+            }, {
+                col,
+                match: col.id
+            }])
+            .filter(p => p.match && remainingPath.startsWith(p.match))
+            .sort((a, b) => b.match.length - a.match.length);
+
+        if (potentialMatches.length > 0) {
+            const {
+                col: foundCollection,
+                match: matchString
+            } = potentialMatches[0];
+
+            resolvedPathParts.push(foundCollection.path); // Use the defined path
+            remainingPath = removeInitialSlash(remainingPath.substring(matchString.length));
+
+            // Check if we are at the end of the path
+            if (remainingPath.length === 0) {
+                foundMatch = true;
+                break; // Path ends with a collection segment
+            }
+
+            // The next segment must be an entity ID
+            const idSeparatorIndex = remainingPath.indexOf("/");
+            let entityId: string;
+            if (idSeparatorIndex > -1) {
+                entityId = remainingPath.substring(0, idSeparatorIndex);
+                remainingPath = remainingPath.substring(idSeparatorIndex + 1);
+            } else {
+                // This should not happen if the original path is valid (odd segments)
+                // but handle it defensively: assume the rest is the ID
+                entityId = remainingPath;
+                remainingPath = "";
+                console.warn(`resolveCollectionPathIds: Path seems to end with an entity ID "${entityId}" instead of a collection segment in original path "${path}". This might indicate an invalid input path.`);
+                // Even if it ends here, we still need to push the ID
+            }
+
+            resolvedPathParts.push(entityId); // Append entity ID
+            currentCollections = foundCollection.subcollections; // Move to subcollections
+            foundMatch = true;
+
+            if (!currentCollections && remainingPath.length > 0) {
+                // Warn if the path continues but no subcollections were defined
+                console.warn(`resolveCollectionPathIds: Path continues after entity ID "${entityId}", but no subcollections are defined for the preceding collection "${foundCollection.path}" in path "${path}". Appending remaining original path.`);
+                resolvedPathParts.push(remainingPath); // Append the rest
+                remainingPath = ""; // Stop processing
+                break;
+            }
+
+        }
+
+        if (!foundMatch) {
+            // Collection definition not found for the start of the remaining path
+            console.warn(`resolveCollectionPathIds: Collection definition not found for segment starting with "${remainingPath}" in original path "${path}". Appending remaining original path.`);
+            resolvedPathParts.push(remainingPath); // Append the rest
+            remainingPath = ""; // Stop processing
+            break;
         }
-        const restOfThePath = cleanPath.split("/").slice(2).join("/");
-        return (resolvedAliased ?? subpaths[0]) + "/" + subpaths[1] + "/" + resolveCollectionPathIds(restOfThePath, segmentCollection.subcollections);
-    } else {
-        return resolvedAliased ?? cleanPath;
     }
+
+    return resolvedPathParts.join("/");
 }
 
 /**
@@ -109,3 +170,58 @@ export function getCollectionPathsCombinations(subpaths: string[]): string[] {
     return result;
 
 }
+
+export function navigateToEntity({
+                                     openEntityMode,
+                                     collection,
+                                     entityId,
+                                     copy,
+                                     path,
+                                     fullIdPath,
+                                     selectedTab,
+                                     sideEntityController,
+                                     onClose,
+                                     navigation
+                                 }:
+
+                                 {
+                                     openEntityMode: "side_panel" | "full_screen";
+                                     collection?: EntityCollection;
+                                     entityId?: string;
+                                     selectedTab?: string;
+                                     copy?: boolean;
+                                     path: string;
+                                     fullIdPath?: string;
+                                     sideEntityController: SideEntityController;
+                                     onClose?: () => void;
+                                     navigation: NavigationController
+                                 }) {
+
+    if (openEntityMode === "side_panel") {
+
+        sideEntityController.open({
+            entityId,
+            path,
+            fullIdPath,
+            copy,
+            selectedTab,
+            collection,
+            updateUrl: true,
+            onClose
+        });
+
+    } else {
+        let to = navigation.buildUrlCollectionPath(entityId ? `${fullIdPath ?? path}/${entityId}` : fullIdPath ?? path);
+        if (entityId && selectedTab) {
+            to += `/${selectedTab}`;
+        }
+        if (!entityId) {
+            to += "#new";
+        }
+        if (copy) {
+            to += "#copy";
+        }
+        navigation.navigate(to);
+    }
+
+}

package/src/util/objects.ts

@@ -12,25 +12,65 @@ export function isObject(item: any) {
     return item && typeof item === "object" && !Array.isArray(item);
 }
 
-export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U): T & U {
-    const targetIsObject = isObject(target);
-    const output = targetIsObject ? { ...target } : target;
-    if (targetIsObject && isObject(source)) {
-        Object.keys(source).forEach(key => {
-            const sourceElement = source[key];
-            if (isObject(sourceElement)) {
-                if (!(key in target))
-                    Object.assign(output, { [key]: sourceElement });
-                else
-                    (output as any)[key] = mergeDeep((target as any)[key], sourceElement);
+export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(
+    target: T,
+    source: U,
+    ignoreUndefined: boolean = false
+): T & U {
+    // If target is not a true object (e.g., null, array, primitive), return target itself.
+    if (!isObject(target)) {
+        return target as T & U;
+    }
+
+    // Create a shallow copy of the target to avoid modifying the original object.
+    const output = { ...target };
+
+    // If source is not a true object, there's nothing to merge from it.
+    // Return the shallow copy of target.
+    if (!isObject(source)) {
+        return output as T & U;
+    }
+
+    // Iterate over keys in the source object.
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const outputValue = (output as any)[key]; // Current value in our merged object (originating from target)
+
+            // Skip if source value is undefined and ignoreUndefined is true.
+            // This handles both not adding new undefined properties and not overwriting existing properties with undefined.
+            if (ignoreUndefined && sourceValue === undefined) {
+                continue;
+            }
+
+            if ((sourceValue as any) instanceof Date) {
+                // If source value is a Date, create a new Date instance.
+                (output as any)[key] = new Date(sourceValue.getTime());
+            } else if (Array.isArray(sourceValue)) {
+                // If source value is an array, create a shallow copy of the array.
+                (output as any)[key] = [...sourceValue];
+            } else if (isObject(sourceValue)) {
+                // If source value is an object:
+                if (isObject(outputValue)) {
+                    // If the corresponding value in output (from target) is also an object, recurse.
+                    // Ensure the ignoreUndefined flag is passed down.
+                    (output as any)[key] = mergeDeep(outputValue, sourceValue, ignoreUndefined);
+                } else {
+                    // If output's value (from target) is not an object (e.g., null, primitive, or key didn't exist in original target),
+                    // overwrite with the source object.
+                    (output as any)[key] = sourceValue;
+                }
             } else {
-                Object.assign(output, { [key]: sourceElement });
+                // If source value is a primitive, null, or undefined (and not ignored).
+                (output as any)[key] = sourceValue;
             }
-        });
+        }
     }
-    return output as T;
+
+    return output as T & U;
 }
 
+
 export function getValueInPath(o: object | undefined, path: string): any {
     if (!o) return undefined;
     if (typeof o === "object") {
@@ -125,6 +165,26 @@ export function removeUndefined(value: any, removeEmptyStrings?: boolean): any {
     return value;
 }
 
+export function removeNulls(value: any): any {
+    if (typeof value === "function") {
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return value.map((v: any) => removeNulls(v));
+    }
+    if (typeof value === "object") {
+        const res: object = {};
+        if (value === null)
+            return value;
+        Object.keys(value).forEach((key) => {
+            if (value[key] !== null)
+                (res as any)[key] = removeNulls(value[key]);
+        });
+        return res;
+    }
+    return value;
+}
+
 export function isEmptyObject(obj: object) {
     return obj &&
         Object.getPrototypeOf(obj) === Object.prototype &&

package/src/util/parent_references_from_path.ts

@@ -22,11 +22,11 @@ export function getParentReferencesFromPath(props: {
 
         const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
 
+        // If we find a collection, we add the reference and continue
         if (collection) {
-            const pathOrAlias = collection.id ?? collection.path;
             const collectionPath = currentFullPath && currentFullPath.length > 0
-                ? (currentFullPath + "/" + pathOrAlias)
-                : pathOrAlias;
+                ? (currentFullPath + "/" + collection.path)
+                : collection.path;
 
             const restOfThePath = removeInitialAndTrailingSlashes(removeInitialAndTrailingSlashes(path).replace(subpathCombination, ""));
             const nextSegments = restOfThePath.length > 0 ? restOfThePath.split("/") : [];

package/src/util/permissions.ts

@@ -8,9 +8,9 @@ const DEFAULT_PERMISSIONS = {
     delete: true
 };
 
-export function resolvePermissions<M extends Record<string, any>, UserType extends User>
+export function resolvePermissions<M extends Record<string, any>, USER extends User>
 (collection: EntityCollection<M>,
- authController: AuthController<UserType>,
+ authController: AuthController<USER>,
  path: string,
  entity: Entity<M> | null): Permissions | undefined {
 
@@ -34,29 +34,29 @@ export function resolvePermissions<M extends Record<string, any>, UserType exten
     throw Error("New type of permission added and not mapped");
 }
 
-export function canEditEntity<M extends Record<string, any>, UserType extends User>
+export function canEditEntity<M extends Record<string, any>, USER extends User>
 (
     collection: EntityCollection<M>,
-    authController: AuthController<UserType>,
+    authController: AuthController<USER>,
     path: string,
     entity: Entity<M> | null): boolean {
     return resolvePermissions(collection, authController, path, entity)?.edit ?? DEFAULT_PERMISSIONS.edit;
 }
 
-export function canCreateEntity<M extends Record<string, any>, UserType extends User>
+export function canCreateEntity<M extends Record<string, any>, USER extends User>
 (
     collection: EntityCollection<M>,
-    authController: AuthController<UserType>,
+    authController: AuthController<USER>,
     path: string,
     entity: Entity<M> | null): boolean {
     if (collection.collectionGroup) return false;
     return resolvePermissions(collection, authController, path, entity)?.create ?? DEFAULT_PERMISSIONS.create;
 }
 
-export function canDeleteEntity<M extends Record<string, any>, UserType extends User>
+export function canDeleteEntity<M extends Record<string, any>, USER extends User>
 (
     collection: EntityCollection<M>,
-    authController: AuthController<UserType>,
+    authController: AuthController<USER>,
     path: string,
     entity: Entity<M> | null): boolean {
     return resolvePermissions(collection, authController, path, entity)?.delete ?? DEFAULT_PERMISSIONS.delete;

package/src/util/property_utils.tsx

@@ -1,17 +1,28 @@
 import React from "react";
 
-import { EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperty } from "../types";
+import {
+    AuthController,
+    EntityCollection,
+    PropertiesOrBuilders,
+    PropertyConfig,
+    PropertyOrBuilder,
+    ResolvedProperties,
+    ResolvedProperty
+} from "../types";
 import { isPropertyBuilder } from "./entities";
 import { resolveProperty } from "./resolutions";
 import { CircleIcon, FunctionsIcon } from "@firecms/ui";
 import { getFieldConfig } from "../core";
 
-export function isReferenceProperty(propertyOrBuilder: PropertyOrBuilder,
-                                    fields: Record<string, PropertyConfig>) {
+export function isReferenceProperty(
+    authController: AuthController,
+    propertyOrBuilder: PropertyOrBuilder,
+    fields: Record<string, PropertyConfig>) {
     const resolvedProperty = resolveProperty({
         propertyKey: "ignore", // TODO
         propertyOrBuilder,
-        fields
+        propertyConfigs: fields,
+        authController
     });
     if (!resolvedProperty) return null;
     if (resolvedProperty.dataType === "reference") {
@@ -35,7 +46,7 @@ export function getIconForWidget(widget: PropertyConfig | undefined,
 }
 
 export function getIconForProperty(
-    property: PropertyOrBuilder | ResolvedProperty,
+    property: PropertyOrBuilder<any> | ResolvedProperty<any>,
     size: "small" | "medium" | "large" = "small",
     fields: Record<string, PropertyConfig> = {}
 ): React.ReactNode {
@@ -63,7 +74,7 @@ export function getColorForProperty(property: PropertyOrBuilder, fields: Record<
  * @param properties
  * @param path
  */
-export function getPropertyInPath<M extends Record<string, any>>(properties: PropertiesOrBuilders<M>, path: string): PropertyOrBuilder<any, M> | undefined {
+export function getPropertyInPath<M extends Record<string, any>>(properties: PropertiesOrBuilders<M> | ResolvedProperties, path: string): PropertyOrBuilder<any, M> | undefined {
     if (typeof properties === "object") {
         if (path in properties) {
             return properties[path];

package/src/util/references.ts

@@ -1,21 +1,26 @@
-import { EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
+import { AuthController, EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
 import { isReferenceProperty } from "./property_utils";
 import { isPropertyBuilder } from "./entities";
 import { getFieldConfig } from "../core";
 
-export function getEntityPreviewKeys(targetCollection: EntityCollection<any>,
-                                     fields: Record<string, PropertyConfig>,
-                                     previewProperties?: string[],
-                                     limit = 3) {
+export function getEntityPreviewKeys(
+    authController: AuthController,
+    targetCollection: EntityCollection<any>,
+    fields: Record<string, PropertyConfig>,
+    previewProperties?: string[],
+    limit = 3) {
     const allProperties = Object.keys(targetCollection.properties);
     let listProperties = previewProperties?.filter(p => allProperties.includes(p as string));
+    if (!listProperties && targetCollection.previewProperties) {
+        listProperties = targetCollection.previewProperties?.filter(p => allProperties.includes(p as string));
+    }
     if (listProperties && listProperties.length > 0) {
         return listProperties;
     } else {
         listProperties = allProperties;
         return listProperties.filter(key => {
             const propertyOrBuilder = targetCollection.properties[key];
-            return propertyOrBuilder && !isPropertyBuilder(propertyOrBuilder) && !isReferenceProperty(propertyOrBuilder, fields);
+            return propertyOrBuilder && !isPropertyBuilder(propertyOrBuilder) && !isReferenceProperty(authController, propertyOrBuilder, fields);
         }).slice(0, limit);
     }
 }
@@ -39,13 +44,19 @@ export function getEntityTitlePropertyKey<M extends Record<string, any>>(collect
 
 export function getEntityImagePreviewPropertyKey<M extends object>(collection: ResolvedEntityCollection<M>): string | undefined {
 
-    // find first text field property
+    // find first storage property of type image
     for (const key in collection.properties) {
         const property = collection.properties[key];
         if (property.dataType === "string" && property.storage?.acceptedFiles?.includes("image/*")) {
             return key;
         }
-
+    }
+    // alternatively, look for the first array of images
+    for (const key in collection.properties) {
+        const property = collection.properties[key];
+        if (property.dataType === "array" && property.of?.dataType === "string" && property.of.storage?.acceptedFiles?.includes("image/*")) {
+            return key;
+        }
     }
     return undefined;
 }