From c8d053f271119191e8108aea2c59be92d17e9272 Mon Sep 17 00:00:00 2001
From: maad-odoo <maad@odoo.com>
Date: Thu, 3 Aug 2023 16:55:03 +0530
Subject: [PATCH] [FIX] web_editor: incomplete style removal on clear format

Before this commit:
When using the removeFormat button, the backgroundColor and
foregroundColor were not completely removed.

After this commit:
The removeFormat button will completely remove all the styles applied to it.

task-3344762

closes odoo/odoo#155146

X-original-commit: 9c4194ad3387c55d39ec7bbef1c6414893098c6e
Signed-off-by: Antoine Guenet (age) <age@odoo.com>
---
 .../odoo-editor/src/commands/commands.js      | 13 +++++++--
 .../odoo-editor/test/spec/format.test.js      | 28 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 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 37569552728..3e750c6d194 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
@@ -433,14 +433,23 @@ export const editorCommands = {
                 textAlignStyles.set(block, block.style.textAlign);
             }
         });
+        // Calling `document.execCommand` will cause an input event with the
+        // input type "formatRemove". This would cause a new history step to be
+        // created in the middle of the process, which we prevent here.
+        editor.historyPauseSteps();
         editor.document.execCommand('removeFormat');
         for (const node of getTraversedNodes(editor.editable)) {
-            // The only possible background image on text is the gradient.
-            closestElement(node).style.backgroundImage = '';
+            if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('color')) {
+                node.removeAttribute('color');
+            }
+            const element = closestElement(node);
+            element.style.removeProperty('color');
+            element.style.removeProperty('background');
         }
         textAlignStyles.forEach((textAlign, block) => {
             block.style.setProperty('text-align', textAlign);
         });
+        editor.historyUnpauseSteps();
     },
 
     // Align
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js
index 97dbaa0652f..7a3e25086b0 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js
@@ -949,6 +949,34 @@ describe('Format', () => {
                 contentAfter: '<div><p>[ab]</p></div>',
             });
         });
+        it('should remove all the colors for the text separated by Shift+Enter when using removeFormat button', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: `<div><h1><font style="color: rgb(255, 0, 0);">[abc</font><br><font style="color: rgb(255, 0, 0);">abc</font><br><font style="color: rgb(255, 0, 0);">abc</font><br><font style="color: rgb(255, 0, 0);">abc]</font></h1></div>`,
+                stepFunction: editor => editor.execCommand('removeFormat'),
+                contentAfter: `<div><h1>[abc<br>abc<br>abc<br>abc]</h1></div>`
+
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: `<div><h1><font style="background-color: rgb(255, 0, 0);">[abc</font><br><font style="background-color: rgb(255, 0, 0);">abc</font><br><font style="background-color: rgb(255, 0, 0);">abc]</font></h1></div>`,
+                stepFunction: editor => editor.execCommand('removeFormat'),
+                contentAfter: `<div><h1>[abc<br>abc<br>abc]</h1></div>`
+
+            });
+        })
+        it('should remove all the colors for the text separated by Enter when using removeFormat button' , async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: `<div><h1><font style="background-color: rgb(255, 0, 0);">[abc</font></h1><h1><font style="background-color: rgb(255, 0, 0);">abc</font></h1><h1><font style="background-color: rgb(255, 0, 0);">abc]</font></h1></div>`,
+                stepFunction: editor => editor.execCommand('removeFormat'),
+                contentAfter: `<div><h1>[abc</h1><h1>abc</h1><h1>abc]</h1></div>`
+
+            });
+            await testEditor(BasicEditor, {
+                contentBefore: `<div><h1><font style="color: rgb(255, 0, 0);">[abc</font></h1><h1><font style="color: rgb(255, 0, 0);">abc</font></h1><h1><font style="color: rgb(255, 0, 0);">abc]</font></h1></div>`,
+                stepFunction: editor => editor.execCommand('removeFormat'),
+                contentAfter: `<div><h1>[abc</h1><h1>abc</h1><h1>abc]</h1></div>`
+
+            });
+        });
     });
     describe('zws', () => {
         it('should insert a span zws when toggling a formatting command twice', () => {