move render_gfm into behaviors directory

5 files changed, 116 insertions, 3 deletions

diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js
index 8d021de7998..84fef4d8b4f 100644
--- a/app/assets/javascripts/behaviors/index.js
+++ b/app/assets/javascripts/behaviors/index.js
@@ -1,6 +1,7 @@
 import './autosize';
 import './bind_in_out';
-import initCopyAsGFM from './copy_as_gfm';
+import './markdown/render_gfm';
+import initCopyAsGFM from './markdown/copy_as_gfm';
 import initCopyToClipboard from './copy_to_clipboard';
 import './details_behavior';
 import installGlEmojiElement from './gl_emoji';
diff --git a/app/assets/javascripts/behaviors/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index f5f4f00d587..75cf90de0b5 100644
--- a/app/assets/javascripts/behaviors/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -2,8 +2,8 @@
 
 import $ from 'jquery';
 import _ from 'underscore';
-import { insertText, getSelectedFragment, nodeMatchesSelector } from '../lib/utils/common_utils';
-import { placeholderImage } from '../lazy_loader';
+import { insertText, getSelectedFragment, nodeMatchesSelector } from '~/lib/utils/common_utils';
+import { placeholderImage } from '~/lazy_loader';
 
 const gfmRules = {
   // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert
diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js
new file mode 100644
index 00000000000..dbff2bd4b10
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js
@@ -0,0 +1,17 @@
+import $ from 'jquery';
+import syntaxHighlight from '~/syntax_highlight';
+import renderMath from './render_math';
+import renderMermaid from './render_mermaid';
+
+// Render Gitlab flavoured Markdown
+//
+// Delegates to syntax highlight and render math & mermaid diagrams.
+//
+$.fn.renderGFM = function renderGFM() {
+  syntaxHighlight(this.find('.js-syntax-highlight'));
+  renderMath(this.find('.js-render-math'));
+  renderMermaid(this.find('.js-render-mermaid'));
+  return this;
+};
+
+$(() => $('body').renderGFM());
diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js
new file mode 100644
index 00000000000..7dcf1aeed17
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/render_math.js
@@ -0,0 +1,38 @@
+import $ from 'jquery';
+import { __ } from '~/locale';
+import flash from '~/flash';
+
+// Renders math using KaTeX in any element with the
+// `js-render-math` class
+//
+// ### Example Markup
+//
+//   <code class="js-render-math"></div>
+//
+
+// Loop over all math elements and render math
+function renderWithKaTeX(elements, katex) {
+  elements.each(function katexElementsLoop() {
+    const mathNode = $('<span></span>');
+    const $this = $(this);
+
+    const display = $this.attr('data-math-style') === 'display';
+    try {
+      katex.render($this.text(), mathNode.get(0), { displayMode: display, throwOnError: false });
+      mathNode.insertAfter($this);
+      $this.remove();
+    } catch (err) {
+      throw err;
+    }
+  });
+}
+
+export default function renderMath($els) {
+  if (!$els.length) return;
+  Promise.all([
+    import(/* webpackChunkName: 'katex' */ 'katex'),
+    import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.css'),
+  ]).then(([katex]) => {
+    renderWithKaTeX($els, katex);
+  }).catch(() => flash(__('An error occurred while rendering KaTeX')));
+}
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
new file mode 100644
index 00000000000..56b1896e9f1
--- /dev/null
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -0,0 +1,57 @@
+import flash from '~/flash';
+
+// Renders diagrams and flowcharts from text using Mermaid in any element with the
+// `js-render-mermaid` class.
+//
+// Example markup:
+//
+// <pre class="js-render-mermaid">
+//  graph TD;
+//    A-- > B;
+//    A-- > C;
+//    B-- > D;
+//    C-- > D;
+// </pre>
+//
+
+export default function renderMermaid($els) {
+  if (!$els.length) return;
+
+  import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid').then((mermaid) => {
+    mermaid.initialize({
+      // mermaid core options
+      mermaid: {
+        startOnLoad: false,
+      },
+      // mermaidAPI options
+      theme: 'neutral',
+    });
+
+    $els.each((i, el) => {
+      const source = el.textContent;
+
+      // Remove any extra spans added by the backend syntax highlighting.
+      Object.assign(el, { textContent: source });
+
+      mermaid.init(undefined, el, (id) => {
+        const svg = document.getElementById(id);
+
+        svg.classList.add('mermaid');
+
+        // pre > code > svg
+        svg.closest('pre').replaceWith(svg);
+
+        // We need to add the original source into the DOM to allow Copy-as-GFM
+        // to access it.
+        const sourceEl = document.createElement('text');
+        sourceEl.classList.add('source');
+        sourceEl.setAttribute('display', 'none');
+        sourceEl.textContent = source;
+
+        svg.appendChild(sourceEl);
+      });
+    });
+  }).catch((err) => {
+    flash(`Can't load mermaid module: ${err}`);
+  });
+}