[FIX] website_blog, *: restore blog/post cover edition

* web_editor, website

Editing the cover images or sizes was not working anymore. When it
worked, it was thanks to the 'o_dirty' class appearing magically on a
cover part... and that magic seems to be gone.

This commit fixes the problem by adding the 'o_dirty' class on all
elements whose content is changed, not only the editable ones (this is
the case for the blog cover: it is a non editable element whose bg
image can be changed).

Note: this also fixes the edition of multiple covers (of different blogs
or posts) at the same time (this could be backported in 12.0 if needed).

closes odoo/odoo#36999

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 17 insertions, 5 deletions

diff --git a/addons/web_editor/static/src/js/editor/rte.js b/addons/web_editor/static/src/js/editor/rte.js
index bfd7994b161..eecee43a5c6 100644
--- a/addons/web_editor/static/src/js/editor/rte.js
+++ b/addons/web_editor/static/src/js/editor/rte.js
@@ -323,11 +323,20 @@ var RTEWidget = Widget.extend({
         });
 
         // start element observation
-        $(document).on('content_changed', '.o_editable', function (ev) {
+        $(document).on('content_changed', function (ev) {
             self.trigger_up('rte_change', {target: ev.target});
+
+            // Add the dirty flag to the element that changed by either adding
+            // it on the highest editable ancestor or, if there is no editable
+            // ancestor, on the element itself (that element may not be editable
+            // but if it received a content_changed event, it should be marked
+            // as dirty to allow for custom savings).
             if (!ev.__isDirtyHandled) {
-                $(this).addClass('o_dirty');
                 ev.__isDirtyHandled = true;
+
+                var el = ev.target;
+                var dirty = el.closest('.o_editable') || el;
+                dirty.classList.add('o_dirty');
             }
         });
 
@@ -586,11 +595,16 @@ var RTEWidget = Widget.extend({
      *        page element)
      */
     _saveElement: function ($el, context, withLang) {
+        var viewID = $el.data('oe-id');
+        if (!viewID) {
+            return Promise.resolve();
+        }
+
         return this._rpc({
             model: 'ir.ui.view',
             method: 'save',
             args: [
-                $el.data('oe-id'),
+                viewID,
                 this._getEscapedElement($el).prop('outerHTML'),
                 $el.data('oe-xpath') || null,
             ],
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
index 4b095029432..df6d243ffc6 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
@@ -20,8 +20,6 @@ Wysiwyg.include({
             await this.editor.prependTo(this.$editor[0].ownerDocument.body);
             this.options.toolbarHandler.append(this.editor.$el);
             this.$el.on('content_changed', function (e) {
-                var $editable = $(e.target).closest('[data-oe-model], .o_editable');
-                $editable.addClass('o_dirty');
                 self.trigger_up('wysiwyg_change');
             });
         } else {