Merge pull request #69 from magento-tsg-csl3/MC-41569

MC-41569: "Image Size" sporadically changing from "%" to pixels

Author: zakdma

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js

@@ -173,8 +173,18 @@ export function parseAttributesString(attributes: string): { [key: string]: stri
  */
 export function lockImageSize(element: HTMLElement) {
     [].slice.call(element.querySelectorAll("img")).forEach((image: HTMLImageElement) => {
-        image.style.width = `${image.width}px`;
-        image.style.height = `${image.height}px`;
+        if (image.style.width.length === 0) {
+            image.style.width = /^\d+$/.test(image.getAttribute("width")) ?
+                image.getAttribute("width") + "px" :
+                image.getAttribute("width");
+            image.setAttribute("data-width-locked", "true");
+        }
+        if (image.style.height.length === 0) {
+            image.style.height = /^\d+$/.test(image.getAttribute("height")) ?
+                image.getAttribute("height") + "px" :
+                image.getAttribute("height");
+            image.setAttribute("data-height-locked", "true");
+        }
     });
 }
 
@@ -185,8 +195,14 @@ export function lockImageSize(element: HTMLElement) {
  */
 export function unlockImageSize(element: HTMLElement) {
     [].slice.call(element.querySelectorAll("img")).forEach((image: HTMLImageElement) => {
-        image.style.width = null;
-        image.style.height = null;
+        if (image.getAttribute("data-width-locked")) {
+            image.style.width = null;
+            image.removeAttribute("data-width-locked");
+        }
+        if (image.getAttribute("data-height-locked")) {
+            image.style.height = null;
+            image.removeAttribute("data-height-locked");
+        }
     });
 }
 

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/utils/editor.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+    'Magento_PageBuilder/js/utils/editor',
+    'jquery'
+], function (utils, $) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/utils/editor.js', function () {
+        describe('lockImageSize', function () {
+            it('Should not change the defined image sizes', function () {
+                var image = document.createElement('img'),
+                    element = document.createElement('div');
+
+                image.setAttribute('width', '100%');
+                $(element).append(image);
+
+                utils.lockImageSize(element);
+                expect(image.style.width).toEqual('100%');
+            });
+        });
+
+        describe('unlockImageSize', function () {
+            it('Should unlock locked images sizes only', function () {
+                var image = document.createElement('img'),
+                    element = document.createElement('div');
+
+                $(image).css({
+                    width: '100%',
+                    height: '100%'
+                });
+                $(image).attr('data-height-locked', 'true');
+                $(element).append(image);
+
+                utils.unlockImageSize(element);
+                expect(image.style.width).toEqual('100%');
+                expect(image.style.height).toEqual('');
+            });
+        });
+    });
+});