Merge pull request #70 from magento-l3/PR-L3-20210405

PR-L3-20210405

Author: dhorytskyi

app/code/Magento/PageBuilder/Controller/Adminhtml/ContentType/Image/Upload.php

@@ -11,7 +11,9 @@
 use Magento\Framework\Filesystem;
 
 /**
- * Class Upload
+ * Image upload controller
+ *
+ * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
  */
 class Upload extends \Magento\Backend\App\Action implements HttpPostActionInterface
 {
@@ -115,7 +117,7 @@ public function execute()
             }
 
             $result = $fileUploader->save($this->getUploadDir());
-            $baseUrl = $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
+            $baseUrl = $this->_backendUrl->getBaseUrl(['_type' => \Magento\Framework\UrlInterface::URL_TYPE_MEDIA]);
             $result['id'] = $this->cmsWysiwygImages->idEncode($result['file']);
             $result['url'] = $baseUrl . $this->getFilePath(self::UPLOAD_DIR, $result['file']);
         } catch (\Exception $e) {

app/code/Magento/PageBuilder/Model/Stage/Config.php

@@ -198,7 +198,7 @@ public function getConfig()
             'menu_sections' => $this->getMenuSections(),
             'content_types' => $this->getContentTypes(),
             'stage_config' => $this->data,
-            'media_url' => $this->frontendUrlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]),
+            'media_url' => $this->urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]),
             'preview_url' => $this->urlBuilder->getUrl('pagebuilder/stage/preview'),
             'render_url' => $this->urlBuilder->getUrl('pagebuilder/stage/render'),
             'template_save_url' => $this->urlBuilder->getUrl('pagebuilder/template/save'),

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

@@ -43,6 +43,10 @@
         <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="TinyMCEWidgetCMSPageLinkWithAnchorAndTitleWithSpecialCharacter" extends="TinyMCEWidgetCMSPageLink" type="pagebuilder_text_widget_property">
+        <data key="anchorText">Terms and "Conditions"</data>
+        <data key="title">Privacy and "Cookie" Policy</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/TextInlineWidgetEditingSpecialCharacterTest.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+    <!--
+     /**
+      * Copyright © Magento, Inc. All rights reserved.
+      * See COPYING.txt for license details.
+      */
+    -->
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+<test name="TextInlineWidgetEditingSpecialCharacterTest"  extends="TextInlineWidgetEditingTest">
+    <annotations>
+        <features value="PageBuilder"/>
+        <stories value="Text"/>
+        <title value="Edit widget inline with special characters in WYSIWYG and see on storefront"/>
+        <description value="Verify that user is able to add widget into Text Content Type and see it on storefront"/>
+        <severity value="MAJOR"/>
+        <useCaseId value="MC-41442"/>
+        <testCaseId value="MC-41793"/>
+        <group value="pagebuilder"/>
+        <group value="pagebuilder-text"/>
+    </annotations>
+    <actionGroup ref="AddPageLinkWidgetToTinyMCEWithAnchorAndTitleActionGroup" stepKey="addPageLinkWidgetToTinyMCE">
+        <argument name="page" value="$$createCMSPageB.identifier$$"/>
+        <argument name="anchor" value="{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitleWithSpecialCharacter.anchorText}}"/>
+        <argument name="title" value="{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitleWithSpecialCharacter.title}}"/>
+    </actionGroup>
+    <assertEquals stepKey="assertAnchorTextCMSWidgetLink" message="pass">
+        <expectedResult type="string">{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitleWithSpecialCharacter.anchorText}}</expectedResult>
+        <actualResult type="string">{$grabAnchorText}</actualResult>
+    </assertEquals>
+    <assertEquals stepKey="assertTitleCMSWidgetLink" message="pass">
+        <expectedResult type="string">{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitleWithSpecialCharacter.title}}</expectedResult>
+        <actualResult type="string">{$grabTitleText}</actualResult>
+    </assertEquals>
+    <seeElement selector="div.block-cms-link a[href='{{_ENV.MAGENTO_BASE_URL}}$$createCMSPageB.identifier$$']" stepKey="waitForWidgetStorefront"/>
+    <grabTextFrom selector="div.block-cms-link a" stepKey="grabAnchorTextOnStorefront"/>
+    <grabAttributeFrom selector="div.block-cms-link a" userInput="title" stepKey="grabTitleTextOnStorefront"/>
+    <assertEquals stepKey="assertAnchorTextCMSWidgetLinkOnStorefront">
+        <expectedResult type="string">{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitleWithSpecialCharacter.anchorText}}</expectedResult>
+        <actualResult type="variable">grabAnchorTextOnStorefront</actualResult>
+    </assertEquals>
+    <assertEquals stepKey="assertTitleCMSWidgetLinkOnStorefront">
+        <expectedResult type="string">{{TinyMCEWidgetCMSPageLinkWithAnchorAndTitleWithSpecialCharacter.title}}</expectedResult>
+        <actualResult type="variable">grabTitleTextOnStorefront</actualResult>
+    </assertEquals>
+</test>
+</tests>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js

