Merge branch '511_content-snapshot-product-admin-page' of github.com:magento/magento2-page-builder into 511_content-snapshot-product-admin-page

Author: Lukasz Borowiec

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/ValidatePageBuilderPreviewActionGroup.xml

@@ -16,7 +16,7 @@
         </arguments>
         <waitForElementVisible selector="{{pageBuilderArea}}{{PageBuilderStage.editWithPageBuilderButton}}" stepKey="waitForEditWithPageBuilderButton"/>
         <see userInput="Edit with Page Builder" selector="{{pageBuilderArea}}{{PageBuilderStage.editWithPageBuilderButton}}" stepKey="seeEditWithPageBuilderButton"/>
-        <dontSeeElementInDOM selector="{{PageBuilderPanel.leftPanel}}" stepKey="dontSeePageBuilderContentTypePanel"/>
+        <dontSeeElement selector="{{PageBuilderPanel.leftPanel}}" stepKey="dontSeePageBuilderContentTypePanel"/>
         <dontSeeElementInDOM selector="{{pageBuilderArea}}{{PageBuilderStage.applyTemplateButton}}" stepKey="dontSeePageBuilderApplyTemplateButton"/>
         <dontSeeElementInDOM selector="{{pageBuilderArea}}{{PageBuilderStage.saveAsTemplateButton}}" stepKey="dontSeePageBuilderSaveAsTemplateButton"/>
         <waitForElementVisible selector="{{PageBuilderStage.stageOverlay}}" stepKey="waitForStageOverlay"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminCatalogProductPageBuilderTest/PageBuilderCatalogProductCreateProductWithFullWidthPageBuilderAttributeTest.xml

@@ -75,6 +75,7 @@
         <click selector="{{AdminProductContentSection.sectionHeader}}" stepKey="openContentSection"/>
         <actionGroup ref="openPageBuilderForAttribute" stepKey="openPageBuilderForDescription">
             <argument name="attributeCode" value="description"/>
+            <argument name="pageBuilderArea" value="{{PageBuilderProductAttribute.PageBuilderArea('description')}}"/>
         </actionGroup>
         <actionGroup ref="openPageBuilderEditPanelByIndex" stepKey="openDescriptionEditMenuOnStage">
             <argument name="contentType" value="PageBuilderRowContentType"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminCatalogProductPageBuilderTest/PageBuilderCatalogProductProductFullWidthValidateAttributeOrderTest.xml

@@ -85,6 +85,7 @@
         <comment userInput="Set background colour of row for our second custom attribute" stepKey="commentSetBackgroundColor1"/>
         <actionGroup ref="openPageBuilderForAttribute" stepKey="openPageBuilderForAttribute2">
             <argument name="attributeCode" value="$$createPageBuilderAttribute2.attribute_code$$"/>
+            <argument name="pageBuilderArea" value="{{PageBuilderProductAttribute.PageBuilderArea($$createPageBuilderAttribute2.attribute_code$$)}}"/>
         </actionGroup>
         <actionGroup ref="openPageBuilderEditPanelByIndex" stepKey="openEditMenuOnStage1">
             <argument name="contentType" value="PageBuilderRowContentType"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminCatalogProductPageBuilderTest/PageBuilderCatalogProductStorefrontPageBuilderFullWidthProductsContentsAreOrderedCorrectlyTest.xml

@@ -80,6 +80,7 @@
         <waitForPageLoad stepKey="waitForPageLoadContentSection"/>
         <actionGroup ref="openPageBuilderForAttribute" stepKey="openPageBuilderForDescription">
             <argument name="attributeCode" value="description"/>
+            <argument name="pageBuilderArea" value="{{PageBuilderProductAttribute.PageBuilderArea('description')}}"/>
         </actionGroup>
         <!-- Set background color of row -->
         <comment userInput="Set background color of row" stepKey="commentSetRowBackgroundColor"/>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -286,6 +286,8 @@
 }
 
 .stage-content-snapshot {
+    pointer-events: none;
+
     .pagebuilder-stage {
         .pagebuilder-canvas {
             padding-bottom: 0;

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/wysiwyg.js

@@ -122,13 +122,13 @@ define([
          */
         toggleFocusableElements: function () {
             var pageBuilderSelector = '#' + this.pageBuilder.id,
-                editableSelector = ' [contenteditable]',
+                editable = $(pageBuilderSelector).find('[contenteditable]:not(.mceNonEditable)'),
                 focusableSelector = ' :focusable:not(' + this.overlaySelector + ')',
                 mediaSelector = pageBuilderSelector + ' iframe,' + pageBuilderSelector + ' video',
                 tabIndexValue = this.pageBuilder.isFullScreen() ? '0' : '-1',
                 editableValue = this.pageBuilder.isFullScreen();
 
-            $(pageBuilderSelector + editableSelector).attr('contenteditable', editableValue);
+            editable.attr('contenteditable', editableValue);
             $(pageBuilderSelector + focusableSelector).attr('tabindex', tabIndexValue);
             $(mediaSelector).attr('tabindex', tabIndexValue);
         },

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -17,7 +17,7 @@
            attr="{title: isFullScreen() ? $t('Close Full Screen') : $t('Open in Full Screen')}">
         </i>
     </div>
-    <with args="panel" if="!isSnapshot()">
+    <with args="panel">
         <render/>
     </with>
     <if args="isStageReady">

app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html

@@ -5,9 +5,9 @@
  */
 -->
 
-<div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper"
-    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition-out': pageBuilder.isSnapshotTransition"
-    afterRender="afterRender">
+<div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper" visible="!pageBuilder.isSnapshot()"
+     css="visible: isVisible(), 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition-out': pageBuilder.isSnapshotTransition"
+     afterRender="afterRender">
     <div id="pagebuilder-panel" class="pagebuilder-panel">
         <div class="search-content-types">
             <label for="search-content-types-input"></label>

app/code/Magento/PageBuilder/view/adminhtml/web/template/panel.html

@@ -49,9 +49,9 @@ export default class PageBuilder implements PageBuilderInterface {
         this.preloadTemplates(config);
         this.initialValue = initialValue;
         this.isFullScreen(config.isFullScreen);
-        this.isSnapshot(config.pagebuilder_content_snapshot);
+        this.isSnapshot(!!config.pagebuilder_content_snapshot);
         this.isSnapshotTransition(false);
-        this.snapshot = config.pagebuilder_content_snapshot;
+        this.snapshot = !!config.pagebuilder_content_snapshot;
         this.config = config;
 
         this.isAllowedTemplateApply = isAllowed(resources.TEMPLATE_APPLY);
@@ -108,8 +108,6 @@ export default class PageBuilder implements PageBuilderInterface {
 
         if (!this.isFullScreen()) {
             pageBuilderWrapper.css("height", pageBuilderWrapper.outerHeight());
-            this.previousPanelHeight = panel.outerHeight();
-            panel.css("height", this.previousPanelHeight + "px");
             /**
              * Fix the stage in the exact place it is when it's part of the content and allow it to transition to full
              * screen.
@@ -129,6 +127,8 @@ export default class PageBuilder implements PageBuilderInterface {
                 this.isSnapshot(false);
                 this.stageStyles(this.previousStyles);
             } else {
+                this.previousPanelHeight = panel.outerHeight();
+                panel.css("height", this.previousPanelHeight + "px");
                 this.wrapperStyles(this.previousStyles);
             }