bootstrap-toc icon indicating copy to clipboard operation
bootstrap-toc copied to clipboard

Uncaught DOMException: Element.querySelector: '#3-1-some-title-level-3' is not a valid selector

Open bitonio opened this issue 1 year ago • 2 comments

Hello,

First, thanks for this plugin. I have some user generated Markdown converted to HTML with heading, without specifying the ID. The anchor generated by this plugin are friendly although if the heading starts with a digit, like

<h3> 3.1 Some title level 3</h3>

It will generate an id/anchor 3-1-some-title-level-3 This is not supported by querySelector.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

Similarly, an id starting with a digit (E.g., 1234-322-678) or a hyphen followed by a digit (E.g., -123), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs

bitonio avatar Jan 17 '24 00:01 bitonio

Hmm. What do you think it should do instead? Happy to review a pull request. A workaround is that you can generate your own ids, and the plugin will use those.

afeld avatar Jan 17 '24 06:01 afeld

Hi @afeld,

I'll open a pull request I have changed slightly the code to add a one letter prefix in case the id starts with a number, that does the trick. The upstream markdown code was generate by Python-Markdown and a few addons, the ids were also starting with numbers.

bitonio avatar Feb 10 '24 00:02 bitonio