[FIX] web_editor: update gallery thumbnail when modifying main image

When the image of an Image Gallery is `o_modified_image_to_save`, only
its main image is replaced by the new attachment's URL: the thumbnail
image remains the original image.
This is a bigger problem after the previous commit because the thumbnail
remains the data URL that is obtained with the conversion of the image
to webp.

This commit makes sure that thumbnails are also updated on save.

Steps to reproduce:
- Drop an "Image Gallery" snippet.
- Remove all images.
- Add jpeg images: images and thumbnails are webp in base64.
- Save.

=> The main images are relative URLs to the webp attachment, but the
thumbnail images are still in base64.

task-3666894

closes odoo#170037

X-original-commit: f377625
Signed-off-by: Benjamin Vray (bvr) <[email protected]>

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

@@ -486,6 +486,24 @@ function _isMobileView(targetEl) {
 function _getLinkLabel(linkEl) {
     return linkEl.textContent.replaceAll("\u200B", "").replaceAll("\uFEFF", "");
 }
+/**
+ * Forwards an image source to its carousel thumbnail.
+ * @param {HTMLElement} imgEl
+ */
+function _forwardToThumbnail(imgEl) {
+    const carouselEl = imgEl.closest(".carousel");
+    if (carouselEl) {
+        const carouselInnerEl = imgEl.closest(".carousel-inner");
+        const carouselItemEl = imgEl.closest(".carousel-item");
+        if (carouselInnerEl && carouselItemEl) {
+            const imageIndex = [...carouselInnerEl.children].indexOf(carouselItemEl);
+            const miniatureEl = carouselEl.querySelector(`.carousel-indicators [data-bs-slide-to="${imageIndex}"]`);
+            if (miniatureEl && miniatureEl.style.backgroundImage) {
+                miniatureEl.style.backgroundImage = `url(${imgEl.getAttribute("src")})`;
+            }
+        }
+    }
+}
 
 export default {
     COLOR_PALETTE_COMPATIBILITY_COLOR_NAMES: COLOR_PALETTE_COMPATIBILITY_COLOR_NAMES,
@@ -515,4 +533,5 @@ export default {
     shouldEditableMediaBeEditable: _shouldEditableMediaBeEditable,
     isMobileView: _isMobileView,
     getLinkLabel: _getLinkLabel,
+    forwardToThumbnail: _forwardToThumbnail,
 };

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

@@ -6391,6 +6391,8 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
             img.classList.add('o_modified_image_to_save');
             const loadedImg = await loadImage(dataURL, img);
             this._applyImage(loadedImg);
+            // Also apply to carousel thumbnail if applicable.
+            weUtils.forwardToThumbnail(img);
             return loadedImg;
         }
         return img;
@@ -6730,6 +6732,8 @@ registry.ImageTools = ImageHandlerOption.extend({
                 img.dataset.mimetype = img.dataset.originalMimetype;
                 delete img.dataset.originalMimetype;
             }
+            // Also apply to carousel thumbnail if applicable.
+            weUtils.forwardToThumbnail(img);
         }
         img.classList.add('o_modified_image_to_save');
     },
@@ -6991,6 +6995,8 @@ registry.ImageTools = ImageHandlerOption.extend({
         if (save) {
             img.dataset.shapeColors = newColors.join(';');
         }
+        // Also apply to carousel thumbnail if applicable.
+        weUtils.forwardToThumbnail(img);
     },
     /**
      * Sets the image in the supplied SVG and replace the src with a dataURL

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -3546,6 +3546,8 @@ export class Wysiwyg extends Component {
             delete el.dataset.bgSrc;
         } else {
             el.setAttribute('src', newAttachmentSrc);
+            // Also update carousel thumbnail.
+            weUtils.forwardToThumbnail(el);
         }
     }