Add mapping to JSON typed fields

CSLTech · Mar 11, 2024 · f7da500 · f7da500
1 parent 6119d4e
commit f7da500
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "json-editor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "JSON Editor (based on https://github.com/josdejong/svelte-jsoneditor)",
   "license": "MIT",
   "svelte": "index.js",

diff --git a/schema.json b/schema.json
@@ -8,11 +8,23 @@
     "icon": "Brackets",
     "settings": [
       {
-        "type": "field/string",
-        "key": "field",
-        "label": "Field",
+        "type": "select",
+        "key": "fieldType",
+        "label": "Field Type",
+        "options": [{"label": "String", "value": "text"}, {"label": "JSON", "value": "json"}],
+        "defaultValue": "String",
         "required": true
       },
+      {
+        "type": "field/string",
+        "key": "fieldText",
+        "label": "Field (String)"
+      },
+      {
+        "type": "field/json",
+        "key": "fieldJSON",
+        "label": "Field (JSON)"
+      },
       {
         "type": "text",
         "label": "Label",
@@ -30,8 +42,8 @@
       },
       {
         "type": "validation/string",
-        "label": "Validation",
-        "key": "validation"
+        "label": "Validation (String)",
+        "key": "validationText"
       }
     ]
   }

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -2,11 +2,13 @@
     import { JSONEditor } from 'svelte-jsoneditor';
     import { getContext, onDestroy } from "svelte";
 
-    export let field;
+    export let fieldText;
+    export let fieldJSON;
+    export let fieldType;
     export let label;
     export let defaultValue;
     export let readOnly;
-    export let validation;
+    export let validationText;
 
     const { styleable } = getContext("sdk");
     const component = getContext("component");
@@ -16,23 +18,55 @@
 
     let fieldState;
     let fieldApi;
-    let errors
+    let errors;
     let content;
     let unsubscribe;
 
+    function validateConfig() {
+        let configErrors = "";
+
+        if (!fieldText && !fieldJSON) {
+            configErrors = "Please select a form field\n";
+        }
+
+        if (fieldType !== 'text' &&  fieldType !== 'json') {
+            console.log(fieldText, fieldJSON);
+            configErrors = configErrors + "Select a field type\n";
+        }
+
+        if (fieldType !== 'text' && validationText) {
+            configErrors = configErrors + "Can only use Text validaton with Text typed field\n";
+        }
+
+        return configErrors.slice(0, -1);
+    }
+
+    function getField() {
+        if (fieldType === 'text') {
+            return fieldText;
+        }
+
+        if (fieldType === 'json') {
+            return fieldJSON;
+        }
+    }
+
+
     const formApi = formContext?.formApi;
     const labelPos = fieldGroupContext?.labelPosition || "above";
+
+    $: configErrors = validateConfig();
     $: formStep = formStepContext ? $formStepContext || 1 : 1;
     $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`;
 
-    $: if (formApi && field) {
+    $: if (formApi && (fieldText || fieldJSON)) {
         const formField = formApi.registerField(
-            field,
-            "text",
+            getField(),
+            fieldType,
             defaultValue,
             false,
             readOnly,
-            validation,
+            validationText,
             formStep
         );
 
@@ -45,7 +79,8 @@
     $: {
         if (fieldState?.value !== undefined && content === null) {
           content = {
-            text: fieldState?.value
+            text: fieldType === 'text' ? fieldState?.value : undefined,
+            json: fieldType === 'json' ? fieldState?.value : undefined
           }
         }
     }
@@ -55,40 +90,59 @@
     })
 
     function handleChange(updatedContent, previousContent, { contentErrors, patchResult }) {
+        let value;
+        if (typeof updatedContent.text !== 'undefined') {
+            try {
+                    value = JSON.parse(updatedContent.text);
+                }
+                catch (err) {
+                    contentErrors = err.toString();
+                }
+        }
+        else {
+            value = updatedContent.json;
+        }
+
         if (!contentErrors) {
-            fieldApi.setValue(updatedContent.text);
+            if (fieldType === 'text') {
+                fieldApi.setValue(JSON.stringify(value))
+            }
+            if (fieldType === 'json') {
+                fieldApi.setValue(value);
+            }
         }
 
         errors = contentErrors;
     }
 </script>
 
 <div class="spectrum-Form-item" use:styleable={$component.styles}>
-  {#if !formContext}
-    <div class="placeholder">Form components need to be wrapped in a form</div>
-  {:else}
-    <label
-      class:hidden={!label}
-      for={fieldState?.fieldId}
-      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
-    >
-      {label || " "}
-    </label>
-    <div class="spectrum-Form-itemField">
-      <div class="container">
-        <JSONEditor {content} onChange="{handleChange}" />
-      </div>
-      {#if !field}
-        <div class="error">Please select a form field</div>
-      {/if}
-      {#if errors}
-        <div class="error">{errors}</div>
-      {/if}
-      {#if fieldState?.error}
-        <div class="error">{fieldState.error}</div>
-      {/if}
-    </div>
-  {/if}
+    {#if !formContext}
+        <div class="placeholder">Form components need to be wrapped in a form</div>
+    {:else}
+        {#if !configErrors}
+            <label
+              class:hidden={!label}
+              for={fieldState?.fieldId}
+              class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
+            >
+              {label || " "}
+            </label>
+            <div class="spectrum-Form-itemField">
+                <div class="container">
+                    <JSONEditor {content} {readOnly} onChange="{handleChange}" />
+              </div>
+            </div>
+            {#if errors}
+                <div class="error">{errors}</div>
+            {/if}
+            {#if fieldState?.error}
+                <div class="error">{fieldState.error}</div>
+            {/if}
+        {:else}
+            <div class="error">{configErrors}</div>
+        {/if}
+    {/if}
 </div>
 
 <style>