From 4562b4ad697c355936e34bcd8b18f12a2fc66952 Mon Sep 17 00:00:00 2001
From: Nicolas Bayet <nby@odoo.com>
Date: Wed, 21 Dec 2022 14:34:11 +0000
Subject: [PATCH] [FIX] web_editor: prevent edition on void elements

Before this commit, it was possible to edit void element if they were
branded. It does not make sense to edit a void element.

task-3096813

X-original-commit: fbf633b8110a74dbf25bdc5372a60e793017fbdc
Part-of: odoo/odoo#110513
---
 .../static/src/js/editor/odoo-editor/src/OdooEditor.js        | 4 +++-
 .../static/src/js/editor/odoo-editor/src/utils/sanitize.js    | 3 ++-
 .../static/src/js/editor/odoo-editor/src/utils/utils.js       | 3 +++
 .../static/src/js/editor/odoo-editor/test/spec/link.test.js   | 2 +-
 4 files changed, 9 insertions(+), 3 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 f6b7ac1efea..8055344966c 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
@@ -70,6 +70,7 @@ import {
     parseHTML,
     splitTextNode,
     isEditorTab,
+    isVoidElement
 } from './utils/utils.js';
 import { editorCommands } from './commands/commands.js';
 import { Powerbox } from './powerbox/Powerbox.js';
@@ -2161,7 +2162,8 @@ export class OdooEditor extends EventTarget {
         this.observerUnactive('_activateContenteditable');
         this.editable.setAttribute('contenteditable', this.options.isRootEditable);
 
-        for (const node of this.options.getContentEditableAreas(this)) {
+        const editableAreas = this.options.getContentEditableAreas(this).filter(node => !isVoidElement(node));
+        for (const node of editableAreas) {
             if (!node.isContentEditable) {
                 node.setAttribute('contenteditable', true);
             }
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/sanitize.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/sanitize.js
index bc9affb9e6c..d64fa5dbccc 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/sanitize.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/sanitize.js
@@ -18,6 +18,7 @@ import {
     isZWS,
     getUrlsInfosInString,
     URL_REGEX,
+    isVoidElement,
 } from './utils.js';
 
 const NOT_A_NUMBER = /[^\d]/g;
@@ -219,7 +220,7 @@ class Sanitize {
             // Ensure elements which should not contain any content are tagged
             // contenteditable=false to avoid any hiccup.
             if (
-                (isMediaElement(node) || node.tagName === 'HR') &&
+                isVoidElement(node) &&
                 node.getAttribute('contenteditable') !== 'false'
             ) {
                 node.setAttribute('contenteditable', 'false');
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
index c0d6b60bfd1..f68c62c6974 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/utils/utils.js
@@ -1351,6 +1351,9 @@ export function isMediaElement(node) {
             (node.classList.contains('o_image') || node.classList.contains('media_iframe_video')))
     );
 }
+export function isVoidElement(node) {
+    return isMediaElement(node) || node.tagName === 'HR';
+}
 
 export function containsUnremovable(node) {
     if (!node) {
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/link.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/link.test.js
index 5d605039112..3418ac272a3 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/link.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/link.test.js
@@ -399,7 +399,7 @@ describe('Link', () => {
             }, {
                 isRootEditable: false,
                 getContentEditableAreas: function (editor) {
-                    return editor.editable.querySelectorAll('a span');
+                    return [...editor.editable.querySelectorAll('a span')];
                 }
             });
         });