TheOdinProject
Bug: Mermaid diagrams not working on lesson previews
Checks
- [X] I have thoroughly read and understand The Odin Project Contributing Guide
- [X] The title of this issue follows the
Bug: brief description of bugformat, e.g.Bug: Lesson complete button does not update on click - [ ] Would you like to work on this issue?
Bug description
Mermaid diagrams aren't rendering correctly on our lesson preview tool.
How to reproduce
- Visit /lessons/previews
- Paste the contents of the Revisiting Rock Paper Scissors lesson into the input
- Click the preview button and scroll down to the "Using branches section"
- 💥 the diagram will be broken and displayed like this:
Expected behavior
- Visit /lessons/previews
- Paste the contents of the Revisiting Rock Paper Scissors lesson into the input
- Click the preview button and scroll down to the "Using branches section"
- The diagram will be displayed like this:
What browsers are you seeing the problem on?
Chrome
What OS are you using?
MacOS
Discord Name
KM
Additional Comments
The markup appears to be correct, I think it might be an issue with how we're initializing mermaid when the diagramming Stimulus controller connects.
Haven't had a huge amount of time to explore this, but it's likely due to the hidden class on the container for the markdown preview itself (where the hidden class is added on load due to app/javascript/controllers/tabs_controller.js).
If you comment out the contents of TabsController.prototype.showTab so it doesn't get the hidden class on load, then throw in the mermaid code, it'll render just fine.
If you manually add hidden to the div in app/views/lessons/previews/show.html.erb and do the same, when you remove the hidden class in devtools then the diagram is incorrectly rendered.
So basically, when mermaid tries to render the diagram (the moment it appears in the textarea), if the diagram itself is inside a hidden container, it gets all the wrong SVG values.
The thing I found awkward to play around with is that the markdown preview itself is always rendered from the start but just display: none, and not rendered when you hit the Preview button. I was wondering if the preview component was only rendered when you hit Preview that you could add an inline script to it that fires a custom event which the diagramming_controller could listen for and only run mermaid once triggered. Though that seems like it'd affect some other things too.
