From a5df9781bef443d1e32ae385e4977307aeb7bc50 Mon Sep 17 00:00:00 2001
From: "Louis (loco)" <loco@odoo.com>
Date: Thu, 7 Dec 2023 16:16:08 +0100
Subject: [PATCH] [FIX] web_editor: make the system robust when old mimetype is
 missing

Steps to reproduce:
- Add an image on the website.
- Save.
- With the HTML editor, change the src of the image (to
"https://odoo.com/logo.png" for example) and remove the
`mimetypeBeforeConversion` data attribute of the image. Note that it is
important to change the src of the image to ensure that the system does
not add the `mimetypeBeforeConversion` data attribute back on the image.
- Enter in edit mode and click on the image.

-> Traceback of type "Cannot read properties of undefined (reading
'split')".

This traceback appears because the `_renderCustomXML()` method of
`ImageHandlerOption` relies on the presence of formats on the list
returned by the `_computeAvailableFormats()` method. Since [1], if there
is no `mimetypeBeforeConversion` data attribute on the image, one of the
format in the list is `undefined`. As `_renderCustomXML()` tries to
perform a `split()` on this format, a traceback appears.

Although the steps to reproduce the result seem tricky, it has been
decided to create a fix for this situation. Indeed, in version prior to
16.4, the equivalent steps to reproduce (in which the `mimetype` data
attribute is removed instead of the `mimetypeBeforeConversion`) do not
lead to a traceback. In those versions, if there is no mimetype on the
image, the options such as "Filter", "Width" and "Quality" are not shown
in the editor panel. The goal of this commit is to apply the same logic
for the version 16.4; hide the "Format" option if the image does not
have the `mimetypeBeforeConversion` data attribute. To do so, the
`_computeWidgetVisibility()` method has been adapted consequently. To
avoid the traceback, the `_computeAvailableFormats()` method has been
adapted. It now returns an empty list if the image does not have the
`mimetypeBeforeConversion` data attribute. As there is no `undefined`
format in the returned list of valid formats, the traceback is avoided.

[1]: https://github.com/odoo/odoo/commit/730588b802506844e6ca54df312333bfd8df1d52

task-3631487

closes odoo/odoo#148882

X-original-commit: 485a5d74198668fa2f2240b4e31a871f36225857
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.options.js           | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

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 ad1dc2ab9a7..df7539ef04d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -6244,11 +6244,15 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         }
     },
     /**
-     * Returns a list of valid formats for a given image.
+     * Returns a list of valid formats for a given image or an empty list if
+     * there is no mimetypeBeforeConversion data attribute on the image.
      *
      * @private
      */
     async _computeAvailableFormats() {
+        if (!this.mimetypeBeforeConversion) {
+            return [];
+        }
         const img = this._getImg();
         const original = await loadImage(this.originalSrc);
         const maxWidth = img.dataset.width ? img.naturalWidth : original.naturalWidth;
@@ -6324,6 +6328,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         }
         this.originalId = img.dataset.originalId;
         this.originalSrc = img.dataset.originalSrc;
+        this.mimetypeBeforeConversion = img.dataset.mimetypeBeforeConversion;
     },
     /**
      * Sets the image's width to its suggested size.
@@ -6396,6 +6401,9 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
      * @override
      */
     _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === "format_select_opt" && !this.mimetypeBeforeConversion) {
+            return false;
+        }
         if (this._isImageProcessingWidget(widgetName, params)) {
             const img = this._getImg();
             return this._isImageSupportedForProcessing(img, true);