From e7713398347ef527a59b632ef9c2e5ddaaca3c94 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Thu, 9 Jun 2022 18:09:13 +0200
Subject: [PATCH] [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            | 6 +++++-
 .../src/components/wysiwyg_adapter/wysiwyg_adapter.js      | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 7b976fba888..6c31abc8f81 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/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,
 };
 });
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 36bc684f206..33729ff1162 100644
--- a/addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+++ b/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