From b4ba82dc20c1a5d8bb69c9236143f474bda73c22 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Wed, 26 Apr 2023 14:03:38 +0000
Subject: [PATCH] [FIX] web_editor: correct the custom block HTML

Since [this other commit], custom blocks are not displayed correctly in
the editor. The DIV tag is not supposed to be self-closing. However,
older versions of JQuery supported it anyway (they turned `<div/>` into
`<div></div>`) Since the update of JQuery to version 3.6.3, self-closing
DIVs are no longer correctly supported by JQuery.

For example, if you type this in the Chrome console:
```
$(`<div id="divRoot">
    <div id="selfClosing"/>
    <div id="notSelfClosing"></div>
</div>`)[0]
```
JQuery will create the following structure:
```
<div id="divRoot">
    <div id="selfClosing">
        <div id="notSelfClosing"></div>
    </div>
</div>
```
JQuery doesn't parse the HTML correctly and returns a wrong structure
(the `#notSelfClosing` is moved inside the `#selfClosing`).

Note that doing `$('<div/>')[0]` will return a correctly parsed DIV.

This commit corrects the layout structure of custom blocks so that they
are not composed of self-closing DIV.

Steps to reproduce the issue:
- Edit a website page
- Drop a block
- Click on the save icon
- Click on "Save and reload"

=> The custom block is not displayed correctly.

[this other commit]: https://github.com/odoo/odoo/commit/ae1cd3d5bb99b9835501144522b71f152aaf8e34

task-3290172

closes odoo/odoo#120027

X-original-commit: fd76d59bcd08e824c4e46814d0754a225f7a1b72
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
Signed-off-by: Guillaume-gdi <gdi@odoo.com>
---
 addons/web_editor/static/src/js/editor/snippets.editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index f0fdf84c8fa..6ac779c5d4c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2897,7 +2897,7 @@ var SnippetsMenu = Widget.extend({
                 // Create the thumbnail
                 const $thumbnail = $(`
                     <div class="oe_snippet_thumbnail">
-                        <div class="oe_snippet_thumbnail_img" style="background-image: url(${thumbnailSrc});"/>
+                        <div class="oe_snippet_thumbnail_img" style="background-image: url(${thumbnailSrc});"></div>
                         <span class="oe_snippet_thumbnail_title">${name}</span>
                     </div>
                 `);