Merge pull request #505 from magento-tsg-csl3/MC-34590

MC-34590: Page builder editor breaks Cms pages with non Latin1 charac…

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/WYSIWYGActionGroup.xml

@@ -160,6 +160,19 @@
             <actualResult type="variable">getText</actualResult>
         </assertContains>
     </actionGroup>
+    <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>
     <actionGroup name="validateTextInTinyMCE">
         <arguments>
             <argument name="property" defaultValue=""/>

app/code/Magento/PageBuilder/Test/Mftf/Data/TextData.xml

@@ -65,6 +65,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" type="pagebuilder_text_widget_property" extends="TinyMCEWidgetCMSPageLink">
+        <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>

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

@@ -745,9 +745,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-->
@@ -778,6 +779,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"/>

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

@@ -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;
+}

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/types/tools.d.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);