[FIX] web_editor: do not store base64 of cropped image to html field

On crop dialog save, the image src is set to the base64.
We are creating an attachment for the cropped image if the user save the changes
and after that, we set the newly created image as the src of that image.

Meanwhile, when the user save the 'html' field, it is not creating
any attachment for the cropped image and also it leaves base64 as it is.
Due to that field store large data into the database.

this commit makes sure that attachment is created for cropped images
and update src before storing field value to the database.

closes odoo/odoo#46455

X-original-commit: 2bcaa25e67260e3013d4400d1b3ce380ba5cbd1d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 68 insertions, 1 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 2be70626ab4..8a848389c51 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -9,6 +9,7 @@ var ColorPaletteWidget = require('web_editor.ColorPalette').ColorPaletteWidget;
 var mixins = require('web.mixins');
 var fonts = require('wysiwyg.fonts');
 var rte = require('web_editor.rte');
+var ServicesMixin = require('web.ServicesMixin');
 var weWidgets = require('wysiwyg.widgets');
 
 var _t = core._t;
@@ -1051,7 +1052,7 @@ $.summernote.lang.odoo = {
  * instantiate media, link and alt dialogs outside the main editor: in the
  * simple HTML fields and forum textarea.
  */
-var SummernoteManager = Class.extend(mixins.EventDispatcherMixin, {
+var SummernoteManager = Class.extend(mixins.EventDispatcherMixin, ServicesMixin, {
     /**
      * @constructor
      */
@@ -1076,6 +1077,58 @@ var SummernoteManager = Class.extend(mixins.EventDispatcherMixin, {
         core.bus.off('media_dialog_demand', this, this._onMediaDialogDemand);
     },
 
+    /**
+     * Create/Update cropped attachments.
+     *
+     * @param {jQuery} $editable
+     * @returns {Promise}
+     */
+    saveCroppedImages: function ($editable) {
+        var defs = _.map($editable.find('.o_cropped_img_to_save'), 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];
+
+            if (!cropID) {
+                var name = originalSrc + '.crop';
+                return 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
+                    }],
+                }).then(attachmentID => {
+                    return this._rpc({
+                        model: 'ir.attachment',
+                        method: 'generate_access_token',
+                        args: [[attachmentID]],
+                    }).then(access_token => {
+                        $croppedImg.attr('src', '/web/image/' + attachmentID + '?access_token=' + access_token[0]);
+                    });
+                });
+            } else {
+                return this._rpc({
+                    model: 'ir.attachment',
+                    method: 'write',
+                    args: [[cropID], {datas: datas}],
+                });
+            }
+        });
+        return Promise.all(defs);
+    },
+
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
@@ -1201,6 +1254,20 @@ rte.Class.include({
         this._super.apply(this, arguments);
         this._summernoteManager.destroy();
     },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Create/Update cropped attachments.
+     *
+     * @param {jQuery} $editable
+     * @returns {Deferred}
+     */
+    saveCroppedImages: function ($editable) {
+        return this._summernoteManager.saveCroppedImages($editable);
+    },
 });
 return SummernoteManager;
 });