Merge branch 'sh-jupyter-fix-images' into 'master'

Fix images not showing in Jupyter Markdown tables

See merge request gitlab-org/gitlab!59551

app/assets/javascripts/notebook/cells/markdown.vue

@@ -3,6 +3,7 @@
 import katex from 'katex';
 import marked from 'marked';
 import { sanitize } from '~/lib/dompurify';
+import { hasContent } from '~/lib/utils/text_utility';
 import Prompt from './prompt.vue';
 
 const renderer = new marked.Renderer();
@@ -88,6 +89,38 @@ renderer.listitem = (t) => {
   const [text, inline] = renderKatex(t);
   return `<li class="${inline ? 'inline-katex' : ''}">${text}</li>`;
 };
+renderer.originalImage = renderer.image;
+
+renderer.image = function image(href, title, text) {
+  const attachmentHeader = `attachment:`; // eslint-disable-line @gitlab/require-i18n-strings
+
+  if (!this.attachments || !href.startsWith(attachmentHeader)) {
+    return this.originalImage(href, title, text);
+  }
+
+  let img = ``;
+  const filename = href.substring(attachmentHeader.length);
+
+  if (hasContent(filename)) {
+    const attachment = this.attachments[filename];
+
+    if (attachment) {
+      const imageType = Object.keys(attachment)[0];
+
+      if (hasContent(imageType)) {
+        const data = attachment[imageType];
+        const inlined = `data:${imageType};base64,${data}"`; // eslint-disable-line @gitlab/require-i18n-strings
+        img = this.originalImage(inlined, title, text);
+      }
+    }
+  }
+
+  if (!hasContent(img)) {
+    return this.originalImage(href, title, text);
+  }
+
+  return sanitize(img);
+};
 
 marked.setOptions({
   renderer,
@@ -105,6 +138,8 @@ export default {
   },
   computed: {
     markdown() {
+      renderer.attachments = this.cell.attachments;
+
       return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), {
         // allowedTags from GitLab's inline HTML guidelines
         // https://docs.gitlab.com/ee/user/markdown.html#inline-html

changelogs/unreleased/sh-jupyter-fix-images.yml

+---
+title: Fix images not showing in Jupyter Markdown tables
+merge_request: 59551
+author:
+type: fixed

spec/frontend/fixtures/raw.rb

@@ -25,6 +25,10 @@ RSpec.describe 'Raw files', '(JavaScript fixtures)' do
     @blob = project.repository.blob_at('6d85bb69', 'files/ipython/basic.ipynb')
   end
 
+  it 'blob/notebook/markdown-table.json' do
+    @blob = project.repository.blob_at('f6b7a707', 'files/ipython/markdown-table.ipynb')
+  end
+
   it 'blob/notebook/worksheets.json' do
     @blob = project.repository.blob_at('6d85bb69', 'files/ipython/worksheets.ipynb')
   end

spec/frontend/notebook/cells/markdown_spec.js

@@ -27,7 +27,7 @@ describe('Markdown component', () => {
     return vm.$nextTick();
   });
 
-  it('does not render promot', () => {
+  it('does not render prompt', () => {
     expect(vm.$el.querySelector('.prompt span')).toBeNull();
   });
 
@@ -50,6 +50,41 @@ describe('Markdown component', () => {
     expect(vm.$el.querySelector('a').getAttribute('href')).toBeNull();
   });
 
+  describe('tables', () => {
+    beforeEach(() => {
+      json = getJSONFixture('blob/notebook/markdown-table.json');
+    });
+
+    it('renders images and text', () => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[0],
+        },
+      }).$mount();
+
+      return vm.$nextTick().then(() => {
+        const images = vm.$el.querySelectorAll('img');
+        expect(images.length).toBe(5);
+
+        const columns = vm.$el.querySelectorAll('td');
+        expect(columns.length).toBe(6);
+
+        expect(columns[0].textContent).toEqual('Hello ');
+        expect(columns[1].textContent).toEqual('Test ');
+        expect(columns[2].textContent).toEqual('World ');
+        expect(columns[3].textContent).toEqual('Fake ');
+        expect(columns[4].textContent).toEqual('External image: ');
+        expect(columns[5].textContent).toEqual('Empty');
+
+        expect(columns[0].innerHTML).toContain('<img src="data:image/jpeg;base64');
+        expect(columns[1].innerHTML).toContain('<img src="data:image/png;base64');
+        expect(columns[2].innerHTML).toContain('<img src="data:image/jpeg;base64');
+        expect(columns[3].innerHTML).toContain('<img>');
+        expect(columns[4].innerHTML).toContain('<img src="https://www.google.com/');
+      });
+    });
+  });
+
   describe('katex', () => {
     beforeEach(() => {
       json = getJSONFixture('blob/notebook/math.json');

spec/support/helpers/test_env.rb

@@ -52,7 +52,7 @@ module TestEnv
     'wip'                                => 'b9238ee',
     'csv'                                => '3dd0896',
     'v1.1.0'                             => 'b83d6e3',
-    'add-ipython-files'                  => '93ee732',
+    'add-ipython-files'                  => 'f6b7a70',
     'add-pdf-file'                       => 'e774ebd',
     'squash-large-files'                 => '54cec52',
     'add-pdf-text-binary'                => '79faa7b',