[#1703] updated json field string data normalizations and fixed the field vizualization in the Admin UI

ui/src/components/records/RecordFieldCell.svelte

@@ -10,7 +10,11 @@
 </script>
 
 <td class="col-type-{field.type} col-field-{field.name}">
-    {#if CommonHelper.isEmpty(record[field.name])}
+    {#if field.type === "json"}
+        <span class="txt txt-ellipsis">
+            {CommonHelper.truncate(JSON.stringify(record[field.name]))}
+        </span>
+    {:else if CommonHelper.isEmpty(record[field.name])}
         <span class="txt-hint">N/A</span>
     {:else if field.type === "bool"}
         <span class="txt">{record[field.name] ? "True" : "False"}</span>
@@ -33,10 +37,6 @@
         </span>
     {:else if field.type === "date"}
         <FormattedDate date={record[field.name]} />
-    {:else if field.type === "json"}
-        <span class="txt txt-ellipsis">
-            {CommonHelper.truncate(JSON.stringify(record[field.name]))}
-        </span>
     {:else if field.type === "select"}
         <div class="inline-flex">
             {#each CommonHelper.toArray(record[field.name]) as item, i (i + item)}

ui/src/components/records/fields/JsonField.svelte

@@ -6,10 +6,10 @@
     export let field = new SchemaField();
     export let value = undefined;
 
-    $: if (typeof value !== "undefined" && typeof value !== "string" && value !== null) {
-        // the JSON field support both js primitives and encoded JSON string
-        // so we are normalizing the value to only a string
-        value = JSON.stringify(value, null, 2);
+    let serialized = undefined;
+
+    $: if (value !== serialized?.trim()) {
+        serialized = JSON.stringify(value, null, 2);
     }
 </script>
 
@@ -18,5 +18,14 @@
         <i class={CommonHelper.getFieldTypeIcon(field.type)} />
         <span class="txt">{field.name}</span>
     </label>
-    <textarea id={uniqueId} required={field.required} class="txt-mono" bind:value />
+    <textarea
+        id={uniqueId}
+        class="txt-mono"
+        required={field.required}
+        value={serialized}
+        on:input={(e) => {
+            serialized = e.target.value;
+            value = e.target.value.trim(); // trim the submitted value
+        }}
+    />
 </Field>

ui/src/utils/CommonHelper.js

@@ -1065,7 +1065,11 @@ export default class CommonHelper {
             return "false";
         }
 
-        // array value
+        if (field?.type === "json") {
+            return 'null, "", [], {}';
+        }
+
+        // arrayable fields
         if (["select", "relation", "file"].includes(field?.type) && field?.options?.maxSelect != 1) {
             return "[]";
         }