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

layouts/partials/toolbar.hbs

@@ -4,7 +4,7 @@
 
   <div class="page_toolbar__middle">
     <div>
-      Sizes: <b>1rem = {{ config.remToPx }}px</b>
+      Version: <b>1rem = {{ config.version }}px</b>
     </div>
   </div>
 
@@ -12,8 +12,8 @@
     {{#if shareUrl}}
       <a href="{{ shareUrl }}" target="_blank" class="share" title="Share URL"></a>
     {{/if}}
-    {{#if config.styleGuideUrl}}
+    {{#if styleGuideUrl}}
-      <a href="{{ config.styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
+      <a href="{{ styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
     {{/if}}
     <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab" title="Open in New Window"></a>
   </div>

layouts/scripts/dist/frame-index.min.js

@@ -148,8 +148,18 @@ function renderBlock(templateHbs, jsonData, target) {
     return '/';
   });
 
-  target.innerHTML = template(jsonData);
+  let html;
 
+  try {
+    html = template(jsonData);
+  } catch (e) {
+    html = `<div style="max-width: 1280px; margin: 1rem auto;">
+      <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>
+      <pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>
+    </div>`;
+  }
+
+  target.innerHTML = html;
   if (reload) {
     reload();
   }

layouts/scripts/dist/index.min.js

@@ -9579,7 +9579,9 @@ const SidebarStyle = qe.div`
     visibility: visible;
   }
 
-  pre {
+  pre, textarea {
+    min-height: 480px;
+    resize: vertical;
     overflow-x: auto;
     padding: 0.5rem;
     background-color: #EDF2F7;
@@ -9588,6 +9590,13 @@ const SidebarStyle = qe.div`
     border: 1px solid #cbd5e0;
     width: 100%;
     box-sizing: border-box;
+    margin-bottom: 0.5rem;
+    display: block;
+    white-space: pre;
+  }
+
+  .alert {
+    color: red;
   }
 `;
 const SidebarHeaderStyle = qe.header`
@@ -9885,8 +9894,10 @@ function DataOptions(props = {}) {
   const initialState = {
     dataName: 'default',
     data: {},
+    dataText: '{}',
     dataOptions: [],
-    designPreview: []
+    designPreview: [],
+    jsonError: false
   };
   const [state, setState] = react.exports.useState(initialState);
   const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
@@ -9948,7 +9959,12 @@ function DataOptions(props = {}) {
       value: item,
       selected: isSelected
     }, item);
-  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2)), /*#__PURE__*/React.createElement("button", {
+  }))), state.data && /*#__PURE__*/React.createElement("textarea", {
+    value: state.dataText,
+    onChange: dataOptionUpdate
+  }), state.jsonError && /*#__PURE__*/React.createElement("p", {
+    className: 'alert'
+  }, "Invalid JSON entered."), /*#__PURE__*/React.createElement("button", {
     className: "btn btn--secondary",
     onClick: e => copyToClipboard(e, state.data)
   }, "Copy to Clipboard")));
@@ -9957,6 +9973,24 @@ 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());
@@ -9996,15 +10030,19 @@ function DataOptions(props = {}) {
   }
   async function syncDataOptions(dataName) {
     const dataOptions = await fetchDataOptions(dataName);
-    updateIframe(dataOptions);
+    updateIframe(dataOptions.data);
-    const newState = Object.assign({}, dataOptions, {
+    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 || {}), '*');
   }
 }
 function copyToClipboard(e, context) {

layouts/scripts/dist/toolbar/images/icon-share.svg

@@ -0,0 +1,3 @@
+<svg width="478" height="506" viewBox="0 0 478 506" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M379.8 315.4C352.01 315.4 327.062 327.817 310.146 347.315L186.499 278.249C188.838 270.119 190.1 261.521 190.1 252.7C190.1 243.782 188.834 235.223 186.427 227.037L309.923 158.096C326.774 177.698 351.821 190.2 379.7 190.2C430.409 190.2 471.8 148.918 471.8 98.1C471.8 47.2863 430.514 6 379.7 6C328.886 6 287.6 47.2863 287.6 98.1C287.6 106.995 288.859 115.615 291.265 123.769L167.886 192.697C151.025 173.006 125.968 160.6 98.1 160.6C47.3908 160.6 6 201.882 6 252.7C6 303.523 47.3954 344.8 98.2 344.8C126.093 344.8 151.144 332.287 168.074 312.598L291.571 381.633C289.143 389.853 287.8 398.557 287.8 407.5C287.8 458.209 329.082 499.6 379.9 499.6C430.714 499.6 472 458.314 472 407.5C472 356.677 430.605 315.4 379.8 315.4ZM379.8 45.1C409.086 45.1 432.9 68.9137 432.9 98.2C432.9 127.486 409.086 151.3 379.8 151.3C350.514 151.3 326.7 127.486 326.7 98.2C326.7 68.9203 350.607 45.1 379.8 45.1ZM98.2 305.8C68.9137 305.8 45.1 281.986 45.1 252.7C45.1 223.414 68.9137 199.6 98.2 199.6C127.486 199.6 151.3 223.414 151.3 252.7C151.3 281.98 127.393 305.8 98.2 305.8ZM379.8 460.5C350.514 460.5 326.7 436.686 326.7 407.4C326.7 378.114 350.514 354.3 379.8 354.3C409.086 354.3 432.9 378.114 432.9 407.4C432.9 436.686 409.086 460.5 379.8 460.5Z" fill="#21252D" stroke="#21252D" stroke-width="12"/>
+</svg>

layouts/scripts/frame/frame.js

@@ -159,8 +159,18 @@ function renderBlock(templateHbs, jsonData, target) {
     return '/';
   });
 
-  target.innerHTML = template(jsonData);
+  let html;
 
+  try {
+    html = template(jsonData);
+  } catch (e) {
+    html = `<div style="max-width: 1280px; margin: 1rem auto;">
+      <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>
+      <pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>
+    </div>`;
+  }
+
+  target.innerHTML = html;
   if (reload) {
     reload();
   }

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;
   }
 `;