[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:
@@ -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));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user