[FIX] web_editor: BS Tooltip jQuery integration not bound to the iframe

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@25d0783b59

closes odoo/odoo#138847

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Pierre Paridans
2023-10-23 20:07:30 +00:00
parent 3295c6e4c7
commit 08cd27cc8a
@@ -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));
}