Merge remote-tracking branch 'origin/MC-3903-inline-select-all' into pagebuilder-delivery

cspruiell · cspruiell · commit 637dd1ca6b3f · 2018-09-07T10:22:12.000-05:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less
@@ -26,6 +26,10 @@
         margin: @margin;
         opacity: 1;
         transition: all 500ms ease;
+
+        span[contenteditable=true] {
+            display: block;
+        }
     }
 
     [data-element='content'] {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less
@@ -25,6 +25,10 @@
         margin-top: @margin;
         opacity: 1;
         transition: all 500ms ease;
+
+        span[contenteditable=true] {
+            display: block;
+        }
     }
 
     .wysiwyg-container {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/live-edit.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/live-edit.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html
@@ -26,7 +26,7 @@
                    attr="data.button.attributes"
                    ko-style="data.button.style"
                    css="data.button.css">
-                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
                 </button>
             </div>
         </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html
@@ -26,7 +26,7 @@
                    css="data.button.css"
                    attr="data.button.attributes"
                    ko-style="data.button.style">
-                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
                 </button>
             </div>
         </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html
@@ -26,7 +26,7 @@
                    attr="data.button.attributes"
                    ko-style="data.button.style"
                    css="data.button.css">
-                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
                 </button>
             </div>
         </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html
@@ -26,7 +26,7 @@
                    attr="data.button.attributes"
                    ko-style="data.button.style"
                    css="data.button.css">
-                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
                 </button>
             </div>
         </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html
@@ -9,6 +9,6 @@
     <render args="getOptions().template" />
     <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
         <span class="button-item-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>
-        <span attr="data.link_text.attributes" data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }, hasFocus: $parent.parent.preview.isLiveEditing() === $index()" event="{ focusout: onFocusOut.call($data) }"></span>
+        <span attr="data.link_text.attributes" data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }, hasFocus: $parent.parent.preview.isLiveEditing() === $index()" event="{ focusout: onFocusOut.call($data) }"></span>
     </a>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html
@@ -45,7 +45,7 @@
                attr="data.button.attributes"
                ko-style="data.button.style"
                css="data.button.css">
-                <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
             </a>
         </div>
     </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html
@@ -47,7 +47,7 @@
                css="data.button.css"
                attr="data.button.attributes"
                ko-style="data.button.style">
-                <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
             </a>
         </div>
     </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html
@@ -45,7 +45,7 @@
                attr="data.button.attributes"
                ko-style="data.button.style"
                css="data.button.css">
-                <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
             </a>
         </div>
     </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html
@@ -49,7 +49,7 @@
                    attr="data.button.attributes"
                    ko-style="data.button.style"
                    css="data.button.css">
-                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder }"></span>
+                    <span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
                 </a>
             </div>
         </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tabs/default/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tabs/default/preview.html
@@ -20,7 +20,7 @@
                     <a href="#no-tab" class="tab-title focus-options" attr="{ href: '#' + parent.id }">
                         <render args="getOptions().template" />
                         <span class="tab-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>
-                        <span class="tab-title tab-name" data-tab-title="true" data-bind="liveEdit: { field: 'tab_name', placeholder: $t('...') }, hasFocusNoScroll: parent.parent.preview.focusedTab() === $index()"></span>
+                        <span class="tab-title tab-name" data-tab-title="true" data-bind="liveEdit: { field: 'tab_name', placeholder: $t('...'), selectAll: true }, hasFocusNoScroll: parent.parent.preview.focusedTab() === $index()"></span>
                     </a>
                 </li>
             </with>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/binding/live-edit.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/binding/live-edit.ts
@@ -36,7 +36,7 @@ ko.bindingHandlers.liveEdit = {
      * @param {KnockoutBindingContext} bindingContext
      */
     init(element, valueAccessor, allBindings, viewModel, bindingContext) {
-        const {field, placeholder} = valueAccessor();
+        const {field, placeholder, selectAll = false} = valueAccessor();
         let focusedValue = element.innerHTML;
         /**
          * Strip HTML and return text
@@ -71,7 +71,7 @@ ko.bindingHandlers.liveEdit = {
          * Click event on element
          */
         const onClick = () => {
-            if (element.innerHTML !== "") {
+            if (selectAll && element.innerHTML !== "") {
                 document.execCommand("selectAll", false, null);
             }
         };
