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}}
-      <a href="{{ config.styleGuideUrl }}" target="_blank" class="palette" title="Open Style Guide"></a>
+    {{#if styleGuideUrl}}
+      <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/frame-index.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame-index.min.js","sources":["../frame/frame.js"],"sourcesContent":["'use strict';\n\nwindow.initBlock = initBlock;\n\nlet template;\nlet data = {};\nlet reload;\n\n// Blocks Initialization.\nfunction initBlock(blockName = '', selector = '', cb) {\n  reload = function () {\n    document.querySelectorAll(selector).forEach((el) => cb(el));\n  }\n\n  reload();\n}\n\n// Scrollbars / Frame resizes notifications.\n(function () {\n  let height;\n  const debug = false;\n\n  handleHeightChange(); // Initial frame's height setup.\n  setupResizeListener(); // Listen to frame's height changes.\n\n  ///\n\n  function setupResizeListener() {\n    const resizeObserver = new ResizeObserver(handleHeightChange);\n    resizeObserver.observe(document.body);\n  }\n\n  function handleHeightChange() {\n    const updatedHeight = getCurrentHeight();\n\n    if (debug) {\n      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);\n    }\n\n    if (height === updatedHeight) {\n      return;\n    }\n\n    const RESIZE_CODE = 'resize:';\n    height = updatedHeight;\n    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');\n\n    if (debug) {\n      console.log('Resize message sent: ', height)\n    }\n  }\n\n  function getCurrentHeight() {\n    return document.querySelector('#hbs-container').scrollHeight;\n  }\n})();\n\n// Data Updates Listeners.\n(function () {\n  loadDataOptions();\n  listenToDataOptionsUpdates();\n\n  function listenToDataOptionsUpdates() {\n    window.addEventListener('message', function (event) {\n      const message = event.data;\n      const prefix = 'dataUpdate:';\n\n      if (typeof message !== \"string\" || !message.startsWith(prefix)) {\n        return;\n      }\n\n      try {\n        data = JSON.parse(message.substring(prefix.length));\n        updateBlock({data});\n      } catch (e) {\n        console.log('Error parsing incoming data.', e);\n      }\n    });\n  }\n\n  function getQueryParams() {\n    const urlParams = new URLSearchParams(window.location.search);\n    const params = {};\n\n    for (const [key, value] of urlParams) {\n      params[key] = value;\n    }\n\n    return params;\n  }\n\n  function loadDataOptions() {\n    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});\n    fetch(`/data?${queryParameters}`)\n      .then((response) => response.json())\n      .then((response) => {\n        data = response.data; // Update state.\n        updateBlock({data});\n      })\n  }\n})();\n\n// Listen to Template updates.\n(function () {\n  initSocket();\n\n  function initSocket() {\n    const socket = window.io.connect();\n\n    socket.on('error', function (err) {\n      console.log(err);\n    });\n\n    // socket.on('connect', function () {\n    //   console.log('user connected', socket.id)\n    // });\n\n    socket.on('templateUpdate', function (args) {\n      updateBlock({template: args.template});\n    });\n  }\n})();\n\nfunction updateBlock(args = {}) {\n  if (args.template) {\n    template = args.template; // Update state.\n  }\n\n  if (args.data) {\n    data = args.data; // Update state.\n  }\n\n  if (!template) {\n    return;\n  }\n\n  renderBlock(template, data || {}, document.getElementById(\"hbs-container\"));\n}\n\nfunction renderBlock(templateHbs, jsonData, target) {\n  const template = Handlebars.compile(templateHbs);\n\n  /**\n   * Handlebars Helpers\n   */\n  Handlebars.registerHelper('esc_attr', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('esc_url', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('esc_html', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('base_url', function () {\n    return '/';\n  });\n\n  target.innerHTML = template(jsonData);\n\n  if (reload) {\n    reload();\n  }\n}\n"],"names":[],"mappings":"AAEA,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;AAC7B;AACA,IAAI,QAAQ,CAAC;AACb,IAAI,IAAI,GAAG,EAAE,CAAC;AACd,IAAI,MAAM,CAAC;AACX;AACA;AACA,SAAS,SAAS,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE;AACtD,EAAE,MAAM,GAAG,YAAY;AACvB,IAAI,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAChE,IAAG;AACH;AACA,EAAE,MAAM,EAAE,CAAC;AACX,CAAC;AACD;AACA;AACA,CAAC,YAAY;AACb,EAAE,IAAI,MAAM,CAAC;AAEb;AACA,EAAE,kBAAkB,EAAE,CAAC;AACvB,EAAE,mBAAmB,EAAE,CAAC;AACxB;AACA;AACA;AACA,EAAE,SAAS,mBAAmB,GAAG;AACjC,IAAI,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAClE,IAAI,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1C,GAAG;AACH;AACA,EAAE,SAAS,kBAAkB,GAAG;AAChC,IAAI,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;AAK7C;AACA,IAAI,IAAI,MAAM,KAAK,aAAa,EAAE;AAClC,MAAM,OAAO;AACb,KAAK;AACL;AACA,IAAI,MAAM,WAAW,GAAG,SAAS,CAAC;AAClC,IAAI,MAAM,GAAG,aAAa,CAAC;AAC3B,IAAI,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAK3E,GAAG;AACH;AACA,EAAE,SAAS,gBAAgB,GAAG;AAC9B,IAAI,OAAO,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,YAAY,CAAC;AACjE,GAAG;AACH,CAAC,GAAG,CAAC;AACL;AACLine truncated
+{"version":3,"file":"frame-index.min.js","sources":["../frame/frame.js"],"sourcesContent":["'use strict';\n\nwindow.initBlock = initBlock;\n\nlet template;\nlet data = {};\nlet reload;\n\n// Blocks Initialization.\nfunction initBlock(blockName = '', selector = '', cb) {\n  reload = function () {\n    document.querySelectorAll(selector).forEach((el) => cb(el));\n  }\n\n  reload();\n}\n\n// Scrollbars / Frame resizes notifications.\n(function () {\n  let height;\n  const debug = false;\n\n  handleHeightChange(); // Initial frame's height setup.\n  setupResizeListener(); // Listen to frame's height changes.\n\n  ///\n\n  function setupResizeListener() {\n    const resizeObserver = new ResizeObserver(handleHeightChange);\n    resizeObserver.observe(document.body);\n  }\n\n  function handleHeightChange() {\n    const updatedHeight = getCurrentHeight();\n\n    if (debug) {\n      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);\n    }\n\n    if (height === updatedHeight) {\n      return;\n    }\n\n    const RESIZE_CODE = 'resize:';\n    height = updatedHeight;\n    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');\n\n    if (debug) {\n      console.log('Resize message sent: ', height)\n    }\n  }\n\n  function getCurrentHeight() {\n    return document.querySelector('#hbs-container').scrollHeight;\n  }\n})();\n\n// Data Updates Listeners.\n(function () {\n  loadDataOptions();\n  listenToDataOptionsUpdates();\n\n  function listenToDataOptionsUpdates() {\n    window.addEventListener('message', function (event) {\n      const message = event.data;\n      const prefix = 'dataUpdate:';\n\n      if (typeof message !== \"string\" || !message.startsWith(prefix)) {\n        return;\n      }\n\n      try {\n        data = JSON.parse(message.substring(prefix.length));\n        updateBlock({data});\n      } catch (e) {\n        console.log('Error parsing incoming data.', e);\n      }\n    });\n  }\n\n  function getQueryParams() {\n    const urlParams = new URLSearchParams(window.location.search);\n    const params = {};\n\n    for (const [key, value] of urlParams) {\n      params[key] = value;\n    }\n\n    return params;\n  }\n\n  function loadDataOptions() {\n    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});\n    fetch(`/data?${queryParameters}`)\n      .then((response) => response.json())\n      .then((response) => {\n        data = response.data; // Update state.\n        updateBlock({data});\n      })\n  }\n})();\n\n// Listen to Template updates.\n(function () {\n  initSocket();\n\n  function initSocket() {\n    const socket = window.io.connect();\n\n    socket.on('error', function (err) {\n      console.log(err);\n    });\n\n    // socket.on('connect', function () {\n    //   console.log('user connected', socket.id)\n    // });\n\n    socket.on('templateUpdate', function (args) {\n      updateBlock({template: args.template});\n    });\n  }\n})();\n\nfunction updateBlock(args = {}) {\n  if (args.template) {\n    template = args.template; // Update state.\n  }\n\n  if (args.data) {\n    data = args.data; // Update state.\n  }\n\n  if (!template) {\n    return;\n  }\n\n  renderBlock(template, data || {}, document.getElementById(\"hbs-container\"));\n}\n\nfunction renderBlock(templateHbs, jsonData, target) {\n  const template = Handlebars.compile(templateHbs);\n\n  /**\n   * Handlebars Helpers\n   */\n  Handlebars.registerHelper('esc_attr', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('esc_url', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('esc_html', function (attr) {\n    return attr;\n  });\n\n  Handlebars.registerHelper('base_url', function () {\n    return '/';\n  });\n\n  let html;\n\n  try {\n    html = template(jsonData);\n  } catch (e) {\n    html = `<div style=\"max-width: 1280px; margin: 1rem auto;\">\n      <h1 style=\"all: unset; font-size: 1.5rem; font-weight: bold; display: block;\">Syntax Error:</h1>\n      <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>\n    </div>`;\n  }\n\n  target.innerHTML = html;\n  if (reload) {\n    reload();\n  }\n}\n"],"names":[],"mappings":"AAEA,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;AAC7B;AACA,IAAI,QAAQ,CAAC;AACb,IAAI,IAAI,GAAG,EAAE,CAAC;AACd,IAAI,MAAM,CAAC;AACX;AACA;AACA,SAAS,SAAS,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE;AACtD,EAAE,MAAM,GAAG,YAAY;AACvB,IAAI,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAChE,IAAG;AACH;AACA,EAAE,MAAM,EAAE,CAAC;AACX,CAAC;AACD;AACA;AACA,CAAC,YAAY;AACb,EAAE,IAAI,MAAM,CAAC;AAEb;AACA,EAAE,kBAAkB,EAAE,CAAC;AACvB,EAAE,mBAAmB,EAAE,CAAC;AACxB;AACA;AACA;AACA,EAAE,SAAS,mBAAmB,GAAG;AACjC,IAAI,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAClE,IAAI,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1C,GAAG;AACH;AACA,EAAE,SAALine truncated

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);
-    const newState = Object.assign({}, dataOptions, {
+    updateIframe(dataOptions.data);
+    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/index.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../frame/editor.js","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction Line truncated
+{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../frame/editor.js","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction Line truncated

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