Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Discrepency between TOC component and auto sidebar #1399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 task done
13protons opened this issue Mar 4, 2019 · 7 comments
Open
1 task done

Discrepency between TOC component and auto sidebar #1399

13protons opened this issue Mar 4, 2019 · 7 comments
Assignees
@shigma
Labels
topic: markdown Relates to VuePress markdown type: enhancement Request to enhance an existing feature

Comments

@13protons
Copy link

13protons commented Mar 4, 2019 •
edited
Loading

  • 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:
this markdown works

With expected output:
auto sidebar picks up h3s when h2 is present

This doesn't (notice ### preceding 'Underlying' vs ##)
this markdown doesnt work

With this output highlighting difference between sidebar and TOC
auto sidebar ignores h3 without h2 despite toc working ok

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
Copy link
Collaborator

shigma commented Mar 4, 2019

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

@shigma shigma added the topic: markdown Relates to VuePress markdown label Mar 4, 2019
@13protons
Copy link
Author

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

kapture 2019-03-06 at 10 27 52

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
Copy link
Author

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

kapture 2019-03-06 at 10 37 24
:

@shigma
Copy link
Collaborator

shigma commented Mar 6, 2019

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.

@shigma shigma added the type: enhancement Request to enhance an existing feature label Mar 6, 2019
@13protons
Copy link
Author

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

@13protons
Copy link
Author

13protons commented Mar 6, 2019 •
edited
Loading

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

@shigma
Copy link
Collaborator

shigma commented Mar 6, 2019

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!

@shigma shigma mentioned this issue Mar 13, 2019
Merged
18 tasks
@dennisreimann dennisreimann mentioned this issue Aug 6, 2019
Closed
@Enteleform Enteleform mentioned this issue Mar 18, 2020
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@shigma shigma

Labels
topic: markdown Relates to VuePress markdown type: enhancement Request to enhance an existing feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@13protons @shigma