From fc27a3d452aeb4bd93f0fe573a88418d4333ba45 Mon Sep 17 00:00:00 2001
From: shsa-odoo <shsa@odoo.com>
Date: Tue, 19 Sep 2023 17:04:28 +0530
Subject: [PATCH] [FIX] web_editor, website: text selection issue in font size
 dropdown

This commit addresses an issue where the text selection would disappear from
editor when clicking on the font size option from the toolbar.

Modifications:

- The issue of text selection disappearing when interacting with the font size
dropdown has been fixed.
- A new toolbar option, `customFontSize`, has been added. This option is
exclusively enabled for editor that have a toolbar in the same document.
The `readonly` attribute has been added to the input field to make it read-only
in our scenario, providing dropdown functionality for font size in the editor.
However, the functionality remains unchanged for the website.

task-3500827

closes odoo/odoo#142808

Signed-off-by: Antoine Guenet (age) <age@odoo.com>
---
 .../static/src/js/editor/odoo-editor/src/OdooEditor.js        | 2 +-
 .../static/src/js/editor/odoo-editor/src/utils/utils.js       | 4 ++--
 addons/web_editor/static/src/js/editor/toolbar.js             | 2 ++
 addons/web_editor/static/src/xml/editor.xml                   | 4 ++--
 .../static/src/components/wysiwyg_adapter/wysiwyg_adapter.js  | 2 ++
 5 files changed, 9 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 b413275fbbb..f7c387db807 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
@@ -752,7 +752,7 @@ export class OdooEditor extends EventTarget {
         }
         const fontSizeInput = this.toolbar.querySelector('input#fontSizeCurrentValue');
         this.addDomListener(this.toolbar, 'click', ev => {
-            if (fontSizeInput && ev.target.closest('#font-size .dropdown-toggle')) {
+            if (fontSizeInput && !fontSizeInput.readOnly && ev.target.closest('#font-size .dropdown-toggle')) {
                 // If the click opened the font size dropdown, select the input content.
                 fontSizeInput.select();
             } else if (!this.isSelectionInEditable()) {
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
index 8326dec3f68..b549009e37e 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
@@ -1867,8 +1867,8 @@ export function getFontSizeDisplayValue(sel, getCSSVariableValue, convertNumeric
     `);
     let remValue;
     if (closestFontSizedEl) {
-        const customFontSize = closestFontSizedEl.style.fontSize;
-        if (customFontSize) {
+        const useFontSizeInput = closestFontSizedEl.style.fontSize;
+        if (useFontSizeInput) {
             // Use the computed value to always convert to px. However, this
             // currently does not check that the inline font-size is the one
             // actually having an effect (there could be an !important CSS rule
diff --git a/addons/web_editor/static/src/js/editor/toolbar.js b/addons/web_editor/static/src/js/editor/toolbar.js
index 4f32785d34c..de4f4385dca 100644
--- a/addons/web_editor/static/src/js/editor/toolbar.js
+++ b/addons/web_editor/static/src/js/editor/toolbar.js
@@ -18,6 +18,7 @@ export class Toolbar extends Component {
         showChecklist: { type: Boolean, optional: true },
         showColors: { type: Boolean, optional: true },
         showFontSize: { type: Boolean, optional: true },
+        useFontSizeInput: { type: Boolean, optional: true },
         showHistory: { type: Boolean, optional: true },
 
         showStyle: { type: Boolean, optional: true },
@@ -50,6 +51,7 @@ export class Toolbar extends Component {
         showChecklist: true,
         showColors: true,
         showFontSize: true,
+        useFontSizeInput: false,
         showHistory: false,
 
         showStyle: true,
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index b20a5cbef58..6f7f60b1eff 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -91,12 +91,12 @@
             </div>
 
             <t t-if="!this.isMobile()">
-                <div t-if="props.showFontSize" id="font-size" t-attf-class="btn-group {{ props.dropDirection }}">
+                <div t-if="props.useFontSizeInput or props.showFontSize" id="font-size" t-attf-class="btn-group {{ props.dropDirection }}">
                     <button type="button" class="btn dropdown-toggle"
                         data-bs-toggle="dropdown" tabindex="-1"
                         data-bs-original-title="Font Size" aria-expanded="false">
                         <div id="font-size-input-container">
-                            <input type="text" id="fontSizeCurrentValue" title="Font size" value="13"></input>
+                            <input type="text" id="fontSizeCurrentValue" title="Font size" value="13" t-att-readonly= "props.showFontSize" t-att-class="props.showFontSize ? 'cursor-pointer' : ''"></input>
                         </div>
                     </button>
                     <ul class="dropdown-menu">
diff --git a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
index cc852459aa4..c27942cc1c4 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
@@ -360,6 +360,8 @@ export class WysiwygAdapterComponent extends Wysiwyg {
                 showChecklist: false,
                 showAnimateText: true,
                 showTextHighlights: true,
+                showFontSize: false,
+                useFontSizeInput: true,
             },
             context: this._context,
             editable: this.$editable,