Skip to content

Commit

Permalink
[FIX] create the font element inside the selected link element
Browse files Browse the repository at this point in the history 
Currently, when we color a list of links with more than three items in
the list, only the first and last links are colored.

Now when the li element is colored in a list, the font element is
created inside the link. We also make sure when the font size is defined
the font element is created inside so that the background color is
aligned with the font size

task-3677214

closes #149056

Signed-off-by: Geelen Sébastien (sge) <sge@odoo.com>
  • Loading branch information
@Jinjiu96
Jinjiu96 committed Mar 5, 2024
1 parent 5739602 commit 082bb38
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 1 deletion.
4 changes: 3 additions & 1 deletion addons/web_editor/static/lib/odoo-editor/src/commands/commands.js
View file
Expand Up @@ -633,7 +633,9 @@ export const editorCommands = {
['inline', 'inline-block'].includes(getComputedStyle(node).display) &&
isVisibleStr(node.textContent) &&
!node.classList.contains('btn') &&
!node.querySelector('font'))
!node.querySelector('font')) &&
node.nodeName !== 'A' &&
!(node.nodeName === 'SPAN' && node.style['fontSize'])
) {
// Node is a visible text or inline node without font nor a button:
// wrap it in a <font>.
Expand Down
90 changes: 90 additions & 0 deletions addons/web_editor/static/lib/odoo-editor/test/spec/editor.test.js
View file
Expand Up @@ -4210,6 +4210,96 @@ X[]
contentAfter: '<p>a<font style="color: rgb(255, 0, 0);">[b<span class="a">c</span>d]</font>e</p>',
});
});
it('should apply background color to a list of 3 items with font size', async () => {
await testEditor(BasicEditor, {
contentBefore: '<ul>' +
'<li>' +
'<span style="font-size: 36px;">' +
'[abc' +
'</span>' +
'</li>' +
'<li>' +
'<span style="font-size: 36px;">' +
'bcd' +
'</span>' +
'</li>' +
'<li>' +
'<span style="font-size: 36px;">' +
'cde]' +
'</span>' +
'</li>' +
'</ul>',
stepFunction: editor => editor.execCommand('applyColor', 'rgb(255, 0, 0)', 'backgroundColor'),
contentAfter: '<ul>' +
'<li>' +
'<span style="font-size: 36px;">' +
'<font style="background-color: rgb(255, 0, 0);">' +
'[abc' +
'</font>' +
'</span>' +
'</li>' +
'<li>' +
'<span style="font-size: 36px;">' +
'<font style="background-color: rgb(255, 0, 0);">' +
'bcd' +
'</font>' +
'</span>' +
'</li>' +
'<li>' +
'<span style="font-size: 36px;">' +
'<font style="background-color: rgb(255, 0, 0);">' +
'cde]' +
'</font>' +
'</span>' +
'</li>' +
'</ul>',
});
});
it('should apply background color to a list of 3 links', async () => {
await testEditor(BasicEditor, {
contentBefore: '<ul>' +
'<li>' +
'<a href="#" >' +
'[abc' +
'</a>' +
'</li>' +
'<li>' +
'<a href="#" >' +
'bcd' +
'</a>' +
'</li>' +
'<li>' +
'<a href="#" >' +
'cde]' +
'</a>' +
'</li>' +
'</ul>',
stepFunction: editor => editor.execCommand('applyColor', 'rgb(255, 0, 0)', 'backgroundColor'),
contentAfter: '<ul>' +
'<li>' +
'<a href="#">' +
'<font style="background-color: rgb(255, 0, 0);">' +
'[abc' +
'</font>' +
'</a>' +
'</li>' +
'<li>' +
'<a href="#">' +
'<font style="background-color: rgb(255, 0, 0);">' +
'bcd' +
'</font>' +
'</a>' +
'</li>' +
'<li>' +
'<a href="#">' +
'<font style="background-color: rgb(255, 0, 0);">' +
'cde]' +
'</font>' +
'</a>' +
'</li>' +
'</ul>',
});
});
it('should distribute color to texts and to button separately', async () => {
await testEditor(BasicEditor, {
contentBefore: '<p>a[b<a class="btn">c</a>d]e</p>',
Expand Down

0 comments on commit 082bb38

Please sign in to comment.