From 940ff569203c7ad9d2fd95d0d49889c48576fdcb Mon Sep 17 00:00:00 2001
From: Rodolpho Lima <rcdl@odoo.com>
Date: Thu, 25 May 2023 10:51:14 +0000
Subject: [PATCH] [FIX] web_editor: empty link button group in toolbar

Buttons in the floating toolbar are displayed depending on what is
selected. When selecting text that spans multiple blocks, the
"#create-link" button is hidden from the floating toolbar.

Before this commit, when the "#create-link" button was hidden, the
"#link" button group would be left empty but still visible on the
toolbar (its separator bar remained visible).

This commit ensures that:
- the responsability of displaying/hiding the "#unlink" button
is from Wysiwyg's _updateEditorUI method, as it is the case with the
other toolbar buttons,
- when a button group has none of its children button visible, it is
made invisible too, including its separator bar.

This commit also fixes the selector for toggling the "#create-link"
button active/inactive, bringing the affected code section alive from
the dead.

task-3347670

X-original-commit: ceedd72b893316f5994727063a6a6faf49476408
Part-of: odoo/odoo#130022
---
 .../src/js/editor/odoo-editor/src/OdooEditor.js   |  4 +---
 .../web_editor/static/src/js/wysiwyg/wysiwyg.js   | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 5 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 31e17f2b18b..a4f842a9ad3 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
@@ -3031,10 +3031,8 @@ export class OdooEditor extends EventTarget {
         }
 
         const linkNode = getInSelection(this.document, 'a');
-        const linkButton = this.toolbar.querySelector('#createLink');
+        const linkButton = this.toolbar.querySelector('#create-link');
         linkButton && linkButton.classList.toggle('active', !!linkNode);
-        const unlinkButton = this.toolbar.querySelector('#unlink');
-        unlinkButton && unlinkButton.classList.toggle('d-none', !linkNode);
         const undoButton = this.toolbar.querySelector('#undo');
         undoButton && undoButton.classList.toggle('disabled', !this.historyCanUndo());
         const redoButton = this.toolbar.querySelector('#redo');
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 096866b57b8..82182ce5ab2 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -2041,6 +2041,10 @@ export class Wysiwyg extends Component {
         }
 
         this.odooEditor.automaticStepSkipStack();
+        // Clear "d-none" for button groups.
+        for (const buttonGroup of this.toolbarEl.querySelectorAll('.btn-group')) {
+            buttonGroup.classList.remove('d-none');
+        }
         // We need to use the editor's window so the tooltip displays in its
         // document even if it's in an iframe.
         const editorWindow = this.odooEditor.document.defaultView;
@@ -2116,6 +2120,9 @@ export class Wysiwyg extends Component {
         if (!range || spansBlocks) {
             this.toolbarEl.querySelector('#create-link')?.classList.toggle('d-none', true);
         }
+        // Toggle unlink button. Always hide it on media.
+        const linkNode = getInSelection(this.odooEditor.document, 'a');
+        this.toolbarEl.querySelector('#unlink')?.classList.toggle('d-none', !linkNode || isInMedia);
         // Toggle the toolbar arrow.
         this.toolbarEl.classList.toggle('noarrow', isInMedia);
         // Unselect all media.
@@ -2128,8 +2135,6 @@ export class Wysiwyg extends Component {
             range.selectNode(this.lastMediaClicked);
             selection.removeAllRanges();
             selection.addRange(range);
-            // Always hide the unlink button on media.
-            this.toolbarEl.querySelector('#unlink')?.classList.toggle('d-none', true);
             // Toggle the 'active' class on the active image tool buttons.
             for (const button of this.toolbarEl.querySelectorAll('#image-shape div, #fa-spin')) {
                 button.classList.toggle('active', $(e.target).hasClass(button.id));
@@ -2157,6 +2162,12 @@ export class Wysiwyg extends Component {
                 this.odooEditor.observerActive();
             }, 400));
         }
+        // Hide button groups that have no visible buttons.
+        for (const buttonGroup of this.toolbarEl.querySelectorAll('.btn-group:not(.d-none)')) {
+            if (!buttonGroup.querySelector('.btn:not(.d-none)')) {
+                buttonGroup.classList.add('d-none');
+            }
+        }
         // Update color of already opened colorpickers.
         setTimeout(() => {
             for (const colorType in this.colorPalettesProps) {