[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:
@@ -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>',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user