diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index 2f318ef1c2a..48baaded4e1 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -3290,6 +3290,11 @@ export class OdooEditor extends EventTarget { */ _onSelectionChange() { const selection = this.document.getSelection(); + const anchorNode = selection.anchorNode; + if (anchorNode && closestElement(anchorNode, '.oe-blackbox')) { + return; + } + if ( !this.editable.contains(selection.anchorNode) && !this.editable.contains(selection.focusNode) @@ -3499,6 +3504,12 @@ export class OdooEditor extends EventTarget { * @private */ _handleCommandHint() { + const selection = this.document.getSelection(); + const anchorNode = selection.anchorNode; + if (anchorNode && closestElement(anchorNode, '.oe-blackbox')) { + return; + } + const selectors = { BLOCKQUOTE: 'Empty quote', H1: 'Heading 1', @@ -3567,12 +3578,16 @@ export class OdooEditor extends EventTarget { } _fixSelectionOnContenteditableFalse() { + const selection = this.document.getSelection(); + const anchorNode = selection.anchorNode; + if (anchorNode && closestElement(anchorNode, '.oe-blackbox')) { + return; + } // When the browser set the selection inside a node that is // contenteditable=false, it breaks the edition upon keystroke. Move the // selection so that it remain in an editable area. An example of this // case happend when the selection goes into a fontawesome node. - const selection = this.document.getSelection(); if (!selection.rangeCount) { return; } diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index f12fa89e336..f17200bb03f 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -286,6 +286,13 @@ const Wysiwyg = Widget.extend({ this.showTooltip = true; this.$editable.on('dblclick', mediaSelector, function () { self.showTooltip = false; + + const selection = self.odooEditor.document.getSelection(); + const anchorNode = selection.anchorNode; + if (anchorNode && closestElement(anchorNode, '.oe-blackbox')) { + return; + } + const $el = $(this); let params = {node: this}; $el.selectElement(); @@ -1740,6 +1747,12 @@ const Wysiwyg = Widget.extend({ * Update any editor UI that is not handled by the editor itself. */ _updateEditorUI: function (e) { + let selection = this.odooEditor.document.getSelection(); + const anchorNode = selection.anchorNode; + if (anchorNode && closestElement(anchorNode, '.oe-blackbox')) { + return; + } + this.odooEditor.automaticStepSkipStack(); // We need to use the editor's window so the tooltip displays in its // document even if it's in an iframe. @@ -1787,7 +1800,7 @@ const Wysiwyg = Widget.extend({ this.toolbar.$el.find('#colorInputButtonGroup, #create-link').toggleClass('d-none', isInMedia && !$target.is('.fa')); this.toolbar.$el.find('.only_fa').toggleClass('d-none', !$target.is('.fa')); // Hide the create-link button if the selection spans several blocks. - const selection = this.odooEditor.document.getSelection(); + selection = this.odooEditor.document.getSelection(); const range = selection && selection.rangeCount && selection.getRangeAt(0); const $rangeContainer = range && $(range.commonAncestorContainer); const spansBlocks = range && !!$rangeContainer.contents().filter((i, node) => isBlock(node)).length;