MC-18601: Page Builder Render

Author: davemacaulay

app/code/Magento/PageBuilder/Controller/Adminhtml/Stage/Render.php

@@ -17,6 +17,8 @@
  */
 class Render extends \Magento\Backend\App\Action implements HttpGetActionInterface
 {
+    const ADMIN_RESOURCE = 'Magento_Backend::content';
+
     /**
      * Preview transactional email action
      *

app/code/Magento/PageBuilder/etc/module.xml

@@ -16,6 +16,7 @@
             <module name="Magento_Theme"/>
             <module name="Magento_Search"/>
             <module name="Magento_CatalogWidget"/>
+            <module name="Magento_RequireJs"/>
         </sequence>
     </module>
 </config>

app/code/Magento/PageBuilder/view/adminhtml/templates/stage/render.phtml

@@ -6,9 +6,12 @@
 
 /** @var \Magento\PageBuilder\Block\Adminhtml\Stage\Render $block */
 ?>
-<script type="text/javascript">
+<script>
     <?php
-    // Shim localStorage without detection as it will not work as the iframe is sandboxed.
+    /**
+     * Shim localStorage always within the iframe to ensure any calls from Magento API's do not fail due to same origin
+     * policies.
+     */
     ?>
     Object.defineProperty(
         window,
@@ -35,11 +38,14 @@
         }
     );
 </script>
-<script type="text/javascript" src="<?= $block->escapeUrl($block->getRequireJsUrl()); ?>"></script>
-<script type="text/javascript" src="<?= $block->escapeUrl($block->getRequireJsConfigUrl()); ?>"></script>
-<script type="text/javascript">
+<script src="<?= $block->escapeUrl($block->getRequireJsUrl()); ?>"></script>
+<script src="<?= $block->escapeUrl($block->getRequireJsConfigUrl()); ?>"></script>
+<script>
     <?php
