From 8642b0c40966d51d529691d20ab503493bc2cf4e Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Mon, 16 Oct 2023 11:05:06 +0200
Subject: [PATCH] [IMP] website: make table of content fully previewed during
 drag

Before this commit, the "Table of Content" snippet only got its
navigation part rendered once the block was dropped.
In [1] when the "New page from template" feature was introduced, a
default pre-rendered content was introduced so that the "Table of
Content" snippet was properly rendered in the template previews where it
was used.

This commit moves this pre-rendered content from [1] into the base
definition of the snippet itself.
There is no collision problem regarding the default ids that are
included because the dynamic content is re-generated when the block is
dropped and whenever the headers texts are changed.

[1]: https://github.com/odoo/odoo/commit/e0796020ee0c3188e1e9d9fa077de73a2211c6f7#diff-bee4662b672e30dbfb9778f8747fee45698d9b8d16282d8f80066d8a30137928R35-R50

task-3555325

Part-of: odoo/odoo#138748
---
 .../views/new_page_template_templates.xml       | 17 -----------------
 .../views/snippets/s_table_of_content.xml       | 11 ++++++++---
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/addons/website/views/new_page_template_templates.xml b/addons/website/views/new_page_template_templates.xml
index 9eed0a79192..f776d05a4d7 100644
--- a/addons/website/views/new_page_template_templates.xml
+++ b/addons/website/views/new_page_template_templates.xml
@@ -1084,23 +1084,6 @@ overridden by modules), because:
 
 <!-- Previews for blocks that normally generate part of their content upon drop -->
 <!-- Defined in website so that every theme can benefit from it -->
-<!-- Table of content: define the entries that match the default text -->
-<template id="new_page_template_s_table_of_content" inherit_id="s_table_of_content" primary="True">
-    <xpath expr="//div[hasclass('s_table_of_content_navbar')]" position="attributes">
-        <attribute name="style">top: 76px; max-height: calc(100vh - 96px);</attribute>
-    </xpath>
-    <xpath expr="//div[hasclass('s_table_of_content_navbar')]" position="inside">
-        <a href="#table_of_content_heading_1_1" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0 active">Intuitive system</a>
-        <a href="#table_of_content_heading_1_2" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Design features</a>
-    </xpath>
-    <xpath expr="//section//section[1]//h2" position="attributes">
-        <attribute name="id">table_of_content_heading_1_1</attribute>
-    </xpath>
-    <xpath expr="//section//section[2]//h2" position="attributes">
-        <attribute name="id">table_of_content_heading_1_2</attribute>
-    </xpath>
-</template>
-
 <!-- Form: define the default set of form fields -->
 <template id="new_page_template_s_website_form" inherit_id="s_website_form" primary="True">
     <xpath expr="//section" position="attributes">
diff --git a/addons/website/views/snippets/s_table_of_content.xml b/addons/website/views/snippets/s_table_of_content.xml
index 40a4759b50e..92aa87ebdc6 100644
--- a/addons/website/views/snippets/s_table_of_content.xml
+++ b/addons/website/views/snippets/s_table_of_content.xml
@@ -6,11 +6,16 @@
         <div class="container">
             <div class="row s_nb_column_fixed">
                 <div class="col-lg-3 s_table_of_content_navbar_wrap s_table_of_content_navbar_sticky s_table_of_content_vertical_navbar d-print-none d-none d-lg-block o_not_editable o_cc o_cc1" data-name="Navbar">
-                    <div class="s_table_of_content_navbar list-group o_no_link_popover"/>
+                    <div class="s_table_of_content_navbar list-group o_no_link_popover"
+                        style="top: 76px; max-height: calc(100vh - 96px);"
+                    >
+                        <a href="#table_of_content_heading_1_1" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0 active">Intuitive system</a>
+                        <a href="#table_of_content_heading_1_2" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Design features</a>
+                    </div>
                 </div>
                 <div class="col-lg-9 s_table_of_content_main oe_structure oe_empty" data-name="Content">
                     <section class="pb16">
-                        <h2 data-anchor="true">Intuitive system</h2>
+                        <h2 id="table_of_content_heading_1_1" data-anchor="true">Intuitive system</h2>
                         <h4>What you see is what you get</h4>
                         <p>
                             Insert text styles like headers, bold, italic, lists, and fonts with
@@ -28,7 +33,7 @@
                         </p>
                     </section>
                     <section class="pb16">
-                        <h2 data-anchor="true">Design features</h2>
+                        <h2 id="table_of_content_heading_1_2" data-anchor="true">Design features</h2>
                         <h4>Bootstrap-based templates</h4>
                         <p>
                             Easily design your own Odoo templates thanks to clean HTML