@firecms/collection_editor 3.0.1 → 3.1.0-canary.1df3b2c

package/src/ui/collection_editor/properties/DateTimePropertyField.tsx

@@ -5,6 +5,59 @@ import { Select, SelectItem } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
 
+// Common IANA timezones with human-readable labels
+const TIMEZONES = [
+    // UTC
+    { value: "UTC", label: "UTC (Coordinated Universal Time)" },
+    // Americas
+    { value: "America/New_York", label: "New York (US Eastern)" },
+    { value: "America/Chicago", label: "Chicago (US Central)" },
+    { value: "America/Denver", label: "Denver (US Mountain)" },
+    { value: "America/Los_Angeles", label: "Los Angeles (US Pacific)" },
+    { value: "America/Anchorage", label: "Anchorage (Alaska)" },
+    { value: "America/Toronto", label: "Toronto (Canada Eastern)" },
+    { value: "America/Vancouver", label: "Vancouver (Canada Pacific)" },
+    { value: "America/Mexico_City", label: "Mexico City" },
+    { value: "America/Sao_Paulo", label: "São Paulo (Brazil)" },
+    { value: "America/Buenos_Aires", label: "Buenos Aires (Argentina)" },
+    // Europe
+    { value: "Europe/London", label: "London (UK)" },
+    { value: "Europe/Paris", label: "Paris (France)" },
+    { value: "Europe/Berlin", label: "Berlin (Germany)" },
+    { value: "Europe/Madrid", label: "Madrid (Spain)" },
+    { value: "Europe/Rome", label: "Rome (Italy)" },
+    { value: "Europe/Amsterdam", label: "Amsterdam (Netherlands)" },
+    { value: "Europe/Brussels", label: "Brussels (Belgium)" },
+    { value: "Europe/Zurich", label: "Zurich (Switzerland)" },
+    { value: "Europe/Stockholm", label: "Stockholm (Sweden)" },
+    { value: "Europe/Vienna", label: "Vienna (Austria)" },
+    { value: "Europe/Warsaw", label: "Warsaw (Poland)" },
+    { value: "Europe/Prague", label: "Prague (Czech Republic)" },
+    { value: "Europe/Athens", label: "Athens (Greece)" },
+    { value: "Europe/Moscow", label: "Moscow (Russia)" },
+    { value: "Europe/Istanbul", label: "Istanbul (Turkey)" },
+    // Asia
+    { value: "Asia/Dubai", label: "Dubai (UAE)" },
+    { value: "Asia/Kolkata", label: "Mumbai / Delhi (India)" },
+    { value: "Asia/Bangkok", label: "Bangkok (Thailand)" },
+    { value: "Asia/Singapore", label: "Singapore" },
+    { value: "Asia/Hong_Kong", label: "Hong Kong" },
+    { value: "Asia/Shanghai", label: "Shanghai (China)" },
+    { value: "Asia/Tokyo", label: "Tokyo (Japan)" },
+    { value: "Asia/Seoul", label: "Seoul (South Korea)" },
+    { value: "Asia/Jakarta", label: "Jakarta (Indonesia)" },
+    // Oceania
+    { value: "Australia/Sydney", label: "Sydney (Australia Eastern)" },
+    { value: "Australia/Melbourne", label: "Melbourne (Australia)" },
+    { value: "Australia/Brisbane", label: "Brisbane (Australia)" },
+    { value: "Australia/Perth", label: "Perth (Australia Western)" },
+    { value: "Pacific/Auckland", label: "Auckland (New Zealand)" },
+    // Africa
+    { value: "Africa/Cairo", label: "Cairo (Egypt)" },
+    { value: "Africa/Johannesburg", label: "Johannesburg (South Africa)" },
+    { value: "Africa/Lagos", label: "Lagos (Nigeria)" },
+];
+
 export function DateTimePropertyField({ disabled }: {
     disabled: boolean;
 }) {
@@ -24,28 +77,32 @@ export function DateTimePropertyField({ disabled }: {
     const autoValueValue: string | undefined = getIn(values, autoValuePath);
     const autoValueError: string | undefined = getIn(touched, autoValuePath) && getIn(errors, autoValuePath);
 
+    const timezonePath = "timezone";
+    const timezoneValue: string | undefined = getIn(values, timezonePath);
+    const timezoneError: string | undefined = getIn(touched, timezonePath) && getIn(errors, timezonePath);
+
     return (
         <>
             <div className={"flex flex-col col-span-12 gap-2"}>
                 <div>
                     <Select name={modePath}
-                            value={modeValue ?? "date"}
-                            error={Boolean(modeError)}
-                            size={"large"}
-                            onValueChange={(v) => setFieldValue(modePath, v)}
-                            label={"Mode"}
-                            fullWidth={true}
-                            renderValue={(v) => {
-                                switch (v) {
-                                    case "date_time":
-                                        return "Date/Time";
-                                    case "date":
-                                        return "Date";
-                                    default:
-                                        return "";
-                                }
-                            }}
-                            disabled={disabled}>
+                        value={modeValue ?? "date"}
+                        error={Boolean(modeError)}
+                        size={"large"}
+                        onValueChange={(v) => setFieldValue(modePath, v)}
+                        label={"Mode"}
+                        fullWidth={true}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "date_time":
+                                    return "Date/Time";
+                                case "date":
+                                    return "Date";
+                                default:
+                                    return "";
+                            }
+                        }}
+                        disabled={disabled}>
                         <SelectItem value={"date_time"}> Date/Time </SelectItem>
                         <SelectItem value={"date"}> Date </SelectItem>
                     </Select>
@@ -55,23 +112,23 @@ export function DateTimePropertyField({ disabled }: {
                 </div>
                 <div>
                     <Select name={autoValuePath}
-                            disabled={disabled}
-                            size={"large"}
-                            fullWidth={true}
-                            value={autoValueValue ?? ""}
-                            onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
-                            renderValue={(v) => {
-                                switch (v) {
-                                    case "on_create":
-                                        return "On create";
-                                    case "on_update":
-                                        return "On any update";
-                                    default:
-                                        return "None";
-                                }
-                            }}
-                            error={Boolean(autoValueError)}
-                            label={"Automatic value"}>
+                        disabled={disabled}
+                        size={"large"}
+                        fullWidth={true}
+                        value={autoValueValue ?? ""}
+                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "on_create":
+                                    return "On create";
+                                case "on_update":
+                                    return "On any update";
+                                default:
+                                    return "None";
+                            }
+                        }}
+                        error={Boolean(autoValueError)}
+                        label={"Automatic value"}>
                         <SelectItem value={"none"}> None </SelectItem>
                         <SelectItem value={"on_create"}> On create </SelectItem>
                         <SelectItem value={"on_update"}> On any update </SelectItem>
