[FIX] web_editor: use color css name fix reset color

`_updateEditorUI` was reseting color to old or non css color value.
due to a race condition in the editor selection.

task-2654666

closes odoo/odoo#78499

X-original-commit: fd3791d79377b270ab98d646710ecc1d2f364810
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Sébastien Geelen <sebgeelen@users.noreply.github.com>

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

@@ -437,7 +437,7 @@ const Wysiwyg = Widget.extend({
                     }
                 }
             },
-        }
+        };
         return editorCollaborationOptions;
     },
     /**
@@ -707,7 +707,7 @@ const Wysiwyg = Widget.extend({
      * Set cursor to the editor latest position before blur or to the last editable node, ready to type.
      */
     focus: function () {
-        if(!this.odooEditor.historyResetLatestComputedSelection()) {
+        if (!this.odooEditor.historyResetLatestComputedSelection()) {
             // If the editor don't have an history step to focus to,
             // We place the cursor after the end of the editor exiting content.
             const range = document.createRange();
@@ -1345,14 +1345,16 @@ const Wysiwyg = Widget.extend({
             }, 400);
         }
         // Update color of already opened colorpickers.
-        for (let eventName in this.colorpickers) {
-            const selectedColor = this._getSelectedColor($, eventName);
-            if (selectedColor) {
-                // If the palette was already opened (e.g. modifying a gradient), the new DOM state
-                // must be reflected in the palette, but the tab selection must not be impacted.
-                this.colorpickers[eventName].setSelectedColor(null, selectedColor, false);
+        setTimeout(() => {
+            for (let eventName in this.colorpickers) {
+                const selectedColor = this._getSelectedColor($, eventName);
+                if (selectedColor) {
+                    // If the palette was already opened (e.g. modifying a gradient), the new DOM state
+                    // must be reflected in the palette, but the tab selection must not be impacted.
+                    this.colorpickers[eventName].setSelectedColor(null, selectedColor, false);
+                }
             }
-        }
+        }, 0);
     },
     _updateMediaJustifyButton: function (commandState) {
         if (!this.lastMediaClicked) {

addons/web_editor/static/tests/field_html_tests.js

@@ -263,7 +263,7 @@ QUnit.module('web_editor', {}, function () {
                 return openingProm;
             }
 
-
+            await new Promise((resolve)=>setTimeout(resolve, 50));
             await openColorpicker('#toolbar .note-back-color-preview');
             assert.ok($('.note-back-color-preview').hasClass('show'),
                 "should display the color picker");