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

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

@@ -154,6 +154,27 @@ var config = {
         }
       },
       {
+        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: [
           { loader: 'exports-loader', options: 'l.global' },

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);
 

yarn.lock

@@ -4401,6 +4401,12 @@ karma@^2.0.0:
     tmp "0.0.33"
     useragent "^2.1.12"
 
+katex@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.8.3.tgz#909d99864baf964c3ccae39c4a99a8e0fb9a1bd0"
+  dependencies:
+    match-at "^0.1.0"
+
 kind-of@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
@@ -4791,6 +4797,10 @@ marked@^0.3.12:
   version "0.3.12"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"
 
+match-at@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.1.tgz#25d040d291777704d5e6556bbb79230ec2de0540"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.16"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
@@ -7083,6 +7093,13 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
+style-loader@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.1.tgz#591ffc80bcefe268b77c5d9ebc0505d772619f85"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
+
 subarg@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"