MC-18601: Page Builder Render

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/requirejs-config.js

@@ -32,6 +32,9 @@ var config = {
             },
             'mage/validation': {
                 'Magento_PageBuilder/js/system/config/validator-rules-mixin': true
+            },
+            'Magento_Ui/js/form/form': {
+                'Magento_PageBuilder/js/form/form-mixin': true
             }
         }
     }

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/wysiwyg.js

@@ -79,6 +79,7 @@ define([
             if (!this.isComponentInitialized()) {
                 this.loading(true);
                 this.pageBuilder = new PageBuilder(this.wysiwygConfigData(), this.initialValue);
+                events.trigger('pagebuilder:register', {ns: this.ns, instance: this.pageBuilder});
                 this.initPageBuilderListeners();
                 this.isComponentInitialized(true);
 

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

@@ -0,0 +1,75 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define(['jquery', 'underscore', 'Magento_PageBuilder/js/events', 'consoleLogger'], function ($, _, events, consoleLogger) {
+    'use strict';
+
+    var mixin = {
+        defaults: {
+            pageBuilderInstances: [],
+        },
+
+        /**
+         * Record instances of Page Builder initialized in the forms namespace
+         */
+        initialize: function () {
+            var self = this;
+            this._super();
+
+            events.on('pagebuilder:register', function (data) {
+                if (data.ns === self.ns) {
+                    self.pageBuilderInstances.push(data.instance);
+                }
+            });
+
+            return this;
+        },
+
+        /**
+         * Intercept save call to ensure any Page Builder rendering is completed before submitting form
+         *
+         * @param {String} redirect
+         * @param {Object} data
+         */
+        save: function (redirect, data) {
+            var self = this,
+                superFunction = this._super,
+                submit = function () {
+                    superFunction.apply(self, [redirect, data]);
+                };
+
+            if (this.pageBuilderInstances.length > 0) {
+                let locks = this.pageBuilderInstances.map(function (instance) {
+                    if (instance.stage.renderingLock && !_.isUndefined(instance.stage.renderingLock.promise)) {
+                        return instance.stage.renderingLock.promise;
+                    }
+                }).filter(function (promise) {
+                    return promise !== undefined;
+                });
+
+                if (locks.length === 0) {
+                    submit();
+                } else {
+                    var timeout = setTimeout(function () {
+                        consoleLogger.error("Page Builder was rendering for 5 seconds without releasing locks.");
+                    }, 5000);
+
+                    $('body').trigger('processStart');
+                    Promise.all(locks).then(function () {
+                        $('body').trigger('processStop');
+                        clearTimeout(timeout);
+                        submit();
+                    });
+                }
+            } else {
+                submit();
+            }
+        }
+    };
+
+    return function (target) {
+        return target.extend(mixin);
+    };
+});

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

@@ -31,6 +31,7 @@ export default class Stage {
     public dataStore: DataStore = new DataStore();
     public afterRenderDeferred: DeferredInterface = deferred();
     public rootContainer: ContentTypeCollectionInterface;
+    public renderingLock: DeferredInterface;
     private template: string = "Magento_PageBuilder/content-type/preview";
     private render: Render;
     private collection: Collection = new Collection();
@@ -41,10 +42,14 @@ export default class Stage {
      * @type {(() => void) & _.Cancelable}
      */
     private applyBindingsDebounce = _.debounce(() => {
+        this.renderingLock = deferred();
         this.render.applyBindings(this.rootContainer)
             .then((renderedOutput: string) => events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
                 value: renderedOutput,
-            })).catch((error: Error) => {
+            })).then(() => {
+                this.renderingLock.resolve();
+                this.renderingLock = null;
+            }).catch((error: Error) => {
                 console.error(error);
             });
     }, 500);