Improve openDialog method initialization

app/code/Magento/Cms/Model/Wysiwyg/Gallery/DefaultConfigProvider.php

@@ -8,6 +8,11 @@
 
 namespace Magento\Cms\Model\Wysiwyg\Gallery;
 
+use Magento\Ui\Component\Form\Element\DataType\Media\OpenDialogUrl;
+
+/**
+ * @inheritdoc
+ */
 class DefaultConfigProvider implements \Magento\Framework\Data\Wysiwyg\ConfigProviderInterface
 {
     /**
@@ -30,26 +35,34 @@ class DefaultConfigProvider implements \Magento\Framework\Data\Wysiwyg\ConfigPro
      */
     private $currentTreePath;
 
+    /**
+     * @var OpednDialogUrl
+     */
+    private $openDialogUrl;
+
     /**
      * @param \Magento\Backend\Model\UrlInterface $backendUrl
      * @param \Magento\Cms\Helper\Wysiwyg\Images $imagesHelper
+     * @param OpenDialogUrl $openDialogUrl
      * @param array $windowSize
      * @param string|null $currentTreePath
      */
     public function __construct(
         \Magento\Backend\Model\UrlInterface $backendUrl,
         \Magento\Cms\Helper\Wysiwyg\Images $imagesHelper,
+        OpenDialogUrl $openDialogUrl,
         array $windowSize = [],
         $currentTreePath = null
     ) {
         $this->backendUrl = $backendUrl;
         $this->imagesHelper = $imagesHelper;
+        $this->openDialogUrl = $openDialogUrl;
         $this->windowSize = $windowSize;
         $this->currentTreePath = $currentTreePath;
     }
 
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Framework\DataObject
     {
@@ -72,7 +85,7 @@ public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Fram
             [
                 'add_images' => true,
                 'files_browser_window_url' => $this->backendUrl->getUrl(
-                    'cms/wysiwyg_images/index',
+                    $this->openDialogUrl->get(),
                     $fileBrowserUrlParams
                 ),
                 'files_browser_window_width' => $this->windowSize['width'],

app/code/Magento/Tinymce3/Model/Config/Gallery/Config.php

@@ -7,6 +7,8 @@
 
 namespace Magento\Tinymce3\Model\Config\Gallery;
 
+use Magento\Ui\Component\Form\Element\DataType\Media\OpenDialogUrl;
+
 /**
  * Class Config adds information about required configurations to display media gallery of tinymce3 editor
  *
@@ -19,13 +21,21 @@ class Config implements \Magento\Framework\Data\Wysiwyg\ConfigProviderInterface
      */
     private $backendUrl;
 
+    /**
+     * @var OpednDialogUrl
+     */
+    private $openDialogUrl;
+
     /**
      * @param \Magento\Backend\Model\UrlInterface $backendUrl
+     * @param OpenDialogUrl $openDialogUrl
      */
     public function __construct(
-        \Magento\Backend\Model\UrlInterface $backendUrl
+        \Magento\Backend\Model\UrlInterface $backendUrl,
+        OpenDialogUrl $openDialogUrl
     ) {
         $this->backendUrl = $backendUrl;
+        $this->openDialogUrl = $openDialogUrl;
     }
 
     /**
@@ -39,7 +49,7 @@ public function getConfig(\Magento\Framework\DataObject $config) : \Magento\Fram
         $config->addData(
             [
                 'add_images' => true,
-                'files_browser_window_url' => $this->backendUrl->getUrl('cms/wysiwyg_images/index'),
+                'files_browser_window_url' => $this->backendUrl->getUrl($this->openDialogUrl->get()),
             ]
         );
 

app/code/Magento/Tinymce3/composer.json

@@ -7,8 +7,7 @@
         "magento/module-backend": "*",
         "magento/module-ui": "*",
         "magento/module-variable": "*",
-        "magento/module-widget": "*",
-        "magento/module-cms": "*"
+        "magento/module-widget": "*"
 
     },
     "suggest": {

app/code/Magento/Ui/Component/Form/Element/DataType/Media/Image.php

@@ -31,35 +31,43 @@ class Image extends Media
      */
     private $fileSize;
 
+    /**
+     * @var OpednDialogUrl
+     */
+    private $openDialogUrl;
+
     /**
      * @param ContextInterface $context
      * @param StoreManagerInterface $storeManager
      * @param Size $fileSize
+     * @param OpenDialogUrl $openDialogUrl
      * @param UiComponentInterface[] $components
      * @param array $data
      */
     public function __construct(
         ContextInterface $context,
         StoreManagerInterface $storeManager,
         Size $fileSize,
+        OpenDialogUrl $openDialogUrl,
         array $components = [],
         array $data = []
     ) {
         $this->storeManager = $storeManager;
         $this->fileSize = $fileSize;
+        $this->openDialogUrl = $openDialogUrl;
         parent::__construct($context, $components, $data);
     }
 
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     public function getComponentName()
     {
         return static::NAME;
     }
 
     /**
-     * {@inheritdoc}
+     * @inheritdoc
      */
     public function prepare()
     {
@@ -75,7 +83,10 @@ public function prepare()
                 'config' => [
                     'maxFileSize' => $maxFileSize,
                     'mediaGallery' => [
-                        'openDialogUrl' => $this->getContext()->getUrl('cms/wysiwyg_images/index', ['_secure' => true]),
+                        'openDialogUrl' => $this->getContext()->getUrl(
+                            $this->openDialogUrl->get(),
+                            ['_secure' => true]
+                        ),
                         'openDialogTitle' => $this->getConfiguration()['openDialogTitle'] ?? __('Insert Images...'),
                         'initialOpenSubpath' => $this->getConfiguration()['initialMediaGalleryOpenSubpath'],
                         'storeId' => $this->storeManager->getStore()->getId(),

app/code/Magento/Ui/Component/Form/Element/DataType/Media/OpenDialogUrl.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Ui\Component\Form\Element\DataType\Media;
+
+use Magento\Framework\DataObject;
+
+/**
+ * Basic configuration for OdenDialogUrl
+ */
+class OpenDialogUrl
+{
+    private const DEFAULT_OPEN_DIALOG_URL = 'cms/wysiwyg_images/index';
+
+    /**
+     * @var string
+     */
+    private $openDialogUrl;
+
+    /**
+     * @param DataObject $url
+     */
+    public function __construct(DataObject $url = null)
+    {
+        $this->openDialogUrl = $url;
+    }
+
+    /**
+     * Returns open dialog url for media browser
+     *
+     * @return string
+     */
+    public function get(): string
+    {
+        if ($this->openDialogUrl) {
+            return $this->openDialogUrl->getUrl();
+        }
+        return self::DEFAULT_OPEN_DIALOG_URL;
+    }
+}

app/code/Magento/Ui/composer.json

@@ -11,8 +11,7 @@
         "magento/module-backend": "*",
         "magento/module-eav": "*",
         "magento/module-store": "*",
-        "magento/module-user": "*",
-        "magento/module-cms": "*"
+        "magento/module-user": "*"
     },
     "suggest": {
         "magento/module-config": "*"

app/code/Magento/Ui/view/base/web/js/form/element/image-uploader.js

@@ -81,7 +81,15 @@ define([
                 openDialogUrl += '&current_tree_path=' + Base64.mageEncode(this.mediaGallery.initialOpenSubpath);
             }
 
-            browser.openDialog(openDialogUrl, null, null, this.mediaGallery.openDialogTitle);
+            browser.openDialog(
+                openDialogUrl,
+                null,
+                null,
+                this.mediaGallery.openDialogTitle,
+                {
+                    targetElementId: $buttonEl.attr('id')
+                }
+            );
         },
 
         /**

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/form/element/image-uploader.test.js

@@ -78,7 +78,10 @@ define([
                         '?isAjax=true&current_tree_path=d3lzaXd5Zw,,',
                     null,
                     null,
-                    'Hello world'
+                    'Hello world',
+                    {
+                        targetElementId: 'theTargetId'
+                    }
                 );
             });
         });

dev/tests/js/jasmine/tests/lib/mage/browser.test.js

@@ -37,6 +37,7 @@ define([
                          */
                         done: function () {
                             obj.targetElementId = 1;
+                            obj.modalLoaded = true;
                         }
                     };
                 });
@@ -58,8 +59,8 @@ define([
                         }
                     };
                 });
-            obj.openDialog('instance/url', 100, 100, 'title', undefined);
-            obj.openDialog('instance/url', 100, 100, 'title', undefined);
+            obj.openDialog('instance/url/target_element_id/YDW2424/', 100, 100, 'title', undefined);
+            obj.openDialog('instance/target_element_id/Y45GDRg/', 100, 100, 'title', undefined);
             expect($.ajax.calls.count()).toBe(1);
         });
     });

