@firecms/core 3.0.0-canary.187 → 3.0.0-canary.188

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.187",
+  "version": "3.0.0-canary.188",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.187",
-    "@firecms/formex": "^3.0.0-canary.187",
-    "@firecms/ui": "^3.0.0-canary.187",
+    "@firecms/editor": "^3.0.0-canary.188",
+    "@firecms/formex": "^3.0.0-canary.188",
+    "@firecms/ui": "^3.0.0-canary.188",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "57a64af52d840cb893f7790ef5857a8f8a4249b4",
+  "gitHead": "12b6a7c4cb3e88d900d169f4903cc8fbfb7c08ba",
   "publishConfig": {
     "access": "public"
   },

package/src/core/EntityForm.tsx

@@ -891,10 +891,14 @@ function buildBottomActions<M extends object>({
             {status === "copy" && "Create copy"}
             {status === "new" && "Create"}
         </Button>
-        {canClose && <LoadingButton variant="filled" color="primary" type="submit" loading={isSubmitting}
-                                    disabled={disabled} onClick={() => {
-            setPendingClose?.(true);
-        }}>
+        {canClose && <LoadingButton variant="filled"
+                                    color="primary"
+                                    type="submit"
+                                    loading={isSubmitting}
+                                    disabled={disabled}
+                                    onClick={() => {
+                                        setPendingClose?.(true);
+                                    }}>
             {status === "existing" && "Save and close"}
             {status === "copy" && "Create copy and close"}
             {status === "new" && "Create and close"}

package/src/form/components/StorageUploadProgress.tsx

@@ -92,7 +92,7 @@ export function StorageUploadProgress({
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
-                <Skeleton className="w-full h-full"/>}
+                <Skeleton className="m-4 w-full h-full"/>}
 
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -3,13 +3,14 @@ import {
     FieldHelperText,
     FieldProps,
     getIconForProperty,
-    LabelWithIconAndTooltip, PropertyOrBuilder,
+    LabelWithIconAndTooltip,
+    PropertyOrBuilder,
     randomString,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     useStorageSource
 } from "../../index";
-import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
 import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 
@@ -27,11 +28,13 @@ export function MarkdownEditorFieldBinding({
                                                showError,
                                                error,
                                                minimalistView,
+                                               disabled: disabledProp,
                                                isSubmitting,
                                                context,
                                                customProps,
                                            }: FieldProps<string, MarkdownEditorFieldProps>) {
 
+    const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
     const storageSource = useStorageSource();
@@ -54,11 +57,9 @@ export function MarkdownEditorFieldBinding({
         if (internalValue.current !== value) {
             internalValue.current = value;
             setFieldVersion(fieldVersion + 1);
-            // fieldVersion.current = fieldVersion.current + 1;
         }
     }, [value]);
 
-
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
         values: entityValues
@@ -107,6 +108,7 @@ export function MarkdownEditorFieldBinding({
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
+        disabled={disabled}
         handleImageUpload={async (file: File) => {
             const storagePath = storagePathBuilder(file);
             const fileName = await fileNameBuilder(file);
@@ -136,7 +138,8 @@ export function MarkdownEditorFieldBinding({
                 required={property.validation?.required}
                 title={property.name}
                 className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-            <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
+            <div
+                className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}
             </div>
             <FieldHelperText includeDescription={includeDescription}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -28,7 +28,7 @@ import {
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = "border-dotted-gray"
+const disabledClasses = fieldBackgroundDisabledMixin;
 const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
@@ -206,6 +206,7 @@ function FileDropComponent({
             className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
                 {
@@ -248,7 +249,7 @@ function FileDropComponent({
                                 metadata={metadata}
                                 storagePath={storagePathBuilder(entry.file)}
                                 onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "medium" ? 220 : 118}
+                                imageSize={size === "large" ? 220 : 118}
                                 simple={false}
                             />
                         );
@@ -285,7 +286,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>

package/src/preview/components/UrlComponentPreview.tsx

@@ -55,24 +55,23 @@ export function UrlComponentPreview({
         return <VideoPreview size={size} src={url} interactive={interactive}/>;
     } else {
         return (
-            <a
-                href={url}
-                rel="noopener noreferrer"
-                target="_blank"
-                onClick={(e) => e.stopPropagation()}
-                className="flex flex-col items-center justify-center"
-                style={{
-                    width: getThumbnailMeasure(size),
-                    height: getThumbnailMeasure(size)
-                }}>
-                <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
-                {hint &&
-                    <Tooltip title={hint}>
-                        <Typography
-                            className="max-w-full truncate rtl text-left"
-                            variant={"caption"}>{hint}</Typography>
-                    </Tooltip>}
-            </a>
+            <Tooltip title={hint}>
+                <a
+                    href={url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center"
+                    style={{
+                        width: getThumbnailMeasure(size),
+                        height: getThumbnailMeasure(size)
+                    }}>
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
+                    {hint && <Typography
+                        className="max-w-full truncate rtl text-left"
+                        variant={"caption"}>{hint}</Typography>}
+                </a>
+            </Tooltip>
         );
     }
 }

package/src/util/entity_cache.ts

@@ -101,7 +101,6 @@ export function saveEntityToCache(path: string, data: object): void {
     if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
-            console.log("Saving entity to cache", key, data);
             const entityString = JSON.stringify(data, customReplacer);
             localStorage.setItem(key, entityString);
         } catch (error) {

package/src/util/useStorageUploadController.tsx

@@ -34,6 +34,7 @@ export interface StorageFieldItem {
     size: PreviewSize
 }
 
+
 export function useStorageUploadController<M extends object>({
                                                                  entityId,
                                                                  entityValues,
@@ -45,17 +46,17 @@ export function useStorageUploadController<M extends object>({
                                                                  disabled,
                                                                  onChange
                                                              }:
-                                                                 {
-                                                                     entityId: string,
-                                                                     entityValues: EntityValues<M>,
-                                                                     value: string | string[] | null;
-                                                                     path?: string,
-                                                                     propertyKey: string,
-                                                                     property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-                                                                     storageSource: StorageSource,
-                                                                     disabled: boolean,
-                                                                     onChange: (value: string | string[] | null) => void
-                                                                 }) {
+                                                             {
+                                                                 entityId: string,
+                                                                 entityValues: EntityValues<M>,
+                                                                 value: string | string[] | null;
+                                                                 path?: string,
+                                                                 propertyKey: string,
+                                                                 property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
+                                                                 storageSource: StorageSource,
+                                                                 disabled: boolean,
+                                                                 onChange: (value: string | string[] | null) => void
+                                                             }) {
 
     const storage: StorageConfig | undefined = property.dataType === "string"
         ? property.storage
@@ -75,16 +76,7 @@ export function useStorageUploadController<M extends object>({
     const compression: ImageCompression | undefined = storage?.imageCompression;
 
     const internalInitialValue: StorageFieldItem[] =
-        (multipleFilesSupported
-            ? (value ?? []) as string[]
-            : value ? [value as string] : []).map(entry => (
-            {
-                id: getRandomId(),
-                storagePathOrDownloadUrl: entry,
-                metadata,
-                size
-            }
-        ));
+        getInternalInitialValue(multipleFilesSupported, value, metadata, size);
 
     const [initialValue, setInitialValue] = useState<string | string[] | null>(value);
     const [internalValue, setInternalValue] = useState<StorageFieldItem[]>(internalInitialValue);
@@ -226,6 +218,32 @@ export function useStorageUploadController<M extends object>({
     }
 }
 
+function getInternalInitialValue(multipleFilesSupported: boolean,
+                                 value: string | string[] | null,
+                                 metadata: Record<string, any> | undefined,
+                                 size: PreviewSize): StorageFieldItem[] {
+    let strings: string[] = [];
+    if (multipleFilesSupported) {
+        if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+            strings = (value ?? []) as string[];
+        }
+    } else {
+        if (typeof value === "string") {
+            strings = value ? [value as string] : [];
+        }
+    }
+
+    return strings
+        .map(entry => (
+            {
+                id: getRandomId(),
+                storagePathOrDownloadUrl: entry,
+                metadata,
+                size
+            }
+        ));
+}
+
 function removeDuplicates(items: StorageFieldItem[]) {
     return items.filter(
         (item, i) => {