[IMP] web_editor, website: give util functions the right window

Related to the review comment [1]. This commit aims at removing
the dependency of a target for those utils functions.

[1]: https://github.com/odoo/odoo/pull/89223#discussion_r893595305

See merge commit for more information.

task-2687506

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

@@ -3,6 +3,9 @@ odoo.define('web_editor.utils', function (require) {
 
 const {ColorpickerWidget} = require('web.Colorpicker');
 
+let editableWindow = window;
+const _setEditableWindow = (ew) => editableWindow = ew;
+
 /**
  * window.getComputedStyle cannot work properly with CSS shortcuts (like
  * 'border-width' which is a shortcut for the top + right + bottom + left border
@@ -58,7 +61,7 @@ const DEFAULT_PALETTE = {
  */
 function _computePxByRem(toRem) {
     if (_computePxByRem.PX_BY_REM === undefined) {
-        const htmlStyle = window.getComputedStyle(document.documentElement);
+        const htmlStyle = editableWindow.getComputedStyle(editableWindow.document.documentElement);
         _computePxByRem.PX_BY_REM = parseFloat(htmlStyle['font-size']);
     }
     return toRem ? (1 / _computePxByRem.PX_BY_REM) : _computePxByRem.PX_BY_REM;
@@ -379,5 +382,6 @@ return {
     backgroundImagePartsToCss: _backgroundImagePartsToCss,
     generateHTMLId: _generateHTMLId,
     getColorClass: _getColorClass,
+    setEditableWindow: _setEditableWindow,
 };
 });

addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js

@@ -5,6 +5,7 @@ import { _t } from '@web/core/l10n/translation';
 
 import { useWowlService } from '@web/legacy/utils';
 import { useHotkey } from '@web/core/hotkeys/hotkey_hook';
+import { setEditableWindow } from 'web_editor.utils';
 
 import { EditMenuDialog, MenuDialog } from "../dialog/edit_menu";
 import { WebsiteDialog } from '../dialog/dialog';
@@ -82,14 +83,20 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
                     this.widget.odooEditor.observerActive();
                 }});
                 this.props.wysiwygReady();
+                // Set utils functions' editable window to the current iframe's window.
+                // This allows those function to access the correct styles definitions,
+                // document element, etc.
+                setEditableWindow(this.websiteService.contentWindow);
             };
 
             initWysiwyg();
 
             return () => {
                 this.$editable.off('click.odoo-website-editor', '*');
+                setEditableWindow(window);
             };
         }, () => []);
+
     }
     /**
      * @override