@firecms/core 3.0.0-beta.13 → 3.0.0-beta.15

package/src/hooks/useBuildNavigationController.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare"
+import { useBlocker, useNavigate } from "react-router-dom";
 
 import {
     AuthController,
@@ -9,11 +10,13 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    FireCMSPlugin,
     NavigationBlocker,
     NavigationController,
+    NavigationEntry,
+    NavigationGroupMapping,
+    NavigationResult,
     PermissionsBuilder,
-    TopNavigationEntry,
-    TopNavigationResult,
     User,
     UserConfigurationPersistence
 } from "../types";
@@ -27,35 +30,77 @@ import {
     resolvePermissions
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
-import { useBlocker, useNavigate } from "react-router-dom";
 
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
 
+export const NAVIGATION_DEFAULT_GROUP_NAME = "Views";
+export const NAVIGATION_ADMIN_GROUP_NAME = "Admin";
+
 export type BuildNavigationContextProps<EC extends EntityCollection, USER extends User> = {
+    /**
+     * Base path for the CMS, used to build the all the URLs.
+     * Defaults to "/".
+     */
     basePath?: string,
+    /**
+     * Base path for the collections, used to build the collection URLs.
+     * Defaults to "c" (e.g. "/c/products").
+     */
     baseCollectionPath?: string,
+    /**
+     * The auth controller used to manage the user authentication and permissions.
+     */
     authController: AuthController<USER>;
+    /**
+     * The collections to be used in the CMS.
+     * This can be a static array of collections or a function that returns a promise
+     * resolving to an array of collections.
+     */
     collections?: EC[] | EntityCollectionsBuilder<EC>;
+    /**
+     * Optional permissions builder to be applied to the collections.
+     * If not provided, the permissions will be resolved from the collection configuration.
+     */
     collectionPermissions?: PermissionsBuilder;
+    /**
+     * Custom views to be added to the CMS, these will be available in the main navigation.
+     * This can be a static array of views or a function that returns a promise
+     * resolving to an array of views.
+     */
     views?: CMSView[] | CMSViewsBuilder;
+    /**
+     * Custom views to be added to the CMS admin navigation.
+     * This can be a static array of views or a function that returns a promise
+     * resolving to an array of views.
+     */
     adminViews?: CMSView[] | CMSViewsBuilder;
-    viewsOrder?: string[];
+    /**
+     * Controller for storing user preferences.
+     */
     userConfigPersistence?: UserConfigurationPersistence;
+    /**
+     * Delegate for data source operations, used to resolve collections and views.
+     */
     dataSourceDelegate: DataSourceDelegate;
     /**
-     * Use this method to inject collections to the CMS.
-     * You receive the current collections as a parameter, and you can return
-     * a new list of collections.
-     * @see {@link joinCollectionLists}
-     * @param collections
+     * Plugins to be used in the CMS.
      */
-    injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
-
+    plugins?: FireCMSPlugin[];
+    /**
+     * Used to define the name of groups and order of the navigation entries.
+     */
+    navigationGroupMappings?: NavigationGroupMapping[];
     /**
      * If true, the navigation logic will not be updated until this flag is false
      */
     disabled?: boolean;
+
+    /**
+     * @deprecated
+     * Use `navigationGroupMappings` instead.
+     */
+    viewsOrder?: string[];
 };
 
 export function useBuildNavigationController<EC extends EntityCollection, USER extends User>(props: BuildNavigationContextProps<EC, USER>): NavigationController {
@@ -68,10 +113,11 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         views: viewsProp,
         adminViews: adminViewsProp,
         viewsOrder,
+        plugins,
         userConfigPersistence,
         dataSourceDelegate,
-        injectCollections,
-        disabled
+        disabled,
+        navigationGroupMappings
     } = props;
 
     const navigate = useNavigate();
@@ -79,10 +125,11 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
     const collectionsRef = useRef<EntityCollection[] | undefined>();
     const viewsRef = useRef<CMSView[] | undefined>();
     const adminViewsRef = useRef<CMSView[] | undefined>();
+    const navigationEntriesOrderRef = useRef<string[] | undefined>();
 
     const [initialised, setInitialised] = useState<boolean>(false);
 
-    const [topLevelNavigation, setTopLevelNavigation] = useState<TopNavigationResult | undefined>(undefined);
+    const [topLevelNavigation, setTopLevelNavigation] = useState<NavigationResult | undefined>(undefined);
     const [navigationLoading, setNavigationLoading] = useState<boolean>(true);
     const [navigationLoadingError, setNavigationLoadingError] = useState<Error | undefined>(undefined);
 
@@ -99,99 +146,155 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
     const buildUrlCollectionPath = useCallback((path: string): string => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path)}`,
         [baseCollectionPath]);
 
-    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[]): TopNavigationResult => {
-        let navigationEntries: TopNavigationEntry[] = [
-            ...(collections ?? []).map(collection => (!collection.hideFromNavigation
-                ? ({
-                    url: buildUrlCollectionPath(collection.id ?? collection.path),
+    const allPluginGroups = plugins?.flatMap(plugin => plugin.homePage?.navigationEntries ? plugin.homePage.navigationEntries.map(e => e.name) : []) ?? [];
+    const pluginGroups = [...new Set(allPluginGroups)];
+
+    const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
+        if (!plugins) {
+            return;
+        }
+        // remove all groups that have no entries
+        const filteredEntries = entries.filter(entry => entry.entries.length > 0);
+        if (plugins.some(plugin => plugin.homePage?.onNavigationEntriesUpdate)) {
+            plugins.forEach(plugin => {
+                if (plugin.homePage?.onNavigationEntriesUpdate) {
+                    plugin.homePage.onNavigationEntriesUpdate(filteredEntries);
+                }
+            });
+        }
+
+    }, [plugins]);
+
+    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[]): NavigationResult => {
+
+        const finalNavigationGroupMappings: NavigationGroupMapping[] = computeNavigationGroups({
+            navigationGroupMappings: navigationGroupMappings,
+            collections,
+            views,
+            plugins: plugins
+        });
+
+        const allPluginNavigationEntries = finalNavigationGroupMappings.map((g) => g.entries).flat() ?? [];
+        const navigationEntriesOrder = ([...new Set(allPluginNavigationEntries)]);
+
+        let navigationEntries: NavigationEntry[] = [
+            ...(collections ?? []).reduce((acc, collection) => {
+                if (collection.hideFromNavigation) return acc;
+
+                const pathKey = collection.id ?? collection.path;
+                let groupName = getGroup(collection); // Initial group
+
+                if (finalNavigationGroupMappings) {
+                    for (const pluginGroupDef of finalNavigationGroupMappings) {
+                        if (pluginGroupDef.entries.includes(pathKey)) {
+                            groupName = pluginGroupDef.name;
+                            break;
+                        }
+                    }
+                }
+
+                acc.push({
+                    id: `collection:${pathKey}`,
+                    url: buildUrlCollectionPath(pathKey),
                     type: "collection",
                     name: collection.name.trim(),
-                    path: collection.id ?? collection.path,
+                    path: pathKey,
                     collection,
                     description: collection.description?.trim(),
-                    group: getGroup(collection)
-                } satisfies TopNavigationEntry)
-                : undefined))
-                .filter(Boolean) as TopNavigationEntry[],
-            ...(views ?? []).map(view =>
-                !view.hideFromNavigation
-                    ? ({
-                        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
-                        name: view.name.trim(),
-                        type: "view",
-                        path: view.path,
-                        view,
-                        description: view.description?.trim(),
-                        group: getGroup(view)
-                    } satisfies TopNavigationEntry)
-                    : undefined)
-                .filter(Boolean) as TopNavigationEntry[],
-            ...(adminViews ?? []).map(view =>
-                !view.hideFromNavigation
-                    ? ({
-                        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
-                        name: view.name.trim(),
-                        type: "admin",
-                        path: view.path,
-                        view,
-                        description: view.description?.trim(),
-                        group: "Admin"
-                    } satisfies TopNavigationEntry)
-                    : undefined)
-                .filter(Boolean) as TopNavigationEntry[]
+                    group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+                });
+                return acc;
+            }, [] as NavigationEntry[]),
+
+            ...(views ?? []).reduce((acc, view) => {
+                if (view.hideFromNavigation) return acc;
+
+                const pathKey = Array.isArray(view.path) ? view.path[0] : view.path;
+                let groupName = getGroup(view); // Initial group
+
+                if (finalNavigationGroupMappings) {
+                    for (const pluginGroupDef of finalNavigationGroupMappings) {
+                        if (pluginGroupDef.entries.includes(pathKey)) {
+                            groupName = pluginGroupDef.name;
+                            break;
+                        }
+                    }
+                }
+
+                acc.push({
+                    id: `view:${pathKey}`,
+                    url: buildCMSUrlPath(pathKey),
+                    name: view.name.trim(),
+                    type: "view",
+                    path: view.path,
+                    view,
+                    description: view.description?.trim(),
+                    group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+                });
+                return acc;
+            }, [] as NavigationEntry[]),
+
+            ...(adminViews ?? []).reduce((acc, view) => {
+                if (view.hideFromNavigation) return acc;
+
+                const pathKey = Array.isArray(view.path) ? view.path[0] : view.path;
+                const groupName = NAVIGATION_ADMIN_GROUP_NAME;
+
+                acc.push({
+                    id: `admin:${pathKey}`,
+                    url: buildCMSUrlPath(pathKey),
+                    name: view.name.trim(),
+                    type: "admin",
+                    path: view.path,
+                    view,
+                    description: view.description?.trim(),
+                    group: groupName
+                });
+                return acc;
+            }, [] as NavigationEntry[])
         ];
 
-        // Sort by group, entries with group "Admin" will go last, and second to last will be the group "Views"
-        navigationEntries = navigationEntries.sort((a, b) => {
-            if (a.group !== "Views" && a.group !== "Admin" && (b.group === "Views" || b.group === "Admin")) {
-                return -1;
-            }
-            if (b.group !== "Views" && b.group !== "Admin" && (a.group === "Views" || a.group === "Admin")) {
-                return 1;
-            }
-            if (a.group === "Admin" && b.group !== "Admin") {
-                return 1;
-            }
-            if (a.group !== "Admin" && b.group === "Admin") {
-                return -1;
-            }
-            if (a.group === "Views" && b.group !== "Views") {
-                return -1;
-            }
-            if (a.group !== "Views" && b.group === "Views") {
-                return 1;
-            }
-            return 0;
+        const groupOrderValue = (groupName?: string): number => {
+            if (groupName === NAVIGATION_ADMIN_GROUP_NAME) return 1;
+            return 0; // Other groups
+        };
 
+        navigationEntries = navigationEntries.sort((a, b) => {
+            return groupOrderValue(a.group) - groupOrderValue(b.group);
         });
 
-        if (viewsOrder) {
+        const usedViewsOrder = viewsOrder ?? navigationEntriesOrder;
+        if (usedViewsOrder) {
             navigationEntries = navigationEntries.sort((a, b) => {
-                const aIndex = viewsOrder.indexOf(a.path);
-                const bIndex = viewsOrder.indexOf(b.path);
-                if (aIndex === -1 && bIndex === -1) {
-                    return 0;
-                }
-                if (aIndex === -1) {
-                    return 1;
-                }
-                if (bIndex === -1) {
-                    return -1;
-                }
+                const getSortPath = (navEntry: NavigationEntry) => typeof navEntry.path === "string" ? navEntry.path : navEntry.path[0];
+                const aIndex = usedViewsOrder.indexOf(getSortPath(a));
+                const bIndex = usedViewsOrder.indexOf(getSortPath(b));
+                if (aIndex === -1 && bIndex === -1) return 0;
+                if (aIndex === -1) return 1;
+                if (bIndex === -1) return -1;
                 return aIndex - bIndex;
             });
         }
 
-        const groups: string[] = Object.values(navigationEntries)
+        const collectedGroupsFromEntries = navigationEntries
             .map(e => e.group)
-            .filter(Boolean)
-            .filter((value, index, array) => array.indexOf(value) === index) as string[];
+            .filter(Boolean) as string[];
+
+        const allDefinedGroups = [
+            ...(pluginGroups ?? []),
+            ...collectedGroupsFromEntries
+        ];
+
+        const uniqueGroups = [...new Set(allDefinedGroups)]
+            .sort((a, b) => groupOrderValue(a) - groupOrderValue(b));
 
         return {
+            allowDragAndDrop: plugins?.some(plugin => plugin.homePage?.allowDragAndDrop) ?? false,
             navigationEntries,
-            groups
+            groups: uniqueGroups,
+            onNavigationEntriesUpdate: onNavigationEntriesOrderUpdate,
         };
-    }, [buildCMSUrlPath, buildUrlCollectionPath]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, onNavigationEntriesOrderUpdate]);
 
     const refreshNavigation = useCallback(async () => {
 
@@ -203,12 +306,14 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         try {
 
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
-                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections),
+                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins),
                     resolveCMSViews(viewsProp, authController, dataSourceDelegate),
                     resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
                 ]
             );
 
+            const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
+
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
@@ -228,7 +333,12 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
                 shouldUpdateTopLevelNav = true;
             }
 
-            const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
+            const navigationEntriesOrder = computedTopLevelNav.navigationEntries.map(e => e.id);
+            if (!equal(navigationEntriesOrderRef.current, navigationEntriesOrder)) {
+                navigationEntriesOrderRef.current = navigationEntriesOrder;
+                shouldUpdateTopLevelNav = true;
+            }
+
             if (shouldUpdateTopLevelNav && !equal(topLevelNavigation, computedTopLevelNav)) {
                 setTopLevelNavigation(computedTopLevelNav);
             }
@@ -251,7 +361,6 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         viewsProp,
         adminViewsProp,
         computeTopNavigation,
-        injectCollections
     ]);
 
     useEffect(() => {
@@ -421,6 +530,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         getParentCollectionIds,
         convertIdsToPaths,
         navigate,
+        plugins
     };
 }
 
@@ -447,11 +557,24 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
         });
 }
 
+function applyPluginModifyCollection(resolvedCollections: EntityCollection[], modifyCollection: (collection: EntityCollection) => EntityCollection) {
+    return resolvedCollections.map((collection: EntityCollection): EntityCollection => {
+        const modifiedCollection = modifyCollection(collection);
+        if (modifiedCollection.subcollections) {
+            return {
+                ...modifiedCollection,
+                subcollections: applyPluginModifyCollection(modifiedCollection.subcollections, modifyCollection)
+            } satisfies EntityCollection;
+        }
+        return modifiedCollection;
+    });
+}
+
 async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>,
                                   collectionPermissions: PermissionsBuilder | undefined,
                                   authController: AuthController,
                                   dataSource: DataSourceDelegate,
-                                  injectCollections?: (collections: EntityCollection[]) => EntityCollection[]): Promise<EntityCollection[]> {
+                                  plugins: FireCMSPlugin[] | undefined): Promise<EntityCollection[]> {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({
@@ -463,8 +586,16 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
         resolvedCollections = collections;
     }
 
-    if (injectCollections) {
-        resolvedCollections = injectCollections(resolvedCollections ?? []);
+    if (plugins) {
+        for (const plugin of plugins) {
+            if (plugin.collection?.modifyCollection) {
+                resolvedCollections = applyPluginModifyCollection(resolvedCollections, plugin.collection.modifyCollection);
+            }
+
+            if (plugin.collection?.injectCollections) {
+                resolvedCollections = plugin.collection.injectCollections(resolvedCollections ?? []);
+            }
+        }
     }
 
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
@@ -489,9 +620,9 @@ async function resolveCMSViews(baseViews: CMSView[] | CMSViewsBuilder | undefine
 function getGroup(collectionOrView: EntityCollection<any, any> | CMSView) {
     const trimmed = collectionOrView.group?.trim();
     if (!trimmed || trimmed === "") {
-        return "Views";
+        return NAVIGATION_DEFAULT_GROUP_NAME;
     }
-    return trimmed ?? "Views";
+    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
 }
 
 function areCollectionListsEqual(a: EntityCollection[], b: EntityCollection[]) {
@@ -570,3 +701,75 @@ function useCustomBlocker(): NavigationBlocker {
         reset: blocker?.reset
     }
 }
+
+function computeNavigationGroups({
+                                     navigationGroupMappings,
+                                     collections,
+                                     views,
+                                     plugins
+                                 }: {
+    navigationGroupMappings?: NavigationGroupMapping[],
+    collections?: EntityCollection[],
+    views?: CMSView[],
+    plugins?: FireCMSPlugin[]
+}): NavigationGroupMapping[] {
+
+    let result = navigationGroupMappings;
+
+    result = plugins ? plugins?.reduce((acc, plugin) => {
+        if (plugin.homePage?.navigationEntries) {
+            plugin.homePage.navigationEntries.forEach((entry) => {
+                const {
+                    name,
+                    entries
+                } = entry;
+                const existingGroup = acc.find(entry => entry.name === name);
+                if (existingGroup) {
+                    existingGroup.entries.push(...entries);
+                } else {
+                    acc.push({
+                        name,
+                        entries: [...entries]
+                    });
+                }
+            });
+
+        }
+        return acc;
+    }, [...(result ?? [])] as NavigationGroupMapping[]) : result;
+
+    if (!result) {
+        // Convert views and collections to navigation group mappings, grouped by their group name
+        result = [];
+        const groupMap: Record<string, string[]> = {};
+
+        // Add collections
+        (collections ?? []).forEach(collection => {
+            const name = getGroup(collection);
+            const entry = collection.id ?? collection.path;
+            if (!groupMap[name]) groupMap[name] = [];
+            groupMap[name].push(entry);
+        });
+
+        // Add views
+        (views ?? []).forEach(view => {
+            const name = getGroup(view);
+            const entry = Array.isArray(view.path) ? view.path[0] : view.path;
+            if (!groupMap[name]) groupMap[name] = [];
+            groupMap[name].push(entry);
+        });
+
+        // Convert groupMap to initialGroupMappings array
+        result = Object.entries(groupMap).map(([name, entries]) => ({
+            name,
+            entries
+        }));
+    }
+
+    // Remove duplicates in entries
+    result.forEach(group => {
+        group.entries = [...new Set(group.entries)];
+    });
+
+    return result;
+}

package/src/internal/useBuildSideEntityController.tsx

@@ -33,7 +33,7 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
 
-    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || Boolean(selectedSecondaryForm);
 
     let resolvedWidth: string | undefined;
     if (props.width) {
@@ -215,6 +215,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
 export function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[] {
 
+
     const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPath({
         path,
         collections
@@ -222,18 +223,20 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
 
     let sidePanel: EntitySidePanelProps<any> | undefined = undefined;
     let lastCollectionPath = "";
+    let lastCollectionId: string | undefined = undefined;
     for (let i = 0; i < navigationViewsForPath.length; i++) {
         const navigationEntry = navigationViewsForPath[i];
 
         if (navigationEntry.type === "collection") {
             lastCollectionPath = navigationEntry.path;
+            lastCollectionId = navigationEntry.collection.id;
         }
 
         const previousEntry = navigationViewsForPath[i - 1];
         if (navigationEntry.type === "entity") {
             sidePanel = {
                 path: navigationEntry.path,
-                // fullIdPath: navigationEntry.path,
+                fullIdPath: navigationEntry.fullIdPath,
                 entityId: navigationEntry.entityId,
                 copy: false,
                 width: navigationEntry.parentCollection?.sideDialogWidth
@@ -255,7 +258,7 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     if (newFlag) {
         sidePanel = {
             path: lastCollectionPath,
-            // fullIdPath: lastCollectionPath,
+            fullIdPath: lastCollectionId,
             copy: false
         }
     }
@@ -273,7 +276,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
 
     const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
-    const newPath = props.entityId
+    const urlPath = props.entityId
         ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`)
         : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
 
