[FIX] web_editor, *: store the correct mimetype of an image with a shape

*: tools

Steps to reproduce the bug:
- Add an image on the website.
- Replace it by a "jpeg". Note that the mimetype of the image is
"image/webp" at the upload since [1].
- Add a shape on the image.
- Save and Edit.

-> If you check on the available "Format", the mimetype of the
"original" is "webp" but it should be "jpeg".

Before this commit, there were two types of mimetype data attribute:
- `mimetype`: the current mimetype of the image.
- `originalMimetype`: the mimetype of the image without a shape.
Before [1], it was also the mimetype of the original image. However,
since [1], the user has the possibility to change the mimetype of the
image so the "originalMimetype" attribute does not always refer to the
mimetype of the original image anymore.

To resolve the problem, another data attribute has to be introduced.
Here is a summary of the mimetype related attribute:
- `mimetype`: the current mimetype of an image.
- `originalMimetype`: the mimetype of the image before a shape has
been applied. It is needed when removing a shape to recover the correct
mimetype.
- `mimetypeBeforeConversion`: the mimetype of the original image. It is
needed in order to be able to change the format of an image and come
back to the original one.

In the case of an uploaded "jpeg" image on which a shape has been
applied, `mimetypeBeforeConversion` is "image/jpeg", `originalMimetype`
is "image/webp" (since [1]) and `mimetype` is "image/svg+xml".

The `loadImageInfo()` has been adapted to also handle the case of an
image that has already been loaded but that does not have the
`mimetypeBeforeConversion` attribute (for example all the images that
were uploaded on the website before this commit). In this case, the
mimetype attribute is kept and not set to the original one as the user
could have changed it.

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

task-3449866

closes odoo/odoo#137424

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

addons/web_editor/static/src/js/common/utils.js

@@ -87,6 +87,7 @@ const DEFAULT_PALETTE = {
 const BACKGROUND_IMAGE_ATTRIBUTES = new Set([
     "originalId", "originalSrc", "mimetype", "resizeWidth", "glFilter", "quality", "bgSrc",
     "filterOptions",
+    "mimetypeBeforeConversion",
 ]);
 
 /**

addons/web_editor/static/src/js/editor/image_processing.js

@@ -443,7 +443,9 @@ export async function activateCropper(image, aspectRatio, dataset) {
 export async function loadImageInfo(img, rpc, attachmentSrc = '') {
     const src = attachmentSrc || img.getAttribute('src');
     // If there is a marked originalSrc, the data is already loaded.
-    if (img.dataset.originalSrc || !src) {
+    // If the image does not have the "mimetypeBeforeConversion" attribute, it
+    // has to be added.
+    if ((img.dataset.originalSrc && img.dataset.mimetypeBeforeConversion) || !src) {
         return;
     }
 
@@ -465,9 +467,14 @@ export async function loadImageInfo(img, rpc, attachmentSrc = '') {
     // The "redirect" check is for when it is a redirect image attachment due to
     // an external URL upload.
     if (original && original.image_src && !/\/web\/image\/\d+-redirect\//.test(original.image_src)) {
+        if (!img.dataset.mimetype) {
+            // The mimetype has to be added only if it is not already present as
+            // we want to avoid to reset a mimetype set by the user.
+            img.dataset.mimetype = original.mimetype;
+        }
         img.dataset.originalId = original.id;
         img.dataset.originalSrc = original.image_src;
-        img.dataset.mimetype = original.mimetype;
+        img.dataset.mimetypeBeforeConversion = original.mimetype;
     }
 }
 

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -5780,9 +5780,9 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         };
         widths[img.naturalWidth] = [_t("%spx", img.naturalWidth), 'image/webp'];
         widths[optimizedWidth] = [_t("%spx (Suggested)", optimizedWidth), 'image/webp'];
-        const imgMimetype = this._getImageMimetype(img);
-        widths[maxWidth] = [_t("%spx (Original)", maxWidth), imgMimetype];
-        if (imgMimetype !== 'image/webp') {
+        const mimetypeBeforeConversion = img.dataset.mimetypeBeforeConversion;
+        widths[maxWidth] = [_t("%spx (Original)", maxWidth), mimetypeBeforeConversion];
+        if (mimetypeBeforeConversion !== "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] = [_t("%spx", maxWidth), 'image/webp'];

odoo/tools/mail.py

@@ -37,6 +37,7 @@ safe_attrs = clean.defs.safe_attrs | frozenset(
      'data-class', 'data-mimetype', 'data-original-src', 'data-original-id', 'data-gl-filter', 'data-quality', 'data-resize-width',
      'data-shape', 'data-shape-colors', 'data-file-name', 'data-original-mimetype',
      'data-behavior-props', 'data-prop-name',  # knowledge commands
+     'data-mimetype-before-conversion',
      ])
 SANITIZE_TAGS = {
     # allow new semantic HTML5 tags