@@ -13,12 +13,14 @@ import delayUntil from "../../utils/delay-until";
 import {
     createBookmark,
     createDoubleClickEvent,
+    escapeDoubleQuoteWithinWidgetDirective,
     findNodeIndex,
     getActiveEditor,
     getNodeByIndex,
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
+    replaceDoubleQuoteWithSingleQuoteWithinVariableDirective,
     unlockImageSize,
 } from "../../utils/editor";
 import WysiwygFactory from "../../wysiwyg/factory";
@@ -307,12 +309,10 @@ export default class Preview extends BasePreview {
         super.bindEvents();
 
         this.contentType.dataStore.subscribe((state: DataObject) => {
-            // Find html elements which attributes contain magento variables directives
-            const sanitizedContent = state.content.replace(/<([a-z0-9\-\_]+)([^>]+?[a-z0-9\-\_]+="[^"]*?\{\{.+?\}\}.*?".*?)>/gi, (match1: string, tag: string, attributes: string) => {
-                // Replace double quote with single quote within magento variable directive
-                const sanitizedAttributes = attributes.replace(/\{\{[^\{\}]+\}\}/gi, (match2: string) => match2.replace(/"/g, "'"));
-                return "<" + tag + sanitizedAttributes + ">";
-            });
+            const sanitizedContent = replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(
+                escapeDoubleQuoteWithinWidgetDirective(state.content),
+            );
+
             if (sanitizedContent !== state.content) {
                 state.content = sanitizedContent;
             }

app/code/Magento/PageBuilder/view/adminhtml/web/js/stage.js

@@ -19,6 +19,10 @@ import Render from "./master-format/render";
 import PageBuilderInterface from "./page-builder.types";
 import buildStage from "./stage-builder";
 import {StageUpdateAfterParamsInterface} from "./stage-events.types";
+import {
+    escapeDoubleQuoteWithinWidgetDirective,
+    unescapeDoubleQuoteWithinWidgetDirective,
+} from "./utils/editor";
 import deferred, {DeferredInterface} from "./utils/promise-deferred";
 
 export default class Stage {
@@ -53,7 +57,7 @@ export default class Stage {
             .then((renderedOutput: string) => {
                 if (this.lastRenderId === renderId) {
                     events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
-                        value: renderedOutput,
+                        value: unescapeDoubleQuoteWithinWidgetDirective(renderedOutput),
                     });
                     this.renderingLocks.forEach((lock) => {
                         lock.resolve(renderedOutput);
@@ -85,7 +89,7 @@ export default class Stage {
 
         // Wait for the stage to be built alongside the stage being rendered
         Promise.all([
-            buildStage(this, this.pageBuilder.initialValue),
+            buildStage(this, escapeDoubleQuoteWithinWidgetDirective(this.pageBuilder.initialValue)),
             this.afterRenderDeferred.promise,
         ]).then(this.ready.bind(this)).catch((error) => {
             console.error(error);

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

@@ -26,7 +26,9 @@ export function encodeContent(content: string) {
     if (isWysiwygSupported()) {
         return convertVariablesToHtmlPreview(
             convertWidgetsToHtmlPreview(
-                removeInvalidPlaceholders(content),
+                unescapeDoubleQuoteWithinWidgetDirective(
+                    removeInvalidPlaceholders(content),
+                ),
             ),
         );
     }
@@ -156,7 +158,7 @@ export function parseAttributesString(attributes: string): { [key: string]: stri
     attributes.replace(
         /(\w+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g,
         (match: string, key: string, value: string) => {
-            result[key] = value.replace(/&quote;/g, "\"");
+            result[key] = value ? value.replace(/&quote;/g, "\"") : value;
             return "";
         },
     );
@@ -406,6 +408,51 @@ function normalizeTableCellSelection(range: Range): Range {
     return range;
 }
 
+/**
+ * Convert HTML encoded double quote to double quote with backslash within widget directives
+ *
+ * @param {string} content
+ * @returns {string}
+ */
+export function escapeDoubleQuoteWithinWidgetDirective(content: string): string {
+    return content.replace(/\{\{widget.*?\}\}/ig,  (match: string) => {
+        return match.replace(/"/g, "\\\"");
+    });
+}
+
+/**
+ * Convert double quote with backslash to HTML encoded double quote within widget directives
+ *
+ * @param {string} content
+ * @returns {string}
+ */
+export function unescapeDoubleQuoteWithinWidgetDirective(content: string): string {
+    return content.replace(/\{\{widget.*?\}\}/ig,  (match: string) => {
+        return match.replace(/\\+"/g, """);
+    });
+}
+
+/**
+ * Convert double quote to single quote within magento variable directives
+ *
+ * @param {string} content
+ * @returns {string}
+ */
+export function replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(content: string): string {
+    // Find html elements which attributes contain magento variables directives
+    return content.replace(
+        /<([a-z0-9\-\_]+)([^>]+?[a-z0-9\-\_]+="[^"]*?\{\{.+?\}\}.*?".*?)>/gi,
+        (match1: string, tag: string, attributes: string) => {
+            // Replace double quote with single quote within magento variable directive
+            const sanitizedAttributes = attributes.replace(
+                /\{\{[^\{\}]+\}\}/gi,
+                (match2: string) => match2.replace(/"/g, "'"),
+            );
+            return "<" + tag + sanitizedAttributes + ">";
+        },
+    );
+}
+
 interface IdBookmark {
     id: string;
     keep?: boolean;