Instead of relying on default `pre > code.language-mermaid`, we now define a custom element `tlp-mermaid-diagram`. This offers at leaste two advantages: 1. No need to manually query the dom for potential candidates, it's the browser duty 2. No more conflicts with PrismJS (which rely on `pre > code.language-*`, git repositories now display mermaid diagrams \o/ 3. Async content sent to the browser doesn't need external parsing. (For example when you edit a follow-up comment in an artifact) (However we loose the "markdownish" advantage of the syntax in HTML context outside of tuleap, for example in email notifications.) If there are Tuleap pages where the `<tlp-mermaid-diagram>` component is displayed while its definition is not loaded yet, the source content is displayed as a pre element. The diagram is still lazy loaded: call to mermaid.render to display the svg is done only if the element enters in the viewport. In the meantime a spinner is displayed over the source content. Note: Attempts to use requestIdleCallback to initialize the component (eg: display the spinner and start observing the viewport) were not successful: there were too much flickering at the display of the diagram. I think that IntersectionObserver usage is good enough though. Note: Ugly singleton for code block features has been moved to tracker namespace as we hope to not need it elsewhere 🤞. Part of request #19739: Add support of mermaid js diagrams Change-Id: I7c9a6f885c76a9b040a78e0715006e95cb8e9432

+696 −370

Author

Nicolas Terray (nterray) 2021-03-10 15:42

Committer

Nicolas Terray (nterray) 2021-03-10 18:16

Hash 597dcb80a6eeeaa643c1ad61d43d77a8abcd7965

Parent e294f155c79f3fc130a753afaccda1cc01d7f870

Reference git #tuleap/stable/597dcb80a6eeeaa643c1ad61d43d77a8abcd7965