MC-3860: Cannot Use On Hover Upload Image Buttons

- Fixed Cannot Select Text Or Click In Textarea To Move Cursor

Author: omiroshnichenko

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

@@ -35,7 +35,7 @@
             <div ifnot="isWysiwygSupported()">
                 <textarea class="inline-wysiwyg-textarea"
                           afterRender="initTextarea"
-                          event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur}"
+                          event="keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent"
                           data-bind="attr: { placeholder: $t('Edit Slide Text') }" />
             </div>
             <a if="data.main.attributes()['data-show-button'] !== 'never'"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html

@@ -37,7 +37,7 @@
             <div ifnot="isWysiwygSupported()">
                 <textarea class="inline-wysiwyg-textarea"
                           afterRender="initTextarea"
-                          event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur}"
+                          event="keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent"
                           data-bind="attr: { placeholder: $t('Edit Slide Text') }" />
             </div>
             <a if="data.main.attributes()['data-show-button'] !== 'never'"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html

@@ -35,7 +35,7 @@
             <div ifnot="isWysiwygSupported()">
                 <textarea class="inline-wysiwyg-textarea"
                           afterRender="initTextarea"
-                          event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur}"
+                          event="keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent"
                           data-bind="attr: { placeholder: $t('Edit Slide Text') }" />
             </div>
             <a if="data.main.attributes()['data-show-button'] !== 'never'"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html

@@ -39,7 +39,7 @@
                 <div ifnot="isWysiwygSupported()">
                     <textarea class="inline-wysiwyg-textarea"
                               afterRender="initTextarea"
-                              event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur}"
+                              event="keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent"
                               data-bind="attr: { placeholder: $t('Edit Slide Text') }" />
                 </div>
                 <a if="data.main.attributes()['data-show-button'] !== 'never'"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html

@@ -200,15 +200,35 @@ export default class Preview extends BasePreview {
 
     /**
      * Makes WYSIWYG active
+     *
+     * @param {Preview} preview
+     * @param {JQueryEventObject} event
+     * @returns {Boolean}
      */
-    public activateEditor() {
-        if (this.element) {
-            this.element.focus();
-        }
+    public activateEditor(preview: Preview, event: JQueryEventObject) {
+        const element = this.element || this.textarea;
 
-        if (this.textarea) {
-            this.textarea.focus();
+        if (event.currentTarget !== event.target &&
+            event.target !== element &&
+            !element.contains(event.target)
+        ) {
+            return false;
         }
+
+        element.focus();
+    }
+
+    /**
+     * Stop event to prevent execution of action when editing textarea.
+     *
+     * @param {Preview} preview
+     * @param {JQueryEventObject} event
+     * @returns {Boolean}
+     */
+    public stopEvent(preview: Preview, event: JQueryEventObject) {
+        event.stopPropagation();
+
+        return true;
     }
 
     /**