From 97b14eef9b1741fcee45c2ede95ec349b3a46025 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Thu, 3 Aug 2023 11:50:31 +0200
Subject: [PATCH] [IMP] web_editor: apply custom font size as rem

This commit permits to apply custom font size as rem instead of px. The
users still use px to define and to read the font size but the editor
will convert it to rem.

task-1958098

Part-of: odoo/odoo#129791
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../static/src/js/editor/odoo-editor/src/OdooEditor.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 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 65a663dc700..9af48c507d6 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
@@ -742,6 +742,12 @@ export class OdooEditor extends EventTarget {
             }
         });
 
+        const applyFontSizeREM = pxStrValue => {
+            const pxValue = parseFloat(pxStrValue);
+            const remValue = this.options.convertNumericToUnit(pxValue, "px", "rem");
+            this.execCommand("setFontSize", `${remValue}rem`);
+        };
+
         // Handle the font size input.
         if (fontSizeInput) {
             const debouncedOnInputChange = (() => {
@@ -755,7 +761,7 @@ export class OdooEditor extends EventTarget {
                             if (!this.isSelectionInEditable()) {
                                 this.historyResetLatestComputedSelection(true);
                             }
-                            this.execCommand("setFontSize", `${fontSize}px`);
+                            applyFontSizeREM(fontSize);
                             fontSizeInput.blur();
                         }
                         resolve();
@@ -779,7 +785,7 @@ export class OdooEditor extends EventTarget {
                     this.execCommand("setFontSize", undefined);
                     this.execCommand("setFontSizeClassName", fontSizeClassName);
                 } else {
-                    this.execCommand("setFontSize", `${optionEl.dataset.value}px`);
+                    applyFontSizeREM(optionEl.dataset.value);
                 }
             };
             fontSizeDropdown.querySelectorAll('.dropdown-item').forEach(item => {