From 83fe6fa7166b43372c582181e60003343cd27f49 Mon Sep 17 00:00:00 2001
From: Deependra Solanki <deso@odoo.com>
Date: Tue, 6 Feb 2024 18:34:56 +0530
Subject: [PATCH] [FIX] web_editor: do not carry attributes of list to new tag

Previously, when changing the tag of a text node within a list, it transferred
the list's attributes to the newly created tag. Ideally, this should only carry
over the attributes of paragraph-related elements and not of lists.

task-3609500

closes odoo/odoo#153328

X-original-commit: 58829be8fee0d3330427a467c62280b6d6edb147
Signed-off-by: Antoine Guenet (age) <age@odoo.com>
---
 .../js/editor/odoo-editor/src/utils/utils.js  | 10 +++---
 .../odoo-editor/test/spec/format.test.js      | 35 +++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
index 1a0fb45673d..4e30a1d516c 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
@@ -2106,10 +2106,12 @@ export function setTagName(el, newTagName) {
     if (el.tagName === newTagName) {
         return el;
     }
-    var n = document.createElement(newTagName);
-    var attr = el.attributes;
-    for (var i = 0, len = attr.length; i < len; ++i) {
-        n.setAttribute(attr[i].name, attr[i].value);
+    const n = document.createElement(newTagName);
+    if (paragraphRelatedElements.includes(el.nodeName)) {
+        const attributes = el.attributes;
+        for (const attr of attributes) {
+            n.setAttribute(attr.name, attr.value);
+        }
     }
     while (el.firstChild) {
         n.append(el.firstChild);
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 f9314b5631f..97dbaa0652f 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
@@ -1078,6 +1078,13 @@ describe('setTagName', () => {
                 contentAfter: '<table><tbody><tr><td><h1>[]a</h1></td><td><h1>b</h1></td><td><h1>c</h1></td></tr></tbody></table>',
             });
         });
+        it('should not transfer attributes of list to heading 1', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<ul><li class="nav-item">[abcd]</li></ul>',
+                stepFunction: editor => editor.execCommand('setTag', 'h1'),
+                contentAfter: '<ul><li class="nav-item"><h1>[abcd]</h1></li></ul>',
+            });
+        });
     });
     describe('to heading 2', () => {
         it('should turn a heading 1 into a heading 2', async () => {
@@ -1123,6 +1130,13 @@ describe('setTagName', () => {
                 contentAfter: '<table><tbody><tr><td><h2>[]a</h2></td><td><h2>b</h2></td><td><h2>c</h2></td></tr></tbody></table>',
             });
         });
+        it('should not transfer attributes of list to heading 2', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<ul><li class="nav-item">[abcd]</li></ul>',
+                stepFunction: editor => editor.execCommand('setTag', 'h2'),
+                contentAfter: '<ul><li class="nav-item"><h2>[abcd]</h2></li></ul>',
+            });
+        });
     });
     describe('to heading 3', () => {
         it('should turn a heading 1 into a heading 3', async () => {
@@ -1168,6 +1182,13 @@ describe('setTagName', () => {
                 contentAfter: '<table><tbody><tr><td><h3>[]a</h3></td><td><h3>b</h3></td><td><h3>c</h3></td></tr></tbody></table>',
             });
         });
+        it('should not transfer attributes of list to heading 3', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<ul><li class="nav-item">[abcd]</li></ul>',
+                stepFunction: editor => editor.execCommand('setTag', 'h3'),
+                contentAfter: '<ul><li class="nav-item"><h3>[abcd]</h3></li></ul>',
+            });
+        });
     });
     describe('to pre', () => {
         it('should turn a heading 1 into a pre', async () => {
@@ -1206,6 +1227,13 @@ describe('setTagName', () => {
                 contentAfter: '<pre>abcd<br>[]<br></pre>',
             });
         });
+        it('should not transfer attributes of list to pre', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<ul><li class="nav-item" id="test">[abcd]</li></ul>',
+                stepFunction: editor => editor.execCommand('setTag', 'pre'),
+                contentAfter: '<ul><li class="nav-item" id="test"><pre>[abcd]</pre></li></ul>',
+            });
+        });
     });
     describe('to blockquote', () => {
         it('should turn a blockquote into a paragraph', async () => {
@@ -1252,5 +1280,12 @@ describe('setTagName', () => {
                 contentAfter: '<table><tbody><tr><td><blockquote>[]a</blockquote></td><td><blockquote>b</blockquote></td><td><blockquote>c</blockquote></td></tr></tbody></table>',
             });
         });
+        it('should not transfer attributes of list to blockquote', async () => {
+            await testEditor(BasicEditor, {
+                contentBefore: '<ul><li class="nav-item" style="color: red;">[abcd]</li></ul>',
+                stepFunction: editor => editor.execCommand('setTag', 'blockquote'),
+                contentAfter: '<ul><li class="nav-item" style="color: red;"><blockquote>[abcd]</blockquote></li></ul>',
+            });
+        });
     });
 });