Mermaid charts convert to text on live reload until page refresh

[jannis-baum]

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.

[tuurep]

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]

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.

[tuurep]

Tried to look for any relevant issues on the server- vs. client-side rendering, but couldn't see any.

I'd say we should merge this, and could do a release at this point.