[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>

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()) {

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

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,

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">

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,