@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia/block-renderers/embedded-code-block.js

## Introduction

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EmbeddedCodeBlock = exports.Caption = exports.Block = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _ampEmbeddedCodeBlock = _interopRequireDefault(require("./amp/amp-embedded-code-block"));

var _sharedStyle = require("../shared-style");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const Wrapper = _styledComponents.default.div`
  position: relative;
  ${_sharedStyle.defaultMarginTop}
  ${_sharedStyle.defaultMarginBottom}
`;
const Block = _styledComponents.default.div`
  position: relative;

  /* styles for image link */
  img.img-responsive {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    display: block;
  }
  //some embedded code won't set itself in the middle
  iframe {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
`;
exports.Block = Block;
const Caption = _styledComponents.default.div`
  line-height: 1.43;
  letter-spacing: 0.4px;
  font-size: 14px;
  color: #808080;
  margin-top: 8px;
  padding: 0 15px;
`;
exports.Caption = Caption;

const EmbeddedCodeBlock = (entity, contentLayout) => {
  const {
    caption,
    embeddedCode
  } = entity.getData();
  const embedded = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (!embedded.current) return;
    const node = embedded.current;
    const fragment = document.createDocumentFragment(); // `embeddedCode` is a string, which may includes
    // multiple '<script>' tags and other html tags.
    // For executing '<script>' tags on the browser,
    // we need to extract '<script>' tags from `embeddedCode` string first.
    //
    // The approach we have here is to parse html string into elements,
    // and we could use DOM element built-in functions,
    // such as `querySelectorAll` method, to query '<script>' elements,
    // and other non '<script>' elements.

    const parser = new DOMParser();
    const ele = parser.parseFromString(`<div id="draft-embed">${embeddedCode}</div>`, 'text/html');
    const scripts = ele.querySelectorAll('script');
    const nonScripts = ele.querySelectorAll('div#draft-embed > :not(script)');
    nonScripts.forEach(ele => {
      fragment.appendChild(ele);
    });
    scripts.forEach(s => {
      const scriptEle = document.createElement('script');
      const attrs = s.attributes;

      for (let i = 0; i < attrs.length; i++) {
        scriptEle.setAttribute(attrs[i].name, attrs[i].value);
      }

      scriptEle.text = s.text || '';
      fragment.appendChild(scriptEle);
    });
    node.appendChild(fragment);
  }, [embeddedCode]);

  if (contentLayout === 'amp') {
    return /*#__PURE__*/_react.default.createElement(_ampEmbeddedCodeBlock.default, {
      embeddedCode: embeddedCode,
      caption: caption
    });
  }

  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(Block, {
    ref: embedded
  }), caption ? /*#__PURE__*/_react.default.createElement(Caption, null, caption) : null);
};

exports.EmbeddedCodeBlock = EmbeddedCodeBlock;