From 1f4b606ad0b02deae69708033abbd5ccdfc92f95 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 18 Feb 2019 13:06:17 +0000
Subject: [PATCH] [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
---
.../static/src/js/wysiwyg/plugin/media.js | 36 +++++++++++++------
1 file 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 ae28226e1f2d..321531fa861e 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();
@@ -305,6 +309,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.
--
GitLab