index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cyscale GRC CMS</title>
</head>

<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>

  <script>
    const QueryWidget = createClass({
      handleChange: function (e) {
        this.props.onChange(e.target.value);
      },
      render: function () {
        return h('textarea', {
          rows: 24,
          type: 'text',
          id: this.props.forID,
          value: this.props.value,
          onChange: this.handleChange,
          className: this.props.classNameWrapper
        });
      }
    });

    const QueriesPreview = createClass({
      loadSandbox: function () {
        if (!this.ES) {
          const x = document.querySelector('iframe').contentWindow;
          this.ES = new x.window.EmbeddedSandbox({
            includeCookies: false,
            target: '#embedded-sandbox',
            initialEndpoint: 'https://graphql.dev.cyscale.com/graphql'
          });
        }
      },
      componentWillMount: function () {
        const x = document.querySelector('iframe').contentWindow;
        const sandboxScript = x.document.createElement('script');
        sandboxScript.addEventListener('load', this.loadSandbox); // Will initiate the EmbeddedSandbox when the script is fully loaded in the Iframe
        sandboxScript.setAttribute(
          'src',
          'https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js'
        );
        x.document.head.appendChild(sandboxScript);
      },
      render: function () {
        const x = document.querySelector('iframe').contentWindow;
        const height = x.window.innerHeight - 20 + 'px';
        return h('div', { id: 'embedded-sandbox', style: { height } });
      }
    });

    CMS.registerWidget('query', QueryWidget);
    CMS.registerPreviewTemplate('queries', QueriesPreview);
  </script>

</body>

</html>