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

[FIX] create the font element inside the selected link element

Browse Source 
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 odoo/odoo#157280

X-original-commit: 4ffb15ab9d9bc7fe6d358264c1ee1ed4e48e5956
Signed-off-by: Geelen Sébastien (sge) <sge@odoo.com>
Signed-off-by: Jinjiu Liu (jili) <jili@odoo.com>
This commit is contained in:
Jinjiu Liu
2024-03-11 20:41:09 +00:00
parent 0f988edc53
commit f8be70f670
2 changed files with 93 additions and 1 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
+3 -1
View File
@@ -642,7 +642,9 @@ export const editorCommands = {
['inline', 'inline-block'].includes(getComputedStyle(node).display) &&
!isWhitespace(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>.
const previous = node.previousSibling;
addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
+90
View File
@@ -6709,6 +6709,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>',