From c3c59a447d2a5b3ab57a2d968dffc691a2dcaa63 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 29 Nov 2022 11:15:05 +0000
Subject: [PATCH] [FIX] web_editor: show the correct alignment in toolbar when
in link
The `align` command applies the alignment to the closest block of the
selected node. Bootstrap sets the default alignment of `.btn` to
`center` but we don't support links with a width that is larger than
their contents so that alignment is not visible. For these two reasons,
we want the toolbar to show the alignment of a link's closest block
rather than that of the link itself.
closes odoo/odoo#107150
X-original-commit: a3bb5b0c4b010b7583af1440cb65e889586636c8
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
.../js/editor/odoo-editor/src/OdooEditor.js | 40 ++++++++++++-------
1 file changed, 25 insertions(+), 15 deletions(-)
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 b3a63a41ab61..18668961e07a 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) {
--
GitLab