Ensure off-tab Mermaid diagrams render on show

What does this MR do and why?

Ensure off-tab Mermaid diagrams render on show — fixes Mermaid diagrams are not rendered when adding a... (#386219 - closed), and also happens to fix Commit comments don't render front-end GFM (#593663 - closed)! We use @slashmanov's suggestion of IntersectionObserver to trigger when previously-hidden diagrams appear for whatever reason, rather than a special case that only works for <details>.

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. Check out the branch.
  2. Open an MR at the overview tab.
  3. Switch to the changes tab.
  4. Add a comment with a Mermaid diagram, e.g.:
    ```mermaid
    graph LR; A-->B
    ```
  5. See it rendered on the changes tab.
  6. Switch back to overview; it should render there too!

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Asherah Connor

Merge request reports

Loading