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

- Somewhat improve text selection within Firefox

Author: davemacaulay

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

@@ -45,6 +45,7 @@ div[data-role='tabs'],
                 white-space: normal;
 
                 span.tab-title {
+                    cursor: text !important;
                     display: block;
                 }
 

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

@@ -13,6 +13,7 @@
     <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

@@ -17,7 +17,7 @@
                     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 }">
+                    <a href="#no-tab" class="tab-title focus-options" attr="{ href: '#' + parent.id }" draggable="false">
                         <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>

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

@@ -83,7 +83,7 @@ ko.bindingHandlers.liveEdit = {
          *
          * Prevent styling such as bold, italic, and underline using keyboard commands, and prevent multi-line entries
          *
-         * @param {any} event
+         * @param {JQueryEventObject} event
          */
         const onKeyDown = (event: JQueryEventObject) => {
             const key = keyCodes[event.keyCode];
@@ -105,8 +105,6 @@ ko.bindingHandlers.liveEdit = {
 
         /**
          * On key up update the view model to ensure all changes are saved
-         *
-         * @param {Event} event
          */
         const onKeyUp = () => {
             if (focusedValue !== stripHtml(element.innerHTML)) {

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html

@@ -41,8 +41,11 @@ export default class Preview extends BasePreview {
      * @param {JQueryEventObject} event
      */
     public onClick(index: number, event: JQueryEventObject): void {
-        $(event.currentTarget).find("[contenteditable]").focus();
-        event.stopPropagation();
+        const contentEditable = $(event.currentTarget).find("[contenteditable]");
+        if (!$(":focus").is(contentEditable)) {
+            $(event.currentTarget).find("[contenteditable]").focus();
+            event.stopPropagation();
+        }
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tabs/default/preview.html

@@ -190,19 +190,6 @@ export default class Preview extends PreviewCollection {
             if (this.element.getElementsByClassName("tab-name")[index]) {
                 (this.element.getElementsByClassName("tab-name")[index] as HTMLElement).focus();
             }
-            _.defer(() => {
-                const $focusedElement = $(":focus");
-
-                if ($focusedElement.hasClass("tab-name") && $focusedElement.prop("contenteditable")) {
-                    // Selection alternative to execCommand to workaround issues with tinymce
-                    const selection = window.getSelection();
-                    const range = document.createRange();
-
-                    range.selectNodeContents($focusedElement.get(0));
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                }
-            });
         }
     }