From 9a67b3874ff8099e4321a32f4fc4b85017ab4ea4 Mon Sep 17 00:00:00 2001
From: Nicolas Bayet <nby@odoo.com>
Date: Mon, 10 Oct 2022 14:52:31 +0000
Subject: [PATCH] [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
---
 .../static/src/js/mass_mailing_html_field.js          |  6 +++++-
 .../static/src/js/backend/convert_inline.js           |  2 --
 addons/web_editor/static/src/js/backend/html_field.js | 11 +++++++++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
index 9fb32133cb7..a5f7f507c00 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js
+++ b/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();
diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index a6344dee577..44a8c189221 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/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);
diff --git a/addons/web_editor/static/src/js/backend/html_field.js b/addons/web_editor/static/src/js/backend/html_field.js
index 6e3b7b75608..25964dc0665 100644
--- a/addons/web_editor/static/src/js/backend/html_field.js
+++ b/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) {