diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/markdown/render_mermaid.js')
-rw-r--r-- | app/assets/javascripts/behaviors/markdown/render_mermaid.js | 19 |
1 files changed, 17 insertions, 2 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js index 5b5148a850b..f5b2d266c18 100644 --- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js +++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import { once } from 'lodash'; +import { once, countBy } from 'lodash'; import { deprecatedCreateFlash as flash } from '~/flash'; import { darkModeEnabled } from '~/lib/utils/color_utils'; import { __, sprintf } from '~/locale'; @@ -22,6 +22,8 @@ import { __, sprintf } from '~/locale'; const MAX_CHAR_LIMIT = 2000; // Max # of mermaid blocks that can be rendered in a page. const MAX_MERMAID_BLOCK_LIMIT = 50; +// Max # of `&` allowed in Chaining of links syntax +const MAX_CHAINING_OF_LINKS_LIMIT = 30; // Keep a map of mermaid blocks we've already rendered. const elsProcessingMap = new WeakMap(); let renderedMermaidBlocks = 0; @@ -64,6 +66,18 @@ function importMermaidModule() { }); } +function shouldLazyLoadMermaidBlock(source) { + /** + * If source contains `&`, which means that it might + * contain Chaining of links a new syntax in Mermaid. + */ + if (countBy(source)['&'] > MAX_CHAINING_OF_LINKS_LIMIT) { + return true; + } + + return false; +} + function fixElementSource(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>'); @@ -128,7 +142,8 @@ function renderMermaids($els) { if ( (source && source.length > MAX_CHAR_LIMIT) || renderedChars > MAX_CHAR_LIMIT || - renderedMermaidBlocks >= MAX_MERMAID_BLOCK_LIMIT + renderedMermaidBlocks >= MAX_MERMAID_BLOCK_LIMIT || + shouldLazyLoadMermaidBlock(source) ) { const html = ` <div class="alert gl-alert gl-alert-warning alert-dismissible lazy-render-mermaid-container js-lazy-render-mermaid-container fade show" role="alert"> |