Merge branch 'ACP2E-2903' of https://github.com/adobe-commerce-tier-4/magento2-page-builder into T4-PR-06-14-2024

Author: chittima

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

@@ -5,6 +5,7 @@
 
 import $ from "jquery";
 import events from "Magento_PageBuilder/js/events";
+import {Editor} from "tinymce";
 import _ from "underscore";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.types";
@@ -158,7 +159,16 @@ export default class Preview extends BasePreview {
 
         if (focus) {
             wysiwygConfig.adapter.settings.auto_focus = this.element.id;
-            wysiwygConfig.adapter.settings.init_instance_callback = () => {
+            wysiwygConfig.adapter.settings.init_instance_callback = (editor: Editor) => {
+                editor.on("mousedown", (event) => {
+                    if (event.target.nodeName === "IMG"
+                        && event.button !== 2
+                        && editor.dom.getRoot() !== document.activeElement
+                    ) {
+                        editor.selection.select(event.target);
+                        editor.nodeChanged();
+                    }
+                });
                 _.defer(() => {
                     this.element.blur();
                     this.element.focus();

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js

@@ -279,7 +279,8 @@ export function createBookmark(event: JQueryEventObject): Bookmark {
  * @param bookmark
  */
 export function moveToBookmark(bookmark: Bookmark) {
-    ((window as any).tinymce.activeEditor as Editor).selection.moveToBookmark(bookmark);
+    getActiveEditor().selection.moveToBookmark(bookmark);
+    getActiveEditor().nodeChanged();
 }
 
 /**

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

@@ -6,16 +6,19 @@
 /* eslint-disable max-nested-callbacks */
 define([
     'jquery',
+    'underscore',
     'Magento_PageBuilder/js/content-type/text/preview'
-], function ($, Preview) {
+], function ($, _, Preview) {
     'use strict';
 
     describe('Magento_PageBuilder/js/content-type/text/preview', function () {
-        var model;
+        var model,
+            config;
 
         beforeEach(function () {
-            model = new Preview({dataStore: {subscribe: jasmine.createSpy()}}, {});
-            model.element = $('<div contenteditable="true">This text can be edited.</div>')[0];
+            config = {};
+            model = new Preview({dataStore: {subscribe: jasmine.createSpy()}}, config);
+            model.element = $('<div id="pb-text-content" contenteditable="true">This text can be edited.</div>')[0];
             $('body').append($(model.element));
         });
         afterEach(function () {
@@ -96,5 +99,66 @@ define([
                 expect(model.activateEditor).not.toHaveBeenCalled();
             });
         });
+
+        describe('initWysiwygFromClick()', function () {
+            var originalDeferFn = _.defer,
+                editor;
+
+            beforeEach(function () {
+                config.additional_data = {
+                    wysiwygConfig: {
+                        wysiwygConfigData: {
+                            adapter: {
+                                settings: {
+
+                                }
+                            }
+                        }
+                    }
+                };
+                editor = {
+                    on: function (event, callback) {
+                        $(model.element).on(event, callback);
+                    },
+                    dom: {
+                        getRoot: jasmine.createSpy('getRoot').and.returnValue(model.element)
+                    },
+                    selection: {
+                        select: jasmine.createSpy('select')
+                    },
+                    nodeChanged: jasmine.createSpy('nodeChanged')
+                };
+                _.defer = jasmine.createSpy('_.defer');
+            });
+            afterEach(function () {
+                _.defer = originalDeferFn;
+            });
+            it('Should select image on mousedown', function () {
+                var editorSettings = config.additional_data.wysiwygConfig.wysiwygConfigData.adapter.settings,
+                    img = document.createElement('img');
+
+                $(model.element).append(img);
+                model.initWysiwygFromClick(true);
+                expect(editorSettings.auto_focus).toEqual(model.element.id);
+                expect(editorSettings.init_instance_callback).toBeInstanceOf(Function);
+                editorSettings.init_instance_callback(editor);
+                $(img).trigger('mousedown');
+                expect(editor.selection.select).toHaveBeenCalledWith(img);
+                expect(editor.nodeChanged).toHaveBeenCalled();
+            });
+            it('Should not select image if right button of the mouse is clicked', function () {
+                var editorSettings = config.additional_data.wysiwygConfig.wysiwygConfigData.adapter.settings,
+                    img = document.createElement('img');
+
+                $(model.element).append(img);
+                model.initWysiwygFromClick(true);
+                expect(editorSettings.auto_focus).toEqual(model.element.id);
+                expect(editorSettings.init_instance_callback).toBeInstanceOf(Function);
+                editorSettings.init_instance_callback(editor);
+                $(img).trigger($.Event('mousedown', {button: 2}));
+                expect(editor.selection.select).not.toHaveBeenCalled();
+                expect(editor.nodeChanged).not.toHaveBeenCalled();
+            });
+        });
     });
 });

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/utils/editor.ts

@@ -59,5 +59,30 @@ define([
                 expect(content).toEqual('<div id="x" data-t1="1"><span id="y"></span></div>');
             });
         });
+
+        describe('moveToBookmark', function () {
+            var originalTinymce = window.tinymce;
+
+            beforeEach(function () {
+                window.tinymce = {
+                    activeEditor: {
+                        selection: {
+                            moveToBookmark: jasmine.createSpy('moveToBookmark')
+                        },
+                        nodeChanged: jasmine.createSpy('nodeChanged')
+                    }
+                };
+            });
+            afterEach(function () {
+                originalTinymce && (window.tinymce = originalTinymce);
+            });
+            it('Should call activeEditor.selection.moveToBookmark and activeEditor.nodeChanged', function () {
+                var bookmark = {id: 'test'};
+
+                utils.moveToBookmark(bookmark);
+                expect(utils.getActiveEditor().selection.moveToBookmark).toHaveBeenCalledWith(bookmark);
+                expect(utils.getActiveEditor().nodeChanged).toHaveBeenCalled();
+            });
+        });
     });
 });