const srcdoc = require('srcdoc-polyfill');

require('./markup.css');

function markupWidget(slice, payload) {
  $('#code').attr('rows', '15');
  const jqdiv = slice.container;
  jqdiv.css({
    overflow: 'auto',
  });

  // markup height is slice height - (marginTop + marginBottom)
  let iframeHeight = slice.height() - 20;
  if (slice.props.vizType === 'separator') {
    // separator height is the entire chart container: slice height + header
    iframeHeight = slice.height() + slice.headerHeight();
  }

  const iframeId = `if__${slice.containerId}`;
  const html = `
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="${payload.data.theme_css}" />
      </head>
      <body style="background-color: transparent;">
        ${payload.data.html}
      </body>
    </html>`;
  jqdiv.html(`
    <iframe id="${iframeId}"
      frameborder="0"
      height="${iframeHeight}"
      sandbox="allow-same-origin allow-scripts allow-top-navigation allow-popups">
    </iframe>
  `);

  const iframe = document.getElementById(iframeId);
  srcdoc.set(iframe, html);
}

module.exports = markupWidget;

@@ -909,16 +909,41 @@
 andbox=%22
+allow-forms allow-popups 
 allow-sa
@@ -986,29 +986,16 @@
 vigation
- allow-popups
 %22%3E%0A    %3C

Enable allow-forms (#5062)