Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mermaid charts convert to text on live reload until page refresh #197

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

jannis-baum
Copy link
Owner

@jannis-baum jannis-baum commented Dec 17, 2024

Close #194

Main change is calling mermaid.run(...) in the UPDATE message callback. To make that work I had to move around a bunch of stuff, resulting in all our client-side stuff now also being a more modern JS module instead of a plain script. And hopefully more readable.

@jannis-baum jannis-baum requested a review from tuurep December 17, 2024 00:45
@tuurep
Copy link
Collaborator

tuurep commented Dec 25, 2024

Alright

Context: I told Jannis I see an annoying visual flicker which is best seen in a video recording. Now I finally got around to recording this. Other than that, the fix is very nice.

flicker.mp4

So whenever there's a mermaid chart, on every keystroke it has to kinda reposition itself on the page, even if not editing the mermaid part itself. Editing those large h1 elements below shows it best.

Note, if there's a syntax error, this doesn't happen, which is nice:

bomb.mp4

@jannis-baum
Copy link
Owner Author

Yeah the flicker is because Mermaid really wants to be rendered client-side. I couldn't find a way to render it server-side without introducing a ton of really ugly hacks and faking a DOM, which doesn't seem worth it to me just because of Mermaid. You can also check again if you find a good way of rendering server-side, otherwise I would suggest leaving it like this and merging.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mermaid charts convert to text on live reload until page refresh
2 participants