Merge remote-tracking branch 'origin/MC-877-couldnt-save-button-text-without-focusing-out-of-live-edit' into cms-team-2-button-bugs

Author: tjwiebell

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderButtonItemTests.xml

@@ -1191,4 +1191,52 @@
         <seeElementInDOM selector="{{ButtonItemOnStage.moveHandleDisabled('1')}}" stepKey="seeMoveHandleDisabled2"/>
         <dontSeeElementInDOM selector="{{ButtonItemOnStage.moveHandle('1')}}" stepKey="dontSeeMoveHandleEnabled2"/>
     </test>
+    <test name="ButtonItemCanSaveButtonTextWithoutFocusingOutsideOfLiveEdit">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Buttons"/>
+            <title value="Button Item - Can Save Button Text Without Focusing Outside of Live Edit"/>
+            <description value="A user should be able to edit a button item inline on the stage and save the edit without first focusing outside of the live edit area."/>
+            <severity value="AVERAGE"/>
+            <useCaseId value="MC-877"/>
+            <testCaseId value="MC-3672"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-buttons"/>
+            <group value="pagebuilder-buttonItem"/>
+        </annotations>
+        <before>
+            <actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
+            <actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
+            <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        </before>
+        <after>
+            <actionGroup ref="logout" stepKey="logout"/>
+        </after>
+        <actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
+            <argument name="contentType" value="PageBuilderButtonsContentType"/>
+        </actionGroup>
+        <!-- Add Button Group -->
+        <comment userInput="Add Button Group" stepKey="commentAddButtonGroup"/>
+        <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
+            <argument name="group" value="PageBuilderButtonsContentType"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage">
+            <argument name="contentType" value="PageBuilderButtonsContentType"/>
+        </actionGroup>
+        <!-- Enter Text On Stage -->
+        <comment userInput="Enter Text On Stage" stepKey="commentEnterText"/>
+        <waitForElementVisible selector="{{ButtonItemOnStage.editableButtonItemElement('1')}}" stepKey="waitForButtonEditable"/>
+        <click selector="{{ButtonItemOnStage.editableButtonItemElement('1')}}" stepKey="clickButtonText"/>
+        <pressKey selector="{{ButtonItemOnStage.editableButtonItemElement('1')}}" userInput="{{PageBuilderButtonItemText_Common.value}}" stepKey="enterButtonText"/>
+        <!-- Click Save -->
+        <comment userInput="Click Save" stepKey="commentSave"/>
+        <moveMouseOver selector="{{CmsNewPagePageActionsSection.saveAndContinueEdit}}" stepKey="moveMouseOverSave"/>
+        <click selector="{{CmsNewPagePageActionsSection.saveAndContinueEdit}}" stepKey="clickSaveAndContinueEditCmsPage"/>
+        <waitForPageLoad stepKey="waitForCmsPageLoad"/>
+        <waitForElementVisible selector="{{CmsNewPagePageActionsSection.cmsPageTitle}}" stepKey="waitForCmsPageTitle"/>
+        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        <!-- Validate Stage After Page Save -->
+        <comment userInput="Validate Stage After Page Save" stepKey="commentValidateStage2"/>
+        <seeElement selector="{{ButtonItemOnStage.buttonItemText('1', PageBuilderButtonItemText_Common.value)}}" stepKey="seeButtonTextStage"/>
+    </test>
 </tests>

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/live-edit.js

@@ -8,6 +8,7 @@
 import $ from "jquery";
 import ko from "knockout";
 import keyCodes from "Magento_Ui/js/lib/key-codes";
+import _ from "underscore";
 
 /**
  * Add or remove the placeholder-text class from the element based on its content
@@ -37,7 +38,6 @@ ko.bindingHandlers.liveEdit = {
     init(element, valueAccessor, allBindings, viewModel, bindingContext) {
         const {field, placeholder} = valueAccessor();
         let focusedValue = element.innerHTML;
-
         /**
          * Strip HTML and return text
          *
@@ -81,6 +81,7 @@ ko.bindingHandlers.liveEdit = {
          *
          * Prevent styling such as bold, italic, and underline using keyboard commands
          * Prevent multi-line entries
+         * Debounce the saving of the state to 1 second to ensure that on save without first unfocus will succeed
          *
          * @param {any} event
          */
@@ -100,6 +101,32 @@ ko.bindingHandlers.liveEdit = {
             if (key === "pageLeftKey" || key === "pageRightKey") {
                 event.stopPropagation();
             }
+
+            _.debounce(() => {
+                const selection = window.getSelection();
+                const range = document.createRange();
+                const getCharPosition = (editableDiv: HTMLElement): number => {
+                    let charPosition = 0;
+
+                    if (window.getSelection) {
+                        if (selection.rangeCount) {
+                            if (selection.getRangeAt(0).commonAncestorContainer.parentNode === editableDiv) {
+                                charPosition = selection.getRangeAt(0).endOffset;
+                            }
+                        }
+                    }
+                    return charPosition;
+                };
+                const pos: number = getCharPosition(element);
+
+                if (focusedValue !== stripHtml(element.innerHTML)) {
+                    viewModel.updateData(field, stripHtml(element.innerHTML));
+                }
+                range.setStart(element.childNodes[0], pos);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }, 300).call(this);
         };
 
         /**