[FIX] web_editor: ensure proper jquery reference on snippets editor $el

In an iframe, we need to make sure the element is using jquery on its
own window and not on the top window lest jquery behave unexpectedly.
This was apparent with tooltip which was called in snippets.editor with
the "wrong jquery", with the result that tooltip.js had a reference to
the top window/document instead of that of the iframe. Because of that,
it appended its tooltips to the top window instead of the iframe, and
as a result, said tooltips were wrongly positioned.

closes odoo/odoo#69879

X-original-commit: 19be8709efa8f690ccff8d04dd9a17e4ef4d82fd
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Nicolas Bayet <nby@odoo.com>
This commit is contained in:
Antoine Guenet
2021-04-27 07:20:17 +00:00
co-authored by Nicolas Bayet
parent 8d0d5e0d07
commit b79a09c7b2
2 changed files with 8 additions and 2 deletions
@@ -1158,11 +1158,14 @@ var SnippetsMenu = Widget.extend({
*/
async start() {
var defs = [this._super.apply(this, arguments)];
this.$el.data('snippetMenu', this);
this.ownerDocument = this.$el[0].ownerDocument;
this.$document = $(this.ownerDocument);
this.window = this.ownerDocument.defaultView;
this.$window = $(this.window);
// In an iframe, we need to make sure the element is using jquery on its
// own window and not on the top window lest jquery behave unexpectedly.
this.$el = this.window.$(this.$el);
this.$el.data('snippetMenu', this);
this.customizePanel = document.createElement('div');
this.customizePanel.classList.add('o_we_customize_panel', 'd-none');
@@ -901,7 +901,10 @@ const Wysiwyg = Widget.extend({
*/
_updateEditorUI: function (e) {
this.odooEditor.automaticStepSkipStack();
const $target = e ? $(e.target) : $();
// We need to use the editor's window so the tooltip displays in its
// document even if it's in an iframe.
const editorWindow = this.odooEditor.document.defaultView;
const $target = e ? editorWindow.$(e.target) : editorWindow.$();
// Restore paragraph dropdown button's default ID.
this.toolbar.$el.find('#mediaParagraphDropdownButton').attr('id', 'paragraphDropdownButton');
// Remove the alt tools.