From 62a8aec2b5d635325ea85c651fcb79d34cd5e45c Mon Sep 17 00:00:00 2001
From: abd-msyukyu-odoo <abd@odoo.com>
Date: Wed, 14 Sep 2022 09:40:15 +0000
Subject: [PATCH] [IMP] web_editor: embedded_view requirements

Add a custom class in web_editor to prevent the selection in an embedded view
(or another bloc using that class) from being moved out in multiple situations.
(onselectionchange, onkeyup, onmouseup, ...).

This is related to the block being contentEditable=False.

Prepares Task-2796156
Prepares odoo/enterprise#29423

X-original-commit: 86c14110294c5ff986ee88bb010dbc7513bf8b01
Part-of: odoo/odoo#101694
---
 .../src/js/editor/odoo-editor/src/OdooEditor.js | 17 ++++++++++++++++-
 .../web_editor/static/src/js/wysiwyg/wysiwyg.js | 15 ++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

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;