MC-3939: Can't select or edit text ranges inside of a live edit block

- Rewrite tabs focus logic to utilise buttons new implementation
- Resolve numerous issues with focusing on buttons and tabs
- Enable ability to select text with selectAll enabled in Firefox

Author: davemacaulay

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

@@ -13,7 +13,6 @@
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css"
-       draggable="false"
        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"

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

@@ -14,13 +14,17 @@
             <with args="preview">
                 <li role="tab" class="tab-header"
                     css="{focused: parent.parent.preview.focusedTab() === $index()}"
-                    click="function (context, event) { parent.parent.preview.onTabClick($index(), event); }"
                     ko-style="parent.parent.preview.getTabHeaderStyles()"
-                    event="{ focusin: function () { parent.parent.preview.setFocusedTab($index(), true) }, focusout: function () { window.getSelection().removeAllRanges(); parent.parent.preview.setFocusedTab(null); } }">
-                    <a href="#no-tab" class="tab-title focus-options" attr="{ href: '#' + parent.id }" draggable="false">
+                    click="function (context, event) { onClick($index(), event); }"
+                    event="{ focusin: function (context, event) { onFocusIn($index(), event); }, focusout: function (context, event) { onFocusOut($index(), event); } }">
+                    <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('...'), selectAll: true }, 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>

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

@@ -38,6 +38,8 @@ ko.bindingHandlers.liveEdit = {
     init(element, valueAccessor, allBindings, viewModel, bindingContext) {
         const {field, placeholder, selectAll = false} = valueAccessor();
         let focusedValue = element.innerHTML;
+        let previouslyFocused: boolean = false;
+        let blurTimeout: number;
 
         /**
          * Strip HTML and return text
@@ -56,19 +58,32 @@ ko.bindingHandlers.liveEdit = {
          * Record the value on focus, only conduct an update when data changes
          */
         const onFocus = () => {
+            clearTimeout(blurTimeout);
             focusedValue = stripHtml(element.innerHTML);
 
-            if (selectAll && element.innerHTML !== "") {
+            if (selectAll && element.innerHTML !== "" && !previouslyFocused) {
                 _.defer(() => {
                     const selection = window.getSelection();
                     const range = document.createRange();
                     range.selectNodeContents(element);
                     selection.removeAllRanges();
                     selection.addRange(range);
+                    previouslyFocused = true;
                 });
             }
         };
 
+        /**
+         * On blur change our timeout for previously focused. We require a flag to track whether the input has been
+         * focused and selected previously due to a bug in Firefox which doesn't handle focus events correctly when
+         * contenteditable is placed within an anchor.
+         */
+        const onBlur = () => {
+            blurTimeout = setTimeout(() => {
+                previouslyFocused = false;
+            }, 100);
+        };
+
         /**
          * Mousedown event on element
          *
@@ -132,6 +147,7 @@ ko.bindingHandlers.liveEdit = {
         element.textContent = viewModel.parent.dataStore.get(field);
         element.contentEditable = true;
         element.addEventListener("focus", onFocus);
+        element.addEventListener("blur", onBlur);
         element.addEventListener("mousedown", onMouseDown);
         element.addEventListener("keydown", onKeyDown);
         element.addEventListener("keyup", onKeyUp);
@@ -146,6 +162,11 @@ ko.bindingHandlers.liveEdit = {
             element.textContent = viewModel.parent.dataStore.get(field);
             handlePlaceholderClass(element);
         }, field);
+
+        // Resolve issues of content editable being within an anchor
+        if ($(element).parent().is("a")) {
+            $(element).parent().attr("draggable", "false");
+        }
     },
 
     /**

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

@@ -41,11 +41,8 @@ export default class Preview extends BasePreview {
      * @param {JQueryEventObject} event
      */
     public onClick(index: number, event: JQueryEventObject): void {
-        const contentEditable = $(event.currentTarget).find("[contenteditable]");
-        if (!$(":focus").is(contentEditable)) {
-            $(event.currentTarget).find("[contenteditable]").focus();
-            event.stopPropagation();
-        }
+        $(event.currentTarget).find("[contenteditable]").focus();
+        event.stopPropagation();
     }
 
     /**
@@ -89,7 +86,9 @@ export default class Preview extends BasePreview {
      */
     public onFocusIn(index: number, event: Event): void {
         const parentPreview = this.parent.parent.preview as ButtonsPreview;
-        parentPreview.focusedButton(index);
+        if (parentPreview.focusedButton() !== index) {
+            parentPreview.focusedButton(index);
+        }
     }
 
     /**