@firecms/core 3.0.1 → 3.1.0-canary.24c8270

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -4,6 +4,7 @@ import { FieldProps, MapProperty, Properties, PropertyFieldBindingProps, Resolve
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
@@ -15,19 +16,19 @@ import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/u
  * @group Form fields
  */
 export function MapFieldBinding({
-                                    propertyKey,
-                                    value,
-                                    showError,
-                                    error,
-                                    disabled,
-                                    property,
-                                    partOfArray,
-                                    minimalistView: minimalistViewProp,
-                                    includeDescription,
-                                    autoFocus,
-                                    context,
-                                    onPropertyChange
-                                }: FieldProps<Record<string, any>>) {
+    propertyKey,
+    value,
+    showError,
+    error,
+    disabled,
+    property,
+    partOfArray,
+    minimalistView: minimalistViewProp,
+    includeDescription,
+    autoFocus,
+    context,
+    onPropertyChange
+}: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
     const expanded = property.expanded === undefined ? true : property.expanded;
@@ -52,75 +53,76 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-            <div
-                className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
-                {Object.entries(mapProperties)
-                    .filter(([_, property]) => !isHidden(property))
-                    .map(([entryKey, childProperty], index) => {
-                            const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
-                            const fieldBindingProps: PropertyFieldBindingProps<any> = {
-                                propertyKey: `${propertyKey}.${entryKey}`,
-                                disabled: disabled || thisDisabled,
-                                property: childProperty,
-                                includeDescription,
-                                context,
-                                partOfArray: false,
-                                minimalistView: false,
-                                autoFocus: autoFocus && index === 0,
-                                onPropertyChange: function (updatedProperty) {
-                                    onPropertyChange?.({
-                                        properties: {
-                                            [entryKey]: updatedProperty
-                                        }
-                                    } as Partial<MapProperty>);
+        <div
+            className={cls("py-1 flex flex-wrap gap-x-4 w-full space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            {Object.entries(mapProperties)
+                .filter(([_, property]) => !isHidden(property))
+                .map(([entryKey, childProperty], index) => {
+                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                    const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                        propertyKey: `${propertyKey}.${entryKey}`,
+                        disabled: disabled || thisDisabled,
+                        property: childProperty,
+                        includeDescription,
+                        context,
+                        partOfArray: false,
+                        minimalistView: false,
+                        autoFocus: autoFocus && index === 0,
+                        onPropertyChange: function (updatedProperty) {
+                            onPropertyChange?.({
+                                properties: {
+                                    [entryKey]: updatedProperty
                                 }
-                            };
-
-                            return (
-                                <div key={`map-${propertyKey}-${index}`} className={"relative"}>
-                                    <ErrorBoundary>
-                                        <PropertyFieldBinding
-                                            {...fieldBindingProps}/>
-                                    </ErrorBoundary>
-                                </div>
-                            )                                ;
+                            } as Partial<MapProperty>);
                         }
-                    )
+                    };
+
+                    const widthPercentage = childProperty.widthPercentage ?? 100;
+                    return (
+                        <FormEntry propertyKey={`${propertyKey}.${entryKey}`}
+                            widthPercentage={widthPercentage}
+                            key={`map-${propertyKey}-${index}`}>
+                            <PropertyFieldBinding
+                                {...fieldBindingProps} />
+                        </FormEntry>
+                    );
                 }
-            </div>
+                )
+            }
+        </div>
 
-            {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
 
-        </>
-    ;
+    </>
+        ;
 
     return (
         <ErrorBoundary>
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                 onExpandedChange={(expanded) => {
-                                                     onPropertyChange?.({
-                                                         expanded
-                                                     });
-                                                 }}
-                                                 className={property.widthPercentage !== undefined ? "mt-8" : undefined}
-                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
-                                                 title={<LabelWithIconAndTooltip
-                                                     propertyKey={propertyKey}
-                                                     icon={getIconForProperty(property, "small")}
-                                                     required={property.validation?.required}
-                                                     title={property.name}
-                                                     className={"text-text-secondary dark:text-text-secondary-dark"}/>}>
+                onExpandedChange={(expanded) => {
+                    onPropertyChange?.({
+                        expanded
+                    });
+                }}
+                className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
+                title={<LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"text-text-secondary dark:text-text-secondary-dark"} />}>
                 {mapFormView}
             </ExpandablePanel>}
 
             {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError ?? false}
-                             error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
-                             disabled={disabled}
-                             property={property}/>
+                showError={showError ?? false}
+                error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
+                disabled={disabled}
+                property={property} />
 
         </ErrorBoundary>
     );
@@ -150,7 +152,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
             onValueChange={handleAddProperty}
             renderValue={(key) => (properties as Properties)[key].name || key}>
             {keys.map((key) => <SelectItem key={key}
-                                           value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
+                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
         </Select>
     </div>;
 };

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -21,19 +21,19 @@ interface MarkdownEditorFieldProps {
 }
 
 export function MarkdownEditorFieldBinding({
-                                               property,
-                                               propertyKey,
-                                               value,
-                                               setValue,
-                                               includeDescription,
-                                               showError,
-                                               error,
-                                               minimalistView,
-                                               disabled: disabledProp,
-                                               isSubmitting,
-                                               context,
-                                               customProps,
-                                           }: FieldProps<string, MarkdownEditorFieldProps>) {
+    property,
+    propertyKey,
+    value,
+    setValue,
+    includeDescription,
+    showError,
+    error,
+    minimalistView,
+    disabled: disabledProp,
+    isSubmitting,
+    context,
+    customProps,
+}: FieldProps<string, MarkdownEditorFieldProps>) {
 
     const authController = useAuthController();
     const disabled = disabledProp || isSubmitting;
@@ -65,7 +65,7 @@ export function MarkdownEditorFieldBinding({
     }, [value]);
 
     const resolvedProperty = resolveProperty({
-        propertyOrBuilder: property as PropertyOrBuilder,
+        propertyOrBuilder: property as PropertyOrBuilder<string>,
         values: entityValues,
         authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -109,12 +109,16 @@ export function MarkdownEditorFieldBinding({
         }) ?? "/";
     }, [entityId, entityValues, path, property, propertyKey, storage]);
 
+    // Extract markdown config from property - can be boolean or object
+    const markdownConfig = typeof property.markdown === 'object' ? property.markdown : undefined;
+
     const editor = <FireCMSEditor
         content={value}
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
         disabled={disabled}
+        markdownConfig={markdownConfig}
         handleImageUpload={async (file: File) => {
             const storagePath = storagePathBuilder(file);
             const fileName = await fileNameBuilder(file);
@@ -143,15 +147,15 @@ export function MarkdownEditorFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
             <div
                 className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}
             </div>
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             property={property}/>
+                showError={showError}
+                error={error}
+                property={property} />
         </>
 
     );

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -52,18 +52,18 @@ const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0
 type StorageUploadFieldProps = FieldProps<string | string[]>;
 
 export function StorageUploadFieldBinding({
-                                              propertyKey,
-                                              value,
-                                              setValue,
-                                              error,
-                                              showError,
-                                              autoFocus,
-                                              minimalistView,
-                                              property,
-                                              includeDescription,
-                                              context,
-                                              isSubmitting,
-                                          }: StorageUploadFieldProps) {
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    autoFocus,
+    minimalistView,
+    property,
+    includeDescription,
+    context,
+    isSubmitting,
+}: StorageUploadFieldProps) {
 
     const authController = useAuthController();
 
@@ -100,7 +100,7 @@ export function StorageUploadFieldBinding({
     });
 
     const resolvedProperty = resolveProperty({
-        propertyOrBuilder: property as PropertyOrBuilder,
+        propertyOrBuilder: property as PropertyOrBuilder<string>,
         authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
@@ -114,7 +114,7 @@ export function StorageUploadFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />}
 
             <StorageUpload
                 value={internalValue}
@@ -128,13 +128,13 @@ export function StorageUploadFieldBinding({
                 onFileUploadComplete={onFileUploadComplete}
                 storagePathBuilder={storagePathBuilder}
                 storage={storage}
-                multipleFilesSupported={multipleFilesSupported}/>
+                multipleFilesSupported={multipleFilesSupported} />
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
 
         </>
     );
@@ -154,15 +154,15 @@ interface SortableStorageItemProps {
 }
 
 function SortableStorageItem({
-                                 id,
-                                 entry,
-                                 property,
-                                 metadata,
-                                 storagePathBuilder,
-                                 onFileUploadComplete,
-                                 onClear,
-                                 disabled,
-                             }: SortableStorageItemProps) {
+    id,
+    entry,
+    property,
+    metadata,
+    storagePathBuilder,
+    onFileUploadComplete,
+    onClear,
+    disabled,
+}: SortableStorageItemProps) {
 
     const {
         attributes,
@@ -201,7 +201,7 @@ function SortableStorageItem({
                 disabled={disabled}
                 value={entry.storagePathOrDownloadUrl}
                 onRemove={() => onClear(entry.storagePathOrDownloadUrl!)}
-                size={entry.size}/>
+                size={entry.size} />
         );
     } else if (entry.file) {
         child = (
@@ -231,21 +231,21 @@ function SortableStorageItem({
 }
 
 function FileDropComponent({
-                               storage,
-                               disabled,
-                               onFilesAdded,
-                               multipleFilesSupported,
-                               autoFocus,
-                               internalValue,
-                               property,
-                               onClear,
-                               metadata,
-                               storagePathBuilder,
-                               onFileUploadComplete,
-                               name,
-                               helpText,
-                               isDndItemDragging
-                           }: {
+    storage,
+    disabled,
+    onFilesAdded,
+    multipleFilesSupported,
+    autoFocus,
+    internalValue,
+    property,
+    onClear,
+    metadata,
+    storagePathBuilder,
+    onFileUploadComplete,
+    name,
+    helpText,
+    isDndItemDragging
+}: {
     storage: StorageConfig,
     disabled: boolean,
     onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
@@ -271,33 +271,33 @@ function FileDropComponent({
         isDragAccept,
         isDragReject
     } = useDropzone({
-            accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
-                ...acc,
-                [ext]: []
-            }), {}) : undefined,
-            disabled: disabled || isDndItemDragging,
-            noDragEventsBubbling: true,
-            maxSize: storage.maxSize,
-            onDrop: onFilesAdded,
-            onDropRejected: (fileRejections) => {
-                for (const fileRejection of fileRejections) {
-                    for (const error of fileRejection.errors) {
-                        console.error("Error uploading file: ", error);
-                        if (error.code === "file-too-large") {
-                            snackbarContext.open({
-                                type: "error",
-                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                            });
-                        } else if (error.code === "file-invalid-type") {
-                            snackbarContext.open({
-                                type: "error",
-                                message: "Error uploading file: File type is not supported"
-                            });
-                        }
+        accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
+            ...acc,
+            [ext]: []
+        }), {}) : undefined,
+        disabled: disabled || isDndItemDragging,
+        noDragEventsBubbling: true,
+        maxSize: storage.maxSize,
+        onDrop: onFilesAdded,
+        onDropRejected: (fileRejections) => {
+            for (const fileRejection of fileRejections) {
+                for (const error of fileRejection.errors) {
+                    console.error("Error uploading file: ", error);
+                    if (error.code === "file-too-large") {
+                        snackbarContext.open({
+                            type: "error",
+                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                        });
+                    } else if (error.code === "file-invalid-type") {
+                        snackbarContext.open({
+                            type: "error",
+                            message: "Error uploading file: File type is not supported"
+                        });
                     }
                 }
             }
         }
+    }
     );
 
     return (
@@ -349,8 +349,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}
-                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
+                    variant={"label"}
+                    className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>
@@ -374,19 +374,19 @@ export interface StorageUploadProps {
 }
 
 export function StorageUpload({
-                                  property,
-                                  name,
-                                  value, // This is internalValue from useStorageUploadController
-                                  setInternalValue,
-                                  onChange,
-                                  multipleFilesSupported,
-                                  onFileUploadComplete,
-                                  disabled,
-                                  onFilesAdded,
-                                  autoFocus,
-                                  storage,
-                                  storagePathBuilder,
-                              }: StorageUploadProps) {
+    property,
+    name,
+    value, // This is internalValue from useStorageUploadController
+    setInternalValue,
+    onChange,
+    multipleFilesSupported,
+    onFileUploadComplete,
+    disabled,
+    onFilesAdded,
+    autoFocus,
+    storage,
+    storagePathBuilder,
+}: StorageUploadProps) {
 
     if (multipleFilesSupported) {
         const arrayProperty = property as ResolvedArrayProperty<string[]>;
@@ -500,6 +500,6 @@ export function StorageUpload({
         );
     } else {
         // For single file, no D&D context is needed
-        return <FileDropComponent {...fileDropProps} isDndItemDragging={false}/>;
+        return <FileDropComponent {...fileDropProps} isDndItemDragging={false} />;
     }
 }

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 
-import { CloseIcon, Collapse, IconButton, TextField } from "@firecms/ui";
+import { CloseIcon, Collapse, IconButton, TextField, TextareaAutosize, fieldBackgroundHoverMixin, fieldBackgroundMixin, cls } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
@@ -19,17 +19,17 @@ interface TextFieldBindingProps<T extends string | number> extends FieldProps<T>
  * @group Form fields
  */
 export function TextFieldBinding<T extends string | number>({
-                                                                propertyKey,
-                                                                value,
-                                                                setValue,
-                                                                error,
-                                                                showError,
-                                                                disabled,
-                                                                autoFocus,
-                                                                property,
-                                                                includeDescription,
-                                                                size = "large"
-                                                            }: TextFieldBindingProps<T>) {
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    disabled,
+    autoFocus,
+    property,
+    includeDescription,
+    size = "large"
+}: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
     let url: boolean | PreviewType | undefined;
@@ -68,46 +68,82 @@ export function TextFieldBinding<T extends string | number>({
     const isMultiline = Boolean(multiline);
 
     const inputType = property.dataType === "number" ? "number" : undefined;
+
+    const label = (
+        <LabelWithIcon
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name} />
+    );
+
     return (<>
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+        <PropertyIdCopyTooltip propertyKey={propertyKey}>
+            {isMultiline ? (
+                <div className={cls(
+                    "rounded-md relative max-w-full min-h-[64px]",
+                    fieldBackgroundMixin,
+                    fieldBackgroundHoverMixin,
+                    showError && error ? "border border-red-500 dark:border-red-600" : "",
+                    property.widthPercentage !== undefined ? "mt-8" : undefined
+                )}>
+                    <div className="pointer-events-none absolute top-1 text-xs font-medium px-3 text-text-secondary dark:text-text-secondary-dark">
+                        {label}
+                    </div>
+                    <TextareaAutosize
+                        value={value ?? ""}
+                        onChange={onChange}
+                        autoFocus={autoFocus}
+                        disabled={disabled}
+                        className={cls(
+                            "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
+                            disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
+                            showError && error ? "text-red-500 dark:text-red-600" : ""
+                        )}
+                    />
+                    {property.clearable && (
+                        <div className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4">
+                            <IconButton onClick={handleClearClick}>
+                                <CloseIcon />
+                            </IconButton>
+                        </div>
+                    )}
+                </div>
+            ) : (
                 <TextField
                     size={size}
                     value={value}
                     onChange={onChange}
                     autoFocus={autoFocus}
                     className={property.widthPercentage !== undefined ? "mt-8" : undefined}
-                    label={<LabelWithIcon
-                        icon={getIconForProperty(property, "small")}
-                        required={property.validation?.required}
-                        title={property.name}/>}
+                    label={label}
                     type={inputType}
-                    multiline={isMultiline}
                     disabled={disabled}
                     endAdornment={
                         property.clearable && <IconButton
                             onClick={handleClearClick}>
-                            <CloseIcon/>
+                            <CloseIcon />
                         </IconButton>
                     }
                     error={showError ? error : undefined}
-                    inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
-            </PropertyIdCopyTooltip>
-            <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
+                    inputClassName={error ? "text-red-500 dark:text-red-600" : ""} />
+            )}
+        </PropertyIdCopyTooltip>
+        <FieldHelperText includeDescription={includeDescription}
+            showError={showError}
+            error={error}
+            disabled={disabled}
+            property={property} />
 
-            {url && <Collapse
-                className="mt-1 ml-1"
-                in={Boolean(value)}>
-                <PropertyPreview
-                    value={value}
-                    property={property}
-                    size={size}/>
-            </Collapse>}
+        {url && <Collapse
+            className="mt-1 ml-1"
+            in={Boolean(value)}>
+            <PropertyPreview
+                value={value}
+                property={property}
+                size={size} />
+        </Collapse>}
 
-        </>
+    </>
     );
 
 }