Merge branch 'jivl-update-katex' into 'master'

Updated katex library

Closes #43032

See merge request gitlab-org/gitlab-ce!15864

app/assets/javascripts/render_math.js

-/* global katex */
+import { __ } from './locale';
+import flash from './flash';
 // Renders math using KaTeX in any element with the
 // `js-render-math` class
@@ -8,15 +9,8 @@
 //   <code class="js-render-math"></div>
 //
-import { __ } from './locale';
-import axios from './lib/utils/axios_utils';
-import flash from './flash';
-
-// Only load once
-let katexLoaded = false;
-
 // Loop over all math elements and render math
-function renderWithKaTeX(elements) {
+function renderWithKaTeX(elements, katex) {
   elements.each(function katexElementsLoop() {
     const mathNode = $('<span></span>');
     const $this = $(this);
@@ -34,30 +28,10 @@ function renderWithKaTeX(elements) {
 export default function renderMath($els) {
   if (!$els.length) return;
-
-  if (katexLoaded) {
-    renderWithKaTeX($els);
-  } else {
-    axios.get(gon.katex_css_url)
-      .then(() => {
-        const css = $('<link>', {
-          rel: 'stylesheet',
-          type: 'text/css',
-          href: gon.katex_css_url,
-        });
-        css.appendTo('head');
-      })
-      .then(() => axios.get(gon.katex_js_url, {
-        responseType: 'text',
-      }))
-      .then(({ data }) => {
-        // Add katex js to our document
-        $.globalEval(data);
-      })
-      .then(() => {
-        katexLoaded = true;
-        renderWithKaTeX($els); // Run KaTeX
-      })
-      .catch(() => flash(__('An error occurred while rendering KaTeX')));
-  }
+  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')));
 }

changelogs/unreleased/jivl-update-katex.yml

+---
+title: Updated the katex library
+merge_request: 15864
+author:
+type: other

config/application.rb

@@ -108,8 +108,6 @@ module Gitlab
     config.assets.precompile << "print.css"
     config.assets.precompile << "notify.css"
     config.assets.precompile << "mailers/*.css"
-    config.assets.precompile << "katex.css"
-    config.assets.precompile << "katex.js"
     config.assets.precompile << "xterm/xterm.css"
     config.assets.precompile << "performance_bar.css"
     config.assets.precompile << "lib/ace.js"

config/webpack.config.js

@@ -153,6 +153,27 @@ var config = {
           name: '[name].[hash].[ext]',
         }
       },
+      {
+        test: /katex.css$/,
+        include: /node_modules\/katex\/dist/,
+        use: [
+          { loader: 'style-loader' },
+          { 
+            loader: 'css-loader',
+            options: {
+              name: '[name].[hash].[ext]'
+            }
+          },
+        ],
+      },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/,
+        include: /node_modules\/katex\/dist\/fonts/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[hash].[ext]',
+        }
+      },
       {
         test: /monaco-editor\/\w+\/vs\/loader\.js$/,
         use: [

lib/gitlab/gon_helper.rb

@@ -13,8 +13,6 @@ module Gitlab
       gon.relative_url_root      = Gitlab.config.gitlab.relative_url_root
       gon.shortcuts_path         = help_page_path('shortcuts')
       gon.user_color_scheme      = Gitlab::ColorSchemes.for_user(current_user).css_class
-      gon.katex_css_url          = ActionController::Base.helpers.asset_path('katex.css')
-      gon.katex_js_url           = ActionController::Base.helpers.asset_path('katex.js')
       gon.sentry_dsn             = Gitlab::CurrentSettings.clientside_sentry_dsn if Gitlab::CurrentSettings.clientside_sentry_enabled
       gon.gitlab_url             = Gitlab.config.gitlab.url
       gon.revision               = Gitlab::REVISION

package.json

@@ -56,6 +56,7 @@
     "js-cookie": "^2.1.3",
     "jszip": "^3.1.3",
     "jszip-utils": "^0.0.2",
+    "katex": "^0.8.3",
     "marked": "^0.3.12",
     "monaco-editor": "0.10.0",
     "mousetrap": "^1.4.6",
@@ -69,6 +70,7 @@
     "sanitize-html": "^1.16.1",
     "select2": "3.5.2-browserify",
     "sql.js": "^0.4.0",
+    "style-loader": "^0.19.1",
     "svg4everybody": "2.1.9",
     "three": "^0.84.0",
     "three-orbit-controls": "^82.1.0",

spec/javascripts/notebook/cells/markdown_spec.js

 import Vue from 'vue';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
-import katex from 'vendor/katex';
+import katex from 'katex';
 const Component = Vue.extend(MarkdownComponent);