Merge remote-tracking branch 'remotes/origin/MC-15238-live-edit' into cms-team-1-delivery

Author: danmooney2

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/button-item/_default.less

@@ -16,7 +16,7 @@
         z-index: auto;
 
         [contenteditable=true] {
-            display: inline-block;
+            display: block;
             min-height: 18px;
             min-width: 20px;
         }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less

@@ -36,6 +36,7 @@
 
         span[contenteditable=true] {
             display: block;
+            overflow: hidden;
         }
     }
 

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

@@ -9,6 +9,7 @@ import $ from "jquery";
 import ko from "knockout";
 import keyCodes from "Magento_Ui/js/lib/key-codes";
 import _ from "underscore";
+import {DataObject} from "../data-store";
 
 /**
  * Strip HTML and return text
@@ -54,13 +55,15 @@ ko.bindingHandlers.liveEdit = {
         let focusedValue = element.innerHTML;
         let previouslyFocused: boolean = false;
         let blurTimeout: number;
+        let lastUpdateValue: string;
 
         /**
          * Record the value on focus, only conduct an update when data changes
          */
         const onFocus = () => {
             clearTimeout(blurTimeout);
             focusedValue = stripHtml(element.innerHTML);
+            lastUpdateValue = focusedValue;
 
             if (selectAll && element.innerHTML !== "" && !previouslyFocused) {
                 _.defer(() => {
@@ -123,8 +126,10 @@ ko.bindingHandlers.liveEdit = {
          * On key up update the view model to ensure all changes are saved
          */
         const onKeyUp = () => {
-            if (focusedValue !== stripHtml(element.innerHTML)) {
-                viewModel.updateData(field, stripHtml(element.innerHTML));
+            const strippedValue = stripHtml(element.innerHTML);
+            if (focusedValue !== strippedValue) {
+                lastUpdateValue = strippedValue;
+                viewModel.updateData(field, strippedValue);
             }
         };
 
@@ -165,6 +170,7 @@ ko.bindingHandlers.liveEdit = {
             // Allow the paste action to update the content
             _.defer(() => {
                 const strippedValue = stripHtml(element.innerHTML);
+                lastUpdateValue = strippedValue;
                 element.innerHTML = strippedValue;
                 /**
                  * Calculate the position the caret should end up at, the difference in string length + the original
@@ -200,9 +206,13 @@ ko.bindingHandlers.liveEdit = {
         handlePlaceholderClass(element);
 
         // Create a subscription onto the original data to update the internal value
-        viewModel.contentType.dataStore.subscribe(() => {
-            element.textContent = viewModel.contentType.dataStore.get(field);
-            handlePlaceholderClass(element);
+        viewModel.contentType.dataStore.subscribe((data: DataObject) => {
+            // Only update the value if it differs from the last value added within live edit
+            if (lastUpdateValue !== data[field]) {
+                lastUpdateValue = data[field];
+                element.textContent = data[field];
+                handlePlaceholderClass(element);
+            }
         }, field);
 
         // Resolve issues of content editable being within an anchor

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

@@ -259,14 +259,13 @@ export default class Preview extends PreviewCollection {
             if (this.contentType.dataStore.get("is_same_width") === "true") {
                 if (buttonItems.length > 0) {
                     const currentLargestButtonWidth = this.findLargestButtonWidth(buttonItems);
-                    const parentWrapperWidth = $(this.wrapperElement).width();
+                    const parentWrapperWidth = $(this.wrapperElement).find(".buttons-container").width();
                     if (currentLargestButtonWidth === 0) {
                         return;
                     }
                     buttonResizeValue = Math.min(currentLargestButtonWidth, parentWrapperWidth);
                 }
             }
-
             buttonItems.css("min-width", buttonResizeValue);
         }
     }
@@ -292,8 +291,11 @@ export default class Preview extends PreviewCollection {
             return 0;
         }
         const widthProperties = ["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"];
+        const buttonText = buttonItem.find("[data-element='link_text']");
+        const textWidth = buttonText.css("display", "inline-block").width();
+        buttonText.css("display", "");
         return widthProperties.reduce((accumulatedWidth, widthProperty): number => {
             return accumulatedWidth + (parseInt(buttonItem.css(widthProperty), 10) || 0);
-        }, buttonItem.find("[data-element='link_text']").width());
+        }, textWidth);
     }
 }

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

@@ -25,7 +25,7 @@ import ContentTypeInterface from "../content-type.types";
 import {DataObject} from "../data-store";
 import {getDraggedContentTypeConfig} from "../drag-drop/registry";
 import {getSortableOptions} from "../drag-drop/sortable";
-import {get, set} from "../utils/object";
+import {get} from "../utils/object";
 import appearanceConfig from "./appearance-config";
 import ObservableUpdater from "./observable-updater";
 import ObservableObject from "./observable-updater.types";
@@ -147,10 +147,7 @@ export default class Preview implements PreviewInterface {
      * @param {string} value
      */
     public updateData(key: string, value: string) {
-        const data = this.contentType.dataStore.getState();
-
-        set(data, key, value);
-        this.contentType.dataStore.setState(data);
+        this.contentType.dataStore.set(key, value);
     }
 
     /**

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

@@ -70,7 +70,7 @@ export default class Preview extends PreviewCollection {
                         tabItem.contentType &&
                         tabItem.contentType.parentContentType &&
                         tabItem.contentType.parentContentType.id ===
-                        tabItem.contentType.parentContentType.parentContentType.id
+                        this.contentType.parentContentType.id
                     ) {
                         const newIndex = tabItem
                             .contentType