@@ -286,7 +289,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
     return {
         key: `${props.path}/${props.entityId}`,
         component: <EntitySidePanel {...resolvedPanelProps}/>,
-        urlPath: newPath,
+        urlPath: urlPath,
         parentUrlPath: buildUrlCollectionPath(collectionPath),
         width: entityViewWidth,
         onClose: props.onClose,

package/src/preview/PropertyPreview.tsx

@@ -97,6 +97,20 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                                              previewType={stringProperty.url}/>;
             } else if (stringProperty.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
+            } else if (stringProperty.reference) {
+                if (typeof stringProperty.reference.path === "string") {
+                    content = <ReferencePreview
+                        disabled={!stringProperty.reference.path}
+                        previewProperties={stringProperty.reference.previewProperties}
+                        includeId={stringProperty.reference.includeId}
+                        includeEntityLink={stringProperty.reference.includeEntityLink}
+                        size={props.size}
+                        reference={new EntityReference(value, stringProperty.reference.path)}
+                    />;
+                } else {
+                    content = <EmptyValue/>;
+                }
+
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}

package/src/preview/components/ImagePreview.tsx

@@ -62,7 +62,7 @@ export function ImagePreview({
                     title="Copy url to clipboard" side={"bottom"}>
                     <IconButton
                         variant={"filled"}
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e) => {
                             e.stopPropagation();
                             e.preventDefault();
@@ -81,7 +81,7 @@ export function ImagePreview({
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
                         <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}

package/src/preview/components/ReferencePreview.tsx

@@ -141,7 +141,7 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
         );
     }
     return <EntityPreview size={size}
-                          previewProperties={previewProperties}
+                          previewKeys={previewProperties}
                           disabled={disabled}
                           entity={usedEntity}
                           collection={collection}

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayOfMapsPreview({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
     const values = value;
-    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+    const previewProperties: string[] | undefined = mapProperty.previewKeys;
 
     if (!values) return null;