JSON: fix array support

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 (
     <>
       <FormControlLabel
         control={
-          <Switch
+          <Checkbox
             checked={config.isArray}
             onChange={() => handleChange("isArray")(!Boolean(config.isArray))}
             name="isArray"
           />
         }
-        label="Set as array"
-        sx={{
-          alignItems: "center",
-          "& .MuiFormControlLabel-label": { mt: 0 },
-        }}
+        label={
+          <>
+            Default as array
+            <FormHelperText>
+              You can still set individual field values as a JSON object or
+              array using the code editor
+            </FormHelperText>
+          </>
+        }
       />
     </>
   );

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 }}
               >
                 <ReactJson
-                  src={
-                    value !== undefined && isValidJson(value)
-                      ? value
-                      : column.config?.isArray
-                      ? []
-                      : {}
-                  }
+                  src={sanitizedValue}
                   onEdit={handleEdit}
                   onAdd={handleEdit}
                   onDelete={handleEdit}