Add loading spinners and mermaid error handling (#12358)

- Add loading spinners on editor and mermaid renderers
- Add error handling and inline error box for mermaid
- Fix Mermaid rendering by using the .init api

2 files changed, 27 insertions, 5 deletions

diff --git a/modules/markup/markdown/markdown.go b/modules/markup/markdown/markdown.go
index 9197dd2fe1..999ae52bb5 100644
--- a/modules/markup/markdown/markdown.go
+++ b/modules/markup/markdown/markdown.go
@@ -7,6 +7,7 @@ package markdown
 
 import (
 	"bytes"
+	"strings"
 	"sync"
 
 	"code.gitea.io/gitea/modules/log"
@@ -57,13 +58,33 @@ func render(body []byte, urlPrefix string, metas map[string]string, wikiMarkdown
 						chromahtml.PreventSurroundingPre(true),
 					),
 					highlighting.WithWrapperRenderer(func(w util.BufWriter, c highlighting.CodeBlockContext, entering bool) {
-						language, _ := c.Language()
-						if language == nil {
-							language = []byte("text")
-						}
 						if entering {
+							language, _ := c.Language()
+							if language == nil {
+								language = []byte("text")
+							}
+
+							languageStr := string(language)
+
+							preClasses := []string{}
+							if languageStr == "mermaid" {
+								preClasses = append(preClasses, "is-loading")
+							}
+
+							if len(preClasses) > 0 {
+								_, err := w.WriteString(`<pre class="` + strings.Join(preClasses, " ") + `">`)
+								if err != nil {
+									return
+								}
+							} else {
+								_, err := w.WriteString(`<pre>`)
+								if err != nil {
+									return
+								}
+							}
+
 							// include language-x class as part of commonmark spec
-							_, err := w.WriteString("<pre><code class=\"chroma language-" + string(language) + "\">")
+							_, err := w.WriteString(`<code class="chroma language-` + string(language) + `">`)
 							if err != nil {
 								return
 							}
diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go
index e5f6e75084..ba73650bdf 100644
--- a/modules/markup/sanitizer.go
+++ b/modules/markup/sanitizer.go
@@ -38,6 +38,7 @@ func NewSanitizer() {
 func ReplaceSanitizer() {
 	sanitizer.policy = bluemonday.UGCPolicy()
 	// For Chroma markdown plugin
+	sanitizer.policy.AllowAttrs("class").Matching(regexp.MustCompile(`^is-loading$`)).OnElements("pre")
 	sanitizer.policy.AllowAttrs("class").Matching(regexp.MustCompile(`^(chroma )?language-[\w-]+$`)).OnElements("code")
 
 	// Checkboxes