[FIX] web_editor: properly unformat text at the start of the DOM

When trying to remove a format (bold, italic, underline), collapsed at
the start of the DOM, an error occurred because of a wrong range.
Ex.: `<p><b>Odoo</b></p>` -> when clicking before the word "Odoo", then
clicking the "bold" button, we expect to be able to start writing in
plain (not bold) text (for that, the DOM has to look like this:
`<p>\u200B<b>Odoo</b></p>`). We now have that proper behavior without
the accompanying error message and loss of selection.

Task ID: 1978515

closes odoo/odoo#33038

Signed-off-by: Pierre Paridans <pparidans@users.noreply.github.com>

2 files changed, 18 insertions, 2 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/plugin/text.js b/addons/web_editor/static/src/js/wysiwyg/plugin/text.js
index 16e22939cd4..f2834c531f7 100644
--- a/addons/web_editor/static/src/js/wysiwyg/plugin/text.js
+++ b/addons/web_editor/static/src/js/wysiwyg/plugin/text.js
@@ -229,8 +229,11 @@ var TextPlugin = AbstractPlugin.extend({
                 $(br).before(emptyText).remove();
                 range = this.context.invoke('editor.setRange', emptyText, 0, emptyText, 1);
             } else {
+                var offset = range.so;
                 this.context.invoke('HelperPlugin.insertTextInline', '\u200B');
-                range.eo += 1;
+                range = this.context.invoke('editor.createRange');
+                range.so = offset;
+                range.eo = offset + 1;
             }
             range.select();
         }
diff --git a/addons/web_editor/static/tests/wysiwyg_tests.js b/addons/web_editor/static/tests/wysiwyg_tests.js
index 7b0b5899cef..5eea0df9614 100644
--- a/addons/web_editor/static/tests/wysiwyg_tests.js
+++ b/addons/web_editor/static/tests/wysiwyg_tests.js
@@ -111,7 +111,7 @@ QUnit.test('Magic wand', function (assert) {
 
 QUnit.test('Font style', function (assert) {
     var done = assert.async();
-    assert.expect(56);
+    assert.expect(58);
 
     return weTestUtils.createWysiwyg({
         debug: false,
@@ -284,6 +284,19 @@ QUnit.test('Font style', function (assert) {
                     end: 'p:contents()[3]->2',
                 },
             },
+            {
+                name: "Click BOLD: bold -> normal (at start of dom)",
+                content: '<p><b>abc</b></p>',
+                start: 'b:contents()[0]->0',
+                do: function () {
+                    $btnBold.mousedown().click();
+                },
+                test: {
+                    content: '<p>\u200B<b>abc</b></p>',
+                    start: 'p:contents()[0]->1',
+                    end: 'p:contents()[0]->1',
+                },
+            },
             /* ITALIC */
             {
                 name: "Click ITALIC: bold -> bold + italic",