Merge pull request #201 from magento-l3/PR-01-10-2023

PR-L3-01102023

Author: dhorytskyi

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

@@ -12,7 +12,7 @@
          css="data.main.css"
          afterRender="afterRenderWysiwyg"
          contenteditable="true"
-         event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
+         event="mousedown: handleMouseDown, click: activateEditor, dblclick: handleDoubleClick">
     </div>
     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.main.html" ko-style="getPlaceholderStyle()" translate="'Edit Text'"></div>
 

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

@@ -239,6 +239,40 @@ export default class Preview extends BasePreview {
         });
     }
 
+    /**
+     * Handle "mousedown" event
+     *
+     * @param {Preview} preview
+     * @param {JQueryEventObject} event
+     * @returns {Boolean}
+     */
+    public handleMouseDown(preview: Preview, event: JQueryEventObject) {
+        const handleMouseUp = (mouseUpEvent: JQueryEventObject) => {
+            if (this.element
+                && !this.wysiwyg
+                && document.activeElement === this.element
+                // Check that mouseup occurred outside the element, otherwise "click" event will be triggerred in which
+                // case we don't need to do anything as the "click" event is handled in "activateEditor"
+                // Note: click is fired after a full click action occurs; that is, the mouse button is pressed
+                // and released while the pointer remains inside the same element.
+                && this.element !== mouseUpEvent.target
+                && !$.contains(this.element, mouseUpEvent.target)
+            ) {
+                this.activateEditor(this, mouseUpEvent);
+            }
+            $(document).off("mouseup", handleMouseUp);
+            return true;
+        };
+
+        event.stopPropagation();
+
+        if (this.element && !this.wysiwyg) {
+            $(document).on("mouseup",  handleMouseUp);
+        }
+
+        return true;
+    }
+
     /**
      * @param {HTMLTextAreaElement} element
      */

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

@@ -0,0 +1,100 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+    'jquery',
+    'Magento_PageBuilder/js/content-type/text/preview'
+], function ($, Preview) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/content-type/text/preview', function () {
+        var model;
+
+        beforeEach(function () {
+            model = new Preview({dataStore: {subscribe: jasmine.createSpy()}}, {});
+            model.element = $('<div contenteditable="true">This text can be edited.</div>')[0];
+            $('body').append($(model.element));
+        });
+        afterEach(function () {
+            $(model.element).remove();
+            delete model.element;
+        });
+        describe('handleMouseDown()', function () {
+            it('Should call activateEditor() if mouseup occurred outside the element', function () {
+                model.activateEditor = jasmine.createSpy();
+                $(model.element).on('mousedown', function (event) {
+                    model.element.focus();
+                    return model.handleMouseDown(model, event);
+                });
+                model.element.dispatchEvent(new MouseEvent('mousedown', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                document.dispatchEvent(new MouseEvent('mouseup', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                expect(model.activateEditor).toHaveBeenCalled();
+            });
+            it('Should not call activateEditor() if mouseup occurred inside the element', function () {
+                model.activateEditor = jasmine.createSpy();
+                $(model.element).on('mousedown', function (event) {
+                    model.element.focus();
+                    return model.handleMouseDown(model, event);
+                });
+                model.element.dispatchEvent(new MouseEvent('mousedown', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                model.element.dispatchEvent(new MouseEvent('mouseup', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                expect(model.activateEditor).not.toHaveBeenCalled();
+            });
+            it('Should not call activateEditor() if the editor is already activated', function () {
+                model.activateEditor = jasmine.createSpy();
+                model.wysiwyg = jasmine.createSpyObj(['getAdapter']);
+                $(model.element).on('mousedown', function (event) {
+                    model.element.focus();
+                    return model.handleMouseDown(model, event);
+                });
+                model.element.dispatchEvent(new MouseEvent('mousedown', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                document.dispatchEvent(new MouseEvent('mouseup', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                expect(model.activateEditor).not.toHaveBeenCalled();
+            });
+            it('Should not call activateEditor() if the element has no focus', function () {
+                model.activateEditor = jasmine.createSpy();
+                $(model.element).on('mousedown', function (event) {
+                    return model.handleMouseDown(model, event);
+                });
+                model.element.dispatchEvent(new MouseEvent('mousedown', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                document.dispatchEvent(new MouseEvent('mouseup', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                }));
+                expect(model.activateEditor).not.toHaveBeenCalled();
+            });
+        });
+    });
+});