[FIX] web_editor: update editor value when changing records

Before this commit
1) click on a record in a list view
2) change the html field of a record
3) click on the top right arrow to change the next record
4) click on the top right arrow to change the previous record
5) click on the top right arrow to change the previous record

The value is not updated corretly at step 4, retaining the value from the
previous record. The wrong value is then saved at step 5.

After this commit
Properly reset the HtmlField property `currentEditingValue` when
the update of props value does not comes from the editor.

X-original-commit: 39d02c3cdc2d4256b62cd6414369a8cf82efff48
Part-of: odoo/odoo#103034

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

@@ -5,7 +5,7 @@ import { _lt } from "@web/core/l10n/translation";
 import { standardFieldProps } from "@web/views/fields/standard_field_props";
 import { initializeDesignTabCss } from "mass_mailing.design_constants";
 import { toInline } from "web_editor.convertInline";
-import { loadBundle } from "@web/core/assets";
+import { loadBundle, loadJS } from "@web/core/assets";
 import { qweb } from 'web.core';
 import { useService } from "@web/core/utils/hooks";
 import { buildQuery } from "web.rpc";
@@ -16,6 +16,7 @@ import { MassMailingMobilePreviewDialog } from "./mass_mailing_mobile_preview";
 import { getRangePosition } from '@web_editor/js/editor/odoo-editor/src/utils/utils';
 
 const {
+    onWillStart,
     useEffect,
     useSubEnv,
     onWillUpdateProps,
@@ -32,6 +33,9 @@ export class MassMailingHtmlField extends HtmlField {
         this.rpc = useService('rpc');
         this.dialog = useService('dialog');
 
+        // Load html2canvas for toInline.
+        onWillStart(() => loadJS('/web_editor/static/lib/html2canvas.js'));
+
         onWillUpdateProps(() => {
             if (this.props.record.data.mailing_model_id && this.wysiwyg) {
                 this._hideIrrelevantTemplates();

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

@@ -2,7 +2,6 @@
 'use strict';
 
 import { isBlock, rgbToHex } from '../editor/odoo-editor/src/utils/utils';
-import { loadJS } from '@web/core/assets';
 
 /* global html2canvas */
 
@@ -633,7 +632,6 @@ async function toInline($editable, cssRules, $iframe) {
  * @param {Element} editable
  */
 async function flattenBackgroundImages(editable) {
-    await loadJS('/web_editor/static/lib/html2canvas.js');
     for (const backgroundImage of editable.querySelectorAll('*[style*=background-image]')) {
         if (backgroundImage.parentElement) { // If the image was nested, we removed it already.
             const canvas = await html2canvas(backgroundImage);

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

@@ -21,6 +21,7 @@ import {
     getRangePosition
 } from '@web_editor/js/editor/odoo-editor/src/utils/utils';
 import { toInline } from 'web_editor.convertInline';
+import { loadJS } from '@web/core/assets';
 const {
     markup,
     Component,
@@ -94,6 +95,7 @@ export class HtmlField extends Component {
                 this.cssReadonlyAsset = await ajax.loadAsset(this.props.cssReadonlyAssetId);
             }
             if (this.props.cssEditAssetId || this.props.isInlineStyle) {
+                await loadJS('/web_editor/static/lib/html2canvas.js');
                 this.cssEditAsset = await ajax.loadAsset(this.props.cssEditAssetId || 'web_editor.assets_edit_html_field');
             }
         });
@@ -101,6 +103,9 @@ export class HtmlField extends Component {
             if (!newProps.readonly && this.state.iframeVisible) {
                 this.state.iframeVisible = false;
             }
+            if (!this._selfUpdating) {
+                this.currentEditingValue = undefined;
+            }
         });
         useEffect(() => {
             (async () => {
@@ -253,7 +258,7 @@ export class HtmlField extends Component {
             }
         }
     }
-    updateValue() {
+    async updateValue() {
         const value = this.getEditingValue();
         const lastValue = (this.props.value || "").toString();
         if (value !== null && !(!lastValue && value === "<p><br></p>") && value !== lastValue) {
@@ -261,7 +266,9 @@ export class HtmlField extends Component {
                 this.props.setDirty(true);
             }
             this.currentEditingValue = value;
-            return this.props.update(value);
+            this._selfUpdating = true;
+            await this.props.update(value);
+            this._selfUpdating = false;
         }
     }
     async startWysiwyg(wysiwyg) {