Mermaid Rendering doesn't work when Mermaid is first entered into a page

[RickStrahl]

If you create Mermaid text like this:

```mermaid
graph LR
  A --- B
  B-->C[fa:fa-ban forbidden]
  B-->D(fa:fa-spinner);
```

into a page at first, the Mermaid diagram does not render initially.

If you then either:

• Save and reload the page
• Activate another page and come back
• Refresh the Preview Browser

Then the Mermaid diagram works fine.

Once a Mermaid diagram is on the page, everything works as expected - it's only on first entering that there's a problem.

Original issue picked up from this sample Gist:

https://gist.github.com/RickStrahl/b45f0f3d540b63b6f44a482f0bcc9b3d#gistcomment-4172886

[RickStrahl]

Troubleshooting the issue:

The issue is that MM only loads mermaid content on demand and some updates do not reload the entire preview, but rather just push the new content into the already loaded page, replacing only the content. Because the Mermaid script gets loaded into the header, then header is not refreshed and therefore the chart doesn't render.

Once a Mermaid has been rendered once - by opening a document that already has Mermaid in it, or by forcing a refresh via Preview Refresh or by switching Tabs, then everything works.

Currently there's no good way to differentiate between a request that needs to do a full refresh and just a 'replace content' mode as these operations happen on each keystroke (debounced). Pasting is just another key operation so there's nothing that tells.

Going to take a look at a few things like embedding script inline instead of in the headers - this didn't work in the old IE control, but perhaps with modern Chromium the script is executed if embedded.

[RickStrahl]

Ok I think this is now fixed:

Notice we still get smooth edits that don't 'flash' the page on each render as this simply replaces the content once the script is loaded in the page.

As said the issue was the first render when the page had previously loaded without the mermaid script.

The fix is a very hacky solution in the document updater that marshals the partial HTML fragment to render from the WPF host into the HTML document. The updater checks for Mermaid content and if found looks for the mermaid script - if not found it then reloads the page. Subsequent refreshes should then find the script and continue to use the normal in-place update process which provides smooth updates of all content instead of a full page reload that otherwise would be required (like some other script solutions like gists).

Will be updated in 2.5.7.1+