From c802efd56fdd5e26013f941ce06ff340b57818dc Mon Sep 17 00:00:00 2001
From: "Louis (loco)" <loco@odoo.com>
Date: Wed, 19 Jul 2023 07:39:21 +0000
Subject: [PATCH] [FIX] web_editor: correctly adapt the image mimetype on
 format change

Steps to reproduce the bug:
- Go on a product image and replace it by a ".jpeg" (note that the
mimetype of the image is "image/webp" since [1]).
- Change the format of the image and put it to "Original". The mimetype
of the image is now "image/jpeg".
- Add a shape on the image.
- Change the format of the image.

-> None is displayed as its format.

Let's first recall that adding a shape on an image transforms its
mimetype into an "image/svg+xml" and that the `originalMimetype`
attribute is used to record its original mimetype. This is needed in
order to correctly reset the image mimetype when removing its shape.

The problem here was that the `originalMimetype` attribute was not used
correctly and that the mimetype of an image with a shape was not
correctly updated at format change.

[1]: https://github.com/odoo/odoo/commit/0449fe85cb0e1d639a4e1aeba26e90906f79254d

task-3431015

closes odoo/odoo#129680

X-original-commit: 40811e72c50faf146ccdf9f26c332db9ebc69fa9
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
Signed-off-by: Colin Louis (loco) <loco@odoo.com>
---
 .../static/src/js/editor/snippets.options.js    | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index a4e388b521e..d7049e83331 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -5710,7 +5710,14 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         const values = widgetValue.split(' ');
         const image = this._getImg();
         image.dataset.resizeWidth = values[0];
-        image.dataset.mimetype = values[1];
+        if (image.dataset.shape) {
+            // If the image has a shape, modify its originalMimetype attribute.
+            image.dataset.originalMimetype = values[1];
+        } else {
+            // If the image does not have a shape, modify its mimetype
+            // attribute.
+            image.dataset.mimetype = values[1];
+        }
         return this._applyOptions();
     },
     /**
@@ -5840,8 +5847,9 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         };
         widths[img.naturalWidth] = [sprintf(_t("%spx"), img.naturalWidth), 'image/webp'];
         widths[optimizedWidth] = [sprintf(_t("%spx (Suggested)"), optimizedWidth), 'image/webp'];
-        widths[maxWidth] = [sprintf(_t("%spx (Original)"), maxWidth), img.dataset.originalMimetype];
-        if (img.dataset.originalMimetype !== 'image/webp') {
+        const imgMimetype = this._getImageMimetype(img);
+        widths[maxWidth] = [sprintf(_t("%spx (Original)"), maxWidth), imgMimetype];
+        if (imgMimetype !== 'image/webp') {
             // Avoid a key collision by subtracting 0.1 - putting the webp
             // above the original format one of the same size.
             widths[maxWidth - 0.1] = [sprintf(_t("%spx"), maxWidth), 'image/webp'];
@@ -5900,9 +5908,6 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         }
         this.originalId = img.dataset.originalId;
         this.originalSrc = img.dataset.originalSrc;
-        if (!img.dataset.originalMimetype) {
-            img.dataset.originalMimetype = img.dataset.mimetype;
-        }
     },
     /**
      * Sets the image's width to its suggested size.