PB-390: Nested Page Builder content can fail to save when action is performed quickly

- Add an ID to the render to ensure this is the last render

Author: davemacaulay

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

@@ -25,9 +25,7 @@ let lastRenderId: string;
 /**
  * Debounce the render call, so we don't render until the final request
  */
-const debounceRender = _.debounce((message: {stageId: string, tree: TreeItem}) => {
-    const renderId = mageUtils.uniqueid();
-    lastRenderId = renderId;
+const debounceRender = _.debounce((message: {stageId: string, tree: TreeItem}, renderId: string) => {
     render(message).then((output) => {
         // Only post the most recent render back to the parent
         if (lastRenderId === renderId) {
@@ -58,7 +56,9 @@ export default function listen(config: ConfigInterface) {
                 portDeferred.resolve(port);
                 port.onmessage = (messageEvent) => {
                     if (messageEvent.data.type === "render") {
-                        debounceRender(messageEvent.data.message);
+                        const renderId = mageUtils.uniqueid();
+                        lastRenderId = renderId;
+                        debounceRender(messageEvent.data.message, renderId);
                     }
                     if (messageEvent.data.type === "template") {
                         const message = messageEvent.data.message;
@@ -156,12 +156,10 @@ function render(message: {stageId: string, tree: TreeItem}) {
             // Combine this event with our engine waitForRenderFinish to ensure rendering is completed
             $.when(engine.waitForFinishRender(), renderFinished).then(() => {
                 observer.disconnect();
-                _.defer(() => {
-                    ko.cleanNode(element);
-                    const filtered: JQuery = filterHtml($(element));
-                    const output = decodeAllDataUrlsInString(filtered.html());
-                    resolve(output);
-                });
+                ko.cleanNode(element);
+                const filtered: JQuery = filterHtml($(element));
+                const output = decodeAllDataUrlsInString(filtered.html());
+                resolve(output);
             });
 
             ko.applyBindingsToNode(

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

@@ -7,6 +7,7 @@ import $ from "jquery";
 import ko from "knockout";
 import events from "Magento_PageBuilder/js/events";
 import "Magento_PageBuilder/js/resource/jquery/ui/jquery.ui.touch-punch";
+import mageUtils from "mageUtils";
 import _ from "underscore";
 import "./binding/sortable";
 import Collection from "./collection";
@@ -40,21 +41,24 @@ export default class Stage {
     private template: string = "Magento_PageBuilder/content-type/preview";
     private render: Render;
     private collection: Collection = new Collection();
+    private lastRenderId: string;
 
     /**
      * Debounce the applyBindings call by 500ms to stop duplicate calls
      *
      * @type {(() => void) & _.Cancelable}
      */
-    private applyBindingsDebounce = _.debounce(() => {
+    private applyBindingsDebounce = _.debounce((renderId: string) => {
         this.render.applyBindings(this.rootContainer)
             .then((renderedOutput: string) => {
-                events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
-                    value: renderedOutput,
-                });
-                this.renderingLocks.forEach((lock) => {
-                    lock.resolve(renderedOutput);
-                });
+                if (this.lastRenderId === renderId) {
+                    events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
+                        value: renderedOutput,
+                    });
+                    this.renderingLocks.forEach((lock) => {
+                        lock.resolve(renderedOutput);
+                    });
+                }
             }).catch((error: Error) => {
                 if (error) {
                     console.error(error);
@@ -133,7 +137,9 @@ export default class Stage {
             if (args.stageId === this.id) {
                 // Create the rendering lock straight away
                 this.createLock();
-                this.applyBindingsDebounce();
+                const renderId = mageUtils.uniqueid();
+                this.lastRenderId = renderId;
+                this.applyBindingsDebounce(renderId);
             }
         });