From f0e3682b800195b7adab8ccca20cb2e294289d9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Thu, 16 Nov 2023 11:03:28 +0100
Subject: [PATCH] [FIX] website: consider `<span>` icons in Social Media
 snippet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the Social Media snippet options, only icons with a `<i>` tag are
considered when updating the social media classes (when adding a new
social network by copying the first one and when replacing the icon by
another one matching the URL). However, there are cases where the icon
is a `<span>` element (with a `fa` class) and not a `<i>`.

For example:
- Replace a social network icon by a real image.
- Re-replace this image by an icon.
=> the icon element tag is `<span>` and not `<i>`.

In this case, after setting its style correctly (e.g. adding the round
shape) to make it look like the other icons, we notice that it does not
behave like the other ones:
- It is not aligned with the other icons, because the CSS rule aligning
them only targets `<i>`.
- Its icon is not replaced by a matching one when changing the URL with
a "relevant" one (e.g. google, facebook).

This commit considers `<span>` icons in the Social Media options, in
addition to `<i>` icons, in order for them to all behave the same way.

opw-3538230

closes odoo/odoo#144076

X-original-commit: a8b5c3045bea0227304306e19ed9d50cf497f518
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
---
 addons/website/static/src/snippets/s_social_media/000.scss | 2 +-
 .../website/static/src/snippets/s_social_media/options.js  | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/addons/website/static/src/snippets/s_social_media/000.scss b/addons/website/static/src/snippets/s_social_media/000.scss
index b5b1d34e3b0..ce1574f99ce 100644
--- a/addons/website/static/src/snippets/s_social_media/000.scss
+++ b/addons/website/static/src/snippets/s_social_media/000.scss
@@ -8,7 +8,7 @@
         margin: 0 .4rem 0 0;
     }
     a {
-        i.fa {
+        i.fa, span.fa {
             display: flex;
             justify-content: center;
             align-items: center;
diff --git a/addons/website/static/src/snippets/s_social_media/options.js b/addons/website/static/src/snippets/s_social_media/options.js
index 32e3d46df69..f4965033be1 100644
--- a/addons/website/static/src/snippets/s_social_media/options.js
+++ b/addons/website/static/src/snippets/s_social_media/options.js
@@ -4,6 +4,7 @@ import fonts from '@web_editor/js/wysiwyg/fonts';
 import weUtils from '@web_editor/js/common/utils';
 import options from '@web_editor/js/editor/snippets.options';
 import { _t } from "@web/core/l10n/translation";
+import { ICON_SELECTOR } from "@web_editor/js/editor/odoo-editor/src/utils/utils";
 
 let dbSocialValues;
 let dbSocialValuesProm;
@@ -129,7 +130,7 @@ options.registry.SocialMedia = options.Class.extend({
                         anchorEl = this.$target[0].querySelector(':scope > a').cloneNode(true);
                         this._removeSocialMediaClasses(anchorEl);
                     }
-                    const iEl = anchorEl.querySelector("i");
+                    const iEl = anchorEl.querySelector(ICON_SELECTOR);
                     if (iEl) {
                         const faIcon = isDbField ? `fa-${entry.media}` : 'fa-pencil';
                         iEl.classList.add(faIcon);
@@ -156,7 +157,7 @@ options.registry.SocialMedia = options.Class.extend({
                         // Propose an icon only for valid URLs (no mailto).
                         const socialMedia = this._findRelevantSocialMedia(entry.display_name);
                         if (socialMedia) {
-                            const iEl = anchorEl.querySelector('i');
+                            const iEl = anchorEl.querySelector(ICON_SELECTOR);
                             this._removeSocialMediaClasses(anchorEl);
                             anchorEl.classList.add(`s_social_media_${socialMedia}`);
                             if (iEl) {
@@ -347,7 +348,7 @@ options.registry.SocialMedia = options.Class.extend({
     _removeSocialMediaClasses(anchorEl) {
         let regx = new RegExp('\\b' + 's_social_media_' + '[^1-9][^ ]*[ ]?\\b');
         anchorEl.className = anchorEl.className.replace(regx, '');
-        const iEl = anchorEl.querySelector('i');
+        const iEl = anchorEl.querySelector(ICON_SELECTOR);
         if (iEl) {
             regx = new RegExp('\\b' + 'fa-' + '[^1-9][^ ]*[ ]?\\b');
             // Remove every fa classes except fa-x sizes.