Component that renders a table of content to help navigating the page content.
The implementation of this feature is tracked by issue #1816.
For discussing this spec, please use the discussion thread #1822.
As an author, I want to insert a table of content to my page, so that visitors can easily navigate to the titles that are within the page.
Lists all H1-H6 elements that are rendered on the page, regardless of which component renders them (core title or teaser components, custom components, RTE, etc).
Lists also those titles that are coming from the page template or from (nested) experience fragments.
Links to the corresponding component on the page by using the id attribute that is set on the closest parent from the title element.
Creates a nested list of the titles found on the page, rendering them either with UL/LI or OL/LI elements.
Capability to choose how to render the list (unordered list - the default, or ordered list).
Capability to restrict the start level (default being 1) and the end level (default being 6) of the titles listed.
Capability to restrict which title elements are to be listed based on their CSS class names, or of the class name of the elements containing them.
The component must not impact page speed in any substantial ways:
It must avoid any cumulative layout shifts that could be introduced by client-side rendering.
It must not slow down the first byte sent to the browser.
Any HTML rewriter must not block the output, or at least not until the placeholder of the TOC component is reached on the page.
At least in the initial version, container components like Carousel, Tabs and Accordion will not yet be able to automatically navigate to the title items that they might contain when the visitor wants to navigate to them.