Skip to content

Commit aafd943

Browse files
hannahnidahannahnida
committed
#628: Page Builder Wysiwyg Editor Element blocks view to content area - Added new Mftf test, added fixes for table toolbar
1 parent 1d8a56f commit aafd943

File tree

5 files changed

+76
-39
lines changed

5 files changed

+76
-39
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderWYSIWYGSection/WYSIWYGOnPageBuilderInlineSection.xml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929
<element name="insertLink" type="button" selector=".mce-tinymce-inline div[aria-label='Insert/edit link']"/>
3030
<element name="imageSelector" type="button" selector=".mce-tinymce-inline div[aria-label='Insert/edit image']"/>
3131
<element name="table" type="button" selector=".mce-tinymce-inline div[aria-label='Table']"/>
32+
<element name="tableMenuFirstItem" type="text" selector="(//i[contains(@class, 'mce-i-table')])[{{arg1}}]" parameterized="true"/>
33+
<element name="tableGrid" type="text" selector="//a[@data-mce-x={{arg1}}][@data-mce-y={{arg2}}]" parameterized="true"/>
34+
<element name="tableToolbar" type="text" selector=".mce-tinymce-inline.mce-arrow.mce-container.mce-floatpanel[aria-label='Inline toolbar']"/>
3235
<element name="specialCharacter" type="button" selector=".mce-tinymce-inline div[aria-label='Special character']"/>
3336
<element name="insertWidget" type="button" selector=".mce-tinymce-inline div[aria-label='Insert Widget']"/>
3437
<element name="insertVariable" type="button" selector=".mce-tinymce-inline div[aria-label='Insert Variable']"/>

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
10+
<test name="TextVerifyTinyMCE4TableToolbarOnPageBuilderStageTest">
11+
<annotations>
12+
<features value="PageBuilder"/>
13+
<stories value="Text"/>
14+
<title value="TinyMCE4 table toolbar on PageBuilder stage"/>
15+
<description value="Verify that WYSIWYG table toolbar doesn't overlap textarea"/>
16+
<group value="pagebuilder"/>
17+
<group value="pagebuilder-text"/>
18+
<group value="pagebuilder-tinyMCE"/>
19+
</annotations>
20+
<before>
21+
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
22+
<magentoCLI command="config:set cms/wysiwyg/editor mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter" stepKey="switchToTinyMCE4"/>
23+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
24+
</before>
25+
<after>
26+
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
27+
</after>
28+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
29+
<actionGroup ref="dragContentTypeToStage" stepKey="dragRowToRootContainer">
30+
<argument name="contentType" value="PageBuilderColumnContentType"/>
31+
<argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
32+
</actionGroup>
33+
<actionGroup ref="duplicateContentType" stepKey="duplicateContentType">
34+
<argument name="contentType" value="PageBuilderColumnContentType"/>
35+
</actionGroup>
36+
<actionGroup ref="expandPageBuilderPanelMenuSection" stepKey="expandPageBuilderPanelMenuSection1">
37+
<argument name="contentType" value="PageBuilderTextContentType"/>
38+
</actionGroup>
39+
<actionGroup ref="dragContentTypeToStage" stepKey="dragTextToColumnContentType">
40+
<argument name="contentType" value="PageBuilderTextContentType"/>
41+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
42+
</actionGroup>
43+
<!-- Add table to Text Editor -->
44+
<clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnTextEditorArea"/>
45+
<click selector="{{WYSIWYGOnPageBuilderInline.table}}" stepKey="clickOnTableMenuItem"/>
46+
<moveMouseOver selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem('2')}}" stepKey="moveMouseOverTableMenuIFirstItem"/>
47+
<click selector="{{WYSIWYGOnPageBuilderInline.tableMenuFirstItem('2')}}" stepKey="clickOnTableMenuFirstItem"/>
48+
<click selector="{{WYSIWYGOnPageBuilderInline.tableGrid('6', '0')}}" stepKey="chooseTableSize"/>
49+
<!-- Validate table size is 7 x 1 -->
50+
<seeElement selector="{{TextOnStage.elementInText('1', 'table', '1')}}" stepKey="seeTable"/>
51+
<seeElement selector="{{TextOnStage.elementInText('1', 'tr', '1')}}" stepKey="seeTableTr"/>
52+
<dontSeeElement selector="{{TextOnStage.elementInText('1', 'tr', '2')}}" stepKey="dontSeeMoreThan1TableTr"/>
53+
<seeElement selector="{{TextOnStage.elementInText('1', 'td', '7')}}" stepKey="see7TableTd"/>
54+
<dontSeeElement selector="{{TextOnStage.elementInText('1', 'td', '8')}}" stepKey="dontSeeMoreThan7TableTr"/>
55+
<!-- Validate that textarea is visible -->
56+
57+
<!-- Resize column to 4/12 and check toolbar position -->
58+
59+
<!-- Resize column back to 3/12 and check toolbar and textarea are visible -->
60+
61+
62+
</test>
63+
</tests>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_inline-wysiwyg.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,7 @@
7575
.mce-tinymce-inline.mce-arrow.mce-container.mce-floatpanel:not(.mce-arrow-up) {
7676
transform: translateY(30px); // table toolbar position fix
7777
}
78+
79+
.mce-tinymce-inline.mce-arrow.mce-container.mce-floatpanel.mce-arrow-up {
80+
transform: translateY(0) !important;
81+
}

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

Lines changed: 3 additions & 20 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/tinymce4.ts

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -247,15 +247,6 @@ export default class Wysiwyg implements WysiwygInterface {
247247
return $(`#${this.elementId}`).closest(`${this.config.adapter.settings.fixed_toolbar_container}`);
248248
}
249249

250-
/**
251-
* Get wysiwyg container
252-
*
253-
* @returns {jQuery}
254-
*/
255-
private getEditor() {
256-
return $(`#${this.elementId}`)[0];
257-
}
258-
259250
/**
260251
* Adjust table toolbar position, when editor container is smaller than toolbar
261252
*/
@@ -264,19 +255,12 @@ export default class Wysiwyg implements WysiwygInterface {
264255
return;
265256
}
266257

267-
const $tableToolbar = $(".mce-tinymce-inline.mce-arrow.mce-floatpanel.mce-arrow-up");
268-
269-
if (!!$tableToolbar.length) {
270-
$tableToolbar.css("transform", "translateY(0px)");
271-
}
272-
273-
const $shortTableToolbar = $(".mce-tinymce-inline.mce-arrow.mce-floatpanel:not(.mce-arrow-up)");
258+
const $tableToolbar = $(".mce-tinymce-inline.mce-arrow.mce-floatpanel:not(.mce-arrow-up)");
274259

275-
if (!$shortTableToolbar.length) {
260+
if (!$tableToolbar.length) {
276261
return;
277262
}
278263

279-
const editorHeight = this.getEditor().clientHeight;
280-
$shortTableToolbar.css("transform", "translateY(" + editorHeight + "px)");
264+
$tableToolbar.css("transform", "translateY(" + this.getFixedToolbarContainer().height() + "px)");
281265
}
282266
}

0 commit comments

Comments
 (0)