diff --git a/src/components/fields/Json/Settings.tsx b/src/components/fields/Json/Settings.tsx index 4955ff44..d424c707 100644 --- a/src/components/fields/Json/Settings.tsx +++ b/src/components/fields/Json/Settings.tsx @@ -1,21 +1,25 @@ -import { Switch, FormControlLabel } from "@mui/material"; +import { Checkbox, FormControlLabel, FormHelperText } from "@mui/material"; const Settings = ({ config, handleChange }) => { return ( <> handleChange("isArray")(!Boolean(config.isArray))} name="isArray" /> } - label="Set as array" - sx={{ - alignItems: "center", - "& .MuiFormControlLabel-label": { mt: 0 }, - }} + label={ + <> + Default as array + + You can still set individual field values as a JSON object or + array using the code editor + + + } /> ); diff --git a/src/components/fields/Json/SideDrawerField.tsx b/src/components/fields/Json/SideDrawerField.tsx index 1eadad2e..e87a8da0 100644 --- a/src/components/fields/Json/SideDrawerField.tsx +++ b/src/components/fields/Json/SideDrawerField.tsx @@ -46,9 +46,17 @@ export default function Json({ control={control} name={column.key} render={({ field: { onChange, value } }) => { - const formattedJson = value - ? jsonFormat(value, { type: "space", char: " ", size: 2 }) - : ""; + const sanitizedValue = + value !== undefined && isValidJson(value) + ? value + : column.config?.isArray + ? [] + : {}; + const formattedJson = jsonFormat(sanitizedValue, { + type: "space", + char: " ", + size: 2, + }); if (disabled) return ( @@ -93,13 +101,7 @@ export default function Json({ style={{ overflowX: "auto", ...theme.typography.caption }} >