[IMP] web_editor, *: change image cropping from modal to inline widget

*: base

Previously, cropping an image was done inside of a modal window, turning
it into an inline widget makes the editor feel more integrated and
allows you to better see the result of cropping directly in the page,
it's also less intrusive to the user's edition workflow.

At the same time, the way cropped images are saved was refactored to use
the new original_id field on ir_attachment, as the old system was
creating problems.

Part of https://github.com/odoo/odoo/pull/51517
task-2192755

1 files changed, 25 insertions, 51 deletions

diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 514dfdfe85c..92d8cefe0bc 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -460,7 +460,7 @@ $.summernote.pluginEvents.alt = function (event, editor, layoutInfo, sorted) {
 $.summernote.pluginEvents.cropImage = function (event, editor, layoutInfo, sorted) {
     var $editable = layoutInfo.editable();
     var $selection = layoutInfo.handle().find('.note-control-selection');
-    topBus.trigger('crop_image_dialog_demand', {
+    topBus.trigger('crop_image_demand', {
         $editable: $editable,
         media: $selection.data('target'),
     });
@@ -1075,7 +1075,7 @@ var SummernoteManager = Class.extend(mixins.EventDispatcherMixin, ServicesMixin,
         this.setParent(parent);
 
         topBus.on('alt_dialog_demand', this, this._onAltDialogDemand);
-        topBus.on('crop_image_dialog_demand', this, this._onCropImageDialogDemand);
+        topBus.on('crop_image_demand', this, this._onCropImageDemand);
         topBus.on('link_dialog_demand', this, this._onLinkDialogDemand);
         topBus.on('media_dialog_demand', this, this._onMediaDialogDemand);
     },
@@ -1086,7 +1086,7 @@ var SummernoteManager = Class.extend(mixins.EventDispatcherMixin, ServicesMixin,
         mixins.EventDispatcherMixin.destroy.call(this);
 
         topBus.off('alt_dialog_demand', this, this._onAltDialogDemand);
-        topBus.off('crop_image_dialog_demand', this, this._onCropImageDialogDemand);
+        topBus.off('crop_image_demand', this, this._onCropImageDemand);
         topBus.off('link_dialog_demand', this, this._onLinkDialogDemand);
         topBus.off('media_dialog_demand', this, this._onMediaDialogDemand);
     },
@@ -1099,44 +1099,25 @@ var SummernoteManager = Class.extend(mixins.EventDispatcherMixin, ServicesMixin,
      */
     saveCroppedImages: function ($editable) {
         var defs = _.map($editable.find('.o_cropped_img_to_save'), async croppedImg => {
-            var $croppedImg = $(croppedImg);
-            $croppedImg.removeClass('o_cropped_img_to_save');
-
-            var resModel = $croppedImg.data('crop:resModel');
-            var resID = $croppedImg.data('crop:resID');
-            var cropID = $croppedImg.data('crop:id');
-            var mimetype = $croppedImg.data('crop:mimetype');
-            var originalSrc = $croppedImg.data('crop:originalSrc');
-
-            var datas = $croppedImg.attr('src').split(',')[1];
-            let attachmentID = cropID;
-            if (!cropID) {
-                var name = originalSrc + '.crop';
-                attachmentID = await this._rpc({
-                    model: 'ir.attachment',
-                    method: 'create',
-                    args: [{
-                        res_model: resModel,
-                        res_id: resID,
-                        name: name,
-                        datas: datas,
-                        mimetype: mimetype,
-                        url: originalSrc, // To save the original image that was cropped
-                    }],
-                });
-            } else {
-                await this._rpc({
-                    model: 'ir.attachment',
-                    method: 'write',
-                    args: [[cropID], {datas: datas}],
-                });
-            }
-            const access_token = await this._rpc({
-                model: 'ir.attachment',
-                method: 'generate_access_token',
-                args: [[attachmentID]],
+            croppedImg.classList.remove('o_cropped_img_to_save');
+            // Cropping an image always creates a copy of the original, even if
+            // it was cropped previously, as the other cropped image may be used
+            // elsewhere if the snippet was duplicated or was saved as a custom one.
+            const croppedAttachmentSrc = await this._rpc({
+                route: '/web_editor/crop_attachment',
+                params: {
+                    res_model: croppedImg.dataset.resModel,
+                    res_id: parseInt(croppedImg.dataset.resId),
+                    name: croppedImg.dataset.originalName + '.crop',
+                    data: croppedImg.getAttribute('src').split(',')[1],
+                    mimetype: croppedImg.dataset.mimetype,
+                    original_id: parseInt(croppedImg.dataset.originalId),
+                },
+            });
+            croppedImg.setAttribute('src', croppedAttachmentSrc);
+            weWidgets.ImageCropWidget.prototype.removeOnSaveAttributes.forEach(attr => {
+                delete croppedImg.dataset[attr];
             });
-            $croppedImg.attr('src', '/web/image/' + attachmentID + '?access_token=' + access_token[0]);
         });
         return Promise.all(defs);
     },
@@ -1169,30 +1150,23 @@ var SummernoteManager = Class.extend(mixins.EventDispatcherMixin, ServicesMixin,
         altDialog.open();
     },
     /**
-     * Called when a demand to open a crop dialog is received on the bus.
+     * Called when a demand to crop an image is received on the bus.
      *
      * @private
      * @param {Object} data
      */
-    _onCropImageDialogDemand: function (data) {
+    _onCropImageDemand: function (data) {
         if (data.__alreadyDone) {
             return;
         }
         data.__alreadyDone = true;
-        var cropImageDialog = new weWidgets.CropImageDialog(this,
+        new weWidgets.ImageCropWidget(this,
             _.extend({
                 res_model: data.$editable.data('oe-model'),
                 res_id: data.$editable.data('oe-id'),
             }, data.options || {}),
             data.media
-        );
-        if (data.onSave) {
-            cropImageDialog.on('save', this, data.onSave);
-        }
-        if (data.onCancel) {
-            cropImageDialog.on('cancel', this, data.onCancel);
-        }
-        cropImageDialog.open();
+        ).appendTo(data.$editable);
     },
     /**
      * Called when a demand to open a link dialog is received on the bus.