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

Author: davemacaulay

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

@@ -15,7 +15,7 @@
         <column xsi:type="int" name="template_id" identity="true" comment="Template ID Auto Increment" />
         <column xsi:type="varchar" name="name" length="1024" nullable="false" comment="Template Name" />
         <column xsi:type="varchar" name="preview_image" nullable="true" length="1024" comment="Template Preview Image"/>
-        <column xsi:type="text" name="template" nullable="false" comment="Master Format HTML"/>
+        <column xsi:type="longtext" name="template" nullable="false" comment="Master Format HTML"/>
         <column xsi:type="varchar" name="created_for" length="255" nullable="true" comment="Created For" />
         <column xsi:type="timestamp" name="created_at" on_update="false" nullable="false" default="CURRENT_TIMESTAMP"
                 comment="Creation Time"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/template-manager.js

@@ -59,10 +59,9 @@ export function saveAsTemplate(stage: Stage) {
              */
             confirm(name: string, createdFor: string) {
                 return new Promise((resolve, reject) => {
-                    // Retrieve the rendering lock from the stage
+                    // Wait for the screenshot and the rendering lock to complete before making the request
                     const renderingLock = stage.renderingLocks[stage.renderingLocks.length - 1];
 
-                    // Wait for the screenshot and the rendering lock to complete before making the request
                     $.when(capture, renderingLock).then((imageSrc: string, content: string) => {
                         $.ajax({
                             url: Config.getConfig("template_save_url"),
@@ -134,43 +133,48 @@ function createCapture(stage: Stage) {
     const stageElement = document.querySelector("#" + stage.id) as HTMLElement;
     const deferred = $.Deferred();
 
-    // Resolve issues with Parallax
-    const parallaxRestore = disableParallax(stageElement);
-
-    stageElement.style.height = $(stageElement).outerHeight(false) + "px";
-    stageElement.classList.add("capture");
-    stageElement.classList.add("interacting");
+    // Wait for the stage to complete rendering before taking the capture
+    const renderingLock = stage.renderingLocks[stage.renderingLocks.length - 1];
+    renderingLock.then(() => {
+        // Resolve issues with Parallax
+        const parallaxRestore = disableParallax(stageElement);
+
+        stageElement.style.height = $(stageElement).outerHeight(false) + "px";
+        stageElement.classList.add("capture");
+        stageElement.classList.add("interacting");
+
+        if (stage.pageBuilder.isFullScreen()) {
+            window.scrollTo({
+                top: 0,
+            });
+        }
+
+        _.defer(() => {
+            html2canvas(
+                document.querySelector("#" + stage.id + " .pagebuilder-canvas"),
+                {
+                    scale: 1,
+                    useCORS: true,
+                    scrollY: (window.pageYOffset * -1),
+                },
+            ).then((canvas: HTMLCanvasElement) => {
+                const imageSrc = canvas.toDataURL("image/jpeg", 0.85);
+
+                deferred.resolve(imageSrc);
+
+                if (stage.pageBuilder.isFullScreen()) {
+                    window.scrollTo({
+                        top: scrollY,
+                    });
+                }
 
-    if (stage.pageBuilder.isFullScreen()) {
-        window.scrollTo({
-            top: 0,
+                stageElement.style.height = null;
+                stageElement.classList.remove("capture");
+                stageElement.classList.remove("interacting");
+                restoreParallax(parallaxRestore);
+            });
         });
-    }
 
-    _.defer(() => {
-        html2canvas(
-            document.querySelector("#" + stage.id + " .pagebuilder-canvas"),
-            {
-                scale: 1,
-                useCORS: true,
-                scrollY: (window.pageYOffset * -1),
-            },
-        ).then((canvas: HTMLCanvasElement) => {
-            const imageSrc = canvas.toDataURL("image/jpeg", 0.85);
-
-            deferred.resolve(imageSrc);
-
-            if (stage.pageBuilder.isFullScreen()) {
-                window.scrollTo({
-                    top: scrollY,
-                });
-            }
-
-            stageElement.style.height = null;
-            stageElement.classList.remove("capture");
-            stageElement.classList.remove("interacting");
-            restoreParallax(parallaxRestore);
-        });
     });
 
     return deferred;