Merge branch 'develop' of https://github.com/magento-l3/magento2-page-builder into PR-20210423

Author: chittima

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('');
+ });
+ });
+ });
+});