feat: add 2 more nesting levels for toc

[regevbr]

fix: #1216
feature request: https://requarks.canny.io/wiki/p/allow-to-select-toc-depth-level (20 votes)

Added 2 more levels of table of contents.
If you think that by default it is too much, please let me know I will add a configuration for it

[NGPixel]

This should be configurable in the admin. Not everyone want to see H3 items in the TOC (myself included).

[regevbr]

Sure will add it soon

[regevbr]

Added level control - can be between 1-4:

@NGPixel can you please CR?

[regevbr]

@NGPixel did you have a chance to look at this PR?

[regevbr]

@NGPixel can you CR this for the next version?
There are a few up-votes in https://requarks.canny.io/wiki/p/allow-to-select-toc-depth-level

[fireundubh]

Looking forward to this feature. 👍

[regevbr]

@NGPixel this PR is ready for review as far as I understand

[fireundubh]

I pulled this into a localhost build. Just a couple of UX comments.

Typos

First, there are some minor text issues in the configuration menu:

• In Table Of Contents Nesting Level, the Of should be lowercased.
• In Select the max level ot nesting in page table of contents, the ot should be of.

Documentation

The text could be more clearly written like so (or something like this):

• Label: Show heading levels up to: or Max Heading Level (because NGPixel seems to prefer title case for labels)
• Help Message: The table of contents will show headings up to the selected level. By default, only headings up to H2 are shown.

UI

I would change the input box to either a horizontal radial menu or a dropdown menu. As you said in a previous comment, there is a constraint ("can be between 1-4"), so there is no sense in allowing the user to manually enter a value because the possible options are fixed. I also think H1, H2, H3, and H4 would be preferable over 1, 2, 3, and 4.

Horizontal Radio Group

Here's a horizontal radio group:

                  v-radio-group(
                    row
                    outlined
                    prepend-icon='mdi-serial-port'
                    v-model='config.tocLevel'
                    label='Max Heading Level'
                    persistent-hint
                    hint='The table of contents will show headings up to the selected level. By default, only heading levels up to H2 are shown.'
                    )
                    v-radio(
                      label='H1'
                      v-bind:value='1'
                    )
                    v-radio(
                      label='H2'
                      v-bind:value='2'
                    )
                    v-radio(
                      label='H3'
                      v-bind:value='3'
                    )
                    v-radio(
                      label='H4'
                      v-bind:value='4'
                    )

With a v-spacer (looks a bit cleaner, but a 1/10 spacer would be ideal):

Support

Finally, to avoid future requests related to supporting more headings, I think you might as well add support for H5 and H6 now.

[regevbr]

Thanks @fireundubh will fix it soon

[regevbr]

Thanks @fireundubh for the suggestions. Frontend is not my strong suite so I expected some comments on that side :-)
I applied all your suggestions:

I want to add a page control level for the toc level as well and will finish it soon

[regevbr]

I also added toc level control per page:

@NGPixel can you please CR it. I'm not sure about the migration scripts versioning so please let me know what should I do about it.

[regevbr]

I also added the page toc level to the metadata when storing it.
@NGPixel I rebased the branch with the master again as it caused me a few issues.

[regevbr]

I will try to also add to this PR the ability to collapse the toc and make it configurable from what level of toc will it happen.

[regevbr]

Just worked a few hours to improve the feature.
I added a collapsing feature. You can control from what header level collapsing will occur.

To sum up the feature:

1. You can control (globally and per page) the nesting level of the table of contents.
2. You can control from what level, collapsing will occur (globally and per page) so that up to that level all entries will be shown and to see the rest you will need to click the toc entry.
   Check out the gif below for a quick overview.

@NGPixel and @fireundubh I would love to get any comments on the UI/UX as it is not my strong suite.

[NGPixel]

Change target branch to dev for this PR.

[LucaNerlich]

Whats the status on this PR? Id really love to use this feature.

H1 and H2 only for TOC just doesnt cut it for longer pages.

Ah i see, planned for 3.0 #2189

[PD5DJ]

Is it possible to mannually add this now by ourselves manually?
As we desperate need this at the moment.

[cyr0nk0r]

Is there any chance of this feature getting implemented? It looks like it got pretty far in the design.