From 7c1c6ecc52f05a9fa20365a80ffdd092cf4cd4f7 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 12 Jul 2021 07:23:09 +0000
Subject: [PATCH] [IMP] web_editor: better show active entry in the text style
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the "¶" icon with the name of the current active text style
entry.

Part of https://github.com/odoo/odoo/pull/73565
task-2496339

Part-of: odoo/odoo#73565
---
 .../static/lib/odoo-editor/src/OdooEditor.js      | 15 +++++++++++++++
 addons/web_editor/static/src/xml/editor.xml       |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
index 878382e128f..39a8c41c240 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
@@ -1482,7 +1482,9 @@ export class OdooEditor extends EventTarget {
             }
         }
         this.updateColorpickerLabels();
+
         const block = closestBlock(sel.anchorNode);
+        let activeLabel = undefined;
         for (const [style, tag, isList] of [
             ['paragraph', 'P', false],
             ['pre', 'PRE', false],
@@ -1505,8 +1507,21 @@ export class OdooEditor extends EventTarget {
                     ? block.tagName === 'LI' && getListMode(block.parentElement) === tag
                     : block.tagName === tag;
                 button.classList.toggle('active', isActive);
+
+                if (!isList && isActive) {
+                    activeLabel = button.textContent;
+                }
             }
         }
+        if (!activeLabel) {
+            // If no element from the text style dropdown was marked as active,
+            // mark the paragraph one as active and use its label.
+            const firstButtonEl = this.toolbar.querySelector('#paragraph');
+            firstButtonEl.classList.add('active');
+            activeLabel = firstButtonEl.textContent;
+        }
+        this.toolbar.querySelector('#style button span').textContent = activeLabel;
+
         const linkNode = getInSelection(this.document, 'a');
         const linkButton = this.toolbar.querySelector('#createLink');
         linkButton && linkButton.classList.toggle('active', linkNode);
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index d30b801506c..f712df8418b 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -11,7 +11,7 @@
                 <button type="button" class="btn dropdown-toggle"
                     data-toggle="dropdown" title="Text style" tabindex="-1" data-display="static"
                     data-original-title="Style" aria-expanded="false">
-                    <i class="fa fa-paragraph"></i>
+                    <span>Normal</span>
                 </button>
                 <ul class="dropdown-menu">
                     <li id="paragraph-dropdown-item">