lib/internal/Magento/Framework/Data/Form/Element/Editor.php

@@ -286,15 +286,19 @@ protected function _getPluginButtonsHtml($visible = true)
 
         // Button to media images insertion window
         if ($this->getConfig('add_images')) {
+            $htmlId = $this->getHtmlId();
+            $url = $this->getConfig('files_browser_window_url')
+                . 'target_element_id/'
+                . $htmlId
+                . '/'
+                . (null !== $this->getConfig('store_id')
+                    ? 'store/' . $this->getConfig('store_id') . '/"'
+                    : '');
             $buttonsHtml .= $this->_getButtonHtml(
                 [
                     'title' => $this->translate('Insert Image...'),
-                    'onclick' => "MediabrowserUtility.openDialog('"
-                        . $this->getConfig('files_browser_window_url')
-                        . "target_element_id/" . $this->getHtmlId() . "/"
-                        . (null !== $this->getConfig('store_id') ? 'store/'
-                            . $this->getConfig('store_id') . '/' : '')
-                        . "')",
+                    'onclick' => 'MediabrowserUtility.openDialog(\'' . $url
+                        . '\', null, null, null, { \'targetElementId\': \'' . $htmlId . '\' })',
                     'class' => 'action-add-image plugin',
                     'style' => $visible ? '' : 'display:none',
                 ]
@@ -496,13 +500,13 @@ protected function getInlineJs($jsSetupObject, $forceLoad)
         $jsString = '
                 <script type="text/javascript">
                 //<![CDATA[
-                window.tinyMCE_GZ = window.tinyMCE_GZ || {}; 
+                window.tinyMCE_GZ = window.tinyMCE_GZ || {};
                 window.tinyMCE_GZ.loaded = true;
                 require([
-                "jquery", 
-                "mage/translate", 
-                "mage/adminhtml/events", 
-                "mage/adminhtml/wysiwyg/tiny_mce/setup", 
+                "jquery",
+                "mage/translate",
+                "mage/adminhtml/events",
+                "mage/adminhtml/wysiwyg/tiny_mce/setup",
                 "mage/adminhtml/wysiwyg/widget"
                 ], function(jQuery){' .
             "\n" .