@firecms/collection_editor 3.0.1 → 3.1.0-canary.02232f4

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

@@ -1,10 +1,63 @@
 import React from "react";
 import { getIn, useFormex } from "@firecms/formex";
-import { FieldCaption, NumberProperty, StringProperty } from "@firecms/core";
+import { FieldCaption, NumberProperty, StringProperty, useTranslation } from "@firecms/core";
 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;
 }) {
@@ -16,6 +69,8 @@ export function DateTimePropertyField({ disabled }: {
         setFieldValue
     } = useFormex<StringProperty | NumberProperty>();
 
+    const { t } = useTranslation();
+
     const modePath = "mode";
     const modeValue: string | undefined = getIn(values, modePath);
     const modeError: string | undefined = getIn(touched, modePath) && getIn(errors, modePath);
@@ -24,30 +79,34 @@ 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}>
-                        <SelectItem value={"date_time"}> Date/Time </SelectItem>
-                        <SelectItem value={"date"}> Date </SelectItem>
+                        value={modeValue ?? "date"}
+                        error={Boolean(modeError)}
+                        size={"large"}
+                        onValueChange={(v) => setFieldValue(modePath, v)}
+                        label={t("mode_label")}
+                        fullWidth={true}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "date_time":
+                                    return t("date_time_mode");
+                                case "date":
+                                    return t("date_mode");
+                                default:
+                                    return "";
+                            }
+                        }}
+                        disabled={disabled}>
+                        <SelectItem value={"date_time"}> {t("date_time_mode")} </SelectItem>
+                        <SelectItem value={"date"}> {t("date_mode")} </SelectItem>
                     </Select>
                     <FieldCaption error={Boolean(modeError)}>
                         {modeError}
@@ -55,29 +114,54 @@ 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"}>
-                        <SelectItem value={"none"}> None </SelectItem>
-                        <SelectItem value={"on_create"}> On create </SelectItem>
-                        <SelectItem value={"on_update"}> On any update </SelectItem>
+                        disabled={disabled}
+                        size={"large"}
+                        fullWidth={true}
+                        value={autoValueValue ?? ""}
+                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "on_create":
+                                    return t("auto_on_create");
+                                case "on_update":
+                                    return t("auto_on_update");
+                                default:
+                                    return t("auto_none");
+                            }
+                        }}
+                        error={Boolean(autoValueError)}
+                        label={t("automatic_value")}>
+                        <SelectItem value={"none"}> {t("auto_none")} </SelectItem>
+                        <SelectItem value={"on_create"}> {t("auto_on_create")} </SelectItem>
+                        <SelectItem value={"on_update"}> {t("auto_on_update")} </SelectItem>
                     </Select>
                     <FieldCaption error={Boolean(autoValueError)}>
-                        {autoValueError ?? "Update this field automatically when creating or updating the entity"}
+                        {autoValueError ?? t("auto_value_description")}
+                    </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 t("local_timezone");
+                            const tz = TIMEZONES.find(t => t.value === v);
+                            return tz?.label ?? v;
+                        }}
+                        error={Boolean(timezoneError)}
+                        label={t("timezone_label")}>
+                        <SelectItem value={"__local__"}> {t("local_timezone")} </SelectItem>
+                        {TIMEZONES.map((tz) => (
+                            <SelectItem key={tz.value} value={tz.value}>
+                                {tz.label}
+                            </SelectItem>
+                        ))}
+                    </Select>
+                    <FieldCaption error={Boolean(timezoneError)}>
+                        {timezoneError ?? t("timezone_description")}
                     </FieldCaption>
                 </div>
 
