Merge branch 'develop' into 525_mobile_column_width_slider_child_fix

omiroshnichenko · web-flow · commit fb4b5f69eef1 · 2020-06-26T09:09:29.000-05:00
diff --git a/app/code/Magento/PageBuilder/Model/Dom/NodeList.php b/app/code/Magento/PageBuilder/Model/Dom/NodeList.php
@@ -44,7 +44,7 @@ public function __construct(
     /**
      * @inheritDoc
      */
-    public function item($index): ?ElementInterface
+    public function item(int $index): ?ElementInterface
     {
         return $this->objectManager->create(ElementInterface::class, [ 'element' => $this->nodeList->item($index) ]);
     }
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/WYSIWYGActionGroup/AddPageLinkWidgetToTinyMCEWithAnchorAndTitleActionGroup.xml b/app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/WYSIWYGActionGroup/AddPageLinkWidgetToTinyMCEWithAnchorAndTitleActionGroup.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="AddPageLinkWidgetToTinyMCEWithAnchorAndTitleActionGroup" extends="addPageLinkWidgetToTinyMCE">
+        <arguments>
+            <argument name="anchor" defaultValue="" type="string"/>
+            <argument name="title" defaultValue="" type="string"/>
+        </arguments>
+        <comment userInput="Insert anchor and title text" stepKey="commentAddAnchorAndTitleText" after="waitForLoadingMaskToDisappear2"/>
+        <waitForElementVisible selector="{{WidgetSection.InputAnchorCustomText}}" stepKey="waitForInputAnchorCustomText" after="commentAddAnchorAndTitleText"/>
+        <fillField selector="{{WidgetSection.InputAnchorCustomText}}" userInput="{{anchor}}" stepKey="insertTextToDisplay" after="waitForInputAnchorCustomText" />
+        <waitForElementVisible selector="{{WidgetSection.InputAnchorCustomTitle}}" stepKey="waitForInputAnchorCustomTitle" after="insertTextToDisplay"/>
+        <fillField selector="{{WidgetSection.InputAnchorCustomTitle}}" userInput="{{title}}" stepKey="insertTitle" after="waitForInputAnchorCustomTitle"/>
+        <waitForElementVisible selector="{{TinyMCESection.InsertWidgetIcon}}" stepKey="waitForInsertWidget1" after="waitForInsertWidgetModalToClose"/>
+        <click selector="{{TinyMCESection.InsertWidgetIcon}}" stepKey="clickAddWidgetBtn"/>
+    </actionGroup>
+</actionGroups>
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Data/TinyMCEData.xml b/app/code/Magento/PageBuilder/Test/Mftf/Data/TinyMCEData.xml
@@ -39,6 +39,10 @@
         <data key="stageValue">{{widget type=&quot;Magento\Cms\Block\Widget\Page\Link&quot; template=&quot;widget/link/link_block.phtml&quot; page_id=</data>
         <data key="stageValueEncoded">e3t3aWRnZXQgdHlwZT0iTWFnZW50b1xDbXNcQmxvY2tcV2lkZ2V0XFBhZ2VcTGluayIgdGVtcGxhdGU9IndpZGdldC9saW5rL2xpbmtfYmxvY2sucGh0bWwiIHBhZ2VfaWQ9</data>
     </entity>
+    <entity name="TinyMCEWidgetCMSPageLinkWithAnchorAndTitle" extends="TinyMCEWidgetCMSPageLink" type="pagebuilder_text_widget_property">
+        <data key="anchorText">Piiramatult kõnesid ja SMSe Eestis ja ELi rändluses</data>
+        <data key="title">Piiramatult kõnesid ja SMSe Eestis ja ELi rändluses</data>
+    </entity>
     <entity name="PageBuilderTextArea_WidgetCMSPageLink" type="pagebuilder_text_widget_property">
         <data key="widgetType">Magento\Cms\Block\Widget\Page\Link</data>
         <data key="editPanelValue">{{widget type=&quot;Magento\\Cms\\Block\\Widget\\Page\\Link&quot; template=&quot;widget/link/link_block.phtml&quot; page_id=</data>
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideItemCommonTest/SlideItemMoveSlideItemsToRearrangeTest.xml b/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideItemCommonTest/SlideItemMoveSlideItemsToRearrangeTest.xml
@@ -101,13 +101,9 @@
         <seeElement selector="{{SlideOnBackend.messageContent('2', PageBuilderSlideItemContent_Slide2.value)}}" stepKey="seeSlide2ContentAfterSave"/>
         <!-- Change Slide Order -->
         <comment userInput="Change Slide Order" stepKey="commentSortingSlides"/>
-        <executeJS function="return document.querySelectorAll('{{SliderOnStage.slideNavigationDragHandle}}')[0].clientWidth / 4" stepKey="xCoordinateToMoveTo"/>
-        <comment userInput="xCoordinateToMoveTo: $xCoordinateToMoveTo" stepKey="commentXCoordinate"/>
-        <executeJS function="return document.querySelectorAll('{{SliderOnStage.slideNavigationDragHandle}}')[0].clientHeight / 2" stepKey="yCoordinateToMoveTo"/>
-        <comment userInput="yCoordinateToMoveTo: $yCoordinateToMoveTo" stepKey="commentYCoordinate"/>
         <click selector="{{SliderOnStage.slideNavigationDot('1', '3')}}" stepKey="clickSlideDot"/>
         <waitForPageLoad stepKey="waitForPageLoad2"/>
-        <dragAndDrop selector1="{{SliderOnStage.slideNavigationDragHandleByIndex('1', '3')}}" selector2="{{SliderOnStage.slideNavigationDot('1', '1')}}" x="$xCoordinateToMoveTo" y="$yCoordinateToMoveTo" stepKey="dragAndDropSlide"/>
+        <dragAndDrop selector1="{{SliderOnStage.slideNavigationDragHandleByIndex('1', '3')}}" selector2="{{SliderOnStage.slideNavigationDot('1', '1')}}" x="-1" stepKey="dragAndDropSlide"/>
         <waitForPageLoad stepKey="waitForDragAndDrop"/>
         <!-- Validate Stage After Sorting -->
         <comment userInput="Validate Stage After Sorting" stepKey="commentValidateStage2"/>
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest/TextInlineWidgetEditingTest.xml b/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest/TextInlineWidgetEditingTest.xml
@@ -40,9 +40,10 @@
             <argument name="contentType" value="PageBuilderTextContentType"/>
         </actionGroup>
         <clickWithLeftButton x="10" y="10" selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnTextEditorArea"/>
-        <actionGroup ref="addPageLinkWidgetToTinyMCEInline" stepKey="addPageLinkWidgetToTinyMCE">
-            <argument name="widget" value="TinyMCEWidgetCMSPageLink"/>
+        <actionGroup ref="AddPageLinkWidgetToTinyMCEWithAnchorAndTitleActionGroup" stepKey="addPageLinkWidgetToTinyMCE">
             <argument name="page" value="$$createCMSPageB.identifier$$"/>
+            <argument name="anchor" value="{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitle.anchorText}}"/>
+            <argument name="title" value="{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitle.title}}"/>
         </actionGroup>
         <waitForElementVisible selector="{{TextOnStage.text('1', TinyMCEWidgetCMSPageLink.editPanelValue)}}" stepKey="waitForWidgetStage1"/>
         <!--Verify widget edit page-->
@@ -73,6 +74,19 @@
         <actionGroup ref="doubleClickWidgetTinyMCE" stepKey="doubleClickWidget">
             <argument name="widget" value="TinyMCEWidgetCMSPageLink.editPanelValue"/>
         </actionGroup>
+        <!-- Grab a value from the link-->
+        <waitForElementVisible selector="{{WidgetSection.InputAnchorCustomText}}" stepKey="waitForInputAnchorCustomText"/>
+        <grabValueFrom selector="{{WidgetSection.InputAnchorCustomText}}" stepKey="grabAnchorText"/>
+        <waitForElementVisible selector="{{WidgetSection.InputAnchorCustomTitle}}" stepKey="waitForInputAnchorCustomTitle"/>
+        <grabValueFrom selector="{{WidgetSection.InputAnchorCustomTitle}}" stepKey="grabTitleText"/>
+        <assertEquals stepKey="assertAnchorTextCMSWidgetLink" message="pass">
+            <expectedResult type="string">{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitle.anchorText}}</expectedResult>
+            <actualResult type="string">{$grabAnchorText}</actualResult>
+        </assertEquals>
+        <assertEquals stepKey="assertTitleCMSWidgetLink" message="pass">
+            <expectedResult type="string">{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitle.title}}</expectedResult>
+            <actualResult type="string">{$grabTitleText}</actualResult>
+        </assertEquals>
         <actionGroup ref="closeWidgetPanelTinyMCE" stepKey="closeWidgetPanelTinyMCE"/>
         <!-- Validate Storefront -->
         <comment userInput="Verify Widget Content Type on storefront" stepKey="commentVerifyWidgetOnStorefront"/>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/types/tools.d.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/types/tools.d.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+interface Base64 {
+    _keyStr: string;
+    encode: (input: string) => string;
+    decode: (input: string) => string;
+    mageEncode: (input: string) => string;
+    mageDecode: (output: string) => string;
+    idEncode: (input: string) => string;
+    idDecode: (output: string) => string;
+    _utf8_encode: (input: string) => string;
+    _utf8_decode: (utftext: string) => string;
+}
+
+interface Window {
+    Base64: Base64;
+}
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/utils/editor.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/utils/editor.ts
@@ -4,6 +4,7 @@
  */
 
 import $ from "jquery";
+import "mage/adminhtml/tools";
 import $t from "mage/translate";
 import mageUtils from "mageUtils";
 import {Editor} from "tinymce";
@@ -125,7 +126,7 @@ function convertWidgetsToHtmlPreview(content: string) {
             }
 
             const image = $("<img />")
-                .prop("id", btoa(match).replace(/\+/g, ":").replace(/\//g, "_").replace(/=/g, "-"))
+                .prop("id", window.Base64.idEncode(match))
                 .prop("src", imageSrc);
 
             placeholder.append(image);
diff --git a/docs/create-custom-content-type/workflow-tips.md b/docs/create-custom-content-type/workflow-tips.md
@@ -1,4 +1,10 @@
 # Workflow tips
 
-When you are working on a page and changing the master.html template, you need to Save the page in the Admin UI and make some kind of change to the preview template on the Admin UI. Otherwise, you will not see your changes in the browser. This is due to how Page Builder updates changes: it will not update the master template until changes have been made to the page. 
+## Save page
+
+When you are working on a page and changing the master.html template, you need to Save the page in the Admin UI and make some kind of change to the preview template on the Admin UI. Otherwise, you will not see your changes in the browser. This is due to how Page Builder updates changes: it will not update the master template until changes have been made to the page.
+
+## Setup and cache
+
+If you change something in the configuration of your extension and the change is not visible, run `bin/magento cache:flush` to ensure that the configuration is updated.
 
diff --git a/docs/extend-existing-content-type/step-3-extend-forms.md b/docs/extend-existing-content-type/step-3-extend-forms.md
@@ -12,7 +12,7 @@ Your file structure for the Banner extension form and corresponding layout shoul
 
 ### Extension form
 
-When customizing an existing form, make sure you name your form with the same name as the existing content type's form. In our case, we are customizing the Banner's form, which means we must name our form: `pagebuilder-banner-form.xml`. Here's the basic XML configuration for the Banner form extension:
+When customizing an existing form, make sure you name your form with the same name as the existing content type's form. In our case, we are customizing the Banner's form, which means we must name our form: `pagebuilder_banner_form.xml`. Here's the basic XML configuration for the Banner form extension:
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
@@ -46,7 +46,7 @@ When customizing an existing form, make sure you name your form with the same na
         </dataProvider>
     </dataSource>
 
-  <!--Add Fieldsets and fields-->
+    <!--Add Fieldsets and fields-->
 
 </form>
 ```
@@ -93,7 +93,7 @@ The following table describes some key elements:
 | `settings` | Provides the markup that gives your field a label, CSS styling, validation, and other properties as needed. |
 {:style="table-layout:auto"}
 
-After adding the `max_height` field, flush your cache, drag a banner to the Admin stage, open the editor, and see your new style property field being rendered in the Banner's form, as shown here:
+After adding the `max_height` field`, run `bin/magento cache:clean`, drag a banner to the Admin stage, open the editor, and see your new style property field being rendered in the Banner's form, as shown here:
 
 ![Appearance fieldset](../images/appearance-fieldset.png){:width="934px" height="auto"}
 
diff --git a/docs/getting-started/install-pagebuilder-examples.md b/docs/getting-started/install-pagebuilder-examples.md
@@ -8,7 +8,7 @@ You can find the Page Builder examples used in this documentation on GitHub in t
 
 ## Custom content type modules
 
-The [Example directory](https://github.com/magento-devdocs/pagebuilder-examples/tree/master/Example) on the repo provides custom content-type modules for you to download and install. The Page Builder team members created these modules to serve as examples for learning. They are not fully tested or guaranteed to work perfectly. However, we will do our best to improve these examples and keep them updated with the latest releases of Page Builder. 
+The [Example directory](https://github.com/magento-devdocs/pagebuilder-examples/tree/master/Example) on the repo provides custom content-type modules for you to download and install. The Page Builder team members created these modules to serve as examples for learning. They are not fully tested or guaranteed to work perfectly. However, we will do our best to improve these examples and keep them updated with the latest releases of Page Builder.
 
 - **[PageBuilderQuote](https://github.com/magento-devdocs/pagebuilder-examples/tree/master/Example/PageBuilderQuote)** — Create by [Bruce Denham](https://github.com/bdenham). This module shows you how to create a content type for a customer testimonial page. This is the completed Quote module featured in the [Create a content type tutorial](../create-custom-content-type/overview.md).
 - **[PageBuilderGrid](https://github.com/magento-devdocs/pagebuilder-examples/tree/master/Example/PageBuilderGrid)** — Created by [Dave Macaulay](https://github.com/davemacaulay). This module shows you how to create a content type that recreates the layout of the Magento Luma-themed home page using a grid structure with grid items.
@@ -47,22 +47,22 @@ Assuming you have Page Builder already installed, you can install the example mo
 2. Navigate to your `<Magento2_installation>/app/code/` directory.
 
 3. Copy or symlink the `Example` directory from your local `pagebuilder-examples` clone into your `app/code/` directory.
-    
+
     **To Symlink**:
     ```terminal
     ln -s <Relative_route_to_cloned_Example_directory>
     ```
-    
+
     ![Examples installation directory](../images/examples-install-location.png)
-    
+
 4. Enable the modules using the `setup:upgrade` command:
 
    ```terminal
    bin/magento setup:upgrade
    ```
-   
+
 5. Navigate to a Page Builder instance to ensure the example content types appear in the Page Builder panel, as shown here:
 
    ![Content type examples shown in panel](../images/example-content-types.png)
 
- 
+

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ public function __construct(`
`44`	`44`	`/**`
`45`	`45`	`* @inheritDoc`
`46`	`46`	`*/`
`47`		`- public function item($index): ?ElementInterface`
	`47`	`+ public function item(int $index): ?ElementInterface`
`48`	`48`	`{`
`49`	`49`	`return $this->objectManager->create(ElementInterface::class, [ 'element' => $this->nodeList->item($index) ]);`
`50`	`50`	`}`