search

sagemathinc / cocalc

CoCalc: Collaborative Calculation in the Cloud
https://CoCalc.com
Other
1.17k stars 216 forks source link

no mermaid in rendered slate view #7733

Closed haraldschilly closed 2 months ago

haraldschilly commented 2 months ago

To reproduce: create a file mermaid.md and then add

# header

```mermaid
flowchart TD
    Start --> Stop


The preview on the right just shows the code.

This should behave like with formulas, where the source is only visible after you click on it.

**WORKAROUND**: change the frame  type on the right to "Locked View"
williamstein commented 2 months ago

Note -- i am NOT going to implement the "only show editor" on focus request unless mermaid is suddenly really popular when used this way, since that is a hellish nightmare... due to the subtle issues of focused between codemirror and slate.

This commit https://github.com/sagemathinc/cocalc/commit/a61ed506f0847ce6d677c2cd6b8d87fdf600ae8e also fixes an subtle issue I noticed with multiple mermaid diagrams in the same document. I also created a new standalone react component Mermaid for rendering mermaid diagrams. Interestingly, I think it's much better than any of the existing mermaid react components I found on github !? It could be published as a little open source library if anybody had time.

https://github.com/sagemathinc/cocalc/commit/a61ed506f0847ce6d677c2cd6b8d87fdf600ae8e#diff-ad24716ab4f1487601e1a52c7447408e69ec078b10e5f5e78e8ae4dabcc557c4