[FIX] mass_mailing: auto save after image change

Issue:
======
Image changes aren't auto saved.

Steps to reproduce the issue:
=============================
- Add cover snippet and text-image snipets
- Change cover image or the image in the text-image snippet
- Don't click anywhere after that
- Switch tab to A/B testing for example
- Go back to mail body
- The image changes aren't saved

Origin of the issue and solution:
=================================

When we choose an image from the media dialog, we loose the focus from
the editable which means `onWysiwygBlur` is not called and as
consequence `commitChanges` isn't called too.

Since the flow of the destroy and the `commitChanges` in `onWysiwygBlur`
are in parallel, the following happens:
- We don't update the value in the blur flow because we will wait for
  some promises which may take some time and the component gets
  destroyed and we never call the `updateValue` at the end of the
  function.
- Now in the `commitChanges` coming from `onWillUnmount` we need to pass
  the `urgent` flag in mass_mailing too.

opw-3947516

closes odoo#177067

X-original-commit: 3f5232c
Signed-off-by: David Monjoie (dmo) <[email protected]>
Signed-off-by: Mahdi Cheikh Rouhou (macr) <[email protected]>

addons/mass_mailing/static/src/js/mass_mailing_html_field.js

@@ -121,18 +121,17 @@ export class MassMailingHtmlField extends HtmlField {
         popover.style.left = leftPosition + 'px';
     }
 
-    async commitChanges() {
+    async commitChanges(...args) {
         if (this.props.readonly || !this.isRendered) {
-            return super.commitChanges();
+            return super.commitChanges(...args);
         }
-        if (!this._isDirty()) {
+        if (!this._isDirty() || this._pendingCommitChanges) {
             // In case there is still a pending change while committing the
             // changes from the save button, we need to wait for the previous
             // operation to finish, otherwise the "inline field" of the mass
             // mailing might not be saved.
             return this._pendingCommitChanges;
         }
-
         this._pendingCommitChanges = (async () => {
             const codeViewEl = this._getCodeViewEl();
             if (codeViewEl) {
@@ -146,8 +145,7 @@ export class MassMailingHtmlField extends HtmlField {
             const $editable = this.wysiwyg.getEditable();
             this.wysiwyg.odooEditor.historyPauseSteps();
             await this.wysiwyg.cleanForSave();
-
-            await super.commitChanges();
+            await super.commitChanges(...args);
 
             const $editorEnable = $editable.closest('.editor_enable');
             $editorEnable.removeClass('editor_enable');
@@ -182,6 +180,7 @@ export class MassMailingHtmlField extends HtmlField {
 
             const fieldName = this.props.inlineField;
             await this.props.record.update({[fieldName]: inlineHtml});
+            this._pendingCommitChanges = false;
         })();
         return this._pendingCommitChanges;
     }

addons/mass_mailing/static/src/js/snippets.editor.js

@@ -153,7 +153,7 @@ export class MassMailingSnippetsMenu extends snippetsEditor.SnippetsMenu {
             $oEditable.attr('contenteditable', true);
         }
         // Refocus again to save updates when calling `_onWysiwygBlur`
-        this.$editable.get(0).ownerDocument.defaultView.focus();
+        this.$editable.focus();
     }
     /**
      * @override

addons/web_editor/static/src/js/backend/html_field.js

@@ -390,7 +390,7 @@ export class HtmlField extends Component {
                     // Avoid listening to changes made during the _toInline process.
                     toInlinePromise = this._toInline();
                 }
-                if (urgent) {
+                if (urgent && status(this) !== 'destroyed') {
                     await this.updateValue();
                 }
                 await savePendingImagesPromise;

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

@@ -8306,6 +8306,7 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
         this.selectStyle(false, combined, {
             cssProperty: 'background-image',
         });
+        this.options.wysiwyg.odooEditor.editable.focus();
     },
 });
 

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

@@ -1769,7 +1769,7 @@ export class Wysiwyg extends Component {
             this.odooEditor.unbreakableStepUnactive();
             this.odooEditor.historyStep();
             // Refocus again to save updates when calling `_onWysiwygBlur`
-            params.node.ownerDocument.defaultView.focus();
+            this.odooEditor.editable.focus();
         } else {
             return this.odooEditor.execCommand('insert', element);
         }