Fix TableOfContents Examples links

[Kadirsaglm]

When an example heading in the readme.md file contains markdown elements like code, the generated heading ID is based only on the text before the markdown. This can lead to duplicate heading IDs. For example, in the DateTimeInput documentation, the following examples both end up with the same ID, "A", because DateTimeInput is formatted as code:

A DateTimeInput with some disabled dates that are supplied via a string array:
https://instructure.design/#DateTimeInput/#A

A DateTimeInput with some disabled dates that are supplied via a function:
https://instructure.design/#DateTimeInput/#A

Another common issue is that when linking to these examples from the table of contents, the ID includes whitespace from before the markdown part is cut off. However, the link’s href omits the trailing whitespace, causing the link to break. For instance, in the DateTimeInput docs:

A DateTimeInput with columns layout and a default value: https://instructure.design/#DateTimeInput/#A%20DateTimeInput%20with

And corresponding header
<h4 dir="ltr" id="A DateTimeInput with " class="css-xjt99e-view-heading">A DateTimeInput with <code>columns</code> layout and a default value:</h4>

To resolve these issues, I propose assigning example headings an ID in the format example-{number-of-example}. This ensures that each heading has a unique and functional ID.

[matyasf]

Thanks for the PR! While I like the approach of coming up with some logic for the anchor links, I feel that this solution would introduce too many, seemingly arbitrary conventions that documentation writers would have to follow (it only works on h4 headings under a heading called Examples).

I think a better solution would be something more generic that works for all table of contents items, e.g. use `heading.innerText.toLowerCase() to remove characters that cannot be in a link.

Also while you work on this part you could look into why anchors dont work when opened as links, e.g. https://instructure.design/#Badge/#Guidelines does not scroll down to the 'Guidelines' part, just shows the top of the page.

[matyasf]

see my comment above

[Kadirsaglm]

Thanks for the PR! While I like the approach of coming up with some logic for the anchor links, I feel that this solution would introduce too many, seemingly arbitrary conventions that documentation writers would have to follow (it only works on h4 headings under a heading called Examples).

I think a better solution would be something more generic that works for all table of contents items, e.g. use `heading.innerText.toLowerCase() to remove characters that cannot be in a link.

Also while you work on this part you could look into why anchors dont work when opened as links, e.g. https://instructure.design/#Badge/#Guidelines does not scroll down to the 'Guidelines' part, just shows the top of the page.

Thank you for the input. I changed the heading Id generation process in the compiledMarkdown.tsx.

I will look into the anchor issue as well.

[Kadirsaglm]

The issue with scrolling was that the scrollToElement callback function was triggered before the documentation was rendered, so it couldn't find the linked headings. I moved the scrollToElement callback function to make sure it is triggered after the documentation page is rendered.

[matyasf]

I like this solution, also now anchor links work, nice job!