From 9943931c6f3eed68281c569909d0566b2bbf0d78 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Thu, 18 Nov 2021 13:51:18 +0000
Subject: [PATCH] [FIX] web_editor: remove gradient background image when
 removing format

Before this commit the removeFormat command was only doing its default
native implementation, which did not clean the background-image CSS
property. Because of this, text-gradients became highlight gradients.

After this commit in addition to the default native implementation, the
removeFormat also clears the background-image CSS property.

Steps to reproduce:
- edit the website homepage
- drop a text snippet
- enter a new line of text
- set a text gradient on the new line
- switch the new line to Heading 1
=> new line has the gradient used as background

task-2741684 (was part of task-2666200)

closes odoo/odoo#83306

X-original-commit: 97da1c2106d2a0e76dff1353e56b74d70db55eb2
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/lib/odoo-editor/src/commands/commands.js    | 10 ++++++++--
 .../static/lib/odoo-editor/test/spec/editor.test.js    |  7 +++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/lib/odoo-editor/src/commands/commands.js b/addons/web_editor/static/lib/odoo-editor/src/commands/commands.js
index c4a4b4de663..dd4097b6d12 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/commands/commands.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/commands/commands.js
@@ -336,7 +336,7 @@ export const editorCommands = {
             ) {
                 setSelection(block, 0, block, nodeSize(block));
                 editor.historyPauseSteps();
-                editor.document.execCommand('removeFormat');
+                editor.execCommand('removeFormat');
                 editor.historyUnpauseSteps();
                 setTagName(block, tagName);
             } else {
@@ -373,7 +373,13 @@ export const editorCommands = {
     italic: editor => editor.document.execCommand('italic'),
     underline: editor => editor.document.execCommand('underline'),
     strikeThrough: editor => editor.document.execCommand('strikeThrough'),
-    removeFormat: editor => editor.document.execCommand('removeFormat'),
+    removeFormat: editor => {
+        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 = '';
+        }
+    },
 
     // Align
     justifyLeft: editor => align(editor, 'left'),
diff --git a/addons/web_editor/static/lib/odoo-editor/test/spec/editor.test.js b/addons/web_editor/static/lib/odoo-editor/test/spec/editor.test.js
index 84bee154759..fe9efdebfb3 100644
--- a/addons/web_editor/static/lib/odoo-editor/test/spec/editor.test.js
+++ b/addons/web_editor/static/lib/odoo-editor/test/spec/editor.test.js
@@ -2805,6 +2805,13 @@ X[]
                     contentAfter: '<div><h1>[ab]</h1></div>',
                 });
             });
+            it('should remove the background image while turning a p>font into a heading 1>span', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<div><p><font class="text-gradient" style="background-image: linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%);">[ab]</font></p></div>',
+                    stepFunction: editor => editor.execCommand('setTag', 'h1'),
+                    contentAfter: '<div><h1><span style="">[ab]</span></h1></div>',
+                });
+            });
         });
         describe('to heading 2', () => {
             it('should turn a heading 1 into a heading 2', async () => {