colonel-kurtz/addons/html-embed.js

A block editor

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));

/**
 * Field
 * A reuseable field element
 */

function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }

function uid(len) {
  len = len || 7;
  return Math.random()
    .toString(35)
    .substr(2, len)
}

var defaultProps = {
  hint: null,
  element: 'input',
  type: 'text'
};

var Field = /*@__PURE__*/(function (superclass) {
  function Field(props) {
    superclass.call(this, props);

    this.fieldId = "col-field-" + (uid());
    this.hintId = (this.fieldId) + "-hint";
  }

  if ( superclass ) Field.__proto__ = superclass;
  Field.prototype = Object.create( superclass && superclass.prototype );
  Field.prototype.constructor = Field;

  Field.prototype.getHint = function getHint (hint) {
    return hint ? (
      React.createElement( 'span', { id: this.hintId, className: "col-field-hint" },
        hint
      )
    ) : null
  };

  Field.prototype.render = function render () {
    var this$1 = this;

    var ref = this.props;
    var hint = ref.hint;
    var Element = ref.element;
    var label = ref.label;
    var rest = objectWithoutProperties( ref, ["hint", "element", "label"] );
    var props = rest;

    var id = 'id' in props ? props.id : this.fieldId;

    return (
      React.createElement( 'label', { className: "col-field", htmlFor: id },
        React.createElement( 'span', { className: "col-field-label" }, label),

        React.createElement( Element, Object.assign({},
          { ref: function (el) { return (this$1.input = el); }, id: id, className: "col-field-input", 'aria-describedby': hint ? this.hintId : null }, props)),
        this.getHint(hint)
      )
    )
  };

  return Field;
}(React.Component));

Field.defaultProps = defaultProps;

var scriptTags = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
var styleTags = /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi;

function sanitize(html) {
  return html.replace(scriptTags, '').replace(styleTags, '')
}

/**
 * HTML Embed
 * A reuseable element for embedding HTML and associated JS.
 */

var defaultProps$1 = {
  content: {
    html: '',
    script: ''
  },
  safe: true
};

var HtmlEmbedBlock = /*@__PURE__*/(function (superclass) {
  function HtmlEmbedBlock () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) HtmlEmbedBlock.__proto__ = superclass;
  HtmlEmbedBlock.prototype = Object.create( superclass && superclass.prototype );
  HtmlEmbedBlock.prototype.constructor = HtmlEmbedBlock;

  HtmlEmbedBlock.prototype.shouldDisplaySandbox = function shouldDisplaySandbox () {
    return this.props.content.html || this.props.content.script
  };

  HtmlEmbedBlock.prototype.getSandbox = function getSandbox () {
    var ref = this.props.content;
    var html = ref.html; if ( html === void 0 ) html = '';
    var script = ref.script; if ( script === void 0 ) script = '';

    var encoding = 'data:text/html;charset=utf-8,';
    var style = '<style>body { margin: 0 }</style>';
    var javascript = "<script src=\"" + script + "\" async></script>";
    var embeddable = encoding + escape(style + html + javascript);

    return React.createElement( 'iframe', { className: "col-block-html-frame", src: embeddable })
  };

  HtmlEmbedBlock.prototype.render = function render () {
    var this$1 = this;

    var ref = this.props.content;
    var html = ref.html;
    var script = ref.script;

    return (
      React.createElement( 'div', null,
        React.createElement( Field, {
          className: "col-block-html", label: "HTML Embed", element: "textarea", hint: "Paste HTML into this field. Include related JavaScript below.", ref: function (el) { return (this$1.html = el); }, value: html, onChange: this.onHTMLChange.bind(this) }),

        React.createElement( Field, {
          label: "Embedded JavaScript URL", hint: "Paste the JavaScript URL of the embed into this field.", ref: function (el) { return (this$1.script = el); }, value: script, onChange: this.onScriptChange.bind(this) }),

        this.shouldDisplaySandbox() ? this.getSandbox() : null
      )
    )
  };

  HtmlEmbedBlock.prototype.onScriptChange = function onScriptChange (event) {
    this.props.onChange({ script: event.target.value });
  };

  HtmlEmbedBlock.prototype.onHTMLChange = function onHTMLChange (event) {
    var html = event.target.value;

    if (this.props.safe) {
      html = sanitize(html);
    }

    this.props.onChange({ html: html });
  };

  return HtmlEmbedBlock;
}(React.Component));

HtmlEmbedBlock.defaultProps = defaultProps$1;

module.exports = HtmlEmbedBlock;
//# sourceMappingURL=html-embed.js.map