Added live-editing in browser option of dataOption (json).

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -12,7 +12,15 @@ import {DesignPreview} from "./DesignPreview.jsx";
 function DataOptions(props = {}) {
   props.rootAttributes = props.rootAttributes ?? {};
 
-  const initialState = {dataName: 'default', data: {}, dataOptions: [], designPreview: []};
+  const initialState = {
+    dataName: 'default',
+    data: {},
+    dataText: '{}',
+    dataOptions: [],
+    designPreview: [],
+    jsonError: false,
+  };
+
   const [state, setState] = useState(initialState);
   const [previewOption, setPreviewOption] = useState(getDesignPreviewImage(state.dataName, state.designPreview));
   const updateState = (update) => setState(Object.assign({}, state, update));
@@ -75,7 +83,11 @@ function DataOptions(props = {}) {
       }
 
       {state.data &&
-        <pre>{JSON.stringify(state.data, null, 2)}</pre>
+        <textarea value={state.dataText} onChange={dataOptionUpdate}/>
+      }
+
+      {state.jsonError &&
+        <p className={'alert'}>Invalid JSON entered.</p>
       }
 
       <button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
@@ -86,6 +98,20 @@ function DataOptions(props = {}) {
   // Functions
   //
 
+  function dataOptionUpdate(e) {
+    let data;
+
+    try {
+      data = JSON.parse(e.target.value);
+    } catch (err) {
+      updateState({dataText: e.target.value, jsonError: true});
+      return;
+    }
+
+    updateState({dataText: e.target.value, data, jsonError: false});
+    updateIframe(data);
+  }
+
   function openSidebar() {
     setSidebarOpen(true);
     setTimeout(() => document.querySelector('.sidebar-active').focus());
@@ -132,15 +158,19 @@ function DataOptions(props = {}) {
 
   async function syncDataOptions(dataName) {
     const dataOptions = await fetchDataOptions(dataName);
-    updateIframe(dataOptions);
+    updateIframe(dataOptions.data);
 
-    const newState = Object.assign({}, dataOptions, {dataName});
+    const newState = Object.assign({jsonError: false},
+      dataOptions,
+      {dataName},
+      {dataText: JSON.stringify(dataOptions.data, null, 2)},
+    );
     updateState(newState);
   }
 
-  function updateIframe(dataOptions) {
+  function updateIframe(data) {
     const previewIframe = props.rootAttributes.previewFrame;
-    previewIframe.contentWindow.postMessage('dataUpdate:' + JSON.stringify(dataOptions.data || {}), '*');
+    previewIframe.contentWindow.postMessage('dataUpdate:' + JSON.stringify(data || {}), '*');
   }
 }
 

layouts/scripts/toolbar/data-options/data-options.style.js

@@ -24,7 +24,9 @@ export const SidebarStyle = styled.div`
     visibility: visible;
   }
 
-  pre {
+  pre, textarea {
+    min-height: 480px;
+    resize: vertical;
     overflow-x: auto;
     padding: 0.5rem;
     background-color: #EDF2F7;
@@ -33,6 +35,13 @@ export const SidebarStyle = styled.div`
     border: 1px solid #cbd5e0;
     width: 100%;
     box-sizing: border-box;
+    margin-bottom: 0.5rem;
+    display: block;
+    white-space: pre;
+  }
+
+  .alert {
+    color: red;
   }
 `;