Only render fixed number of mermaid blocks

1 files changed, 4 insertions, 1 deletions

diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
index 27708504791..c3e2c09f1d5 100644
--- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -36,6 +36,8 @@ export default function renderMermaid($els) {
         securityLevel: 'strict',
       });
 
+      let renderedChars = 0;
+
       $els.each((i, el) => {
         // Mermaid doesn't like `<br />` tags, so collapse all like tags into `<br>`, which is parsed correctly.
         const source = el.textContent.replace(/<br\s*\/>/g, '<br>');
@@ -45,7 +47,7 @@ export default function renderMermaid($els) {
          * prevent mermaidjs from hanging up the entire thread and
          * causing a DoS.
          */
-        if (source && source.length > MAX_CHAR_LIMIT) {
+        if ((source && source.length > MAX_CHAR_LIMIT) || renderedChars > MAX_CHAR_LIMIT) {
           el.textContent = sprintf(
             __(
               'Cannot render the image. Maximum character count (%{charLimit}) has been exceeded.',
@@ -55,6 +57,7 @@ export default function renderMermaid($els) {
           return;
         }
 
+        renderedChars += source.length;
         // Remove any extra spans added by the backend syntax highlighting.
         Object.assign(el, { textContent: source });