From 8dfe8a8c6c5dba4f13dd69c9e607633866381007 Mon Sep 17 00:00:00 2001 From: hmai Date: Thu, 3 Aug 2023 11:23:16 +0200 Subject: [PATCH] [FIX] web editor: color of whole cell should change This commit fixes the issue of partial coloring of table cells. Before this commit, if one colors part of the text in the cell and then seeks to color the whole cell, the last coloring would not apply on the previously colored text. We do that by preventing the cell coloring to be done differently than other elements except if we want to change the background color. Task-3454903 closes odoo/odoo#130646 Signed-off-by: David Monjoie (dmo) --- .../odoo-editor/src/commands/commands.js | 6 +- .../odoo-editor/test/spec/color.test.js | 4 +- .../odoo-editor/test/spec/editor.test.js | 359 ++++++++++++------ 3 files changed, 255 insertions(+), 114 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js index afd12883869..ae81acab42a 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js @@ -532,7 +532,7 @@ export const editorCommands = { node => closestElement(node).isContentEditable ); let coloredTds = []; - if (selectedTds.length) { + if (selectedTds.length && mode === "backgroundColor") { for (const td of selectedTds) { colorElement(td, color, mode); } @@ -555,7 +555,9 @@ export const editorCommands = { if (isEmptyBlock(range.endContainer)) { selectionNodes.push(range.endContainer, ...descendants(range.endContainer)); } - const selectedNodes = selectionNodes.filter(node => !closestElement(node, 'table.o_selected_table')) + const selectedNodes = mode === "backgroundColor" + ? selectionNodes.filter(node => !closestElement(node, 'table.o_selected_table')) + : selectionNodes; const fonts = selectedNodes.flatMap(node => { let font = closestElement(node, 'font') || closestElement(node, 'span'); const children = font && descendants(font); diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js index c31cd4c4d9e..3d8299794e3 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/color.test.js @@ -55,7 +55,7 @@ describe('applyColor', () => { it('should apply a background color on empty selection', async () => { await testEditor(BasicEditor, { contentBefore: '

[


]

', - stepFunction: setColor('rgb(255, 0, 0)', 'background-color'), + stepFunction: setColor('rgb(255, 0, 0)', 'backgroundColor'), contentAfterEdit: '

[\u200B

' + '

\u200B

' + '

]\u200B

', @@ -97,7 +97,7 @@ describe('applyColor', () => { cd] `), - stepFunction: setColor('rgb(255, 0, 0)', 'background-color'), + stepFunction: setColor('rgb(255, 0, 0)', 'backgroundColor'), contentAfter: unformat(` diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js index 92821b781f4..a10dfd79a9e 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js @@ -5184,18 +5184,37 @@ X[] describe('color', () => { it('should apply a color to some characters and a table', async () => { await testEditor(BasicEditor, { - contentBefore: '

a[bc

[]ab
' + - '' + - '' + - '' + - '
a]bcdef
', + contentBefore: unformat(` +

a[bc

+ + + + + + + + +
a]bcdef
`), stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '

a[bc

' + - '' + - '' + - '' + - '' + - '
a]bcdef
', + contentAfterEdit: unformat(` +

+ a[bc +

+ + + + + + + + +
+ a]b + + cd + + ef +
`), }); }); it('should apply a color to a table and some characters', async () => { @@ -5206,12 +5225,23 @@ X[] 'e[f' + '

a]bc

', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '' + - '' + - '' + - '' + - '
abcde[f
' + - '

a]bc

', + contentAfterEdit: unformat(` + + + + + + +
+ ab + + cd + + e[f +
+

+ a]bc +

`), }); }); it('should apply a color to some characters, a table and some more characters', async () => { @@ -5224,13 +5254,26 @@ X[] '' + '

a]bc

', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '

a[bc

' + - '' + - '' + - '' + - '' + - '
abcdef
' + - '

a]bc

', + contentAfterEdit: unformat(` +

+ a[bc +

+ + + + + + +
+ ab + + cd + + ef +
+

+ a]bc +

`), }); }); it('should apply a color to some characters, a table, some more characters and another table', async () => { @@ -5248,18 +5291,39 @@ X[] 'ef' + '', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '

a[bc

' + - '' + - '' + - '' + - '' + - '
abcdef
' + - '

abc

' + - '' + - '' + - '' + - '' + - '
a]bcdef
', + contentAfterEdit: unformat(` +

+ a[bc +

+ + + + + + +
+ ab + + cd + + ef +
+

+ abc +

+ + + + + + +
+ a]b + + cd + + ef +
`), }); }); it('should apply a color to some characters, a table, some more characters, another table and some more characters', async () => { @@ -5278,19 +5342,38 @@ X[] '' + '

a]bc

', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '

a[bc

' + - '' + - '' + - '' + - '' + - '
abcdef
' + - '

abc

' + - '' + - '' + - '' + - '' + - '
abcdef
' + - '

a]bc

', + contentAfterEdit: unformat(` +

+ a[bc +

+ + + + + + +
+ ab + + cd + + ef +
+

abc

+ + + + + + +
+ ab + + cd + + ef +
+

a]bc

`), }); }); }); @@ -5554,11 +5637,18 @@ X[] 'ef' + '', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '' + - '' + - '' + - '' + - '
a[bc]def
', + contentAfterEdit: unformat(` + + + + + + +
+ a[b + + c]d + ef
`), }); }); it('should apply a color to a whole row', async () => { @@ -5569,11 +5659,25 @@ X[] 'e]f' + 'abcdef', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '' + - '' + - '' + - '' + - '
a[bcde]f
abcdef
', + contentAfterEdit: unformat(` + + + + + + + + + + + +
+ a[b + + cd + + e]f +
abcdef
`), }); }); it('should apply a color to a whole column', async () => { @@ -5596,23 +5700,30 @@ X[] '' + '', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
a[bcdef
abcdef
a]bcdef
', + contentAfterEdit: unformat(` + + + + + + + + + + + + + + + + +
+ a[b + cdef
+ ab + cdef
+ a]b + cdef
`), }); }); it('should apply a color from (0,0) to (1,1) in a 3x3 table', async () => { @@ -5635,23 +5746,32 @@ X[] '' + '', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
a[bcdef
abc]def
abcdef
', + contentAfterEdit: unformat(` + + + + + + + + + + + + + + + + +
+ a[b + + cd + ef
+ ab + + c]d + ef
abcdef
`), }); }); it('should apply a color to a whole table', async () => { @@ -5674,23 +5794,42 @@ X[] '' + '', stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'), - contentAfterEdit: '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
a[bcdef
abcdef
abcde]f
', + contentAfterEdit: unformat(` + + + + + + + + + + + + + + + + +
+ a[b + + cd + + ef +
+ ab + + cd + + ef +
+ ab + + cd + + e]f +
`), }); }); });