From cbbe2029bae054dd28286a002041a538a597255f Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Wed, 11 May 2022 09:05:32 +0000
Subject: [PATCH] [FIX] web_editor: prevent sanitize from grouping font image
 wrappers

The HTML sanitization regroups similar elements into a single one.
For 'style-inline' HTML fields, the font awesome icons are converted
to images within spans.
Because of this, when sanitizing a "5 Stars" block in a 'style-inline'
HTML field, the spans are grouped and all the images end up inside a
single span, with:
- each image being `display: block;` and
- the global span having a fixed width equal to a single image's width.
This turns the horizontal succession of stars into a vertical one.

This commit adds the `oe_unbreakable` class to the image wrapping spans
to prevent sanitize from grouping them into a single one.

Note that this commit does not address the issue that upon a further
edit of the field, the Stars block is not recognized anymore. This
would require a `convert_from_inline` reverting operation which would
change many other behaviors.

Steps to reproduce:
- Go to user profile.
- Edit signature.
- Insert a "5 Stars" block (i.e. use the "/5" command).
- Save.
=> Stars became vertical.

task-2845963

X-original-commit: 9bf0b9872056e5f69a9c912825b863e0a353d5f5
Part-of: odoo/odoo#96071
---
 addons/web_editor/static/src/js/backend/convert_inline.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 31316c5def4..942f100b2ae 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -709,7 +709,10 @@ function fontToImg($editable) {
             wrapper.style.setProperty('height', height + 'px');
             wrapper.style.setProperty('vertical-align', 'middle');
             wrapper.style.setProperty('background-color', image.style.backgroundColor);
-            wrapper.setAttribute('class', font.getAttribute('class').replace(new RegExp('(^|\\s+)' + icon + '(-[^\\s]+)?', 'gi'), '')); // remove inline font-awsome style);
+            wrapper.setAttribute('class',
+                'oe_unbreakable ' + // prevent sanitize from grouping image wrappers
+                font.getAttribute('class').replace(new RegExp('(^|\\s+)' + icon + '(-[^\\s]+)?', 'gi'), '') // remove inline font-awsome style
+            );
         } else {
             font.remove();
         }