Reproducable in all environments (development, staging, prod)
Steps to reproduce (*)
Create a new product (or page, category etc)
Add a text element to the page builder
Using the WYSIWYG insert an image from the media library. Tick the “Constraign dimensions“ tickbox a couple of times (this ensures tinymce sets with/height attributes, which only happens once the image src has finished loading).
Observe through the TinyMCE "source code" functionality that the image now has width and height attributes, but no style tag.
Save the product/page/category.
Re-open the WYSIWYG and look at the source using TinyMCE "source code" functionality again. Observe that style="width: ...px; height: ...px;" has now been added.
Expected result (*)
The inline styles style="width: ...px; height: ...px;" should not have been added to the images.
Actual result (*)
Inline syles are added to images elements. This is causing problems with the display of the images in a responsive context.
Technical comments
The problematic code is the below (module-page-builder/view/adminhtml/web/js/utils/editor.js):
/**
* Lock all image sizes before initializing TinyMCE to avoid content jumps
*
* @param element
*/
function lockImageSize(element) {
[].slice.call(element.querySelectorAll("img")).forEach(function (image) {
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");
}
});
}
/**
* Reverse forced image size after TinyMCE is finished initializing
*
* @param element
*/
function unlockImageSize(element) {
[].slice.call(element.querySelectorAll("img")).forEach(function (image) {
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");
}
});
}
In unlockImageSize pagebuilder tries to remove the style attibutes with image.style.width = null; and image.style.height = null;.
However, inspecting the img element in devtools within the tinymce content editor, there is also data-mce-style="width: 1000px; height: 400px;". It appears TinyMCE is converting this into a style attribute when the editor content is serialised before save.
I am assuming there could be other legitimate styles within data-mce-style, so I'm not sure it's safe to just remove the data-mce-style attribute - some sort of regex might be needed to remove just the width and height components.
Preconditions (*)
Steps to reproduce (*)
style="width: ...px; height: ...px;"
has now been added.Expected result (*)
style="width: ...px; height: ...px;"
should not have been added to the images.Actual result (*)
Technical comments
The problematic code is the below (
module-page-builder/view/adminhtml/web/js/utils/editor.js
):In
unlockImageSize
pagebuilder tries to remove the style attibutes withimage.style.width = null;
andimage.style.height = null;
.However, inspecting the
img
element in devtools within the tinymce content editor, there is alsodata-mce-style="width: 1000px; height: 400px;"
. It appears TinyMCE is converting this into a style attribute when the editor content is serialised before save.I am assuming there could be other legitimate styles within
data-mce-style
, so I'm not sure it's safe to just remove thedata-mce-style
attribute - some sort of regex might be needed to remove just the width and height components.