[FIX] web_editor: correct selection after applying a color

Ensure the selection in the fonts tags after `applyColor`, otherwise an
undetermined race condition could generate a wrong selection during
multiples call of `_processAndApplyColor` from the color picker.

task-2822221

closes odoo/odoo#92654

X-original-commit: 2b2aba49550cf7c2ba1914f03beef9cbdf60b166
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/web_editor/static/lib/odoo-editor/src/commands/commands.js

@@ -751,7 +751,7 @@ export const editorCommands = {
     applyColor: (editor, color, mode, element) => {
         if (element) {
             colorElement(element, color, mode);
-            return;
+            return [element];
         }
         const selection = editor.document.getSelection();
         let wasCollapsed = false;
@@ -821,6 +821,7 @@ export const editorCommands = {
             newSelection.removeAllRanges();
             newSelection.addRange(range);
         }
+        return fonts;
     },
     // Table
     insertTable: (editor, { rowNumber = 2, colNumber = 2 } = {}) => {

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

@@ -34,6 +34,7 @@ const rgbToHex = OdooEditorLib.rgbToHex;
 const preserveCursor = OdooEditorLib.preserveCursor;
 const closestElement = OdooEditorLib.closestElement;
 const setSelection = OdooEditorLib.setSelection;
+const endPos = OdooEditorLib.endPos;
 
 var id = 0;
 const faZoomClassRegex = RegExp('fa-[0-9]x');
@@ -1505,7 +1506,20 @@ const Wysiwyg = Widget.extend({
         } else if (!ColorpickerWidget.isCSSColor(color) && !weUtils.isColorGradient(color)) {
             color = (eventName === "foreColor" ? 'text-' : 'bg-') + color;
         }
-        this.odooEditor.execCommand('applyColor', color, eventName === 'foreColor' ? 'color' : 'backgroundColor', this.lastMediaClicked);
+        const fonts = this.odooEditor.execCommand('applyColor', color, eventName === 'foreColor' ? 'color' : 'backgroundColor', this.lastMediaClicked);
+
+        // Ensure the selection in the fonts tags, otherwise an undetermined
+        // race condition could generate a wrong selection later.
+        const first = fonts[0];
+        const last = fonts[fonts.length - 1];
+
+        const sel = this.odooEditor.document.getSelection();
+        sel.removeAllRanges();
+        const range = new Range();
+        range.setStart(first, 0);
+        range.setEnd(...endPos(last));
+        sel.addRange(range);
+
         const hexColor = this._colorToHex(color);
         this.odooEditor.updateColorpickerLabels({
             [eventName === 'foreColor' ? 'foreColor' : 'hiliteColor']: hexColor,

addons/web_editor/static/tests/field_html_tests.js

@@ -289,12 +289,12 @@ QUnit.module('web_editor', {}, function () {
                 '<p>t<font style="background-color: rgb(0, 255, 255);">oto toto </font>toto</p><p>tata</p>',
                 "should have rendered the field correctly in edit");
 
-            var fontContent = $field.find('.note-editable font').contents()[0];
+            var fontElement = $field.find('.note-editable font')[0];
             var rangeControl = {
-                sc: fontContent,
+                sc: fontElement,
                 so: 0,
-                ec: fontContent,
-                eo: fontContent.length,
+                ec: fontElement,
+                eo: 1,
             };
             range = Wysiwyg.getRange();
             assert.deepEqual(_.pick(range, 'sc', 'so', 'ec', 'eo'), rangeControl,
@@ -302,7 +302,7 @@ QUnit.module('web_editor', {}, function () {
 
             // select the text
             pText = $field.find('.note-editable p').first().contents()[2];
-            Wysiwyg.setRange(fontContent, 5, pText, 2);
+            Wysiwyg.setRange(fontElement.firstChild, 5, pText, 2);
             // text is selected
 
             await openColorpicker('#toolbar .note-back-color-preview');