Discrepency between TOC component and auto sidebar

[13protons]

• I confirm that this is an issue rather than a question.

Bug report

Version

0.14.10

Steps to reproduce

• Turn on auto sidebar in config.js
• Create a page that has headings with gaps (i.e. an h3 inside an h1)
• Add the [[toc]] component to the page
• Observe a discrepancy between TOC and auto sidebar

This works:

With expected output:

This doesn't (notice ### preceding 'Underlying' vs ##)

With this output highlighting difference between sidebar and TOC

What is expected?

Auto sidebar would index all headers on page (same as TOC)

What is actually happening?

Auto sidebar skips indexing headers if there's a gap in header hierarchy. It will render an h3 contained in an h2, contained in an h1, but will not render an h3 contained in an h1. the [[toc]] build-in does not have this problem.

Other relevant information

• Your OS: MacOS Mojave v10.14.2
• Node.js version: v8.10.0
• Browser version: Chrome Version 71.0.3578.98 (Official Build) (64-bit)
• Is this a global or local install? Local
• Which package manager did you use for the install? NPM
• Does this issue occur when all plugins are disabled?

[shigma]

So you actually want a sidebar similar to table of contents? It makes sense, but I really want to know what sidebar do you want the following title to generate?

# title1
### title2
## title3

[13protons]

hmmm, here's a test with the existing markdown-it TOC plugin that vuepress is already using:

The goal of the sidebar is probably not to emulate the toc plugin exactly, but it seems to have some handle on when to hide a subtree and when to pick it back up that's out of sync with the default implementation used for the sidebar. That's really my only observation - internal consistency with two 'baked in' features.

[13protons]

Here's another screen cap that is better at showing the discrepancy

:

[shigma]

Thanks for your issue. I understand your question. The truth is, at present, when using some kinds of "abnormal" heading, neither the TOC nor the sidebar behave satisfactorily. We may provide a unified and comprehensive solution in a future release.

[13protons]

Thanks for the followup - might be a good place for a PR if I have time to dig in

[13protons]

@shigma one last question while I have you - are these the two different implementations?:

• https://github.com/vuejs/vuepress/blob/760f90b914907001e48732e1823aa4a464ba2869/packages/%40vuepress/markdown/lib/tableOfContents.js

• vuepress/packages/@vuepress/theme-default/util/index.js

  Line 211 in d16d3d5

  function resolveItem (item, pages, base, groupDepth = 1) {

[shigma]

If you want to optimize TOC grouping behavior, you can modify this method:

vuepress/packages/@vuepress/core/lib/client/components/TOC.vue

Lines 32 to 54 in ff8df66

	groupHeaders (headers, startLevel = 1) {
	const list = []
	let index = 0
	while (index < headers.length) {
	const header = headers[index]
	if (header.level < startLevel) break
	if (header.level > startLevel) {
	const result = this.groupHeaders(headers.slice(index), header.level)
	if (list.length) {
	list[list.length - 1].children = result.list
	} else {
	list.push(...result.list)
	}
	index += result.index
	} else {
	if (header.level <= this.includeLevel[1] && header.level >= this.includeLevel[0]) {
	list.push({ ...header })
	}
	index += 1
	}
	}
	return { list, index }
	}

And contribution welcome!