MC-3775: Button editable state is not consistent with the options panel appearing

- Align button focusing and interaction with slider and tabs content types

Author: davemacaulay

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

@@ -10,22 +10,21 @@
 .pagebuilder-content-type {
     .pagebuilder-button-item {
         font-size: 0;
+        margin: 0 10px 10px 0;
         max-width: 100%;
         width: auto;
         z-index: auto;
-        .pagebuilder-options {
-            bottom: 0;
-            left: calc(50% - 5px);
-            transform: translate(-50%, -50%);
-            li.pagebuilder-options-link {
-                margin: 0;
-            }
-        }
+
         [contenteditable=true] {
             display: inline-block;
             min-height: 18px;
             min-width: 20px;
         }
+
+        a {
+            margin: 0;
+        }
+
         a[data-element='link'] {
             max-width: 100%;
             min-width: 0;
@@ -37,42 +36,60 @@
             }
         }
 
-        &.pagebuilder-content-type-active {
-            .pagebuilder-button-primary {
-                .button-item-drag-handle {
-                    color: rgba(255, 255, 255, .8);
-                }
+        .button-item-drag-handle {
+            height: 100%;
+            left: 1px;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            transition: all .3s;
+            visibility: hidden;
+            width: 14px;
+
+            &.disabled:before {
+                color: @color-light-gray;
+                cursor: not-allowed;
             }
 
-            .button-item-drag-handle {
+            &.disabled:active:before {
+                cursor: not-allowed;
+            }
+
+            &:before {
+                .abs-icon;
                 color: @color-dark-gray0;
+                content: @icon-gripper__content;
                 cursor: move; /* fallback if grab cursor is unsupported */
                 cursor: grab;
                 cursor: -moz-grab;
                 cursor: -webkit-grab;
-                left: 0;
-                margin-top: -(@pagebuilder-button__font-size/2);
+                display: block;
+                font-size: 16px;
                 position: absolute;
                 top: 50%;
+                transform: translateY(-50%);
+            }
+
+            &:active:before {
+                cursor: grabbing;
+                cursor: -moz-grabbing;
+                cursor: -webkit-grabbing;
+            }
+        }
 
-                &:active {
-                    cursor: grabbing;
-                    cursor: -moz-grabbing;
-                    cursor: -webkit-grabbing;
-                }
+        .pagebuilder-button-primary .button-item-drag-handle:before {
+            color: @color-white;
+            opacity: .7;
+        }
 
-                &:before {
-                    .abs-icon;
-                    content: @icon-gripper__content;
-                    display: inline-block;
-                    font-size: @pagebuilder-button__font-size;
-                    position: absolute;
-                }
+        &.focused {
+            .button-item-drag-handle {
+                opacity: 1;
+                visibility: visible;
+            }
 
-                &.disabled {
-                    color: rgba(221, 221, 221, .4);
-                    cursor: not-allowed;
-                }
+            .pagebuilder-options {
+                .pagebuilder-options-visible;
             }
         }
     }

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

@@ -5,10 +5,19 @@
  */
 -->
 
-<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options" event="{ click: onButtonClick, focusout: onBlur }">
+<div attr="data.main.attributes"
+     ko-style="data.main.style"
+     css="Object.assign({focused: $parent.parent.preview.focusedButton() === $index()}, data.main.css)"
+     class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options">
     <render args="getOptions().template" />
-    <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
+    <a attr="data.link.attributes"
+       ko-style="data.link.style"
+       css="data.link.css"
+       click="function (context, event) { onClick($index(), event); }">
         <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, selectAll: true }, hasFocus: $parent.parent.preview.isLiveEditing() === $index()" event="{ focusout: onFocusOut.call($data) }"></span>
+        <span attr="Object.assign({tabindex: $index()}, data.link_text.attributes)"
+              data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }, hasFocusNoScroll: $parent.parent.preview.focusedButton() === $index()"
+              event="{ focusin: function () { $parent.parent.preview.focusedButton($index()) }, focusout: function () { window.getSelection().removeAllRanges(); $parent.parent.preview.focusedButton(null); } }">>
+        </span>
     </a>
 </div>

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

@@ -56,6 +56,14 @@ ko.bindingHandlers.liveEdit = {
          */
         const onFocus = () => {
             focusedValue = stripHtml(element.innerHTML);
+
+            if (selectAll && element.innerHTML !== "") {
+                const selection = window.getSelection();
+                const range = document.createRange();
+                range.selectNodeContents(element);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
         };
 
         /**
@@ -67,15 +75,6 @@ ko.bindingHandlers.liveEdit = {
             }
         };
 
-        /**
-         * Click event on element
-         */
-        const onClick = () => {
-            if (selectAll && element.innerHTML !== "") {
-                document.execCommand("selectAll", false, null);
-            }
-        };
-
         /**
          * Mousedown event on element
          *
@@ -161,7 +160,6 @@ ko.bindingHandlers.liveEdit = {
         element.contentEditable = true;
         element.addEventListener("focus", onFocus);
         element.addEventListener("blur", onBlur);
-        element.addEventListener("click", onClick);
         element.addEventListener("mousedown", onMouseDown);
         element.addEventListener("keydown", onKeyDown);
         element.addEventListener("input", onInput);