[5.0] Media Manager Image crop using importmaps (#41034)

* Image crop using Copeer module

* Remove the polyfill from the dependencies

* Update Crop.php

* Update settings.json

Author: dgrammatiko

build/build-modules-js/settings.json

@@ -215,7 +215,8 @@
         "name": "cropperjs",
         "js": {
           "dist/cropper.js": "js/cropper.js",
-          "dist/cropper.min.js": "js/cropper.min.js"
+          "dist/cropper.min.js": "js/cropper.min.js",
+          "dist/cropper.esm.js": "js/cropper.esm.js"
         },
         "css": {
           "dist/cropper.css": "css/cropper.css",
@@ -227,9 +228,16 @@
             "type": "style",
             "uri": "cropper.min.css"
           },
+          {
+            "name": "cropper.esm",
+            "type": "script",
+            "uri": "cropper.esm.js",
+            "importmap": true
+          },
           {
             "name": "cropperjs",
             "type": "script",
+            "deprecated": true,
             "uri": "cropper.min.js",
             "attributes": {
               "defer": true

build/media_source/plg_media-action_crop/js/crop.es6.js

@@ -2,7 +2,9 @@
  * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
  * @license    GNU General Public License version 2 or later; see LICENSE.txt
  */
-/* global Cropper */
+// eslint-disable-next-line  import/no-unresolved
+import Cropper from 'cropper-module';
+
 let formElements;
 let activated = false;
 let instance;

plugins/media-action/crop/src/Extension/Crop.php

@@ -39,7 +39,7 @@ protected function loadJs()
             return;
         }
 
-        $this->getApplication()->getDocument()->getWebAssetManager()->useScript('cropperjs');
+        $this->getApplication()->getDocument()->getWebAssetManager()->useScript('cropper.esm');
     }
 
     /**