fix: Table of Contents doesn't work correctly with Markdown Section in demo site/new components

🐛 Bug Report

Table of Contents cannot scan the content of Markdown Sections when interacting with the application in the usual way, specifically:

• When the FluentTableOfContents.QueryDom method is called by FluentTableOfContents.OnAfterRenderAsync, the contents of the Markdown Sections are not present, so the correct table of contents will not be obtained.
• After changing the Location, the FluentTableOfContents.QueryDom method is called by FluentTableOfContents.LocationChanged, the same will happen.

The error occurs on pages like DesignTokens, CodeSetup, …

It is possible to get a Table of Contents as expected of the above pages with the following steps:

• Open/refresh the page DesignTokens, wait for the content of the Markdown Section to be present.
• According to issue #413, Navigation Menu’s selected is Home so we can navigate to DesignTokens to call FluentTableOfContents.QueryDom by FluentTableOfContents.LocationChanged, then we will get a correct table of contents.

Doing the above with the MarkdownSection page, we get a table of contents but it also contains the content of DemoSection.

🤔 Expected Behavior

• Table of Contents can scan the content of Markdown Sections.
• Exceptions can be set for the scanned contents of the table of contents.

😯 Current Behavior

Can’t get a Table of Contents and How to get Table of Contents:

https://github.com/microsoft/fluentui-blazor/assets/72692627/6603f012-52e7-4a4e-b9f5-2cd5c601f0ed

Table of Contents scans the content of DemoSection:

https://github.com/microsoft/fluentui-blazor/assets/72692627/e7e27828-35f1-41ef-8a2c-815e224d9f0a

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: Windows 10
• Browser Microsoft Edge

[vnbaaij]

One other thing; the FluentMarkdownSection will not be part of the next version. It will just be a helper component in the demo.

We decided to remove it from the set as we don’t want to have external dependencies (in this case Markdig) in the library package

[vnbaaij]

One more one other thing: The TableOfContents will also not be part of the next version. It too will be just an example component in the demo environment and not an out-of-the-box component.

Reasoning behind this is actually because of this issue and fix. To make sure the ToC gets updated after new headings have been added to the DOM, we need to take quite a few steps to achieve that:

• Add a reference to the TableOfContent component in the DemoMainLayout component (in razor and in code)
• Create an EventCallback and handler in the DemoMainLayout.razor.cs file
• Cascade the event down in the @Body parameter of DemoMainLayout
• Add code to pages that alter the DOM so the cascaded event gets raised.

In this case the event needs to be raised from the page that contains a MarkdownSection component that adds headings to the content of the page. The MarkdownSection component has been extended with an EventCallback (OnContentConverted) which gets called after a conversion to HTML has been done.

These are doable steps, but it is not something we can automate with installation or ServiceCollection extension or something like that. As there are too many manual steps involved, we do not want to include it in the box but supply code/example how someone can do this/use this in their own project. The demo environment has the steps mentioned above implemented and the documentation on the TableOfContents page has been extended.