[FIX] web_editor: fix replacing media leaving unexpected elements

Previously, changing a media from a video/icon/document to a different
type would leave empty elements in the DOM, this is because summernote's
range API `range.insertNode` function deletes the content but not the
structure (HTML elements).

This commit fixes that by using jQuery's replaceWith method instead of
summernote's insertNode when a media was found, and only using
summernote in case no media was found (eg. a text range).

Part of: odoo/odoo#60450

X-original-commit: 63f80995a05eeab1061b769c7733a1cfa98c726e

1 files changed, 9 insertions, 4 deletions

diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 6ea8f1b984b..cc238b34592 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -448,10 +448,15 @@ eventHandler.modules.imageDialog.showImageDialog = function ($editable) {
             onUpload: $editable.data('callbacks').onUpload,
             noVideos: options && options.noVideos,
         },
-        onSave: function (media) {
-            if(media && !document.body.contains(media)) {
-            r.insertNode(media);
-            };
+        onSave: function (newMedia) {
+            if (!newMedia) {
+                return;
+            }
+            if (media) {
+                $(media).replaceWith(newMedia);
+            } else {
+                r.insertNode(newMedia);
+            }
         },
     });
     return new $.Deferred().reject();