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 b3a63a41ab61a5edeeb6538632606c2f4a14c475..18668961e07a829956ca825fd0e5801e79225564 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 @@ -2675,23 +2675,33 @@ export class OdooEditor extends EventTarget { } } const paragraphDropdownButton = this.toolbar.querySelector('#paragraphDropdownButton'); - for (const commandState of [ - 'justifyLeft', - 'justifyRight', - 'justifyCenter', - 'justifyFull', - ]) { - const isStateTrue = this.document.queryCommandState(commandState); - const button = this.toolbar.querySelector('#' + commandState); - if (commandState.startsWith('justify')) { - if (paragraphDropdownButton) { - button.classList.toggle('active', isStateTrue); - const direction = commandState.replace('justify', '').toLowerCase(); - const newClass = `fa-align-${direction === 'full' ? 'justify' : direction}`; - paragraphDropdownButton.classList.toggle(newClass, isStateTrue); + if (paragraphDropdownButton) { + for (const commandState of [ + 'justifyLeft', + 'justifyRight', + 'justifyCenter', + 'justifyFull', + ]) { + const button = this.toolbar.querySelector('#' + commandState); + const direction = commandState === 'justifyFull' + ? 'justify' : commandState.replace('justify', '').toLowerCase(); + let isStateTrue = false; + const link = sel.anchorNode && closestElement(sel.anchorNode, 'a'); + const linkBlock = link && closestBlock(link); + if (linkBlock) { + // We don't support links with a width that is larger than + // their contents so an alignment within the link is not + // visible. Since the editor applies alignments to a node's + // closest block, we show the alignment of the link's + // closest block. + const alignment = getComputedStyle(linkBlock).textAlign; + isStateTrue = alignment === direction; + } else { + isStateTrue = this.document.queryCommandState(commandState) } - } else if (button) { button.classList.toggle('active', isStateTrue); + const newClass = `fa-align-${direction}`; + paragraphDropdownButton.classList.toggle(newClass, isStateTrue); } } if (sel.rangeCount) {