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