Collapsing not working in xhtml

[shenzo1]

Hello,

thanks for the great js! I am encountering issues in making the toc behave correctly in xhtml. The sections that should collapse don't as the parent/children relationship is not honored and all levels (h1, h2, h3) are considered to be at the same level. Everything else is functioning as it should. The collapsing works perfectly well in html but not in xhtml. Do you have any idea what would be the cause ot that?

[tscanlin]

Hi, there! Do you have an example somewhere that reproduces this behavior?

[shenzo1]

Well I am working on my local server but here's the code I am using from your example:
https://paste.ofcode.org/9ZytV8BwKjYgxdyyUjUb6k

[tscanlin]

When I try this locally it appears to nest as I would expect. Maybe I am not testing right though.

[shenzo1]

Ha interesting...I am testing locally on macos 10.14.6 with chrome and firefox and none appear to nest...I have been wondering if there was an issue with xhtml strict rules and the javascript code for nesting but it seems to work for you. Would you have any other idea as to what is going on? Thanks.

[tscanlin]

I’m not sure what else would be going on. Would you be able to host an example that reproduces this.

[shenzo1]

Thanks for your reply. I don't have the ability to host right now. But the page source of my test when displayed in a browser is exactly the same as the code posted earlier. Really puzzling that it is working perfectly for you!

[tscanlin]

Are you able to post a screenshot or something that shows the issue? Also I'm curious, what reason do you have for using xhtml?

I would definitely be open to a PR if you are able to figure out what the fix is but for now I'll just keep this open.

[shenzo1]

Here's a pic:

I use xhtml as a way to display xml files from conferences that involves custom non-html tags. I can use css to display those in xhtml, whereas they are ignored in html.

I will let you know if I find a solution. Thanks.

[tscanlin]

Hey, I was doing some reading and apparently tagName, a native DOM api, which is used by tocbot may return lowercase letters in xml. Does changing / overwriting this function to be like below fix the issue for you?

function getHeadingLevel (heading) {
    return +heading.nodeName.replace('H', '').replace('h', '')
}

[shenzo1]

Thanks, Tim. I must confess I am not very versed in javascript or any of this. I see the code you are suggesting me to replace is in the parse-content.js but as I am calling the script with a link and didn't install it locally with npm, how can I modify/override this function? Don't worry about it if it requires tedious explanations. Appreciate your help.

[tscanlin]

Can you paste your code again? The link above seems to have expired

[shenzo1]

Sure here it is: https://pastebin.com/QyPd2seV

[tscanlin]

It still seems to work fine for me with the code you provided. If you run tocbot.refresh() from the console does it look better?

[shenzo1]

no luck :( Could it be that it is working for you because you have tocbot installed with npm? I have installed it with npm but I am not clear about the following step to try it on my xhtml page:

If you installed it with npm and use sass / postcss you might try importing the styles from 'node_modules', see the includePath option documentation for more info

@import 'tocbot/src/scss/tocbot';

[tscanlin]

It looks like you are using it off the CDN though so I don't think that's the issue.

[shenzo1]

True. Using the same code as html (apart from the xhtlm specific DTDs etc.) works perfectly well. So it is definitely related to xhtml and how the javascript code is parsed in this context. What you mentioned earlier about xhtml/xml parsing javascript as lowercase would make sense as a potential cause for the issue I am encountering. But then I don't understand why it works as it is supposed to in your system. It can't be browser related either, the issue is encountered on Chrome, Firefox and Safari. MacOs? I don't see how that would affect anything but then I am not an expert in these things.

[tscanlin]

I made this PR with updated build files with the possible fix. Can you test it out and let me know if it fixes the issue for you?
#244

[shenzo1]

This has completely fixed it! It works now as it should on xhtml! Thanks so much for your help and this great piece of code!

[tscanlin]

Hey, glad the fix worked! And thanks for your helping testing it out and verifying! This is released in version 4.13.3