[FIX] web_editor: prevent having wrong connectors when an icon change

Steps to reproduce the bug:
- Drop a block steps on a page
- Change one of the icons
- Change the color of the icon

=> The connectors are not correct anymore.

This is due to [this commit] changing the tag `<i class="fa...` to a
`<span class="fa...` when the user replaces an icon. The steps options
assume that `<i/>` tags will remain `<i/>` tags (as it was before
[this commit]). We should not change the tagName when changing the icon
of an `<i/>` tag. This is likely to break (s)css, options, public
widgets, ... This commit fixes this bug by ensuring that `<i/>` tags do
not become `<span>` tags when replacing the icon. Moreover it allows not
to recreate an editor when you change the icon.

[this commit]: https://github.com/odoo/odoo/commit/7fd0698cf765a79959566b51e33cb76bff83d344

task-3068834
opw-3123850

closes odoo/odoo#112252

X-original-commit: 93eeaf538c24e7b7ee304c4323cc27bf786f261b
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

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

@@ -1400,7 +1400,17 @@ const Wysiwyg = Widget.extend({
         }
 
         if (params.node) {
-            params.node.replaceWith(element);
+            const isIcon = (el) => el.matches('i.fa, span.fa');
+            const changedIcon = isIcon(params.node) && isIcon(element);
+            if (changedIcon) {
+                // Preserve tag name when changing an icon and not recreate the
+                // editors unnecessarily.
+                for (const attribute of element.attributes) {
+                    params.node.setAttribute(attribute.nodeName, attribute.nodeValue);
+                }
+            } else {
+                params.node.replaceWith(element);
+            }
             this.odooEditor.unbreakableStepUnactive();
             this.odooEditor.historyStep();
         } else {