[FIX] web_editor: properly convert px to rem based on correct doc

Commit [1] introduced a responsive font size feature was. Following
this, in the context of mass mailing, an issue arises when users select
a font size from the toolbar dropdown. Specifically, the
`_computePxByRem` function converts the `px` value selected by the user
to the wrong `rem` value. This is because it relies on the font size of
the `html` element of the main window's document rather than that of the
iframe's document. Since the iframe's document has a font size of 14px
where the main document has a font size of 16px, the conversion was
faulty. Also, the value was cached on the window object, which is common
to both documents. So this commit moves that cache to the document so
two different values can be stored.

[1]: https://github.com/odoo-dev/odoo/commit/ddf25a16c46bfc3628512aba1390a1e345ec719a

task-3653543

closes odoo/odoo#147685

Signed-off-by: Antoine Guenet (age) <age@odoo.com>
Co-authored-by: Vishal Padhiyar <visp@odoo.com>
Co-authored-by: Dieleman Guillaume <gdi@odoo.com>

addons/web_editor/static/src/js/common/utils.js

@@ -8,6 +8,8 @@ import {
 
 let editableWindow = window;
 const _setEditableWindow = (ew) => editableWindow = ew;
+let editableDocument = document;
+const _setEditableDocument = (ed) => editableDocument = ed;
 
 const COLOR_PALETTE_COMPATIBILITY_COLOR_NAMES = ['primary', 'secondary', 'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger'];
 
@@ -100,11 +102,11 @@ const BACKGROUND_IMAGE_ATTRIBUTES = new Set([
  *                  - the inverse otherwise
  */
 function _computePxByRem(toRem) {
-    if (_computePxByRem.PX_BY_REM === undefined) {
-        const htmlStyle = editableWindow.getComputedStyle(editableWindow.document.documentElement);
-        _computePxByRem.PX_BY_REM = parseFloat(htmlStyle['font-size']);
+    if (editableDocument.PX_BY_REM === undefined) {
+        const htmlStyle = editableWindow.getComputedStyle(editableDocument.documentElement);
+        editableDocument.PX_BY_REM = parseFloat(htmlStyle['font-size']);
     }
-    return toRem ? (1 / _computePxByRem.PX_BY_REM) : _computePxByRem.PX_BY_REM;
+    return toRem ? (1 / editableDocument.PX_BY_REM) : editableDocument.PX_BY_REM;
 }
 /**
  * Converts the given (value + unit) string to a numeric value expressed in
@@ -507,6 +509,7 @@ export default {
     generateHTMLId: _generateHTMLId,
     getColorClass: _getColorClass,
     setEditableWindow: _setEditableWindow,
+    setEditableDocument: _setEditableDocument,
     addBackgroundImageAttributes: _addBackgroundImageAttributes,
     isBackgroundImageAttribute: _isBackgroundImageAttribute,
     shouldEditableMediaBeEditable: _shouldEditableMediaBeEditable,

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -390,6 +390,8 @@ export class Wysiwyg extends Component {
             return savedVideo;
         };
 
+        weUtils.setEditableDocument(this.options.document);
+
         const _getContentEditableAreas = this.options.getContentEditableAreas;
         this.odooEditor = new OdooEditor(this.$editable[0], Object.assign({
             _t: _t,