@@ -85,7 +169,7 @@ export function DateTimePropertyField({ disabled }: {
 
             <div className={"col-span-12"}>
                 <ValidationPanel>
-                    <GeneralPropertyValidation disabled={disabled}/>
+                    <GeneralPropertyValidation disabled={disabled} />
                 </ValidationPanel>
             </div>
         </>

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { getIn, useFormex } from "@firecms/formex";
-import { EnumValueConfig, resolveEnumValues, useSnackbarController } from "@firecms/core";
+import { EnumValueConfig, resolveEnumValues, useSnackbarController, useTranslation } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { EnumForm } from "../EnumForm";
 import { StringPropertyValidation } from "./validation/StringPropertyValidation";
@@ -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 {
@@ -30,6 +32,7 @@ export function EnumPropertyField({
         setFieldValue
     } = useFormex<PropertyWithId>();
 
+    const { t } = useTranslation();
     const snackbarContext = useSnackbarController();
 
     const enumValuesPath = multiselect ? "of.enumValues" : "enumValues";
@@ -53,27 +56,32 @@ export function EnumPropertyField({
                 setFieldValue("defaultValue", undefined);
                 snackbarContext.open({
                     type: "warning",
-                    message: "Default value was cleared"
+                    message: t("default_value_was_cleared")
                 })
             }
         }
     };
 
+    // 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 ? t("enum_missing_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 +89,9 @@ export function EnumPropertyField({
                 <ValidationPanel>
                     {!multiselect &&
                         <StringPropertyValidation disabled={disabled}
-                                                  showErrors={showErrors}/>}
+                            showErrors={showErrors} />}
                     {multiselect &&
-                        <ArrayPropertyValidation disabled={disabled}/>}
+                        <ArrayPropertyValidation disabled={disabled} />}
                 </ValidationPanel>
 
             </div>
@@ -98,13 +106,13 @@ export function EnumPropertyField({
                         setFieldValue("defaultValue", value);
                     }}
                     size={"large"}
-                    label={"Default value"}
+                    label={t("default_value")}
                     value={defaultValue ?? ""}>
                     {enumValues
                         .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

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
+import { FieldCaption, MapProperty, Property, PropertyConfig,     useTranslation
+} from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getIn, useFormex } from "@firecms/formex";
@@ -13,6 +14,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
     propertyConfigs: Record<string, PropertyConfig>,
     collectionEditable: boolean;
 }) {
+    const { t } = useTranslation();
 
     const {
         values,
@@ -73,14 +75,12 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         <>
             <div className={"col-span-12"}>
                 <div className="flex justify-between items-end my-4">
-                    <Typography variant={"subtitle2"}>Properties in this group</Typography>
+                    <Typography variant={"subtitle2"}>{t("properties_in_this_group")}</Typography>
                     <Button
-                        color="primary"
-                        variant={"outlined"}
                         onClick={() => setPropertyDialogOpen(true)}
                         startIcon={<AddIcon/>}
                     >
-                        Add property to {values.name ?? "this group"}
+                        {t("add_property_to", { name: values.name ?? t("properties_in_this_group") })}
                     </Button>
                 </div>
                 <Paper className="p-2 pl-8">
@@ -99,7 +99,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     {empty &&
                         <Typography variant={"label"}
                                     className="h-full flex items-center justify-center p-4">
-                            Add the first property to this group
+                            {t("add_first_property_to_group")}
                         </Typography>}
                 </Paper>
             </div>
@@ -108,13 +108,12 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                 <BooleanSwitchWithLabel
                     position={"start"}
                     size={"medium"}
-                    label="Spread children as columns"
+                    label={t("spread_children_as_columns")}
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}
                 />
                 <FieldCaption>
-                    Set this flag to true if you want to display the children of this group as individual columns. This
-                    will only work for top level groups.
+                    {t("spread_children_description")}
                 </FieldCaption>
             </div>
 

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

@@ -1,14 +1,23 @@
-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";
+import { useTranslation } from "@firecms/core";
 
 export function MarkdownPropertyField({
-                                          disabled,
-                                          showErrors
-                                      }: {
+    disabled,
+    showErrors
+}: {
     disabled: boolean;
     showErrors: boolean;
 }) {
@@ -18,20 +27,52 @@ export function MarkdownPropertyField({
         setFieldValue
     } = useFormex();
 
+    const { t } = useTranslation();
+
     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 +80,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,10 +96,48 @@ export function MarkdownPropertyField({
                 <ExpandablePanel
                     title={
                         <div className="flex flex-row text-surface-500">
-                            <CloudUploadIcon/>
+                            <SettingsIcon />
+                            <Typography variant={"subtitle2"}
+                                className="ml-4">
+                                {t("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={t("strip_html_on_paste")}
+                        />
+                        <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                            {t("strip_html_description")}
+                        </Typography>
+
+                        <BooleanSwitchWithLabel
+                            size={"small"}
+                            disabled={disabled}
+                            value={transformPastedTextValue}
+                            onValueChange={(value) => updateMarkdownConfig("transformPastedText", value)}
+                            label={t("convert_pasted_to_markdown")}
+                        />
+                        <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                            {t("convert_pasted_description")}
+                        </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">
-                                File upload config
+                                className="ml-4">
+                                {t("file_upload_config")}
                             </Typography>
                         </div>
                     }>
@@ -68,54 +147,50 @@ 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={t("file_name_label")}
+                                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={t("storage_path_label")}
+                                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
-                                    the file name
-                                    and storage path values:</p>
+                                <p>{t("storage_placeholders_description")}</p>
                                 <ul>
-                                    <li>{"{file} - Full name of the uploaded file"}</li>
-                                    <li>{"{file.name} - Name of the uploaded file without extension"}</li>
-                                    <li>{"{file.ext} - Extension of the uploaded file"}</li>
-                                    <li>{"{entityId} - ID of the entity"}</li>
-                                    <li>{"{propertyKey} - ID of this field"}</li>
-                                    <li>{"{path} - Path of this entity"}</li>
-                                    <li>{"{rand} - Random value used to avoid name collisions"}</li>
+                                    <li>{t("storage_placeholder_file")}</li>
+                                    <li>{t("storage_placeholder_file_name")}</li>
+                                    <li>{t("storage_placeholder_file_ext")}</li>
+                                    <li>{t("storage_placeholder_entity_id")}</li>
+                                    <li>{t("storage_placeholder_property_key")}</li>
+                                    <li>{t("storage_placeholder_path")}</li>
+                                    <li>{t("storage_placeholder_rand")}</li>
                                 </ul>
                             </Typography>
 
                             <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                When using Markdown, the URL of the uploaded files are always saved in the text value
-                                (not
-                                the path).
+                                {t("markdown_url_note")}
                             </Typography>
                         </div>
 
                         <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={t("max_size_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 +201,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={t("default_value")}
+                    value={getIn(values, "defaultValue") ?? ""} />
 
             </div>
         </>