Merge pull request #210 from magento-l3/PR-2023-02-24

Pr 2023 02 24 - PB CE

Author: dhorytskyi

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>

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>

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>

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>

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>

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

@@ -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) {

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

@@ -21,6 +21,7 @@ import {DataObject} from "../../data-store";
 import {moveContentType} from "../../drag-drop/move-content-type";
 import {getDraggedContentTypeConfig} from "../../drag-drop/registry";
 import {hiddenClass} from "../../drag-drop/sortable";
+import checkStageFullScreen from "../../utils/check-stage-full-screen";
 import {createStyleSheet} from "../../utils/create-stylesheet";
 import {default as ColumnGroupPreview} from "../column-group/preview";
 import {BindResizeHandleEventParamsInterface, InitElementEventParamsInterface} from "../column/column-events.types";
@@ -134,7 +135,7 @@ export default class Preview extends PreviewCollection {
         });
 
         events.on(
-            `stage:${this.contentType.stageId}:fullScreenModeChangeAfter`,
+            `stage:${this.contentType.stageId}:readyAfter`,
             this.moveContentsToNewColumnGroup.bind(this),
         );
 
@@ -624,7 +625,7 @@ export default class Preview extends PreviewCollection {
     private hasColumnLine(contentType: ContentTypeInterface | ContentTypeCollectionInterface): boolean {
         const children = this.contentType.getChildren()();
         let hasColumnLine = false;
-        if (children.length === 0) {
+        if (children.length === 0 && checkStageFullScreen(contentType.stageId)) {
             // new column group, so it has a column line
             hasColumnLine = true;
         }

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

@@ -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) => {

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

@@ -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) => {

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

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

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+    'ko',
+    'jquery',
+    'Magento_PageBuilder/js/content-type/column-group/preview',
+    'Magento_PageBuilder/js/config',
+    'Magento_PageBuilder/js/events'
+], function (ko,$, Preview, Config, Events) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/content-type/column-group/preview', function () {
+        var model;
+
+        beforeEach(function () {
+            Config.config = {content_types: {}};
+            model = new Preview(
+                {
+                    dataStore: {subscribe: jasmine.createSpy()},
+                    getChildren: function () {
+                        return ko.observableArray([]);
+                    },
+                    children: {subscribe: jasmine.createSpy()},
+                    stageId: 'STAGEID'
+                },
+                {config: {content_types: {}}});
+        });
+
+        describe('Stage readyAfter event', function () {
+            it('Should call methods to upgrade to column-line if needed', function () {
+                spyOn(model, 'getCurrentIndexInParent');
+                spyOn(model, 'hasColumnLine');
+                Events.trigger('stage:' + model.contentType.stageId + ':readyAfter');
+                expect(model.getCurrentIndexInParent).toHaveBeenCalled();
+                expect(model.hasColumnLine).toHaveBeenCalled();
+            });
+        });
+    });
+});