Fix: Correctly render mermaid diagrams in markdown preview tool

[MaoShizhong]

Because

We initialise and run mermaid as soon as mermaid diagrams enter the DOM. If they have display: none, which they start off with as a child of a hidden parent element in the markdown preview page, they'll be rendered with incorrect SVG values - unable to rerender later as the mermaid text will have already been replaced.

This PR

• Extract mermaid rendering to separate stimulus action
• Runs diagramming#render when switching to rendered preview tab in the markdown preview tool
• Moves the diagramming controller connect out of shared content component and into lesson show view
• Replaces deprecated mermaid.init method with recommended new run method as per documentation for v10+

Issue

Closes #4783

Additional Information

Pull Request Requirements

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this PR follows the keyword: brief description of change format, using one of the following keywords:
  • Feature - adds new or amends existing user-facing behavior
  • Chore - changes that have no user-facing value, refactors, dependency bumps, etc
  • Fix - bug fixes
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• I have verified all tests and linters pass after making these changes.
• If this PR addresses an open issue, it is linked in the Issue section
• If applicable, this PR includes new or updated automated tests

[MaoShizhong]

Edit: Fixed the below since I forgot I could just move the diagramming controller out of the content container component and into the lesson show view instead, since that connection no longer needs to be in a component shared between lesson and markdown preview.

---

Unable to remove diagramming controller from content_container_component.html.erb else diagrams in lesson pages get rendered incorrectly (funky colours).

Therefore, also unable to prevent diagramming#connect being called on the "Write" page of the Markdown Preview tool, hence the conditional query selector to prevent any mermaid diagrams getting rendered with incorrect SVG values before we actually want to see them.

[KevinMulhern]

Thanks for fixing this @MaoShizhong 💪

It's a shame we can't keep the diagramming controller with the content container, but the trade off is worth it. It's a good solution! just one nit from me.

[KevinMulhern]

LGTM 🚀 nice work @MaoShizhong!