Scroll spying is not working if the heading has an inline include

[damithc]

This is the unsolved part of #1607

Scroll-spying of the pageNav is not working if the heading has an inline include (only in some specific situations)

Here is one example:

## <span class="text-danger">2</span> <include src="topic2.md#name" inline trim/>

Here is another:

The relevant source code is in https://raw.githubusercontent.com/se-edu/se-book/master/_markbind/boilerplates/container-inParent-asPanel.md

<panel type="seamless" expanded>
  <span slot="header" class="card-title"><markdown>## <include src="text.md#title" inline /></markdown></span>
  <include src="text.md#body" />
</panel>

Strangely, if I add some chars between ## and <include ..., it starts working again.

<panel type="seamless" expanded>
  <span slot="header" class="card-title"><markdown>## topic: <include src="text.md#title" inline /></markdown></span>
  <include src="text.md#body" />
</panel>

See #1607 for more info.

[FergusMok]

The problem may be browser-specific. Using Firefox and running the master branch for markbind, I don't encounter any issue.

However, currently on Chrome, the scroll spy is unable to work on most pages, and the temporary fix with 'topic:' has no effect either.

[tlylt]

After investigation, it seems like it is actually an issue with the id for the title used. In the page https://se-education.org/se-book/designFundamentals/index.html#-8 The id for the 'cohesion' section(and others have similar issue) is somehow '-8'

The main reason why there is such a strange case is because of the following issue discussed here:

If an anchor begins with a number (e.g. #1, #1-something, then ScrollSpy does not function (no active link highlighting). That's right, it's because you have to use valid CSS selectors.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

Edit: It seems like there are additional issues (panel header id) at play, debugging ...

[jovyntls]

As of MarkBind v3.1.1, the issue with invalid ids for the titles has been fixed (e.g. the id for 'cohesion' is now #cohesion instead of #-8), though the scrollspy issue remains.

After investigation, here are some weird things that fixed the scrollspy issue (not a solution, but hopefully these can provide inspiration for anyone debugging):

• Early return in assignPanelId such that node.attribs.panelId is not set to header.attribs.id
• Just displaying the panelId (e.g. {{ panelId }} in NestedPanel.vue)
  • I thought it may be an issue with the value of panelId changing, but using a Vue watcher on panelId showed no change/had no effect

Either of the above works (and also breaks things elsewhere). I couldn't find any root cause or solution though 😢

[ang-zeyu]

I can still reproduce the issue using the first example in the OP,

## <span class="text-danger">2</span> <include src="topic2.md#name" inline trim/>

The PR does not seem related. (although it rules out any issues with duplicate IDs from the anchor)

[ang-zeyu]

The main reason why there is such a strange case is because of the following issue discussed https://github.com/twbs/bootstrap/issues/28866:

Could we prepend something random in this case to fix this?