[FIX] web_editor: issue with copy paste

Before this commit:

When attempting to copy a button that is a direct child of a div tag, the div
was unintentionally copied along with the button, leading to additional space
upon pasting, along with the background color.

After this commit:

Now, only the button will be copied and pasted

task-3764652

closes #159306

X-original-commit: a42ca8f
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js

@@ -3910,9 +3910,13 @@ export class OdooEditor extends EventTarget {
             const ancestorsList = [commonAncestorElement, ...ancestors(commonAncestorElement, blockEl)];
             // Wrap rangeContent with clones of their ancestors to keep the styles.
             for (const ancestor of ancestorsList) {
-                const clone = ancestor.cloneNode();
-                clone.append(...rangeContent.childNodes);
-                rangeContent.appendChild(clone);
+                // Keep the formatting by keeping inline ancestors and paragraph
+                // related ones like headings etc.
+                if (!isBlock(ancestor) || paragraphRelatedElements.includes(ancestor.nodeName)) {
+                    const clone = ancestor.cloneNode();
+                    clone.append(...rangeContent.childNodes);
+                    rangeContent.appendChild(clone);
+                }
             }
         }
         const dataHtmlElement = document.createElement('data');
@@ -4939,6 +4943,12 @@ export class OdooEditor extends EventTarget {
             this._applyCommand("insert", text);
         } else if (odooEditorHtml) {
             const fragment = parseHTML(this.document, odooEditorHtml);
+            const selector = this.options.renderingClasses.map(c => `.${c}`).join(',');
+            if (selector) {
+                for (const element of fragment.querySelectorAll(selector)) {
+                    element.classList.remove(...this.options.renderingClasses);
+                }
+            }
             // Instantiate DOMPurify with the correct window.
             this.DOMPurify ??= DOMPurify(this.document.defaultView);
             this.DOMPurify.sanitize(fragment, { IN_PLACE: true });

addons/web_editor/static/src/js/editor/odoo-editor/test/spec/copyPaste.test.js

@@ -100,8 +100,8 @@ describe('Copy', () => {
                     const clipboardData = new DataTransfer();
                     triggerEvent(editor.editable, 'copy', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('First');
-                    window.chai.expect(clipboardData.getData('text/html')).to.be.equal('<li>First</li>');
-                    window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('<li>First</li>');
+                    window.chai.expect(clipboardData.getData('text/html')).to.be.equal('First');
+                    window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('First');
                 },
             });
             await testEditor(BasicEditor, {
@@ -110,8 +110,8 @@ describe('Copy', () => {
                     const clipboardData = new DataTransfer();
                     triggerEvent(editor.editable, 'copy', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('List');
-                    window.chai.expect(clipboardData.getData('text/html')).to.be.equal('<li>List</li>');
-                    window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('<li>List</li>');
+                    window.chai.expect(clipboardData.getData('text/html')).to.be.equal('List');
+                    window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('List');
                 },
             });
             await testEditor(BasicEditor, {
@@ -120,8 +120,8 @@ describe('Copy', () => {
                     const clipboardData = new DataTransfer();
                     triggerEvent(editor.editable, 'copy', { clipboardData });
                     window.chai.expect(clipboardData.getData('text/plain')).to.be.equal('First');
-                    window.chai.expect(clipboardData.getData('text/html')).to.be.equal('<li><span style="font-size: 48px;"><font style="color: rgb(255, 0, 0);">First</font></span></li>');
-                    window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('<li><span style="font-size: 48px;"><font style="color: rgb(255, 0, 0);">First</font></span></li>');
+                    window.chai.expect(clipboardData.getData('text/html')).to.be.equal('<span style="font-size: 48px;"><font style="color: rgb(255, 0, 0);">First</font></span>');
+                    window.chai.expect(clipboardData.getData('text/odoo-editor')).to.be.equal('<span style="font-size: 48px;"><font style="color: rgb(255, 0, 0);">First</font></span>');
                 },
             });
         })