Merge branch 'ACP2E-1362' of https://github.com/magento-l3/magento2-page-builder into PR-2023-02-24

vkolesny · vkolesny · commit 5e89f0e8cc66 · 2023-02-24T18:10:15.000-06:00
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCommonTest/BannerTextContainingPageBuilderMarkupWontBreakStageTest.xml b/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCommonTest/BannerTextContainingPageBuilderMarkupWontBreakStageTest.xml
@@ -38,5 +38,15 @@
         <dontSeeElement selector="{{HtmlOnStage.base('1')}}" stepKey="dontSeeHtmlCode"/>
         <waitForElementVisible selector="{{BannerOnBackend.base('1')}}" stepKey="waitForBannerVisible"/>
         <seeElement selector="{{BannerOnBackend.messageContent('1', PageBuilderBannerMessageProperty.value)}}" stepKey="seeTestStringInBanner"/>
+        <actionGroup ref="exitPageBuilderFullScreen" stepKey="exitPageBuilderFullScreenDesktop"/>
+        <actionGroup ref="AdminSaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPageDesktop"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <actionGroup ref="dragContentTypeToStage" stepKey="dragRowToRootContainer">
+            <argument name="contentType" value="PageBuilderRowContentType"/>
+            <argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
+        </actionGroup>
+        <dontSeeElement selector="{{HtmlOnStage.base('1')}}" stepKey="dontSeeHtmlCodeAfterSave"/>
+        <waitForElementVisible selector="{{BannerOnBackend.base('1')}}" stepKey="waitForBannerVisibleAfterSave"/>
+        <seeElement selector="{{BannerOnBackend.messageContent('1', PageBuilderBannerMessageProperty.value)}}" stepKey="seeTestStringInBannerAfterSave"/>
     </test>
 </tests>
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideItemCommonTest/SlideItemTextContainingPageBuilderMarkupWontBreakStageTest.xml b/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideItemCommonTest/SlideItemTextContainingPageBuilderMarkupWontBreakStageTest.xml
@@ -40,5 +40,15 @@
         <dontSeeElement selector="{{HtmlOnStage.base('1')}}" stepKey="dontSeeHtmlCode"/>
         <waitForElementVisible selector="{{SlideOnBackend.base('1')}}" stepKey="waitForSlideItemVisible"/>
         <seeElement selector="{{SlideOnBackend.messageContent('1', PageBuilderSlideItemButtonText_Common.value)}}" stepKey="seeTestStringInSlideItem"/>
+        <actionGroup ref="exitPageBuilderFullScreen" stepKey="exitPageBuilderFullScreenDesktop"/>
+        <actionGroup ref="AdminSaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPageDesktop"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <actionGroup ref="dragContentTypeToStage" stepKey="dragRowToRootContainer">
+            <argument name="contentType" value="PageBuilderRowContentType"/>
+            <argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
+        </actionGroup>
+        <dontSeeElement selector="{{HtmlOnStage.base('1')}}" stepKey="dontSeeHtmlCodeAfterSave"/>
+        <waitForElementVisible selector="{{SlideOnBackend.base('1')}}" stepKey="waitForSlideItemVisibleAfterSave"/>
+        <seeElement selector="{{SlideOnBackend.messageContent('1', PageBuilderSlideItemButtonText_Common.value)}}" stepKey="seeTestStringInSlideItemAfterSave"/>
     </test>
 </tests>
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest/TextContainingPageBuilderMarkupWontBreakStageTest.xml b/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest/TextContainingPageBuilderMarkupWontBreakStageTest.xml
@@ -40,5 +40,16 @@
         <waitForElementVisible selector="{{TextOnStage.base('1')}}" stepKey="waitForTextVisible"/>
         <seeElement selector="{{TextOnStage.base('1')}}" stepKey="seeText"/>
         <seeElement selector="{{TextOnStage.text('1', PageBuilderTextProperty.value)}}" stepKey="seeTestStringInText"/>
+        <actionGroup ref="exitPageBuilderFullScreen" stepKey="exitPageBuilderFullScreenDesktop"/>
+        <actionGroup ref="AdminSaveAndContinueEditCmsPageActionGroup" stepKey="saveAndContinueEditCmsPageDesktop"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <actionGroup ref="dragContentTypeToStage" stepKey="dragRowToRootContainer">
+            <argument name="contentType" value="PageBuilderRowContentType"/>
+            <argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
+        </actionGroup>
+        <dontSeeElement selector="{{HtmlOnStage.base('1')}}" stepKey="dontSeeHtmlCodeAfterSave"/>
+        <waitForElementVisible selector="{{TextOnStage.base('1')}}" stepKey="waitForTextVisibleAfterSave"/>
+        <seeElement selector="{{TextOnStage.base('1')}}" stepKey="seeTextAfterSave"/>
+        <seeElement selector="{{TextOnStage.text('1', PageBuilderTextProperty.value)}}" stepKey="seeTestStringInTextAfterSave"/>
     </test>
 </tests>
diff --git a/app/code/Magento/PageBuilder/etc/adminhtml/di.xml b/app/code/Magento/PageBuilder/etc/adminhtml/di.xml
@@ -556,6 +556,10 @@
                     <item name="category" xsi:type="string">Category</item>
                     <item name="block" xsi:type="string">Block</item>
                 </item>
+                <item name="reserved_html_attributes" xsi:type="array">
+                    <item name="data-content-type" xsi:type="string">data-content-type</item>
+                    <item name="contenteditable" xsi:type="string">contenteditable</item>
+                </item>
             </argument>
             <argument name="rootContainerConfig" xsi:type="array">
                 <item name="label" xsi:type="string">Root Container</item>
