From 0cce400c5ae82260d0bdadc7ba3145606cea1edd Mon Sep 17 00:00:00 2001 From: Stanislas Gueniffey Date: Sat, 20 May 2023 12:21:09 +0000 Subject: [PATCH] [FIX] web_editor: do not remove default styles Previously, when copy-pasting HTML with styles on styleable tags, those styles could still be removed by the editor if they had a default value. This was supposed to be a way to keep the DOM clean and lighter. However, styles with default values still serve a purpose when overriding non-default values inherited by their parents. Therefore, removing them was a conceptual mistake. One example in the editor where this purpose can be served is in tables where spans can override the style of the cell or parent span. This commit ensures we no longer remove style attributes because of their default value. Task-3332955 X-original-commit: 39acbc23929f6004e6cb5fe1059ccabf87799e8c Part-of: odoo/odoo#126248 --- .../src/js/editor/odoo-editor/src/OdooEditor.js | 16 +++------------- .../odoo-editor/test/spec/copyPaste.test.js | 4 ++-- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index ae5eee04a78..ec7c7a0c52d 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -174,15 +174,7 @@ export const CLIPBOARD_WHITELISTS = { ], attributes: ['class', 'href', 'src', 'target'], styledTags: ['SPAN', 'B', 'STRONG', 'I', 'S', 'U', 'FONT'], - styles: { - 'text-decoration': { defaultValues: ['', 'none'] }, - 'font-weight': { defaultValues: ['', '400'] }, - 'background-color': { defaultValues: ['', '#fff', '#ffffff', 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1)'] }, - 'color': { defaultValues: ['', '#000', '#000000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)'] }, - 'font-style': { defaultValues: ['', 'none', 'normal'] }, - 'text-decoration-line': { defaultValues: ['', 'none'] }, - 'font-size': { defaultValues: ['', '16px'] }, - } + styles: ['text-decoration', 'font-weight', 'background-color', 'color', 'font-style', 'text-decoration-line', 'font-size'] }; // Commands that don't require a DOM selection but take an argument instead. @@ -3191,9 +3183,7 @@ export class OdooEditor extends EventTarget { if (CLIPBOARD_WHITELISTS.styledTags.includes(node.nodeName) && attribute.name === 'style') { const spanInlineStyles = attribute.value.split(';').map(x => x.trim()); const allowedSpanInlineStyles = spanInlineStyles.filter(rawStyle => { - const [styleName, styleValue] = rawStyle.split(':'); - const style = CLIPBOARD_WHITELISTS.styles[styleName.trim()]; - return style && !style.defaultValues.includes(styleValue.trim()); + return CLIPBOARD_WHITELISTS.styles.includes(rawStyle.split(':')[0].trim()); }); node.removeAttribute(attribute.name); if (allowedSpanInlineStyles.length > 0) { @@ -3234,7 +3224,7 @@ export class OdooEditor extends EventTarget { okClass instanceof RegExp ? okClass.test(item) : okClass === item, ); } else { - const allowedSpanStyles = Object.keys(CLIPBOARD_WHITELISTS.styles).map(s => `span[style*="${s}"]`); + const allowedSpanStyles = CLIPBOARD_WHITELISTS.styles.map(s => `span[style*="${s}"]`); return ( item.nodeType === Node.TEXT_NODE || ( diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js index d07876b5ebb..2e73864a7af 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js @@ -414,7 +414,7 @@ describe('Paste', () => { }); }); describe('Simple html span', () => { - const simpleHtmlCharX = 'x'; + const simpleHtmlCharX = 'x'; describe('range collapsed', async () => { it('should paste a text at the beginning of a p', async () => { await testEditor(BasicEditor, { @@ -660,7 +660,7 @@ describe('Paste', () => { }); }); describe('Complex html span', () => { - const complexHtmlData = '123 4'; + const complexHtmlData = '123 4'; describe('range collapsed', async () => { it('should paste a text at the beginning of a p', async () => { await testEditor(BasicEditor, {