Make Mermaid.js limit configurable (#16519)

* Make Mermaid.js limit configurable

Add `MERMAID_MAX_SOURCE_CHARACTERS` to `[markup]` settings
to make the maximum size of a mermaid render configurable.

Fix #16513

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fixup! Make Mermaid.js limit configurable

* Update custom/conf/app.example.ini

Co-authored-by: silverwind <me@silverwind.io>

* Update docs/content/doc/advanced/config-cheat-sheet.en-us.md

Co-authored-by: silverwind <me@silverwind.io>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

6 files changed, 22 insertions, 5 deletions

diff --git a/custom/conf/app.example.ini b/custom/conf/app.example.ini
index 576414d193..6ea31586a7 100644
--- a/custom/conf/app.example.ini
+++ b/custom/conf/app.example.ini
@@ -1985,6 +1985,15 @@ PATH =
 ;; Show template execution time in the footer
 ;SHOW_FOOTER_TEMPLATE_LOAD_TIME = true
 
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;[markup]
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Set the maximum number of characters in a mermaid source. (Set to -1 to disable limits)
+;MERMAID_MAX_SOURCE_CHARACTERS = 5000
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;[markup.sanitizer.1]
diff --git a/docs/content/doc/advanced/config-cheat-sheet.en-us.md b/docs/content/doc/advanced/config-cheat-sheet.en-us.md
index a800094552..41dd0b702e 100644
--- a/docs/content/doc/advanced/config-cheat-sheet.en-us.md
+++ b/docs/content/doc/advanced/config-cheat-sheet.en-us.md
@@ -882,6 +882,8 @@ NB: You must have `DISABLE_ROUTER_LOG` set to `false` for this option to take ef
 
 ## Markup (`markup`)
 
+- `MERMAID_MAX_SOURCE_CHARACTERS`: **5000**: Set the maximum size of a Mermaid source. (Set to -1 to disable)
+
 Gitea can support Markup using external tools. The example below will add a markup named `asciidoc`.
 
 ```ini
diff --git a/modules/setting/markup.go b/modules/setting/markup.go
index 31ec1dd2eb..0bf6797712 100644
--- a/modules/setting/markup.go
+++ b/modules/setting/markup.go
@@ -15,8 +15,9 @@ import (
 
 // ExternalMarkupRenderers represents the external markup renderers
 var (
-	ExternalMarkupRenderers []*MarkupRenderer
-	ExternalSanitizerRules  []MarkupSanitizerRule
+	ExternalMarkupRenderers    []*MarkupRenderer
+	ExternalSanitizerRules     []MarkupSanitizerRule
+	MermaidMaxSourceCharacters int
 )
 
 // MarkupRenderer defines the external parser configured in ini
@@ -40,6 +41,7 @@ type MarkupSanitizerRule struct {
 }
 
 func newMarkup() {
+	MermaidMaxSourceCharacters = Cfg.Section("markup").Key("MERMAID_MAX_SOURCE_CHARACTERS").MustInt(5000)
 	ExternalMarkupRenderers = make([]*MarkupRenderer, 0, 10)
 	ExternalSanitizerRules = make([]MarkupSanitizerRule, 0, 10)
 
diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index f9b2dafd22..d4913f7c41 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -390,6 +390,9 @@ func NewFuncMap() []template.FuncMap {
 			html += "</span>"
 			return template.HTML(html)
 		},
+		"MermaidMaxSourceCharacters": func() int {
+			return setting.MermaidMaxSourceCharacters
+		},
 	}}
 }
 
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index 5091eda1e9..328661eb9d 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -60,6 +60,7 @@
 				{{ end }}
 			]).values()),
 			{{end}}
+			MermaidMaxSourceCharacters: {{MermaidMaxSourceCharacters}},
 		};
 	</script>
 	<link rel="icon" href="{{AssetUrlPrefix}}/img/logo.svg" type="image/svg+xml">
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
index d0aefd1aff..a5bd0e235c 100644
--- a/web_src/js/markup/mermaid.js
+++ b/web_src/js/markup/mermaid.js
@@ -1,4 +1,4 @@
-const MAX_SOURCE_CHARACTERS = 5000;
+const {MermaidMaxSourceCharacters} = window.config;
 
 function displayError(el, err) {
   el.closest('pre').classList.remove('is-loading');
@@ -26,8 +26,8 @@ export async function renderMermaid(els) {
   });
 
   for (const el of els) {
-    if (el.textContent.length > MAX_SOURCE_CHARACTERS) {
-      displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${MAX_SOURCE_CHARACTERS}.`));
+    if (MermaidMaxSourceCharacters >= 0 && el.textContent.length > MermaidMaxSourceCharacters) {
+      displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${MermaidMaxSourceCharacters}.`));
       continue;
     }