From 7f35c48ef5f4eb625c79ded4c8b9667ce0eb8732 Mon Sep 17 00:00:00 2001
From: Odoo <maad@odoo.com>
Date: Fri, 9 Jun 2023 04:48:26 +0000
Subject: [PATCH] [FIX] web_editor: strange padding when background color is
 reset

Before this commit:

On applying background or on remove background color, strange padding
is added on the text.

After this commit:

Now, padding is not added when background is colored is applied or background
color is removed.

task-3237693

closes odoo/odoo#138143

X-original-commit: 29a40a30f3bf7a4a3a205e54fb84e569691d961f
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../odoo-editor/src/commands/commands.js      |  6 ++--
 .../odoo-editor/test/spec/color.test.js       | 36 +++++++++++++++++++
 .../static/src/js/wysiwyg/wysiwyg.js          |  4 +--
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
index a3cc1137074..6b98e2a3c7d 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
@@ -51,8 +51,8 @@ import {
     resetOuids,
 } from '../utils/utils.js';
 
-const TEXT_CLASSES_REGEX = /\btext-[^\s]*\b/g;
-const BG_CLASSES_REGEX = /\bbg-[^\s]*\b/g;
+const TEXT_CLASSES_REGEX = /\btext-[^\s]*\b/;
+const BG_CLASSES_REGEX = /\bbg-[^\s]*\b/;
 
 function align(editor, mode) {
     const sel = editor.document.getSelection();
@@ -620,7 +620,7 @@ export const editorCommands = {
         const fontsSet = new Set(fonts);
         for (const font of fontsSet) {
             colorElement(font, color, mode);
-            if (!hasColor(font, mode) && !font.hasAttribute('style')) {
+            if ((!hasColor(font, 'color') && !hasColor(font,'backgroundColor')) && (!font.hasAttribute('style') || !color)) {
                 for (const child of [...font.childNodes]) {
                     font.parentNode.insertBefore(child, font);
                 }
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js
index 3d8299794e3..0210f31be74 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js
@@ -106,6 +106,42 @@ describe('applyColor', () => {
             `),
         });
     });
+    it('should remove font tag after removing font color', async () => {
+        await testEditor(BasicEditor, {
+            contentBefore: '<p><font style="color: rgb(255, 0, 0);">[abcabc]</font></p>',
+            stepFunction: setColor('', 'color'),
+            contentAfter: '<p>[abcabc]</p>',
+        });
+        await testEditor(BasicEditor, {
+            contentBefore: '<p><font class="text-400">[abcabc]</font></p>',
+            stepFunction: setColor('', 'color'),
+            contentAfter: '<p>[abcabc]</p>',
+        });
+    });
+    it('should remove font tag after removing background color applied as style', async () => {
+        await testEditor(BasicEditor, {
+            contentBefore: '<p><font style="background-color: rgb(255, 0, 0);">[abcabc]</font></p>',
+            stepFunction: setColor('', 'backgroundColor'),
+            contentAfter: '<p>[abcabc]</p>',
+        });
+        await testEditor(BasicEditor, {
+            contentBefore: '<p><font class="bg-200">[abcabc]</font></p>',
+            stepFunction: setColor('', 'backgroundColor'),
+            contentAfter: '<p>[abcabc]</p>',
+        });
+    });
+    it('should remove font tag if font-color and background-color both are removed one by one', async () => {
+        await testEditor(BasicEditor, {
+            contentBefore: '<p><font style="color: rgb(255, 0, 0);" class="bg-200">[abcabc]</font></p>',
+            stepFunction: setColor('','backgroundColor') && setColor('','color'),
+            contentAfter: '<p>[abcabc]</p>',
+        });
+        await testEditor(BasicEditor, {
+            contentBefore: '<p><font style="background-color: rgb(255, 0, 0);" class="text-900">[abcabc]</font></p>',
+            stepFunction: setColor('','color') && setColor('','backgroundColor'),
+            contentAfter: '<p>[abcabc]</p>',
+        });
+    });
 });
 describe('rgbToHex', () => {
     it('should convert an rgb color to hexadecimal', async () => {
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 813acbe5572..160b364841d 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1880,9 +1880,7 @@ export class Wysiwyg extends Component {
         this.odooEditor.historyStash();
     }
     _processAndApplyColor(colorType, color, previewMode) {
-        if (!color) {
-            color = 'inherit';
-        } else if (!isCSSColor(color) && !weUtils.isColorGradient(color)) {
+        if (color && !isCSSColor(color) && !weUtils.isColorGradient(color)) {
             color = (colorType === "text" ? 'text-' : 'bg-') + color;
         }
         const coloredElements = this.odooEditor.execCommand('applyColor', color, colorType === 'text' ? 'color' : 'backgroundColor', this.lastMediaClicked);