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(`
| []ab |
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
' +
- '| a]b | ' +
- 'cd | ' +
- 'ef | ' +
- '
',
+ contentBefore: unformat(`
+ a[bc
+
+
+
+ | a]b |
+ cd |
+ ef |
+
+
+
`),
stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'),
- contentAfterEdit: 'a[bc
' +
- '' +
- '| a]b | ' +
- 'cd | ' +
- 'ef | ' +
- '
',
+ 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: '' +
- '| ab | ' +
- 'cd | ' +
- 'e[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
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '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
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- 'abc
' +
- '' +
- '| a]b | ' +
- 'cd | ' +
- 'ef | ' +
- '
',
+ 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
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- 'abc
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '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[b | ' +
- 'c]d | ' +
- 'ef | ' +
- '
',
+ contentAfterEdit: unformat(`
+
+
+ |
+ a[b
+ |
+
+ c]d
+ |
+ ef |
+
+
`),
});
});
it('should apply a color to a whole row', async () => {
@@ -5569,11 +5659,25 @@ X[]
'e]f | ' +
'| ab | cd | ef |
',
stepFunction: async editor => editor.execCommand('applyColor', 'aquamarine', 'color'),
- contentAfterEdit: '' +
- '| a[b | ' +
- 'cd | ' +
- 'e]f | ' +
- '
| ab | cd | ef |
',
+ contentAfterEdit: unformat(`
+
+
+ |
+ a[b
+ |
+
+ cd
+ |
+
+ e]f
+ |
+
+
+ | ab |
+ cd |
+ ef |
+
+
`),
});
});
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[b | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '' +
- '| a]b | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '
',
+ contentAfterEdit: unformat(`
+
+
+ |
+ a[b
+ |
+ cd |
+ ef |
+
+
+ |
+ ab
+ |
+ cd |
+ ef |
+
+
+ |
+ a]b
+ |
+ cd |
+ ef |
+
+
`),
});
});
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[b | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '' +
- '| ab | ' +
- 'c]d | ' +
- 'ef | ' +
- '
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '
',
+ contentAfterEdit: unformat(`
+
+
+ |
+ a[b
+ |
+
+ cd
+ |
+ ef |
+
+
+ |
+ ab
+ |
+
+ c]d
+ |
+ ef |
+
+
+ | ab |
+ cd |
+ ef |
+
+
`),
});
});
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[b | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'ef | ' +
- '
' +
- '' +
- '| ab | ' +
- 'cd | ' +
- 'e]f | ' +
- '
' +
- '
',
+ contentAfterEdit: unformat(`
+
+
+ |
+ a[b
+ |
+
+ cd
+ |
+
+ ef
+ |
+
+
+ |
+ ab
+ |
+
+ cd
+ |
+
+ ef
+ |
+
+
+ |
+ ab
+ |
+
+ cd
+ |
+
+ e]f
+ |
+
+
`),
});
});
});