Merge branch 'develop' of https://github.com/magento-commerce/magento2-page-builder into PR-2021-20-08

Author: chittima

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBlockSection/BlockOnStageSection.xml

@@ -8,7 +8,7 @@
 <sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="BlockOnStage">
-        <element name="html" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@data-bind,'html: data.main.html')])[{{arg2}}]//div[contains(@class,'placeholder-html-code')]" parameterized="true"/>
+        <element name="html" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@data-bind,'html: dataMainUnsanitizedHtml')])[{{arg2}}]//div[contains(@class,'placeholder-html-code')]" parameterized="true"/>
         <element name="allBlocks" type="text" selector="[data-content-type='block']"/>
         <element name="status" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//span[contains(@class,'placeholder') and text()='{{arg}}'])" parameterized="true"/>
         <element name="deleted" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//span[contains(@class,'placeholder') and contains(text(),'Block with ID: {{arg}} doesn')])" parameterized="true"/>

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

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template"/>
+    <render args="getOptions().template"></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -20,7 +20,7 @@
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
         <scope args="getUploader().getUiComponent()">
-            <render/>
+            <render></render>
         </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/nesting-link-dialog.js

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template"/>
+    <render args="getOptions().template"></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -20,7 +20,7 @@
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
         <scope args="getUploader().getUiComponent()">
-            <render/>
+            <render></render>
         </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/nesting-widget-dialog.js

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template"/>
+    <render args="getOptions().template"></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -20,7 +20,7 @@
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
         <scope args="getUploader().getUiComponent()">
-            <render/>
+            <render></render>
         </scope>
         <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -18,9 +18,9 @@
         <div if="data.video_overlay.attributes()['data-video-overlay-color']"
              class="video-overlay"
              attr="data.video_overlay.attributes"
-             ko-style="data.video_overlay.style" />
+             ko-style="data.video_overlay.style" ></div>
         <scope args="getUploader().getUiComponent()">
-            <render />
+            <render ></render>
         </scope>
         <div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css" event="mousedown: activateEditor">
             <div class="pagebuilder-poster-content">
@@ -35,7 +35,7 @@
                          event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
                     </div>
                     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.content.html" translate="'Edit Banner Text'"></div>
-                    <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"/>
+                    <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"></textarea>
                 </div>
                 <a if="data.main.attributes()['data-show-button'] !== 'never'"
                    type="button"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html

@@ -7,17 +7,21 @@
 
 <div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false" css="{'pagebuilder-block-overlay': displayingBlockPreview()}">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-        <div if="displayingBlockPreview" class="rendered-content" html="data.main.html" afterRender="initializeWidgets"></div>
+        <!-- ko if: displayingBlockPreview -->
+            <!-- ko with: {dataMainUnsanitizedHtml: data.main.html, initializeWidgets: initializeWidgets} -->
+                <div class="rendered-content" html="dataMainUnsanitizedHtml" afterRender="initializeWidgets"></div>
+            <!-- /ko -->
+        <!-- /ko -->
         <div ifnot="displayingBlockPreview" class="pagebuilder-block-placeholder">
-            <span class="placeholder-text" text="placeholderText"/>
+            <span class="placeholder-text" text="placeholderText"></span>
         </div>
     </div>
     <div data-role="spinner"
          class="admin__data-grid-loading-mask"
          if="loading">
         <div class="spinner">
-            <span repeat="8"/>
+            <span repeat="8"></span>
         </div>
     </div>
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html

@@ -9,7 +9,7 @@
      ko-style="data.main.style"
      css="Object.assign({focused: $parent.parentContentType.preview.focusedButton() === $index()}, data.main.css())"
      class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css"