@firecms/core 3.0.0-canary.102 → 3.0.0-canary.104

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -0,0 +1,133 @@
+import {
+    FieldHelperText,
+    FieldProps,
+    getIconForProperty,
+    LabelWithIcon,
+    randomString,
+    useStorageSource
+} from "../../index";
+import { Paper } from "@firecms/ui";
+import { FireCMSEditor } from "@firecms/editor";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { resolveStorageFilenameString, resolveStoragePathString } from "../../util/storage";
+
+interface MarkdownEditorFieldProps {
+    highlight?: { from: number, to: number };
+}
+
+export function MarkdownEditorFieldBinding({
+                                               property,
+                                               propertyKey,
+                                               value,
+                                               setValue,
+                                               includeDescription,
+                                               showError,
+                                               error,
+                                               minimalistView,
+                                               isSubmitting,
+                                               context,
+                                               customProps,
+                                               ...props
+                                           }: FieldProps<string, MarkdownEditorFieldProps>) {
+
+    const highlight = customProps?.highlight;
+    const storageSource = useStorageSource();
+    const storage = property.storage;
+
+    const entityValues = context.values;
+    const entityId = context.entityId;
+    const path = context.path;
+
+    // const fieldVersion = useRef(0);
+    const [fieldVersion, setFieldVersion] = useState(0);
+    const internalValue = useRef(value);
+
+    const onContentChange = useCallback((content: string) => {
+        internalValue.current = content;
+        setValue(content);
+    }, [setValue]);
+
+    useEffect(() => {
+        if (internalValue.current !== value) {
+            internalValue.current = value;
+            setFieldVersion(fieldVersion + 1);
+            // fieldVersion.current = fieldVersion.current + 1;
+        }
+    }, [value]);
+
+    const fileNameBuilder = useCallback(async (file: File) => {
+        if (storage?.fileName) {
+            const fileName = await resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property,
+                file,
+                propertyKey
+            });
+            if (!fileName || fileName.length === 0) {
+                throw Error("You need to return a valid filename");
+            }
+            return fileName;
+        }
+        return randomString() + "_" + file.name;
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const storagePathBuilder = useCallback((file: File) => {
+        if (!storage) return "/";
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const editor = <FireCMSEditor
+        content={value}
+        onMarkdownContentChange={onContentChange}
+        version={context.formex.version + fieldVersion}
+        highlight={highlight}
+        handleImageUpload={async (file: File) => {
+            const storagePath = storagePathBuilder(file);
+            const fileName = await fileNameBuilder(file);
+            const result = await storageSource.uploadFile({
+                file,
+                fileName,
+                path: storagePath,
+            });
+            const downloadConfig = await storageSource.getDownloadURL(result.path);
+            const url = downloadConfig.url;
+            if (!url) {
+                throw new Error("Error uploading image");
+            }
+            return url;
+        }}/>;
+
+    if (minimalistView)
+        return editor;
+
+    return (
+        <>
+            <LabelWithIcon icon={getIconForProperty(property, "small")}
+                           required={property.validation?.required}
+                           title={property.name}
+                           className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            <Paper>
+                {editor}
+            </Paper>
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             property={property}/>
+        </>
+
+    );
+
+}

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -21,7 +21,7 @@ export function ReadOnlyFieldBinding({
                                          value,
                                          error,
                                          showError,
-                                         tableMode,
+                                         minimalistView,
                                          property,
                                          includeDescription,
                                          context
@@ -34,10 +34,10 @@ export function ReadOnlyFieldBinding({
 
         <>
 
-            {!tableMode && <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                          required={property.validation?.required}
-                                          title={property.name}
-                                          className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIcon icon={getIconForProperty(property, "small")}
+                                               required={property.validation?.required}
+                                               title={property.name}
+                                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -34,6 +34,7 @@ function ReferenceFieldBindingInternal({
                                            showError,
                                            isSubmitting,
                                            disabled,
+                                           minimalistView,
                                            touched,
                                            autoFocus,
                                            property,
@@ -82,10 +83,10 @@ function ReferenceFieldBindingInternal({
 
     return (
         <>
-            <LabelWithIcon icon={getIconForProperty(property, "small")}
-                           required={property.validation?.required}
-                           title={property.name}
-                           className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIcon icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required}
+                            title={property.name}
+                            className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -23,7 +23,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              isSubmitting,
                                                              setValue,
                                                              setFieldValue,
-                                                             tableMode,
+                                                             minimalistView,
                                                              property,
                                                              includeDescription,
                                                              underlyingValueHasChanged,
@@ -57,9 +57,8 @@ export function RepeatFieldBinding<T extends Array<any>>({
             includeDescription,
             underlyingValueHasChanged,
             context,
-            tableMode: false,
             partOfArray: true,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: internalId === lastAddedId
         };
         return <ErrorBoundary>
@@ -89,13 +88,13 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
         <>
 
-            {!tableMode && <ExpandablePanel initiallyExpanded={expanded}
-                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
-                                            title={title}>
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                 title={title}>
                 {arrayContainer}
             </ExpandablePanel>}
 
-            {tableMode && arrayContainer}
+            {minimalistView && arrayContainer}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -44,7 +44,7 @@ export function StorageUploadFieldBinding({
                                               error,
                                               showError,
                                               autoFocus,
-                                              tableMode,
+                                              minimalistView,
                                               property,
                                               includeDescription,
                                               context,
@@ -87,7 +87,7 @@ export function StorageUploadFieldBinding({
 
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <LabelWithIcon icon={getIconForProperty(property, "small")}
                                required={property.validation?.required}
                                title={property.name}

package/src/form/index.tsx

@@ -11,7 +11,7 @@ import { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
 import { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
 import { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
-import { MarkdownFieldBinding } from "./field_bindings/MarkdownFieldBinding";
+import { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
 import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
 
 export {
@@ -28,7 +28,7 @@ export {
     SelectFieldBinding,
     StorageUploadFieldBinding,
     SwitchFieldBinding,
-    MarkdownFieldBinding,
+    MarkdownEditorFieldBinding,
     TextFieldBinding
 };
 

package/src/hooks/data/save.ts

@@ -108,7 +108,11 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         updatedValues = values;
     }
 
-    console.log("Saving entity", entityId, updatedValues);
+    console.log("Saving entity", {
+        entityId,
+        updatedValues,
+        collection
+    });
     return dataSource.saveEntity({
         collection,
         path: resolvedPath,

package/src/internal/useBuildDataSource.ts

@@ -52,13 +52,13 @@ export function useBuildDataSource({
          */
         fetchCollection: useCallback(<M extends Record<string, any>>({
                                                                          path,
-                                                                         collection: collectionProp,
+                                                                         collection,
                                                                          filter,
                                                                          limit,
                                                                          startAfter,
                                                                          searchString,
                                                                          orderBy,
-                                                                         order
+                                                                         order,
                                                                      }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
             return delegate.fetchCollection<M>({
@@ -68,7 +68,8 @@ export function useBuildDataSource({
                 startAfter,
                 searchString,
                 orderBy,
-                order
+                order,
+                collection
             });
         }, [delegate]),
 
@@ -89,7 +90,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenCollection: delegate.listenCollection
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -106,7 +106,7 @@ export function useBuildDataSource({
             ): () => void => {
 
                 const collection = collectionProp ?? navigationController.getCollection(path);
-                const isCollectionGroup = Boolean(collection?.collectionGroup) ?? false;
+                const isCollectionGroup = Boolean(collection?.collectionGroup);
                 if (!delegate.listenCollection)
                     throw Error("useBuildDataSource delegate not initialised");
 
@@ -120,8 +120,7 @@ export function useBuildDataSource({
                     order,
                     onUpdate,
                     onError,
-                    isCollectionGroup,
-                    collection
+                    collection,
                 });
             }, [delegate, navigationController.getCollection])
             : undefined,
@@ -135,11 +134,13 @@ export function useBuildDataSource({
          */
         fetchEntity: useCallback(<M extends Record<string, any>>({
                                                                      path,
-                                                                     entityId
+                                                                     entityId,
+                                                                     collection
                                                                  }: FetchEntityProps<M>
         ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
             path,
-            entityId
+            entityId,
+            collection
         }), [delegate]),
 
         /**
@@ -153,7 +154,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenEntity: delegate.listenEntity
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -169,7 +169,8 @@ export function useBuildDataSource({
                     path,
                     entityId,
                     onUpdate,
-                    onError
+                    onError,
+                    collection
                 })
             }, [delegate.listenEntity]) : undefined,
 
@@ -195,6 +196,15 @@ export function useBuildDataSource({
 
             const collection = collectionProp ?? navigationController.getCollection(path);
 
+            console.log("useBuildDatasource save", {
+                path,
+                entityId,
+                values,
+                collectionProp,
+                collection,
+                status
+            });
+
             const resolvedCollection = collection
                 ? resolveCollection<M>({
                     collection,
@@ -223,6 +233,7 @@ export function useBuildDataSource({
 
             return delegate.saveEntity({
                 path,
+                collection,
                 entityId,
                 values: updatedFirestoreValues,
                 status
@@ -263,9 +274,10 @@ export function useBuildDataSource({
             path: string,
             name: string,
             value: any,
-            entityId?: string
+            entityId?: string,
+            databaseId?: string
         ): Promise<boolean> => {
-            return delegate.checkUniqueField(path, name, value, entityId);
+            return delegate.checkUniqueField(path, name, value, entityId, databaseId);
         }, [delegate.checkUniqueField]),
 
         generateEntityId: useCallback((path: string): string => {
@@ -290,16 +302,18 @@ export function useBuildDataSource({
                 filter,
                 orderBy,
                 order,
-                isCollectionGroup: Boolean(collection.collectionGroup)
+                collection
             });
         } : undefined,
 
         isFilterCombinationValid: useCallback(({
                                                    path,
+                                                   databaseId,
                                                    filterValues,
                                                    sortBy
                                                }: {
             path: string,
+            databaseId?: string,
             filterValues: FilterValues<any>,
             sortBy?: [string, "asc" | "desc"]
         }): boolean => {
@@ -308,6 +322,7 @@ export function useBuildDataSource({
             return delegate.isFilterCombinationValid(
                 {
                     path,
+                    databaseId,
                     filterValues,
                     sortBy
                 }

package/src/preview/PropertyPreview.tsx

@@ -86,6 +86,8 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                                              url={value}
                                              interactive={interactive}
                                              previewType={stringProperty.url}/>;
+            } else if (stringProperty.markdown) {
+                content = <Markdown source={value} size={"small"}/>;
             } else if (stringProperty.storage) {
                 const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
                 content = <StorageThumbnail
@@ -93,8 +95,6 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     storeUrl={property.storage?.storeUrl ?? false}
                     size={props.size}
                     storagePathOrDownloadUrl={filePath}/>;
-            } else if (stringProperty.markdown) {
-                content = <Markdown source={value} size={"small"}/>;
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}

package/src/types/collections.ts

@@ -51,6 +51,12 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      */
     path: string;
 
+    /**
+     * Optional database id of this collection. If not specified, the default
+     * database id will be used.
+     */
+    databaseId?: string;
+
     /**
      * If this collection is a top level navigation entry, you can set this
      * property to `true` to indicate that this collection is a collection group.
@@ -61,7 +67,8 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Icon key to use in this collection.
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
-     * e.g. 'account_tree' or 'person'
+     * e.g. 'account_tree' or 'person'.
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
 
@@ -304,6 +311,11 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Width of the side dialog (in pixels) when opening an entity in this collection.
      */
     sideDialogWidth?: number | string;
+
+    /**
+     * Default preview properties displayed when this collection is referenced to.
+     */
+    previewProperties?: string[];
 }
 
 /**

package/src/types/datasource.ts

@@ -18,6 +18,7 @@ export interface FetchEntityProps<M extends Record<string, any> = any> {
 export type ListenEntityProps<M extends Record<string, any> = any> =
     FetchEntityProps<M>
     & {
+    databaseId?: string;
     onUpdate: (entity: Entity<M>) => void,
     onError?: (error: Error) => void,
 }
@@ -198,7 +199,8 @@ export interface DataSource {
         path: string,
         name: string,
         value: any,
-        entityId?: string
+        entityId?: string,
+        databaseId?: string
     ): Promise<boolean>;
 
     /**
@@ -238,19 +240,11 @@ export type FilterCombinationValidProps = {
     sortBy?: [string, "asc" | "desc"];
 };
 
-export type SaveEntityDelegateProps<M extends Record<string, any> = any> = Omit<SaveEntityProps<M>, "collection">;
+export type SaveEntityDelegateProps<M extends Record<string, any> = any> = SaveEntityProps<M>;
 
-export type FetchCollectionDelegateProps<M extends Record<string, any> = any> =
-    Omit<FetchCollectionProps<M>, "collection">
-    & {
-    isCollectionGroup?: boolean
-};
+export type FetchCollectionDelegateProps<M extends Record<string, any> = any> = FetchCollectionProps<M>;
 
-export type ListenCollectionDelegateProps<M extends Record<string, any> = any> =
-    ListenCollectionProps<M>
-    & {
-    isCollectionGroup?: boolean;
-};
+export type ListenCollectionDelegateProps<M extends Record<string, any> = any> = ListenCollectionProps<M>;
 
 export interface DataSourceDelegate {
 
@@ -321,7 +315,7 @@ export interface DataSourceDelegate {
     fetchEntity<M extends Record<string, any> = any>({
                                                          path,
                                                          entityId,
-                                                     }: Omit<FetchEntityProps<M>, "collection">): Promise<Entity<M> | undefined>;
+                                                     }: FetchEntityProps<M>): Promise<Entity<M> | undefined>;
 
     /**
      * Get realtime updates on one entity.
@@ -337,7 +331,7 @@ export interface DataSourceDelegate {
                                                            entityId,
                                                            onUpdate,
                                                            onError
-                                                       }: Omit<ListenEntityProps<M>, "collection">): () => void;
+                                                       }: ListenEntityProps<M>): () => void;
 
     /**
      * Save entity to the specified path
@@ -368,7 +362,7 @@ export interface DataSourceDelegate {
      * @param entityId
      * @return `true` if there are no other fields besides the given entity
      */
-    checkUniqueField(path: string, name: string, value: any, entityId?: string): Promise<boolean>;
+    checkUniqueField(path: string, name: string, value: any, entityId?: string, databaseId?: string): Promise<boolean>;
 
     /**
      * Generate an id for a new entity
@@ -384,7 +378,9 @@ export interface DataSourceDelegate {
      * Check if the given filter combination is valid
      * @param props
      */
-    isFilterCombinationValid?(props: Omit<FilterCombinationValidProps, "collection">): boolean;
+    isFilterCombinationValid?(props: Omit<FilterCombinationValidProps, "collection"> & {
+        databaseId?: string
+    }): boolean;
 
     /**
      * Get the object to generate the current time in the datasource
@@ -400,6 +396,7 @@ export interface DataSourceDelegate {
     initTextSearch?: (props: {
         context: FireCMSContext,
         path: string,
+        databaseId?: string,
         collection: EntityCollection,
         parentCollectionIds?: string[]
     }) => Promise<boolean>;

package/src/types/entities.ts

@@ -25,6 +25,8 @@ export interface Entity<M extends object> {
      * Current values
      */
     values: EntityValues<M>;
+
+    databaseId?: string;
 }
 
 /**

package/src/types/fields.tsx

@@ -81,14 +81,9 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     partOfArray?: boolean;
 
     /**
-     * Is this field part of a block (oneOf array)
-     */
-    partOfBlock?: boolean;
-
-    /**
-     * Is this field being rendered in the entity table popup
+     * Should this field render with the minimal amount of UI elements
      */
-    tableMode?: boolean;
+    minimalistView?: boolean;
 
     /**
      * Should this field autofocus on mount
@@ -98,7 +93,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Additional properties set by the developer
      */
-    customProps?: CustomProps
+    customProps: CustomProps
 
     /**
      * Additional values related to the state of the form or the entity
@@ -144,7 +139,7 @@ export interface FormContext<M extends Record<string, any> = any> {
     /**
      * Entity id, it can be null if it's a new entity
      */
-    entityId?: string;
+    entityId: string;
 
     /**
      * Path this entity is located at
@@ -192,11 +187,6 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      */
     underlyingValueHasChanged?: boolean;
 
-    /**
-     * Is this field being rendered in a table
-     */
-    tableMode?: boolean;
-
     /**
      * Is this field part of an array
      */
@@ -205,7 +195,7 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
     /**
      * Is this field part of a block (oneOf array)
      */
-    partOfBlock?: boolean;
+    minimalistView?: boolean;
 
     /**
      * Should the field take focus when rendered. When opening the popup view

package/src/types/navigation.ts

@@ -173,6 +173,7 @@ export interface CMSView {
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
      * e.g. 'account_tree' or 'person'
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
 

package/src/util/index.ts

@@ -21,3 +21,4 @@ export * from "./make_properties_editable";
 export * from "./join_collections";
 export * from "./builders";
 export * from "./useTraceUpdate";
+export * from "./storage";

package/src/util/references.ts

@@ -9,6 +9,9 @@ export function getEntityPreviewKeys(targetCollection: EntityCollection<any>,
                                      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 {

package/src/util/storage.ts

@@ -18,7 +18,7 @@ interface ResolveFilenameStringParams<M extends object> {
     propertyKey: string;
 }
 
-export async function resolveFilenameString<M extends object>(
+export async function resolveStorageFilenameString<M extends object>(
     {
         input,
         storage,