Skip to content

Commit ee8db5b

Browse files
davemacaulaydavemacaulay
committed
PB-170: TinyMCE Performance is very poor with multiple instances on Stage
- Resolve issue with images after directives - Update test selectors
1 parent 77ec738 commit ee8db5b

File tree

5 files changed

+46
-54
lines changed

5 files changed

+46
-54
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@
8585
<element name="imageOnStage" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]//img[contains(@src,'{{var1}}')]" parameterized="true"/>
8686
<element name="imageSourceByIndex" type="text" selector="(//div[@data-content-type='banner'])[{{arg1}}]/div[contains(@style,'{{arg2}}')]" parameterized="true"/>
8787
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
88-
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-variable magento-placeholder')]" parameterized="true"/>
89-
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-placeholder magento-widget')]" parameterized="true"/>
88+
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
89+
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>
9090
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
9191
<element name="tinymceInFocus" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{arg}}]//div[contains(@class, 'inline-wysiwyg') and contains(@class, 'mce-edit-focus')]" parameterized="true"/>
9292
<!-- Appearance Configuration -->

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,8 @@
144144
<element name="optionsMenuButtonDisabled" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{arg1}}]//li[contains(@class,'pagebuilder-options-link')]//a[contains(@class,'{{arg2}}') and contains(@class,'disabled')]" parameterized="true"/>
145145
<element name="optionsMenuTitle" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{arg1}}]//li[contains(@class,'pagebuilder-options-link')]//div[contains(@class,'option-title')]" parameterized="true"/>
146146
<element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
147-
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//*[contains(@class, 'magento-variable magento-placeholder')]" parameterized="true"/>
148-
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//*[contains(@class, 'magento-placeholder magento-widget')]" parameterized="true"/>
147+
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
148+
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>
149149
<element name="tinymce" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//div[contains(@class, 'inline-wysiwyg')]" parameterized="true"/>
150150
<element name="tinymceInFocus" type="text" selector="(//div[contains(@class,'pagebuilder-slide')])[{{arg}}]//div[contains(@class, 'inline-wysiwyg') and contains(@class, 'mce-edit-focus')]" parameterized="true"/>
151151
<!-- Appearance Configuration -->

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTextSection.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<element name="textAnchorText" type="text" selector="(//div[@data-content-type='text'])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]/p/a[text()='{{arg2}}']" parameterized="true"/>
1818
<element name="directive" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div//span[contains(.,'{{arg2}}')]" parameterized="true"/>
1919
<element name="mcePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div//*[starts-with(@id, '{{arg2}}')]" parameterized="true"/>
20-
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]/div//*[contains(@class, 'magento-variable magento-placeholder')]" parameterized="true"/>
21-
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]/div//*[contains(@class, 'magento-placeholder magento-widget')]" parameterized="true"/>
20+
<element name="variablePlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]/div//*[contains(@class, 'magento-variable') and contains(@class, 'magento-placeholder')]" parameterized="true"/>
21+
<element name="widgetPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]/div//*[contains(@class, 'magento-placeholder') and contains(@class, 'magento-widget')]" parameterized="true"/>
2222
<element name="placeholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(@class, 'placeholder-text') and text()='Edit Text']" parameterized="true"/>
2323
<element name="textArea" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg}}]//textarea[contains(@class,'inline-wysiwyg-textarea')]" parameterized="true"/>
2424
<element name="textareaPlaceholder" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//textarea[contains(@class, 'inline-wysiwyg-textarea') and contains(@placeholder,'Edit Text')]" parameterized="true"/>

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

Lines changed: 13 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -36,26 +36,29 @@ export function convertVariablesToHtmlPreview(content: string) {
3636
const magentoVariables = JSON.parse(config.placeholders);
3737

3838
return content.replace(/{\{\s?(?:customVar code=|config path=\")([^\}\"]+)[\"]?\s?\}\}/ig, (match, path) => {
39-
const placeholder = document.createElement("span");
40-
placeholder.id = btoa(path).replace(/\+/g, ":").replace(/\//g, "_").replace(/=/g, "-");
41-
placeholder.classList.add("magento-variable");
42-
placeholder.classList.add("magento-placeholder");
43-
placeholder.classList.add("mceNonEditable");
39+
const id = btoa(path).replace(/\+/g, ":").replace(/\//g, "_").replace(/=/g, "-");
40+
const placeholder = $("<span />")
41+
.addClass("magento-variable")
42+
.addClass("magento-placeholder")
43+
.addClass("mceNonEditable")
44+
.prop("id", id)
45+
.prop("contentEditable", "false");
46+
4447
if (magentoVariables[path].variable_type === "custom") {
45-
placeholder.classList.add("magento-custom-var");
48+
placeholder.addClass("magento-custom-var");
4649
}
4750

4851
const variableType = magentoVariables[path].variable_type;
4952

5053
if (magentoVariables[path] && (variableType === "default" || variableType === "custom")) {
51-
placeholder.textContent = magentoVariables[path].variable_name;
54+
placeholder.text(magentoVariables[path].variable_name);
5255
} else {
5356
// If we're unable to find the placeholder we need to attach an error class
54-
placeholder.classList.add("magento-placeholder-error");
55-
placeholder.textContent = (variableType === "custom" ? path : "Not Found");
57+
placeholder.addClass("magento-placeholder-error");
58+
placeholder.text((variableType === "custom" ? path : "Not Found"));
5659
}
5760

58-
return placeholder.outerHTML;
61+
return placeholder[0].outerHTML;
5962
});
6063
}
6164

@@ -71,35 +74,35 @@ export function convertWidgetsToHtmlPreview(content: string) {
7174
let imageSrc;
7275

7376
if (attributes.type) {
74-
const placeholder = document.createElement("span");
75-
placeholder.id = mageUtils.uniqueid();
76-
placeholder.contentEditable = "false";
77-
placeholder.classList.add("magento-widget");
78-
placeholder.classList.add("magento-placeholder");
79-
placeholder.classList.add("mceNonEditable");
77+
const placeholder = $("<span />")
78+
.addClass("magento-widget")
79+
.addClass("magento-placeholder")
80+
.addClass("mceNonEditable")
81+
.prop("id", mageUtils.uniqueid())
82+
.prop("contentEditable", "false");
8083

8184
attributes.type = attributes.type.replace(/\\\\/g, "\\");
8285
imageSrc = config.placeholders[attributes.type];
8386

8487
if (!imageSrc) {
8588
imageSrc = config.error_image_url;
86-
placeholder.classList.add("magento-placeholder-error");
89+
placeholder.addClass("magento-placeholder-error");
8790
}
8891

89-
const image = document.createElement("img");
90-
image.id = btoa(match).replace(/\+/g, ":").replace(/\//g, "_").replace(/=/g, "-");
91-
image.src = imageSrc;
92-
placeholder.appendChild(image);
92+
const image = $("<img />")
93+
.prop("id", btoa(match).replace(/\+/g, ":").replace(/\//g, "_").replace(/=/g, "-"))
94+
.prop("src", imageSrc);
95+
96+
placeholder.append(image);
9397

9498
let widgetType = "";
9599
if (config.types[attributes.type]) {
96100
widgetType += config.types[attributes.type];
97101
}
98102

99-
const text = document.createTextNode(widgetType);
100-
placeholder.appendChild(text);
103+
placeholder.append($(document.createTextNode(widgetType)));
101104

102-
return placeholder.outerHTML;
105+
return placeholder[0].outerHTML;
103106
}
104107
});
105108
}

0 commit comments

Comments
 (0)