pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: incomplete style removal on clear format

Browse Source 
Before this commit:
When using the removeFormat button, the backgroundColor and
foregroundColor were not completely removed.

After this commit:
The removeFormat button will completely remove all the styles applied to it.

task-3344762

closes odoo/odoo#155146

X-original-commit: 9c4194ad3387c55d39ec7bbef1c6414893098c6e
Signed-off-by: Antoine Guenet (age) <age@odoo.com>
This commit is contained in:
maad-odoo
2024-02-23 06:47:45 +00:00
parent cdb8a0bee4
commit c8d053f271
2 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
+11 -2
View File
@@ -433,14 +433,23 @@ export const editorCommands = {
textAlignStyles.set(block, block.style.textAlign);
}
});
// Calling `document.execCommand` will cause an input event with the
// input type "formatRemove". This would cause a new history step to be
// created in the middle of the process, which we prevent here.
editor.historyPauseSteps();
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 = '';
if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('color')) {
node.removeAttribute('color');
}
const element = closestElement(node);
element.style.removeProperty('color');
element.style.removeProperty('background');
}
textAlignStyles.forEach((textAlign, block) => {
block.style.setProperty('text-align', textAlign);
});
editor.historyUnpauseSteps();
},
// Align
addons/web_editor/static/src/js/editor/odoo-editor/test/spec/format.test.js
+28
View File
@@ -949,6 +949,34 @@ describe('Format', () => {
contentAfter: '<div><p>[ab]</p></div>',
});
});
it('should remove all the colors for the text separated by Shift+Enter when using removeFormat button', async () => {
await testEditor(BasicEditor, {
contentBefore: `<div><h1><font style="color: rgb(255, 0, 0);">[abc</font><br><font style="color: rgb(255, 0, 0);">abc</font><br><font style="color: rgb(255, 0, 0);">abc</font><br><font style="color: rgb(255, 0, 0);">abc]</font></h1></div>`,
stepFunction: editor => editor.execCommand('removeFormat'),
contentAfter: `<div><h1>[abc<br>abc<br>abc<br>abc]</h1></div>`
});
await testEditor(BasicEditor, {
contentBefore: `<div><h1><font style="background-color: rgb(255, 0, 0);">[abc</font><br><font style="background-color: rgb(255, 0, 0);">abc</font><br><font style="background-color: rgb(255, 0, 0);">abc]</font></h1></div>`,
stepFunction: editor => editor.execCommand('removeFormat'),
contentAfter: `<div><h1>[abc<br>abc<br>abc]</h1></div>`
});
})
it('should remove all the colors for the text separated by Enter when using removeFormat button' , async () => {
await testEditor(BasicEditor, {
contentBefore: `<div><h1><font style="background-color: rgb(255, 0, 0);">[abc</font></h1><h1><font style="background-color: rgb(255, 0, 0);">abc</font></h1><h1><font style="background-color: rgb(255, 0, 0);">abc]</font></h1></div>`,
stepFunction: editor => editor.execCommand('removeFormat'),
contentAfter: `<div><h1>[abc</h1><h1>abc</h1><h1>abc]</h1></div>`
});
await testEditor(BasicEditor, {
contentBefore: `<div><h1><font style="color: rgb(255, 0, 0);">[abc</font></h1><h1><font style="color: rgb(255, 0, 0);">abc</font></h1><h1><font style="color: rgb(255, 0, 0);">abc]</font></h1></div>`,
stepFunction: editor => editor.execCommand('removeFormat'),
contentAfter: `<div><h1>[abc</h1><h1>abc</h1><h1>abc]</h1></div>`
});
});
});
describe('zws', () => {
it('should insert a span zws when toggling a formatting command twice', () => {