From babc60e629788c8c468b5a0802b9fe2df04da679 Mon Sep 17 00:00:00 2001
From: Mark Hodge <mark.hodge@kindthread.com>
Date: Thu, 30 Oct 2025 10:36:58 -0400
Subject: [PATCH 1/2] #139 - Preview performance fix

---
 view/adminhtml/web/js/cms/preview-update.js | 70 ++++++++++++---------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/view/adminhtml/web/js/cms/preview-update.js b/view/adminhtml/web/js/cms/preview-update.js
index 550ca34..a8dc45c 100644
--- a/view/adminhtml/web/js/cms/preview-update.js
+++ b/view/adminhtml/web/js/cms/preview-update.js
@@ -1,25 +1,30 @@
 define(
-    ['jquery','Magento_PageBuilder/js/events','mage/url'],
-    function($,_PBEvents, urlBuilder){
-        'use strict'
+    ['jquery','Magento_PageBuilder/js/events'],
+    function ($,_PBEvents) {
+        'use strict';
         return function (config, element) {
-            var updateHandler = {
-                images: [],
+            let updateHandler = {
+                images: {},
                 init: function () {
                     let self = this;
-                    _PBEvents.on('image:renderAfter', function (event){
+
+                    _PBEvents.on('image:renderAfter', function (event) {
                         let elem = event.element, key = event.id;
                         let image = $(elem).find('img');
-                        let src = {'remote_image': image.attr('src')};
-                        self.images.push(src);
+
+                        self.images[key] = {
+                            key: key,
+                            remote_image: image.attr('src')
+                        };
 
                         self.update(key);
                     });
-                    $('#save-button').on('click', function (e){
-                        self.images.forEach(function(elem){
+                    $('#save-button').on('click', function () {
+                        self.images.each(function (elem) {
                             if (elem.cld_image) {
                                 let cld_src = elem.cld_image;
                                 let img = $('img[src="' +  cld_src +'"]');
+
                                 if (img.length) {
                                     img.attr('src', elem.remote_image);
                                 }
@@ -27,29 +32,34 @@ define(
                         });
                     });
                 },
-                update: function(key) {
+                update: function (key) {
                     let self = this;
-                    this.images.forEach(function(elem,ind){
-                        $.ajax({
-                            url: config.ajaxUrl,
-                            type: 'POST',
-                            dataType: 'json',
-                            data: elem,
-                            success: function(image) {
-                                self.images[ind].cld_image = image;
-                                let img = $('img[src="' +  self.images[ind].remote_image +'"]');
-                                if (img.length) {
-                                    img.attr('src', self.images[ind].cld_image);
-                                }
-                            },
-                            error: function(xhr, textStatus, errorThrown) {
-                                console.log('Error:', textStatus, errorThrown);
-                            }
-                        });
+                    let imageData = self.images[key];
+
+                    if (!imageData) {
+                        return;
+                    }
+
+                    $.ajax({
+                        url: config.ajaxUrl,
+                        type: 'POST',
+                        dataType: 'json',
+                        data: { remote_image: imageData.remote_image },
+                        success: function (image) {
+                            self.images[key].cld_image = image;
+                            let img = $('img[src="' +  imageData.remote_image +'"]');
 
-                    })
+                            if (img.length) {
+                                img.attr('src', image);
+                            }
+                        },
+                        error: function (xhr, textStatus, errorThrown) {
+                            console.log('Error:', textStatus, errorThrown);
+                        }
+                    });
                 }
             };
+
             return updateHandler.init();
-        }
+        };
     });

From e05bc56bcd0aaea348b444c71f588804d118fe65 Mon Sep 17 00:00:00 2001
From: Mark Hodge <mark.hodge@kindthread.com>
Date: Thu, 30 Oct 2025 10:45:44 -0400
Subject: [PATCH 2/2] #139 - Use jquery .each for object

---
 view/adminhtml/web/js/cms/preview-update.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/view/adminhtml/web/js/cms/preview-update.js b/view/adminhtml/web/js/cms/preview-update.js
index a8dc45c..e558272 100644
--- a/view/adminhtml/web/js/cms/preview-update.js
+++ b/view/adminhtml/web/js/cms/preview-update.js
@@ -20,10 +20,9 @@ define(
                         self.update(key);
                     });
                     $('#save-button').on('click', function () {
-                        self.images.each(function (elem) {
+                        $.each(self.images, function (key, elem) {
                             if (elem.cld_image) {
-                                let cld_src = elem.cld_image;
-                                let img = $('img[src="' +  cld_src +'"]');
+                                let img = $('img[src="' +  elem.cld_image +'"]');
 
                                 if (img.length) {
                                     img.attr('src', elem.remote_image);