Skip to content

Commit c966417

Browse files
sivaschenkosivaschenko
authored
Merge pull request #149 from magento-atwix-pyrrans/AC-2086-fix-failed-functional-tests-after-update-tinymce
[Pyrrans] AC-2086: Fixed failed build of the functional tests
2 parents 12fa2d2 + 1de7de5 commit c966417

File tree

3 files changed

+85
-59
lines changed

3 files changed

+85
-59
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest/TextVerifyTinyMCETableToolbarOnPageBuilderStageTest.xml

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,14 @@
112112
</actionGroup>
113113

114114
<!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible -->
115-
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType"/>
116-
<waitForPageLoad stepKey="waitForTinyMCEToolbar"/>
117-
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar"/>
115+
<actionGroup ref="focusOnInlineTinyMCEEditor" stepKey="clickOnTextContentType">
116+
<argument name="contentTypeXCoordinate" value="10"/>
117+
<argument name="contentTypeYCoordinate" value="10"/>
118+
</actionGroup>
119+
<comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinyMCEToolbar"/>
120+
<conditionalClick selector="{{TextOnStage.tinymce('1')}}" dependentSelector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" visible="false" stepKey="clickAgainToOpenTableToolbar"/>
118121
<waitForPageLoad stepKey="waitForTinyMCETableToolbar"/>
119-
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar2"/>
122+
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar2"/>
120123
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties2"/>
121124
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable2"/>
122125
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore2"/>
@@ -171,11 +174,14 @@
171174
</actionGroup>
172175

173176
<!-- Initialize TinyMCE Table Toolbar & Verify All Table Toolbar Menu Items are Visible Again -->
174-
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickOnTextContentType2"/>
175-
<waitForPageLoad stepKey="waitForTinymceToolbar2"/>
176-
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="clickAgainToOpenTableToolbar2"/>
177+
<actionGroup ref="focusOnInlineTinyMCEEditor" stepKey="clickOnTextContentType2">
178+
<argument name="contentTypeXCoordinate" value="10"/>
179+
<argument name="contentTypeYCoordinate" value="10"/>
180+
</actionGroup>
181+
<comment userInput="Step key preserved for backwards compatibility" stepKey="waitForTinymceToolbar2"/>
182+
<conditionalClick selector="{{TextOnStage.tinymce('1')}}" dependentSelector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" visible="false" stepKey="clickAgainToOpenTableToolbar2"/>
177183
<waitForPageLoad stepKey="waitForTinymceTableToolbar2"/>
178-
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar3"/>
184+
<waitForElementVisible selector="{{WYSIWYGOnPageBuilderInline.tableToolbar}}" stepKey="seeTableToolbar3"/>
179185
<seeElement selector="{{WYSIWYGOnPageBuilderInline.tableProperties}}" stepKey="seeTableProperties3"/>
180186
<seeElement selector="{{WYSIWYGOnPageBuilderInline.deleteTable}}" stepKey="seeDeleteTable3"/>
181187
<seeElement selector="{{WYSIWYGOnPageBuilderInline.insertRowBefore}}" stepKey="seeInsertRowBefore3"/>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/wysiwyg/tinymce.js

Lines changed: 33 additions & 23 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/wysiwyg/tinymce.ts

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import WysiwygInstanceInterface from "wysiwygAdapter";
1212
import {AdditionalDataConfigInterface} from "../content-type-config.types";
1313
import DataStore from "../data-store";
1414
import checkStageFullScreen from "../utils/check-stage-full-screen";
15+
import delayUntil from "../utils/delay-until";
1516
import pageBuilderHeaderHeight from "../utils/pagebuilder-header-height";
1617
import WysiwygInterface from "./wysiwyg-interface";
1718

@@ -171,36 +172,45 @@ export default class Wysiwyg implements WysiwygInterface {
171172

172173
events.trigger("stage:interactionStart");
173174

175+
const element = document.querySelector(`#${this.elementId}`);
176+
if (!element) {
177+
return;
178+
}
179+
174180
// Wait for everything else to finish
175-
_.defer(() => {
176-
const $inlineToolbar = this.getFixedToolbarContainer().find(".tox-tinymce-inline");
177-
const self = this;
178-
179-
$inlineToolbar.css("min-width", this.config.adapter_config.minToolbarWidth + "px");
180-
181-
this.invertInlineEditorToAccommodateOffscreenToolbar();
182-
183-
// Update toolbar when the height changes
184-
this.toolbarHeight = $inlineToolbar.height();
185-
if ($inlineToolbar.length) {
186-
this.resizeObserver = new ResizeObserver((entries) => {
187-
for (const entry of entries) {
188-
if (entry.target === $inlineToolbar.get(0)
189-
&& entry.target.clientHeight !== self.toolbarHeight
190-
) {
191-
self.invertInlineEditorToAccommodateOffscreenToolbar();
192-
self.toolbarHeight = entry.target.clientHeight;
181+
_.defer(() => delayUntil(
182+
() => {
183+
const $inlineToolbar = this.getFixedToolbarContainer().find(".tox-tinymce-inline");
184+
const self = this;
185+
186+
$inlineToolbar.css("min-width", this.config.adapter_config.minToolbarWidth + "px");
187+
188+
this.invertInlineEditorToAccommodateOffscreenToolbar();
189+
190+
// Update toolbar when the height changes
191+
this.toolbarHeight = $inlineToolbar.height();
192+
if ($inlineToolbar.length) {
193+
this.resizeObserver = new ResizeObserver((entries) => {
194+
for (const entry of entries) {
195+
if (entry.target === $inlineToolbar.get(0)
196+
&& entry.target.clientHeight !== self.toolbarHeight
197+
) {
198+
self.invertInlineEditorToAccommodateOffscreenToolbar();
199+
self.toolbarHeight = entry.target.clientHeight;
200+
}
193201
}
194-
}
195-
});
196-
this.resizeObserver.observe($inlineToolbar.get(0));
197-
}
198-
const dialogContainer = document.querySelector(`#${this.elementId} ~ .tox-tinymce-aux`);
199-
if (!!dialogContainer) {
200-
dialogContainer.setAttribute("data-editor-aux", this.elementId);
201-
document.body.appendChild(dialogContainer);
202-
}
203-
});
202+
});
203+
this.resizeObserver.observe($inlineToolbar.get(0));
204+
}
205+
const dialogContainer = document.querySelector(`#${this.elementId} ~ .tox-tinymce-aux`);
206+
if (!!dialogContainer) {
207+
dialogContainer.setAttribute("data-editor-aux", this.elementId);
208+
document.body.appendChild(dialogContainer);
209+
}
210+
},
211+
() => element.classList.contains("mce-edit-focus"),
212+
10,
213+
));
204214
}
205215

206216
/**

0 commit comments

Comments
 (0)