From c2932dfcfec0e2598d83fbf08259b6162c506bd7 Mon Sep 17 00:00:00 2001 From: "Arthur Detroux (ard)" Date: Tue, 24 Jan 2023 15:26:26 +0000 Subject: [PATCH] [FIX] web_editor: fix LinkPopover in iframe on Firefox Prior to this commit and on Firefox 109, clicking on a link while in edit mode on the website app would trigger a traceback. This is caused by the fact that the LinkPopover widget is contained inside the iframe while use the ClipboardJS global defined in the top window. Indeed, ClipboardJS checks if the target (the button to copy the link) is an HTMLElement. To do so, it uses the "instanceof" keyword. However, the __proto__ (what is used for computing instanceof) of the target is different depending on the browser. For Chrome, the HTMLElement's __proto__ depends on which "document" it was created. On Firefox, when attaching an element to a parent, it will switch __proto__ to the one from the frame from which it is attached. To fix this, we use the ClipboardJS from the element's instance window. In any case, using instanceof when working with iframe is a bad idea, see [1]. In this case, the fix is made because ClipboardJS is an external library. Steps to reproduce: - Download Firefox 109+ - Go on Website and switch to edit mode - Click on a Link : A traceback appears. [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms closes odoo/odoo#111266 X-original-commit: 732848f2b52bea4ebae18cb5adedf581d5112aa6 Signed-off-by: Quentin Smetz (qsm) Signed-off-by: Arthur Detroux (ard) --- .../src/js/wysiwyg/widgets/link_popover_widget.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js index 372938a478e..388b6b6a74f 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_popover_widget.js @@ -38,7 +38,15 @@ const LinkPopoverWidget = Widget.extend({ this.$fullUrl = this.$('.o_we_full_url'); // Copy onclick handler - const clipboard = new ClipboardJS( + // ClipboardJS uses "instanceof" to verify the elements passed to its + // constructor. Unfortunately, when the element is within an iframe, + // instanceof is not behaving the same across all browsers. + const containerWindow = this.container.ownerDocument.defaultView; + let _ClipboardJS = ClipboardJS; + if (this.$copyLink[0] instanceof containerWindow.HTMLElement) { + _ClipboardJS = containerWindow.ClipboardJS; + } + const clipboard = new _ClipboardJS( this.$copyLink[0], {text: () => this.target.href} // Absolute href );