-    // Override the text! RequireJS plugin to allow us to load templates from the parent window
+    /**
+     * Override the text! plugin within the iframe to ensure we can pipe any XHR requests through to the parent window
+     * as the same origin policy will not allow us to load the templates within this iframe.
+     */
     ?>
     require.config({
         'map': {
@@ -66,9 +72,9 @@
         ko.setTemplateEngine(templateEngine);
     });
 </script>
-<script type="text/javascript">
+<script>
     require(['Magento_PageBuilder/js/render/frame'], function (listen) {
-        listen(<?= $this->getPageBuilderConfig(); ?>);
+        listen(<?= /* @noEscape */ $block->getPageBuilderConfig(); ?>);
     });
 </script>
-Page Builder Render Frame
+<div>Page Builder Render Frame</div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/form-mixin.js

@@ -3,7 +3,7 @@
  * See COPYING.txt for license details.
  */
 
-define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger', 'Magento_PageBuilder/js/stage'], function ($, events, consoleLogger, stage) {
+define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($, events, consoleLogger) {
     'use strict';
 
     var mixin = {
@@ -50,14 +50,12 @@ define(['jquery', 'Magento_PageBuilder/js/events', 'consoleLogger', 'Magento_Pag
                 if (locks.length === 0) {
                     submit();
                 } else {
-                    stage.debugLog('Lock detected, waiting for resolution');
                     timeout = setTimeout(function () {
                         consoleLogger.error('Page Builder was rendering for 5 seconds without releasing locks.');
                     }, 5000);
 
                     $('body').trigger('processStart');
                     $.when.apply(null, locks).then(function () {
-                        stage.debugLog('Resolved lock, saving');
                         $('body').trigger('processStop');
                         clearTimeout(timeout);
                         submit();

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/render.js

@@ -21,6 +21,5 @@
             <render/>
         </with>
         <iframe width="1" height="1" attr="id: 'render_frame_' + id" sandbox="allow-scripts" style="display: none;"></iframe>
-        <textarea name="debug" rows="5" cols="5"></textarea>
     </if>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/stage.js

@@ -4,18 +4,10 @@
  */
 
 import $ from "jquery";
-import _ from "underscore";
 import Config from "../config";
 import ContentTypeCollectionInterface from "../content-type-collection.types";
 import { getSerializedTree } from "./render/serialize";
 
-function debugLog(message: any) {
-    if (_.isObject(message) || _.isArray(message)) {
-        message = JSON.stringify(message);
-    }
-    $("[name=debug]").append(message + "\n");
-}
-
 export default class MasterFormatRenderer {
     public stageId: string;
     public channel: MessageChannel;
@@ -37,45 +29,33 @@ export default class MasterFormatRenderer {
      */
     public applyBindings(rootContainer: ContentTypeCollectionInterface): Promise<string> {
         if (!this.getRenderFrame()) {
-            debugLog("No render frame");
             console.error("No render frame present for Page Builder instance.");
             return;
         }
 
         return new Promise((resolve, reject) => {
             if (this.ready) {
-                debugLog("Frame is ready, posting data");
-                try {
-                    this.channel.port1.postMessage({
-                        type: "render",
-                        message: {
-                            stageId: this.stageId,
-                            tree: getSerializedTree(rootContainer),
-                        },
-                    });
-                } catch (e) {
-                    debugLog("Error in postMessage");
-                    debugLog(e);
-                }
+                this.channel.port1.postMessage({
+                    type: "render",
+                    message: {
+                        stageId: this.stageId,
+                        tree: getSerializedTree(rootContainer),
+                    },
+                });
                 this.channel.port1.onmessage = (event) => {
                     if (event.isTrusted) {
                         if (event.data.type === "render") {
-                            console.log(event.data.message);
-                            debugLog("Render complete, resolving event");
                             resolve(event.data.message);
                         }
                         if (event.data.type === "template") {
-                            debugLog("Requested template " + event.data.message);
                             this.loadTemplate(event.data.message);
                         }
                     } else {
                         reject();
                     }
                 };
             } else {
-                debugLog("Frame not ready, waiting for ready...");
                 this.readyDeferred.then(() => {
-                    debugLog("Frame became ready");
                     this.applyBindings(rootContainer).then((rendered: string) => {
                         resolve(rendered);
                     }).catch(() => {
@@ -90,17 +70,13 @@ export default class MasterFormatRenderer {
      * Create a channel to communicate with our sandboxed iframe
      */
     public setupChannel() {
-        debugLog("Setting up channel");
         this.channel = new MessageChannel();
         const frame = this.getRenderFrame();
         window.addEventListener("message", (event) => {
-            debugLog("onLoad message called");
-            debugLog(event);
             if (event.data === "PB_RENDER_READY") {
                 frame.contentWindow.postMessage("PB_RENDER_PORT", "*", [this.channel.port2]);
                 this.ready = true;
                 this.readyDeferred.resolve();
-                debugLog("channel is ready");
             }
         });
         frame.src = Config.getConfig("render_url");
@@ -113,7 +89,6 @@ export default class MasterFormatRenderer {
      */
     private loadTemplate(name: string): void {
         require(["text!" + name], (template: string) => {
-            debugLog("Loaded template " + name);
             this.channel.port1.postMessage({
                 type: "template",
                 message: {

app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

@@ -20,13 +20,6 @@ import buildStage from "./stage-builder";
 import {StageUpdateAfterParamsInterface} from "./stage-events.types";
 import deferred, {DeferredInterface} from "./utils/promise-deferred";
 
-export function debugLog(message: any) {
-    if (_.isObject(message) || _.isArray(message)) {
-        message = JSON.stringify(message);
-    }
-    $("[name=debug]").append(message + "\n");
-}
-
 export default class Stage {
     public static readonly rootContainerName: string = "root-container";
     public pageBuilder: PageBuilderInterface;
@@ -54,14 +47,11 @@ export default class Stage {
      * @type {(() => void) & _.Cancelable}
      */
     private applyBindingsDebounce = _.debounce(() => {
-        debugLog("------------------------------------------");
-        debugLog("Lock created");
         this.renderingLock = $.Deferred();
         this.render.applyBindings(this.rootContainer)
             .then((renderedOutput: string) => events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
                 value: renderedOutput,
             })).then(() => {
-                debugLog("Lock resolved");
                 this.renderingLock.resolve();
             }).catch((error: Error) => {
                 console.error(error);