Tabbed examples use IFrame instead of Shadow DOM (#903)

* Tabbed examples use IFrame instead of Shadow DOM

* Applied padding change from #820

__tests__/puppeteer-tabbed-editor.test.js

@@ -5,30 +5,30 @@ describe("Tabbed Editor", () => {
     });
 
     it("loads the expected HTML into the output element", async () => {
-      const expectedOutput =
-        "<style>" +
-        ".output{background-color:#fff;color:#15141aff;" +
-        "font-size:0.9rem;line-height:1.5;overflow:scroll;" +
-        "padding:2rem 1rem 1rem;height:100%;}" +
-        "</style>" +
-        "<style>" +
-        "address { font-variant-caps: small-caps;}a { font-variant: normal;}" +
-        '</style><div class="output">' +
-        "<address> James Rockford<br> 2354 Pacific Coast Highway<br> " +
-        "California<br> USA<br> +311-555-2368<br> Email: " +
-        '<a href="mailto:j.rockford@example.com">j.rockford@example.com</a><br>' +
-        "</address></div>";
+      const expectedCSS = "address { font-variant-caps: small-caps;}a { font-variant: normal;}";
+      const expectedHTML = "<address> James Rockford<br> 2354 Pacific Coast Highway<br> " +
+          "California<br> USA<br> +311-555-2368<br> Email: " +
+          '<a href="mailto:j.rockford@example.com">j.rockford@example.com</a><br>' +
+          "</address>";
 
-      await page.waitForSelector("#output");
+      await page.waitForSelector("#output-iframe");
+      const outputIframe = await page.$('#output-iframe');
+      const iframeContent = await outputIframe.contentFrame();
 
-      let outputContent = await page.$eval("#output shadow-output", (elem) =>
-        /* trim new lines, then trim matches of two or more consecutive
+      await iframeContent.waitForSelector('#html-output');
+
+      const trimInnerHTML = (elem) =>
+          /* trim new lines, then trim matches of two or more consecutive
                    whitespace characters with a single whitespace character */
-        elem.shadowRoot.innerHTML
-          .replace(/\r?\n|\r/g, "")
-          .replace(/\s{2,}/g, " ")
-      );
-      await expect(outputContent).toBe(expectedOutput);
+          elem.innerHTML
+              .replace(/\r?\n|\r/g, "")
+              .replace(/\s{2,}/g, " ");
+
+      let htmlOutputContent = await iframeContent.$eval("#html-output", trimInnerHTML);
+      await expect(htmlOutputContent).toBe(expectedHTML);
+
+      let cssOutputContent = await iframeContent.$eval("#css-output", trimInnerHTML);
+      await expect(cssOutputContent).toBe(expectedCSS);
     });
 
     it("should switch to CSS editor on tab click", async () => {

editor/css/tabbed-editor.css

@@ -25,22 +25,10 @@
   border-bottom: 1px solid var(--border-primary);
 }
 
-.shadow-container {
+.output-container {
   position: relative;
 }
 
-/* For non shadow-dom supporting browsers */
-.output.style-scope {
-  background-color: var(--background-primary);
-  border-left: 1px solid var(--border-primary);
-  font-size: 0.9rem;
-  height: 342px;
-  line-height: 1.5;
-  margin: 0;
-  overflow: scroll;
-  padding: 1rem;
-}
-
 .tabs {
   font-size: 0.9rem;
   flex: none;
@@ -144,7 +132,7 @@
     height: 580px;
   }
 
-  .shadow-container {
+  .output-container {
     width: 40%;
     height: 100%;
     border-left: 1px solid var(--border-primary);
@@ -156,3 +144,24 @@
     border-bottom: 0 none;
   }
 }
+
+#output-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* Those rules apply to content inside iframe, where example is shown */
+#output-root body {
+  background-color: #fff;
+}
+
+#html-output {
+  color: #15141aff;
+  font-size: 0.9rem;
+  overflow: auto;
+  line-height: 1.5;
+  padding: 2rem 1rem 1rem;
+  height: min-content; /* This value ensures correct calculation of clientHeight in /pages/tabbed/img */
+  width: fit-content; /* This value moves horizontal scroll bar to the bottom of iframe */
+}

editor/js/editor-libs/console.js

@@ -1,7 +1,10 @@
 import { writeOutput, formatOutput } from "./console-utils.js";
 
 // Thanks in part to https://stackoverflow.com/questions/11403107/capturing-javascript-console-log
-export default function () {
+export default function (targetWindow) {
+  /* Getting reference to console, either from current window or from the iframe window */
+  var console = targetWindow ? targetWindow.console : window.console;
+
   var originalConsoleLogger = console.log; // eslint-disable-line no-console
   var originalConsoleError = console.error;
 

editor/js/editor-libs/mce-utils.js

@@ -47,8 +47,8 @@ export function isPropertySupported(dataset) {
 
 /**
  * Interrupts the default click event on external links inside
- * the shadow dom and opens them in a new tab instead
- * @param {Array} externalLinks - all external links inside the shadow dom
+ * the iframe and opens them in a new tab instead
+ * @param {Array} externalLinks - all external links inside the iframe
  */
 export function openLinksInNewTab(externalLinks) {
   externalLinks.forEach(function (externalLink) {
@@ -61,15 +61,15 @@ export function openLinksInNewTab(externalLinks) {
 
 /**
  * Interrupts the default click event on relative links inside
- * the shadow dom and scrolls to the targeted anchor
- * @param {Object} shadow - the shadow dom root
- * @param {Array} relativeLinks - all relative links inside the shadow dom
+ * the iframe and scrolls to the targeted anchor
+ * @param {Object} rootElement - root or body element, that contains referenced links
+ * @param {Array} relativeLinks - all relative links inside the iframe
  */
-export function scrollToAnchors(shadow, relativeLinks) {
+export function scrollToAnchors(rootElement, relativeLinks) {
   relativeLinks.forEach(function (relativeLink) {
     relativeLink.addEventListener("click", function (event) {
       event.preventDefault();
-      shadow.querySelector(relativeLink.hash).scrollIntoView();
+      rootElement.querySelector(relativeLink.hash).scrollIntoView();
     });
   });
 }