app/assets/javascripts/behaviors/markdown/render_gfm.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import $ from 'jquery';
import syntaxHighlight from '~/syntax_highlight';
import highlightCurrentUser from './highlight_current_user';
import { renderKroki } from './render_kroki';
import renderMath from './render_math';
import renderSandboxedMermaid from './render_sandboxed_mermaid';
import renderMetrics from './render_metrics';
import { renderJSONTable } from './render_json_table';

// Render GitLab flavoured Markdown
//
// Delegates to syntax highlight and render math & mermaid diagrams.
//
$.fn.renderGFM = function renderGFM() {
  syntaxHighlight(this.find('.js-syntax-highlight').get());
  renderKroki(this.find('.js-render-kroki[hidden]').get());
  renderMath(this.find('.js-render-math'));
  renderSandboxedMermaid(this.find('.js-render-mermaid'));
  renderJSONTable(
    Array.from(this.find('[lang="json"][data-lang-params="table"]').get()).map((e) => e.parentNode),
  );

  highlightCurrentUser(this.find('.gfm-project_member').get());

  const issuablePopoverElements = this.find('.gfm-issue, .gfm-merge_request').get();
  if (issuablePopoverElements.length) {
    import(/* webpackChunkName: 'IssuablePopoverBundle' */ '~/issuable/popover')
      .then(({ default: initIssuablePopovers }) => {
        initIssuablePopovers(issuablePopoverElements);
      })
      .catch(() => {});
  }

  renderMetrics(this.find('.js-render-metrics').get());
  return this;
};

$(() => {
  window.requestIdleCallback(
    () => {
      $('body').renderGFM();
    },
    { timeout: 500 },
  );
});