Add latest changes from gitlab-org/gitlab@13-0-stable-ee

1 files changed, 27 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index eb3e489fb8c..1344c766e0e 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -1,8 +1,11 @@
 <script>
 import $ from 'jquery';
+import '~/behaviors/markdown/render_gfm';
+
 import { GlSkeletonLoading } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
+import { forEach, escape } from 'lodash';
 
 const { CancelToken } = axios;
 let axiosSource;
@@ -16,6 +19,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
     filePath: {
       type: String,
       required: false,
@@ -25,6 +33,11 @@ export default {
       type: String,
       required: true,
     },
+    images: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -55,6 +68,9 @@ export default {
           text: this.content,
           path: this.filePath,
         };
+        if (this.commitSha) {
+          postBody.ref = this.commitSha;
+        }
         const postOptions = {
           cancelToken: axiosSource.token,
         };
@@ -66,11 +82,19 @@ export default {
             postOptions,
           )
           .then(({ data }) => {
-            this.previewContent = data.body;
+            let previewContent = data.body;
+            forEach(this.images, ({ src, title = '', alt }, key) => {
+              previewContent = previewContent.replace(
+                key,
+                `<img src="${escape(src)}" title="${escape(title)}" alt="${escape(alt)}">`,
+              );
+            });
+
+            this.previewContent = previewContent;
             this.isLoading = false;
 
             this.$nextTick(() => {
-              $(this.$refs['markdown-preview']).renderGFM();
+              $(this.$refs.markdownPreview).renderGFM();
             });
           })
           .catch(() => {
@@ -84,7 +108,7 @@ export default {
 </script>
 
 <template>
-  <div ref="markdown-preview" class="md-previewer">
+  <div ref="markdownPreview" class="md-previewer">
     <gl-skeleton-loading v-if="isLoading" />
     <div v-else class="md" v-html="previewContent"></div>
   </div>