Merge pull request #336 from adobe-commerce-tier-4/T4-PR-06-14-2024

internal-magento-queue-manager[bot] · web-flow · commit 4d5db10a5d26 · 2024-07-03T12:24:34.000Z
[Support Tier-4 chittima] 06-14-2024 Regular delivery of bugfixes and improvements
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderImageTest/ImageTestCMSPageOnTabletTest.xml b/app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderImageTest/ImageTestCMSPageOnTabletTest.xml
@@ -94,12 +94,12 @@
         <dontSeeElement selector="{{ImageOnStorefront.imageMobile('1')}}" stepKey="dontSeeMobileImageOnDefaultRes"/>
 
         <!-- Validate images with window width of 768px -->
-        <resizeWindow width="769" height="1024" stepKey="resizeWindowTo768by1024"/>
+        <resizeWindow width="768" height="1024" stepKey="resizeWindowTo768by1024"/>
         <seeElement selector="{{ImageOnStorefront.imageDesktop('1')}}" stepKey="seeMainImageOn768by1024"/>
         <dontSeeElement selector="{{ImageOnStorefront.imageMobile('1')}}" stepKey="dontSeeMobileImageOn768by1024"/>
 
         <!-- Validate images with window width of 767px -->
-        <resizeWindow width="768" height="1024" stepKey="resizeWindowTo767by1024"/>
+        <resizeWindow width="767" height="1024" stepKey="resizeWindowTo767by1024"/>
         <seeElement selector="{{ImageOnStorefront.imageMobile('1')}}" stepKey="seeMobileImageOn767by1024"/>
         <dontSeeElement selector="{{ImageOnStorefront.imageDesktop('1')}}" stepKey="dontSeeDesktopImageOn767by1024"/>
     </test>
diff --git a/app/code/Magento/PageBuilder/ViewModel/StageRenderFrameRequireJsConfigModifier.php b/app/code/Magento/PageBuilder/ViewModel/StageRenderFrameRequireJsConfigModifier.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+declare(strict_types=1);
+
+namespace Magento\PageBuilder\ViewModel;
+
+use Magento\Backend\ViewModel\RequireJsConfigModifierInterface;
+use Magento\Framework\View\Element\Block\ArgumentInterface;
+
+/**
+ * Modifies requirejs configuration for the stage render frame
+ *
+ * Override the text! plugin within the iframe to ensure we can pipe any XHR requests through to the parent window
+ * as the same origin policy will not allow us to load the templates within this iframe.
+ * It is important that this mapping is configured before requirejs-config.js to ensure the text! plugin is overridden
+ * for all requests.
+ */
+class StageRenderFrameRequireJsConfigModifier implements ArgumentInterface, RequireJsConfigModifierInterface
+{
+    /**
+     * @inheritDoc
+     */
+    public function modify(array $config): array
+    {
+        $config['map']['*'] = array_merge(
+            $config['map']['*'] ?? [],
+            [
+                'text' => 'Magento_PageBuilder/js/master-format/render/requirejs/text',
+                'Magento_PageBuilder/js/events' => 'Magento_PageBuilder/js/master-format/render/events'
+            ]
+        );
+        return $config;
+    }
+}
diff --git a/app/code/Magento/PageBuilder/etc/view.xml b/app/code/Magento/PageBuilder/etc/view.xml
@@ -62,9 +62,9 @@
                 <var name="stage">true</var>
                 <var name="class">mobile-switcher</var>
                 <var name="icon">Magento_PageBuilder::css/images/switcher/switcher-mobile.svg</var>
-                <var name="media">only screen and (max-width: 768px)</var>
+                <var name="media">only screen and (max-width: 767px)</var>
                 <var name="conditions">
-                    <var name="max-width">768px</var>
+                    <var name="max-width">767px</var>
                     <var name="min-width">640px</var>
                 </var>
                 <var name="options">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/layout/pagebuilder_stage_render.xml b/app/code/Magento/PageBuilder/view/adminhtml/layout/pagebuilder_stage_render.xml
@@ -14,6 +14,13 @@
         <remove src="css/styles.css"/>
     </head>
     <body>
+        <referenceBlock name="require.js">
+            <arguments>
+                <argument name="config_modifier" xsi:type="object">
+                    Magento\PageBuilder\ViewModel\StageRenderFrameRequireJsConfigModifier
+                </argument>
+            </arguments>
+        </referenceBlock>
         <referenceContainer name="backend.page" remove="true"/>
         <referenceContainer name="menu.wrapper" remove="true"/>
         <referenceContainer name="root">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/templates/stage/render.phtml b/app/code/Magento/PageBuilder/view/adminhtml/templates/stage/render.phtml
@@ -10,33 +10,16 @@
  */
 ?>
 
-<?php
-/**
- * Override the text! plugin within the iframe to ensure we can pipe any XHR requests through to the parent window
- * as the same origin policy will not allow us to load the templates within this iframe.
- */
-?>
 <?php
 $pageBuilderConfig = $block->getPageBuilderConfig();
 
-$script = <<<SCRIPT
-   require.config({
-       'map': {
-           '*': {
-               'text': 'Magento_PageBuilder/js/master-format/render/requirejs/text',
-               'Magento_PageBuilder/js/events': 'Magento_PageBuilder/js/master-format/render/events'
-           }
-       }
-   });
-SCRIPT;
-
 /**
  * To be able to override the text plugin we need the Magento template engine to be used, as the template engine
  * within lib has a dependency on the text! plugin we need to ensure we set the template engine before the
  * dependency blocks us. If we try to just override using the RequireJS config above our !text plugin will never
  * get overridden as our template engine cannot load.
  */
-$script .= <<<SCRIPT
+$script = <<<SCRIPT
     require([
         'ko',
         'Magento_Ui/js/lib/knockout/template/engine'
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/page-builder.html
@@ -31,6 +31,7 @@
         <with args="stage">
             <render></render>
         </with>
-        <iframe attr="id: 'render_frame_' + id" sandbox="allow-scripts allow-same-origin" style="position: absolute; width:0; height:0; border: none;"></iframe>
+        <!-- Do not modify the "sandbox" attribute without approval from a security engineer -->
+        <iframe attr="id: 'render_frame_' + id" sandbox="allow-scripts" style="position: absolute; width:0; height:0; border: none;"></iframe>
     </if>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/text/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/text/preview.ts
@@ -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();
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/utils/editor.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/utils/editor.ts
@@ -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();
 }
 
 /**
diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/content-type/text/preview.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/content-type/text/preview.test.js
@@ -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();
+            });
+        });
     });
 });
diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/utils/editor.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/utils/editor.test.js
@@ -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();
+            });
+        });
     });
 });

Original file line number	Diff line number	Diff line change
`@@ -279,7 +279,8 @@ export function createBookmark(event: JQueryEventObject): Bookmark {`
`279`	`279`	`* @param bookmark`
`280`	`280`	`*/`
`281`	`281`	`export function moveToBookmark(bookmark: Bookmark) {`
`282`		`- ((window as any).tinymce.activeEditor as Editor).selection.moveToBookmark(bookmark);`
	`282`	`+ getActiveEditor().selection.moveToBookmark(bookmark);`
	`283`	`+ getActiveEditor().nodeChanged();`
`283`	`284`	`}`
`284`	`285`
`285`	`286`	`/**`