[FIX] web_editor: remove invisible space on insert media where forbidden

The web editor inserts zero-width characters (unicode 200B) around media
when inserting them in the DOM so as to be able to edit before and after
said media (contenteditable caveat). It should however not do so in fake
not-editable nodes - such as the navbar - given that we do not expect to
edit in them but only to replace the media. This ensures that behaviour.

closes odoo/odoo#31200

1 files changed, 26 insertions, 10 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/plugin/media.js b/addons/web_editor/static/src/js/wysiwyg/plugin/media.js
index ae28226e1f2..321531fa861 100644
--- a/addons/web_editor/static/src/js/wysiwyg/plugin/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/plugin/media.js
@@ -204,11 +204,13 @@ var MediaPlugin = AbstractPlugin.extend({
                             point.node.insertBefore(newMedia, node || null);
                         }
                     }
-                    if (!newMedia.previousSibling) {
-                        $(newMedia).before(this.document.createTextNode('\u200B'), newMedia);
-                    }
-                    if (!newMedia.nextSibling) {
-                        $(newMedia).after(this.document.createTextNode('\u200B'), newMedia);
+                    if (!this._isFakeNotEditable(newMedia)) {
+                        if (!newMedia.previousSibling) {
+                            $(newMedia).before(this.document.createTextNode('\u200B'), newMedia);
+                        }
+                        if (!newMedia.nextSibling) {
+                            $(newMedia).after(this.document.createTextNode('\u200B'), newMedia);
+                        }
                     }
                 } else {
                     var next = this.document.createTextNode(point.node.textContent.slice(point.offset));
@@ -216,11 +218,13 @@ var MediaPlugin = AbstractPlugin.extend({
 
                     $(point.node).after(next).after(newMedia);
                     point.node.parentNode.normalize();
-                    if (!newMedia.previousSibling) {
-                        $(newMedia).before(this.document.createTextNode('\u200B'), newMedia);
-                    }
-                    if (!newMedia.nextSibling) {
-                        $(newMedia).after(this.document.createTextNode('\u200B'), newMedia);
+                    if (!this._isFakeNotEditable(newMedia)) {
+                        if (!newMedia.previousSibling) {
+                            $(newMedia).before(this.document.createTextNode('\u200B'), newMedia);
+                        }
+                        if (!newMedia.nextSibling) {
+                            $(newMedia).after(this.document.createTextNode('\u200B'), newMedia);
+                        }
                     }
                     rng = this.context.invoke('editor.setRange', newMedia.nextSibling || newMedia, 0);
                     rng.normalize().select();
@@ -306,6 +310,18 @@ var MediaPlugin = AbstractPlugin.extend({
         this._createDropdownButton('padding', this.options.icons.padding, this.lang.image.padding, values);
     },
     /**
+     * Return true if the node is a fake not-editable.
+     *
+     * @param {Node} node
+     * @returns {Boolean}
+     */
+    _isFakeNotEditable: function (node) {
+        var contentEditableAncestor = dom.ancestor(node, function (n) {
+            return !!n.contentEditable && n.contentEditable !== 'inherit';
+        });
+        return !!contentEditableAncestor && contentEditableAncestor.contentEditable === 'false';
+    },
+    /**
      * Select the target media based on the
      * currently saved target or on the current range.
      *