[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>
This commit is contained in:
Deependra Solanki
2024-02-09 11:57:30 +00:00
parent aa2e1e8db1
commit 83fe6fa716
2 changed files with 41 additions and 4 deletions
@@ -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);
@@ -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>',
});
});
});
});