diff --git a/app/code/Magento/PageBuilder/etc/di.xml b/app/code/Magento/PageBuilder/etc/di.xml
@@ -414,6 +414,7 @@
                 <item name="data-video-overlay-color" xsi:type="string">data-video-overlay-color</item>
                 <item name="data-video-play-only-visible" xsi:type="string">data-video-play-only-visible</item>
                 <item name="data-video-src" xsi:type="string">data-video-src</item>
+                <item name="data-placeholder" xsi:type="string">data-placeholder</item>
                 <item name="href" xsi:type="string">href</item>
                 <item name="id" xsi:type="string">id</item>
                 <item name="role" xsi:type="string">role</item>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js
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/content-type/banner/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts
@@ -24,6 +24,7 @@ import {
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
+    removeReservedHtmlAttributes,
     unlockImageSize,
 } from "../../utils/editor";
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
@@ -493,6 +494,14 @@ export default class Preview extends BasePreview {
      * @inheritDoc
      */
     protected bindEvents() {
+        this.contentType.dataStore.subscribe((state: DataObject) => {
+            const sanitizedContent = removeReservedHtmlAttributes(state.message);
+
+            if (sanitizedContent !== state.message) {
+                state.message = sanitizedContent;
+            }
+        }, "message");
+
         super.bindEvents();
         events.on("banner:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
             if (args.id === this.contentType.id) {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts
@@ -25,6 +25,7 @@ import {
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
+    removeReservedHtmlAttributes,
     unlockImageSize,
 } from "../../utils/editor";
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
@@ -488,6 +489,14 @@ export default class Preview extends BasePreview {
      * @inheritDoc
      */
     protected bindEvents() {
+        this.contentType.dataStore.subscribe((state: DataObject) => {
+            const sanitizedContent = removeReservedHtmlAttributes(state.content);
+
+            if (sanitizedContent !== state.content) {
+                state.content = sanitizedContent;
+            }
+        }, "content");
+
         super.bindEvents();
 
         events.on("slide:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/text/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/text/preview.ts
@@ -20,6 +20,7 @@ import {
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
+    removeReservedHtmlAttributes,
     replaceDoubleQuoteWithSingleQuoteWithinVariableDirective,
     unlockImageSize,
 } from "../../utils/editor";
@@ -340,17 +341,19 @@ export default class Preview extends BasePreview {
      * Bind events
      */
     protected bindEvents() {
-        super.bindEvents();
-
         this.contentType.dataStore.subscribe((state: DataObject) => {
-            const sanitizedContent = replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(
-                escapeDoubleQuoteWithinWidgetDirective(state.content),
-            );
+            const sanitizedContent = removeReservedHtmlAttributes(
+                    replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(
+                        escapeDoubleQuoteWithinWidgetDirective(state.content),
+                    ),
+                );
 
             if (sanitizedContent !== state.content) {
                 state.content = sanitizedContent;
             }
-        });
+        }, "content");
+
+        super.bindEvents();
 
         // After drop of new content type open TinyMCE and focus
         events.on("text:dropAfter", (args: ContentTypeMountEventParamsInterface) => {
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
@@ -469,6 +469,40 @@ export function replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(content
     );
 }
 
+/**
+ * Remove Page Builder reserved html tag attributes from the content
+ *
+ * @param {string} content
+ * @returns {string}
+ */
+export function removeReservedHtmlAttributes(content: string): string
+{
+    const attributes: {[key: string]: string} = Config.getConfig("stage_config").reserved_html_attributes || {};
+    for (const attribute of Object.keys(attributes)) {
+        content = removeHtmlTagAttribute(content, attribute);
+    }
+    return content;
+}
+
+/**
+ * Remove attribute from html tags
+ *
+ * @param {string} content
+ * @param {string} name
+ * @returns {string}
+ */
+function removeHtmlTagAttribute(content: string, name: string): string
+{
+    if (typeof content === "string" && content.indexOf(`${name}=`) !== -1) {
+        const html = new DOMParser().parseFromString(content, "text/html");
+        html.querySelectorAll(`[${name}]`).forEach((child: Element) => {
+            child.removeAttribute(name);
+        });
+        content = html.body.innerHTML;
+    }
+    return content;
+}
+
 interface IdBookmark {
     id: string;
     keep?: boolean;
diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/utils/editor.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/utils/editor.test.js
@@ -6,8 +6,9 @@
 /* eslint-disable max-nested-callbacks */
 define([
     'Magento_PageBuilder/js/utils/editor',
-    'jquery'
-], function (utils, $) {
+    'jquery',
+    'Magento_PageBuilder/js/config'
+], function (utils, $, Config) {
     'use strict';
 
     describe('Magento_PageBuilder/js/utils/editor.js', function () {
@@ -41,5 +42,22 @@ define([
                 expect(image.style.height).toEqual('');
             });
         });
+
+        describe('removeReservedHtmlAttributes', function () {
+            it('Should remove reserve html attributes from a content', function () {
+                var content = '<div id="x" data-t1="1" data-t2="2"><span id="y" data-t2="2" data-t3="3"></span></div>';
+
+                Config.setConfig({
+                    stage_config: {
+                        reserved_html_attributes: {
+                            'data-t2': 'data-t2',
+                            'data-t3': 'data-t3'
+                        }
+                    }
+                });
+                content = utils.removeReservedHtmlAttributes(content);
+                expect(content).toEqual('<div id="x" data-t1="1"><span id="y"></span></div>');
+            });
+        });
     });
 });
