Merge remote-tracking branch 'origin/MC-4232-button-text-draggable-triggers-the-image-drop-zone' into cms-team-1-delivery

 # Conflicts:
 #	app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/live-edit.js
 #	app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tabs/default/preview.html
 #	app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/binding/live-edit.ts

Author: cspruiell

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

@@ -57,7 +57,7 @@ define([
 
             this._super();
 
-            events.on('image:' + this.id +':assignAfter', this.onAssignedFile.bind(this));
+            events.on('image:' + this.id + ':assignAfter', this.onAssignedFile.bind(this));
 
             // bind dropzone highlighting using event delegation only once
             if (!initializedOnce) {
@@ -95,19 +95,28 @@ define([
          * @param {jQuery.event} e
          */
         highlightDropzone: function (e) {
-            var $dropzone = $(e.target).closest(this.dropZone),
+            var draggedItem,
+                $dropzone = $(e.target).closest(this.dropZone),
                 $otherDropzones = $(this.dropZone).not($dropzone),
                 isInsideDropzone = !!$dropzone.length;
 
-            if (isInsideDropzone) {
-                $dropzone
-                    .removeClass(this.classes.draggingOutside)
-                    .addClass([this.classes.dragging, this.classes.draggingInside].join(' '));
+            if (e.originalEvent.dataTransfer.items.length === 0) {
+                return false;
             }
 
-            $otherDropzones
-                .removeClass(this.classes.draggingInside)
-                .addClass([this.classes.dragging, this.classes.draggingOutside].join(' '));
+            draggedItem = e.originalEvent.dataTransfer.items[0];
+
+            if (draggedItem.kind === 'file' && /image\//.test(draggedItem.type)) {
+                if (isInsideDropzone) {
+                    $dropzone
+                        .removeClass(this.classes.draggingOutside)
+                        .addClass([this.classes.dragging, this.classes.draggingInside].join(' '));
+                }
+
+                $otherDropzones
+                    .removeClass(this.classes.draggingInside)
+                    .addClass([this.classes.dragging, this.classes.draggingOutside].join(' '));
+            }
         },
 
         /**
@@ -212,7 +221,7 @@ define([
         /**
          * {@inheritDoc}
          */
-        hasData: function() {
+        hasData: function () {
             // Some of the components automatically add an empty object if the value is unset.
             return this._super() && !$.isEmptyObject(this.value()[0]);
         }

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/image-uploader.js

@@ -13,7 +13,8 @@
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css"
-       click="function (context, event) { onClick($index(), event); }">
+       click="function (context, event) { onClick($index(), event); }"
+       event="{ dragstart: function(context, event) { event.preventDefault(); }}">
         <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 }, hasFocusNoScroll: $parent.parent.preview.focusedButton() === $index()"

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

@@ -19,7 +19,7 @@
                     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 }">
+                       attr="{ href: '#' + parent.id }" event="{ dragstart: function(context, event) { event.preventDefault(); }}">
                         <render args="getOptions().template" />
                         <span class="tab-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>
                         <span class="tab-title tab-name"

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

@@ -137,6 +137,15 @@ ko.bindingHandlers.liveEdit = {
             event.preventDefault();
         };
 
+        /**
+         * Prevent content from being dragged
+         *
+         * @param {DragEvent} event
+         */
+        const onDragStart = (event: DragEvent) => {
+            event.preventDefault();
+        };
+
         /**
          * Input event on element
          */
@@ -185,6 +194,7 @@ ko.bindingHandlers.liveEdit = {
         element.addEventListener("input", onInput);
         element.addEventListener("drop", onDrop);
         element.addEventListener("paste", onPaste);
+        element.addEventListener("dragstart", onDragStart);
 
         $(element).parent().css("cursor", "text");
         handlePlaceholderClass(element);