[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>

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();
         }

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",