Rework mermaid integration to support off-DOM rendering #4364
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a rework of how we integrate mermaid into the editor.
As reported in #4323, if we try to render a mermaid diagram in an element that isn't currently visible, it results in an error. This is an "expected" behaviour of using mermaid.init/run.
In this PR, I've updated to the latest mermaid and modified how we drive it. We now do the work to call
mermaid.render
with the diagram text to get the svg back and insert it ourselves.The downside is we have to do the error handling ourselves - so instead of the mermaid 'bomb' image, it now displays the error in text. It isn't as pretty, but to be honest, it feels more useful to know what the error was rather than just the fact there was an error.
I've also updated the internal APIs so nothing should be calling the global
mermaid
directly - we take care of that.Whilst I was at it, I also fixed #4358 as it the help sidebar wasn't making the call to render mermaid.