Skip to content

Commit

Permalink
[FIX] web_editor: remove empty classes and styles
Browse files Browse the repository at this point in the history 
This commit removes empty classes and styles from the editor on clean
for save.

Part-of: odoo#138062
  • Loading branch information
@Zynton
Zynton committed Oct 30, 2023
1 parent f67fb40 commit 1426e74
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 47 deletions.
7 changes: 7 additions & 0 deletions addons/web_editor/static/src/js/editor/odoo-editor/src/utils/sanitize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,13 @@ class Sanitize {
node.setAttribute('contenteditable', 'false');
}

// Remove empty class/style attributes.
for (const attributeName of ['class', 'style']) {
if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute(attributeName) && !node.getAttribute(attributeName)) {
node.removeAttribute(attributeName);
}
}

if (node.firstChild) {
this._parse(node.firstChild);
}
Expand Down
66 changes: 33 additions & 33 deletions addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4829,9 +4829,9 @@ X[]
'<td style="width: 30px;"><p><br></p></td>' +
'</tr>' +
'<tr style="height: 20px;">' +
'<td style="">ab</td>' +
'<td style="">cd</td>' +
'<td style="">ef[]</td>' +
'<td>ab</td>' +
'<td>cd</td>' +
'<td>ef[]</td>' +
'</tr></tbody></table>',
});
});
Expand Down Expand Up @@ -5629,23 +5629,23 @@ X[]
</tbody></table>`,
stepFunction: async editor => editor.execCommand('resetSize'),
contentAfter: `<table class="table table-bordered o_table"><tbody>
<tr style="">
<td style=""><p>[]<br></p></td>
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<tr>
<td><p>[]<br></p></td>
<td><p><br></p></td>
<td><p><br></p></td>
<td><p><br></p></td>
</tr>
<tr style="">
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<tr>
<td><p><br></p></td>
<td><p><br></p></td>
<td><p><br></p></td>
<td><p><br></p></td>
</tr>
<tr style="">
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<td style=""><p><br></p></td>
<tr>
<td><p><br></p></td>
<td><p><br></p></td>
<td><p><br></p></td>
<td><p><br></p></td>
</tr>
</tbody></table>`,
});
Expand Down Expand Up @@ -5684,28 +5684,28 @@ X[]
</tr></tbody></table>`,
stepFunction: async editor => editor.execCommand('resetSize'),
contentAfter: `<table class="table table-bordered o_table"><tbody>
<tr style="">
<td style=""><h1>[]TESTTEXT</h1></td>
<td style=""><p><br></p></td>
<td style="">
<tr>
<td><h1>[]TESTTEXT</h1></td>
<td><p><br></p></td>
<td>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</td>
</tr>
<tr style="">
<td style=""><p><br></p></td>
<td style="">
<tr>
<td><p><br></p></td>
<td>
<blockquote>TESTTEXT</blockquote>
</td>
<td style=""><p><br></p></td>
<td><p><br></p></td>
</tr>
<tr style="">
<td style=""><pre>codeTEST</pre></td>
<td style=""><p><br></p></td>
<td style="">
<tr>
<td><pre>codeTEST</pre></td>
<td><p><br></p></td>
<td>
<ol>
<li>text</li>
<li>text</li>
Expand Down Expand Up @@ -5736,17 +5736,17 @@ X[]
</tbody></table>`,
stepFunction: async editor => editor.execCommand('resetSize'),
contentAfter: `<table class="table table-bordered o_table"><tbody>
<tr style="">
<tr>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p>[]<br></p></td>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
</tr>
<tr style="">
<tr>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
</tr>
<tr style="">
<tr>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
<td style="background-color: rgb(206, 231, 247); color: rgb(0, 0, 255);"><p><br></p></td>
Expand Down
2 changes: 1 addition & 1 deletion addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -899,7 +899,7 @@ describe('Format', () => {
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('removeFormat'),
contentAfter: '<div><p><span style="">[ab]</span></p></div>',
contentAfter: '<div><p><span>[ab]</span></p></div>',
});
});
});
Expand Down
18 changes: 9 additions & 9 deletions addons/web_editor/static/src/js/editor/odoo-editor/test/spec/htmlTables.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,24 +221,24 @@ describe('Paste HTML tables', () => {
<tbody><tr>
<td class="">Italic
<td>Italic
then also BOLD</td>
<td class=""><s>Italic strike</s></td>
<td><s>Italic strike</s></td>
</tr>
<tr>
<td class="">Just bold Just Italic</td>
<td class="">Bold underline</td>
<td>Just bold Just Italic</td>
<td>Bold underline</td>
</tr>
<tr>
<td class="">Color text</td>
<td class=""><s>Color strike and underline</s></td>
<td>Color text</td>
<td><s>Color strike and underline</s></td>
</tr>
<tr>
<td class="">Color background</td>
<td class="">Color text on color background</td>
<td>Color background</td>
<td>Color text on color background</td>
</tr>
<tr>
<td class="">14pt MONO TEXT
<td>14pt MONO TEXT
</td>
</tr>
</tbody></table><p>
Expand Down
4 changes: 1 addition & 3 deletions addons/web_editor/static/src/js/editor/odoo-editor/test/spec/link.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -660,10 +660,8 @@ describe('Link', () => {
await testEditor(BasicEditor, {
contentBefore: '<p>a<a href="#/">b[]</a>c</p>',
stepFunction: async editor => {
const a = await clickOnLink(editor);
console.log(a.closest('.odoo-editor-editable').outerHTML);
await clickOnLink(editor);
await deleteBackward(editor);
console.log(a.closest('.odoo-editor-editable').outerHTML);
},
contentAfterEdit: '<p>a<a href="#/" data-oe-zws-empty-inline="" class="o_link_in_selection">' +
'<span data-o-link-zws="start" contenteditable="false">\u200B</span>' + // start zws
Expand Down
2 changes: 1 addition & 1 deletion addons/web_editor/static/tests/field_html_tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ QUnit.module('web_editor', {}, function () {
await testUtils.dom.click($('#toolbar .note-back-color-preview [style="background-color: var(--we-cp-o-color-3);"]'));

assert.strictEqual($field.find('.note-editable').html(),
'<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font style="" class="bg-o-color-3">oto to</font>to</p><p>tata</p>',
'<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font class="bg-o-color-3">oto to</font>to</p><p>tata</p>',
"should have rendered the field correctly in edit");

// Make sure the reset button works too
Expand Down

0 comments on commit 1426e74

Please sign in to comment.