Merge branch 'notebook-katex-fixes' into 'master'

Fixes multi-line math in notebooks

Closes #30900 and #33074

See merge request !11789

4 files changed, 81 insertions, 8 deletions

diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 3e8240d10ec..814d2ea92b4 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -30,7 +30,7 @@
     |
     \\s\\$(?!\\$)
   )
-    (.+?)
+    ((.|\\n)+?)
   (
     \\s\\\\end{[a-zA-Z]+}$
     |
@@ -45,15 +45,25 @@
     let inline = false;
 
     if (typeof katex !== 'undefined') {
-      const katexString = text.replace(/\\/g, '\\');
-      const matches = new RegExp(katexRegexString, 'gi').exec(katexString);
+      const katexString = text.replace(/&/g, '&')
+        .replace(/&=&/g, '\\space=\\space')
+        .replace(/<(\/?)em>/g, '_');
+      const regex = new RegExp(katexRegexString, 'gi');
+      const matchLocation = katexString.search(regex);
+      const numberOfMatches = katexString.match(regex);
 
-      if (matches && matches.length > 0) {
-        if (matches[1].trim() === '$' && matches[3].trim() === '$') {
+      if (numberOfMatches && numberOfMatches.length !== 0) {
+        if (matchLocation > 0) {
+          let matches = regex.exec(katexString);
           inline = true;
 
-          text = `${katexString.replace(matches[0], '')} ${katex.renderToString(matches[2])}`;
+          while (matches !== null) {
+            const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
+            text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
+            matches = regex.exec(katexString);
+          }
         } else {
+          const matches = regex.exec(katexString);
           text = katex.renderToString(matches[2]);
         }
       }
@@ -79,7 +89,7 @@
     },
     computed: {
       markdown() {
-        return marked(this.cell.source.join(''));
+        return marked(this.cell.source.join('').replace(/\\/g, '\\\\'));
       },
     },
   };
diff --git a/spec/javascripts/fixtures/raw.rb b/spec/javascripts/fixtures/raw.rb
index 1ce622fc836..17533443d76 100644
--- a/spec/javascripts/fixtures/raw.rb
+++ b/spec/javascripts/fixtures/raw.rb
@@ -21,4 +21,10 @@ describe 'Raw files', '(JavaScript fixtures)', type: :controller do
 
     store_frontend_fixture(blob.data, example.description)
   end
+
+  it 'blob/notebook/math.json' do |example|
+    blob = project.repository.blob_at('93ee732', 'files/ipython/math.ipynb')
+
+    store_frontend_fixture(blob.data, example.description)
+  end
 end
diff --git a/spec/javascripts/notebook/cells/markdown_spec.js b/spec/javascripts/notebook/cells/markdown_spec.js
index 38c976f38d8..a88e9ed3d99 100644
--- a/spec/javascripts/notebook/cells/markdown_spec.js
+++ b/spec/javascripts/notebook/cells/markdown_spec.js
@@ -1,8 +1,11 @@
 import Vue from 'vue';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
+import katex from 'vendor/katex';
 
 const Component = Vue.extend(MarkdownComponent);
 
+window.katex = katex;
+
 describe('Markdown component', () => {
   let vm;
   let cell;
@@ -38,4 +41,58 @@ describe('Markdown component', () => {
   it('renders the markdown HTML', () => {
     expect(vm.$el.querySelector('.markdown h1')).not.toBeNull();
   });
+
+  describe('katex', () => {
+    beforeEach(() => {
+      json = getJSONFixture('blob/notebook/math.json');
+    });
+
+    it('renders multi-line katex', (done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[0],
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.katex'),
+        ).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('renders inline katex', (done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[1],
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('p:first-child .katex'),
+        ).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('renders multiple inline katex', (done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[1],
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelectorAll('p:nth-child(2) .katex').length,
+        ).toBe(4);
+
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/support/test_env.rb b/spec/support/test_env.rb
index 3c000feba5d..72b3b226c1e 100644
--- a/spec/support/test_env.rb
+++ b/spec/support/test_env.rb
@@ -40,7 +40,7 @@ module TestEnv
     'wip'                                => 'b9238ee',
     'csv'                                => '3dd0896',
     'v1.1.0'                             => 'b83d6e3',
-    'add-ipython-files'                  => '6d85bb6',
+    'add-ipython-files'                  => '93ee732',
     'add-pdf-file'                       => 'e774ebd'
   }.freeze