@@ -80,12 +137,37 @@ export function DateTimePropertyField({ disabled }: {
                         {autoValueError ?? "Update this field automatically when creating or updating the entity"}
                     </FieldCaption>
                 </div>
+                <div>
+                    <Select name={timezonePath}
+                        disabled={disabled}
+                        size={"large"}
+                        fullWidth={true}
+                        value={timezoneValue ?? "__local__"}
+                        onValueChange={(v) => setFieldValue(timezonePath, v === "__local__" ? undefined : v)}
+                        renderValue={(v) => {
+                            if (!v || v === "__local__") return "Local timezone";
+                            const tz = TIMEZONES.find(t => t.value === v);
+                            return tz?.label ?? v;
+                        }}
+                        error={Boolean(timezoneError)}
+                        label={"Timezone"}>
+                        <SelectItem value={"__local__"}> Local timezone </SelectItem>
+                        {TIMEZONES.map((tz) => (
+                            <SelectItem key={tz.value} value={tz.value}>
+                                {tz.label}
+                            </SelectItem>
+                        ))}
+                    </Select>
+                    <FieldCaption error={Boolean(timezoneError)}>
+                        {timezoneError ?? "Timezone for displaying and inputting dates. Values are always stored in UTC."}
+                    </FieldCaption>
+                </div>
 
             </div>
 
             <div className={"col-span-12"}>
                 <ValidationPanel>
-                    <GeneralPropertyValidation disabled={disabled}/>
+                    <GeneralPropertyValidation disabled={disabled} />
                 </ValidationPanel>
             </div>
         </>

package/src/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -9,19 +9,21 @@ import { ValidationPanel } from "./validation/ValidationPanel";
 import { PropertyWithId } from "../PropertyEditView";
 
 export function EnumPropertyField({
-                                      multiselect,
-                                      updateIds,
-                                      disabled,
-                                      showErrors,
-                                      allowDataInference,
-                                      getData
-                                  }: {
+    multiselect,
+    updateIds,
+    disabled,
+    showErrors,
+    allowDataInference,
+    getData,
+    propertyNamespace
+}: {
     multiselect: boolean;
     updateIds: boolean;
     disabled: boolean;
     showErrors: boolean;
     allowDataInference?: boolean;
     getData?: () => Promise<object[]>;
+    propertyNamespace?: string;
 }) {
 
     const {
@@ -59,21 +61,26 @@ export function EnumPropertyField({
         }
     };
 
+    // Build full path including namespace for nested properties (e.g., "address.status")
+    const fullPropertyPath = values.id
+        ? (propertyNamespace ? `${propertyNamespace}.${values.id}` : values.id)
+        : undefined;
+
     return (
         <>
             <div className={"col-span-12"}>
                 <EnumForm enumValues={enumValues}
-                          updateIds={updateIds}
-                          disabled={disabled}
-                          allowDataInference={allowDataInference}
-                          onError={(hasError) => {
-                              setFieldError(enumValuesPath, hasError ? "This enum property is missing some values" : undefined);
-                          }}
-                          getData={getData
-                              ? () => getData()
-                                  .then(res => res.map(entry => values.id && getIn(entry, values.id)).filter(Boolean))
-                              : undefined}
-                          onValuesChanged={onValuesChanged}/>
+                    updateIds={updateIds}
+                    disabled={disabled}
+                    allowDataInference={allowDataInference}
+                    onError={(hasError) => {
+                        setFieldError(enumValuesPath, hasError ? "This enum property is missing some values" : undefined);
+                    }}
+                    getData={getData && fullPropertyPath
+                        ? () => getData()
+                            .then(res => res.map(entry => getIn(entry, fullPropertyPath)).filter(Boolean))
+                        : undefined}
+                    onValuesChanged={onValuesChanged} />
             </div>
 
             <div className={"col-span-12"}>
@@ -81,9 +88,9 @@ export function EnumPropertyField({
                 <ValidationPanel>
                     {!multiselect &&
                         <StringPropertyValidation disabled={disabled}
-                                                  showErrors={showErrors}/>}
+                            showErrors={showErrors} />}
                     {multiselect &&
-                        <ArrayPropertyValidation disabled={disabled}/>}
+                        <ArrayPropertyValidation disabled={disabled} />}
                 </ValidationPanel>
 
             </div>
@@ -104,7 +111,7 @@ export function EnumPropertyField({
                         .filter((enumValue) => Boolean(enumValue?.id))
                         .map((enumValue) => (
                             <SelectItem key={enumValue.id}
-                                        value={enumValue.id?.toString()}>
+                                value={enumValue.id?.toString()}>
                                 {enumValue.label}
                             </SelectItem>
                         ))}

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -75,8 +75,6 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                 <div className="flex justify-between items-end my-4">
                     <Typography variant={"subtitle2"}>Properties in this group</Typography>
                     <Button
-                        color="primary"
-                        variant={"outlined"}
                         onClick={() => setPropertyDialogOpen(true)}
                         startIcon={<AddIcon/>}
                     >

package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -1,14 +1,22 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { StringPropertyValidation } from "./validation/StringPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { Field, getIn, useFormex } from "@firecms/formex";
 
-import { CloudUploadIcon, DebouncedTextField, ExpandablePanel, TextField, Typography } from "@firecms/ui";
+import {
+    BooleanSwitchWithLabel,
+    CloudUploadIcon,
+    DebouncedTextField,
+    ExpandablePanel,
+    SettingsIcon,
+    TextField,
+    Typography
+} from "@firecms/ui";
 
 export function MarkdownPropertyField({
-                                          disabled,
-                                          showErrors
-                                      }: {
+    disabled,
+    showErrors
+}: {
     disabled: boolean;
     showErrors: boolean;
 }) {
@@ -19,19 +27,49 @@ export function MarkdownPropertyField({
     } = useFormex();
 
     const baseStoragePath = "storage";
+    const baseMarkdownPath = "markdown";
 
     const metadata = `${baseStoragePath}.metadata`;
     const fileName = `${baseStoragePath}.fileName`;
     const maxSize = `${baseStoragePath}.maxSize`;
     const storagePath = `${baseStoragePath}.storagePath`;
 
+    // Markdown config paths
+    const htmlPath = `${baseMarkdownPath}.html`;
+    const transformPastedTextPath = `${baseMarkdownPath}.transformPastedText`;
+
     const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
     const storagePathValue = getIn(values, storagePath) ?? "/";
     const maxSizeValue = getIn(values, maxSize);
 
+    // Markdown config values - check if markdown is an object or boolean
+    const markdownValue = getIn(values, "markdown");
+    const isMarkdownObject = typeof markdownValue === "object" && markdownValue !== null;
+    const htmlValue = isMarkdownObject ? (markdownValue.html ?? true) : true;
+    const transformPastedTextValue = isMarkdownObject ? (markdownValue.transformPastedText ?? false) : false;
+
     const hasFilenameCallback = typeof fileNameValue === "function";
     const hasStoragePathCallback = typeof storagePathValue === "function";
 
+    // Handler to update markdown config - converts from boolean to object if needed
+    const updateMarkdownConfig = useCallback((key: "html" | "transformPastedText", value: boolean) => {
+        const currentMarkdown = getIn(values, "markdown");
+        if (typeof currentMarkdown === "object" && currentMarkdown !== null) {
+            // Already an object, update the key
+            setFieldValue(`markdown.${key}`, value);
+        } else {
+            // Convert from boolean to object
+            const defaultConfig = {
+                html: true,
+                transformPastedText: false
+            };
+            setFieldValue("markdown", {
+                ...defaultConfig,
+                [key]: value
+            });
+        }
+    }, [values, setFieldValue]);
+
     return (
         <>
             <div className={"col-span-12"}>
@@ -39,13 +77,13 @@ export function MarkdownPropertyField({
                 <ValidationPanel>
 
                     <StringPropertyValidation disabled={disabled}
-                                              length={true}
-                                              lowercase={true}
-                                              max={true}
-                                              min={true}
-                                              trim={true}
-                                              uppercase={true}
-                                              showErrors={showErrors}/>
+                        length={true}
+                        lowercase={true}
+                        max={true}
+                        min={true}
+                        trim={true}
+                        uppercase={true}
+                        showErrors={showErrors} />
 
                 </ValidationPanel>
 
@@ -55,9 +93,47 @@ export function MarkdownPropertyField({
                 <ExpandablePanel
                     title={
                         <div className="flex flex-row text-surface-500">
-                            <CloudUploadIcon/>
+                            <SettingsIcon />
+                            <Typography variant={"subtitle2"}
+                                className="ml-4">
+                                Paste behavior
+                            </Typography>
+                        </div>
+                    }>
+
+                    <div className={"flex flex-col gap-2 p-4"}>
+                        <BooleanSwitchWithLabel
+                            size={"small"}
+                            disabled={disabled}
+                            value={!htmlValue}
+                            onValueChange={(value) => updateMarkdownConfig("html", !value)}
+                            label={"Strip HTML on paste"}
+                        />
+                        <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                            Remove HTML tags and inline styles when pasting content from external sources
+                        </Typography>
+
+                        <BooleanSwitchWithLabel
+                            size={"small"}
+                            disabled={disabled}
+                            value={transformPastedTextValue}
+                            onValueChange={(value) => updateMarkdownConfig("transformPastedText", value)}
+                            label={"Convert pasted text to markdown"}
+                        />
+                        <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                            Convert rich text (from Google Docs, Word, etc.) to clean markdown format
+                        </Typography>
+                    </div>
+                </ExpandablePanel>
+            </div>
+
+            <div className={"col-span-12"}>
+                <ExpandablePanel
+                    title={
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon />
                             <Typography variant={"subtitle2"}
-                                        className="ml-4">
+                                className="ml-4">
                                 File upload config
                             </Typography>
                         </div>
@@ -68,20 +144,20 @@ export function MarkdownPropertyField({
 
                         <div className={"col-span-12"}>
                             <Field name={fileName}
-                                   as={DebouncedTextField}
-                                   label={"File name"}
-                                   size={"small"}
-                                   disabled={hasFilenameCallback || disabled}
-                                   value={hasFilenameCallback ? "-" : fileNameValue}
+                                as={DebouncedTextField}
+                                label={"File name"}
+                                size={"small"}
+                                disabled={hasFilenameCallback || disabled}
+                                value={hasFilenameCallback ? "-" : fileNameValue}
                             />
                         </div>
                         <div className={"col-span-12"}>
                             <Field name={storagePath}
-                                   as={DebouncedTextField}
-                                   label={"Storage path"}
-                                   disabled={hasStoragePathCallback || disabled}
-                                   size={"small"}
-                                   value={hasStoragePathCallback ? "-" : storagePathValue}
+                                as={DebouncedTextField}
+                                label={"Storage path"}
+                                disabled={hasStoragePathCallback || disabled}
+                                size={"small"}
+                                value={hasStoragePathCallback ? "-" : storagePathValue}
                             />
                             <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
                                 <p>You can use the following placeholders in
@@ -107,15 +183,15 @@ export function MarkdownPropertyField({
 
                         <div className={"col-span-12"}>
                             <DebouncedTextField name={maxSize}
-                                                type={"number"}
-                                                label={"Max size (in bytes)"}
-                                                size={"small"}
-                                                value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
-                                                onChange={(e) => {
-                                                    const value = e.target.value;
-                                                    if (value === "") setFieldValue(maxSize, undefined);
-                                                    else setFieldValue(maxSize, parseInt(value));
-                                                }}
+                                type={"number"}
+                                label={"Max size (in bytes)"}
+                                size={"small"}
+                                value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    if (value === "") setFieldValue(maxSize, undefined);
+                                    else setFieldValue(maxSize, parseInt(value));
+                                }}
                             />
                         </div>
 
@@ -126,12 +202,12 @@ export function MarkdownPropertyField({
             <div className={"col-span-12"}>
 
                 <TextField name={"defaultValue"}
-                           disabled={disabled}
-                           onChange={(e: any) => {
-                               setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
-                           }}
-                           label={"Default value"}
-                           value={getIn(values, "defaultValue") ?? ""}/>
+                    disabled={disabled}
+                    onChange={(e: any) => {
+                        setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                    }}
+                    label={"Default value"}
+                    value={getIn(values, "defaultValue") ?? ""} />
 
             </div>
         </>

package/src/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -88,7 +88,7 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-surface-500">
+                        <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
                             <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-4">