From 5c81185dab17eb0a785f19f6c75eac763e36e4f4 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Thu, 25 Aug 2022 11:11:32 +0000 Subject: [PATCH] [FIX] web_editor: differentiate images from text within Chrome iframe Since [1] when the website UI was moved to the backend, the edited page is inside an iframe in Chrome. Conditions based on instanceof are not reliable anymore: the element's type is specific to the document inside which it was created. Because of this, `targetEl instanceof HTMLElement` is `true` when the snippet was dragged from the options menu - because both `targetEl` and `HTMLElement` are the ones from the main document where the editor options panel is. But it is `false` if the page was loaded because the `targetEl` is of a type from the iframe's document. We cannot use `targetEl.ownerDocument.defaultView.HTMLElement` because the `ownerDocument` is the current one to which the target belongs - not the one where it was created. So, a full condition would have to look like this: ```js (targetEl instanceof this.odooEditor.document.defaultView.HTMLElement || targetEl instanceof HTMLElement) ``` That is pretty verbose, so I check the `nodeType` instead. Steps to reproduce: - Use Chrome. - Drop a "Text - Image" snippet. - Save. - Edit. - Select image. - Press "CTRL+K". => An `` is created instead of triggering the image link tools - as if it was a text selection (except the text link tool is not available). [1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b task-2962619 Part-of: odoo/odoo#98889 --- addons/web_editor/static/src/js/wysiwyg/wysiwyg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 6eca81e396f..071f2c871c5 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -1080,7 +1080,7 @@ const Wysiwyg = Widget.extend({ openLinkToolsFromSelection() { const targetEl = this.odooEditor.document.getSelection().getRangeAt(0).startContainer; // Link tool is different if the selection is an image or a text. - if (targetEl instanceof HTMLElement + if (targetEl.nodeType === Node.ELEMENT_NODE && (targetEl.tagName === 'IMG' || targetEl.querySelectorAll('img').length === 1)) { core.bus.trigger('activate_image_link_tool'); return;