From 4cedbe173ca6ec15b78bec06f8457412804a3a28 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 20 Nov 2020 12:23:08 +0000
Subject: [PATCH] [FIX] web_editor: properly update the image options on
 replace image

Prior to this fix, replacing a jpeg image with an svg illustration
didn't properly update its mimetype in its dataset. As an effect, the
jpeg image options still appeared, that were irrelevant for an svg.

This was caused by a premature update of the image in Jabberwock's vdom,
before the mimetype was updated, and by the fact that the current image
was not being passed to the constructor of the media dialog, causing it
to create the image from scratch on save instead of replacing the src
attribute of the current image like it did before introducing
Jabberwock.

closes odoo/odoo#62082

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js     |  2 +-
 .../static/src/js/editor/snippets.options.js    |  3 ++-
 .../web_editor/static/src/js/wysiwyg/wysiwyg.js | 17 ++++++++++++-----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 340aed502f8..deeec7a9c79 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2214,7 +2214,7 @@ var SnippetsMenu = Widget.extend({
             }).parent().addClass('o_default_snippet_text');
     },
     /**
-     * Changes the content of the left panel and selects a tab.
+     * Changes the content of the right panel and selects a tab.
      *
      * @private
      * @param {htmlString | Element | Text | Array | jQuery} [content]
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 fd9e1dbe725..fd5560d1374 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3408,7 +3408,6 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         await this._rerenderXML();
         this._getImg().dataset.resizeWidth = this.optimizedWidth;
         await this._applyOptions();
-        await this.updateUI();
     },
     /**
      * Returns the image that is currently being modified.
@@ -3491,6 +3490,8 @@ registry.ImageOptimize = ImageHandlerOption.extend({
     async _onImageChanged(ev) {
         this.trigger_up('snippet_edition_request', {exec: async () => {
             await this._autoOptimizeImage();
+            await this.updateChangesInWysiwyg();
+            await this.updateUI();
             this.trigger_up('cover_update');
         }});
     },
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index c62fadfd4af..586a26b8478 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -715,10 +715,12 @@ var Wysiwyg = Widget.extend({
         const node = nodes[0];
         let $baseNode;
 
-        if (nodes.length === 1){
+        if (nodes.length === 1) {
             if (node instanceof JWEditorLib.FontAwesomeNode || node instanceof JWEditorLib.OdooVideoNode) {
-                const $originalDomNode = this.editorHelpers.getDomNodes(node).filter(dom => dom.nodeType === Node.ELEMENT_NODE);
-                $baseNode = $($originalDomNode).clone();
+                const originalDomNode = this.editorHelpers.getDomNodes(node).filter(dom => dom.nodeType === Node.ELEMENT_NODE);
+                $baseNode = $(originalDomNode).clone();
+            } else if (node instanceof JWEditorLib.ImageNode) {
+                $baseNode = $(this.editorHelpers.getDomNodes(node).filter(dom => dom.nodeType === Node.ELEMENT_NODE));
             }
             if (node instanceof JWEditorLib.FontAwesomeNode) {
                 params.htmlClass = [...$baseNode[0].classList].filter((className) => {
@@ -733,8 +735,13 @@ var Wysiwyg = Widget.extend({
         let mediaDialog = new weWidgets.MediaDialog(this, params, $baseNode);
         mediaDialog.open();
         mediaDialog.on('save', this, async (element) => {
-            if (params.htmlClass) element.className += " " + params.htmlClass;
-            return this.editor.execCommand('insertMedia', { element: element });
+            // If we're not _replacing_ a media (done by media dialog), insert it.
+            if (!$baseNode || $baseNode.length !== 1 || !$(element).is($baseNode[0].nodeName)) {
+                if (params.htmlClass) {
+                    element.className += " " + params.htmlClass;
+                }
+                await this.editor.execCommand('insertMedia', { element: element });
+            }
         });
     },
     async saveContent(context = this.editor) {