diff options
author | GitLab Release Tools Bot <delivery-team+release-tools@gitlab.com> | 2020-12-07 23:24:11 +0300 |
---|---|---|
committer | GitLab Release Tools Bot <delivery-team+release-tools@gitlab.com> | 2020-12-07 23:24:11 +0300 |
commit | 1b517a5a19c4aafc6fa6d738b0ee7c1e4a2cce36 (patch) | |
tree | 11bb99aa913b3a18342818e15a71856e214caee6 /app/assets/javascripts | |
parent | 1b6a590b197788a06a1ff726ea61630a49b10412 (diff) | |
parent | f508fb8a043a4b1f996cb7ec8bba198e5b5986f5 (diff) |
Merge remote-tracking branch 'dev/13-6-stable' into 13-6-stable
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/behaviors/markdown/render_mermaid.js | 32 |
1 files changed, 26 insertions, 6 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js index 233c5f84340..602f156dbf0 100644 --- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js +++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js @@ -18,7 +18,13 @@ import { __, sprintf } from '~/locale'; // // This is an arbitrary number; Can be iterated upon when suitable. -const MAX_CHAR_LIMIT = 5000; +const MAX_CHAR_LIMIT = 2000; +// Max # of mermaid blocks that can be rendered in a page. +const MAX_MERMAID_BLOCK_LIMIT = 50; +// Keep a map of mermaid blocks we've already rendered. +const elsProcessingMap = new WeakMap(); +let renderedMermaidBlocks = 0; + let mermaidModule = {}; function importMermaidModule() { @@ -110,13 +116,22 @@ function renderMermaids($els) { let renderedChars = 0; $els.each((i, el) => { + // Skipping all the elements which we've already queued in requestIdleCallback + if (elsProcessingMap.has(el)) { + return; + } + const { source } = fixElementSource(el); /** - * Restrict the rendering to a certain amount of character to - * prevent mermaidjs from hanging up the entire thread and - * causing a DoS. + * Restrict the rendering to a certain amount of character + * and mermaid blocks to prevent mermaidjs from hanging + * up the entire thread and causing a DoS. */ - if ((source && source.length > MAX_CHAR_LIMIT) || renderedChars > MAX_CHAR_LIMIT) { + if ( + (source && source.length > MAX_CHAR_LIMIT) || + renderedChars > MAX_CHAR_LIMIT || + renderedMermaidBlocks >= MAX_MERMAID_BLOCK_LIMIT + ) { 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"> <div> @@ -146,8 +161,13 @@ function renderMermaids($els) { } renderedChars += source.length; + renderedMermaidBlocks += 1; + + const requestId = window.requestIdleCallback(() => { + renderMermaidEl(el); + }); - renderMermaidEl(el); + elsProcessingMap.set(el, requestId); }); }) .catch(err => { |