diff options
Diffstat (limited to 'app/assets/javascripts/notebook/cells')
-rw-r--r-- | app/assets/javascripts/notebook/cells/markdown.vue | 16 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/output/html.vue | 9 |
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> |