From b79a09c7b230a4e4d9259147adc5752e045ba40b Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 26 Apr 2021 10:37:57 +0000
Subject: [PATCH] [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>
---
 addons/web_editor/static/src/js/editor/snippets.editor.js | 5 ++++-
 addons/web_editor/static/src/js/wysiwyg/wysiwyg.js        | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 01f784f8e53..dee96211934 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -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');
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 174b88e6bcf..649dad9dfdc 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -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.