Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

2 files changed, 17 insertions, 8 deletions

diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 0f4cec67ce8..1384c9c40b3 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import katex from 'katex';
 import marked from 'marked';
 import { sanitize } from '~/lib/dompurify';
@@ -95,7 +94,16 @@ 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 relativeHref = href;
+
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    if (!(href.startsWith('http') || href.startsWith('data:'))) {
+      // These are images within the repo. This will only work if the image
+      // is relative to the path where the file is located
+      relativeHref = this.relativeRawPath + href;
+    }
+
+    return this.originalImage(relativeHref, title, text);
   }
 
   let img = ``;
@@ -130,6 +138,7 @@ export default {
   components: {
     prompt: Prompt,
   },
+  inject: ['relativeRawPath'],
   props: {
     cell: {
       type: Object,
@@ -139,6 +148,7 @@ export default {
   computed: {
     markdown() {
       renderer.attachments = this.cell.attachments;
+      renderer.relativeRawPath = this.relativeRawPath;
 
       return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), markdownConfig);
     },
@@ -149,7 +159,7 @@ export default {
 <template>
   <div class="cell text-cell">
     <prompt />
-    <div class="markdown" v-html="markdown"></div>
+    <div class="markdown" v-html="markdown /* eslint-disable-line vue/no-v-html */"></div>
   </div>
 </template>
 
diff --git a/app/assets/javascripts/notebook/cells/output/html.vue b/app/assets/javascripts/notebook/cells/output/html.vue
index dc5b2b66348..ca02ee18dd1 100644
--- a/app/assets/javascripts/notebook/cells/output/html.vue
+++ b/app/assets/javascripts/notebook/cells/output/html.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlSafeHtmlDirective } from '@gitlab/ui';
-import { sanitize } from '~/lib/dompurify';
 import Prompt from '../prompt.vue';
 
 export default {
@@ -25,19 +24,19 @@ export default {
     },
   },
   computed: {
-    sanitizedOutput() {
-      return sanitize(this.rawCode);
-    },
     showOutput() {
       return this.index === 0;
     },
   },
+  safeHtmlConfig: {
+    ADD_TAGS: ['use'], // to support icon SVGs
+  },
 };
 </script>
 
 <template>
   <div class="output">
     <prompt type="Out" :count="count" :show-output="showOutput" />
-    <div v-safe-html="sanitizedOutput" class="gl-overflow-auto"></div>
+    <div v-safe-html:[$options.safeHtmlConfig]="rawCode" class="gl-overflow-auto"></div>
   </div>
 </template>