From 08cd27cc8ad78d2ee9ffe80ddb9e1cc50a557ee2 Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Wed, 27 Sep 2023 10:57:34 +0200
Subject: [PATCH] [FIX] web_editor: BS Tooltip jQuery integration not bound to
 the iframe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We used to have two libraries (Bootstrap and jQueryUI) providing
tooltips.

Since the removal of the jQueryUI implementation in commit [1], adding a
image-like block in the wysiwyg editor throws an error telling that
`$().tooltip()` is not a function.

Actually, this issue happens when the wysiwyg editor is used in an
iframe and the jQuery instance used is the one from the iframe.

In a nutshell, Bootstrap 5 - even though it doesn't require jQuery
anymore - has a compatibility layer which bind the current components'
implementation to the v4-like jQuery based methods (in this case
`$().tooltip()`). In the tooltip's case, both libraries have the same
method signature.

When removing the jQueryUI implementation, most of the calls to this
method naturally fallback to the Bootstrap's one... But not in our case,
as the wysiwyg editor uses its own window/frame's jQuery and not the
parent one (in the iframe's case).

Amusingly, the way Bootstrap bind its compatibility layer relies on the
`onDOMContentReady` event being dispatched... which is not the case in
the iframe, resulting to having a jQuery version without the said
compatibility layer.

This commit fixes it by removing this dependence on an external library
and use our own (existing) Tooltip component instead.

Steps to reproduce:
- Open Email Marketing app
- Create a new mailing
- Choose a template
- Drag&drop an image-like block
- Click on the newly inserted block
=> Error about $target.tooltip not being a function

[1]: odoo/odoo@25d0783b59eadd73d70542a2b0d5ae0da11191ae

closes odoo/odoo#138847

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 addons/web_editor/static/src/js/wysiwyg/wysiwyg.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 2675f006a3e..f7a79b3220a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -45,6 +45,7 @@ import {
 } from "@odoo/owl";
 import { isCSSColor } from '@web/core/utils/colors';
 import { EmojiPicker } from '@web/core/emoji_picker/emoji_picker';
+import { Tooltip } from "@web/core/tooltip/tooltip";
 
 const OdooEditor = OdooEditorLib.OdooEditor;
 const getDeepRange = OdooEditorLib.getDeepRange;
@@ -2156,9 +2157,9 @@ export class Wysiwyg extends Component {
                 // Tooltips need to be cleared before leaving the editor.
                 this.saving_mutex.exec(() => {
                     this.odooEditor.observerUnactive();
-                    $target.tooltip({title: _t('Double-click to edit'), trigger: 'manual', container: 'body'}).tooltip('show');
+                    const removeTooltip = this.popover.add(e.target, Tooltip, { tooltip: _t('Double-click to edit') });
                     this.odooEditor.observerActive();
-                    this.tooltipTimeouts.push(setTimeout(() => $target.tooltip('dispose'), 800));
+                    this.tooltipTimeouts.push(setTimeout(() => removeTooltip(), 800));
                 });
             }, 400));
         }