From 0755d724332c1c9a44d148b5bc955414d21df545 Mon Sep 17 00:00:00 2001
From: David Monjoie <dmo@odoo.com>
Date: Wed, 10 Aug 2022 08:01:00 +0000
Subject: [PATCH] [FIX] web_editor: fix colorpicker reverting history

The colorpickers forcefully reset the current history step to revert the
color change while previewing colors. This works when the only change in
the current step is in fact the colorpicker. If other changes already
existed in the current step however, they will be reverted as well. This
commit fixes the issue by introducing the concept of stashing mutations to
avoid that these be reverted. They can be unstashed later on when the
system is done abusing the revert mechanism.

task-2921844

closes odoo/odoo#97973

X-original-commit: cc280522d590c3ed257e7c6c495008e8986b2bf3
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>
---
 .../js/editor/odoo-editor/src/OdooEditor.js   | 20 +++++++++++++++++++
 .../static/src/js/wysiwyg/wysiwyg.js          |  6 ++++++
 2 files changed, 26 insertions(+)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
index d7a0ad0b158..76dc6a61234 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
@@ -1172,6 +1172,26 @@ export class OdooEditor extends EventTarget {
     historyUnpauseSteps() {
         this._historyStepsActive = true;
     }
+    /**
+     * Stash the mutations of the current step to re-apply them later.
+     */
+    historyStash() {
+        if (!this._historyStashedMutations) {
+            this._historyStashedMutations = [];
+        }
+        this._historyStashedMutations.push(...this._currentStep.mutations);
+        this._currentStep.mutations = [];
+    }
+    /**
+     * Unstash the previously stashed mutations into the current step.
+     */
+    historyUnstash() {
+        if (!this._currentStep.mutations) {
+            this._currentStep.mutations = [];
+        }
+        this._currentStep.mutations.unshift(...this._historyStashedMutations);
+        this._historyStashedMutations = [];
+    }
     _historyClean() {
         this._historySteps = [];
         this._currentStep = {
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 105f4939f38..5c72c19cb78 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1523,6 +1523,10 @@ const Wysiwyg = Widget.extend({
                     const selection = this.odooEditor.document.getSelection();
                     const range = selection.rangeCount && selection.getRangeAt(0);
                     const hadNonCollapsedSelection = range && !selection.isCollapsed;
+                    // The color_leave event will revert the mutations with
+                    // `historyRevertCurrentStep`. We must stash the current
+                    // mutations to prevent them from being reverted.
+                    this.odooEditor.historyStash();
                     colorpicker = new ColorPaletteWidget(this, {
                         excluded: ['transparent_grayscale'],
                         $editable: $(this.odooEditor.editable), // Our parent is the root widget, we can't retrieve the editable section from it...
@@ -1535,6 +1539,8 @@ const Wysiwyg = Widget.extend({
                         if (hadNonCollapsedSelection) {
                             this.odooEditor.historyResetLatestComputedSelection(true);
                         }
+                        // Unstash the mutations now that the color is picked.
+                        this.odooEditor.historyUnstash();
                         this._processAndApplyColor(eventName, ev.data.color);
                         this._updateEditorUI();
                     });