diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/content_viewer')
3 files changed, 41 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue index 2f5e5f35064..fe488ab6cfa 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue @@ -24,6 +24,11 @@ export default { required: false, default: '', }, + commitSha: { + type: String, + required: false, + default: '', + }, projectPath: { type: String, required: false, @@ -34,6 +39,11 @@ export default { required: false, default: '', }, + images: { + type: Object, + required: false, + default: () => ({}), + }, }, computed: { viewer() { @@ -62,6 +72,8 @@ export default { :file-size="fileSize" :project-path="projectPath" :content="content" + :images="images" + :commit-sha="commitSha" /> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js index da0b45110e2..b7fa73bc197 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js +++ b/app/assets/javascripts/vue_shared/components/content_viewer/lib/viewer_utils.js @@ -26,8 +26,8 @@ const fileExtensionViewers = { export function viewerInformationForPath(path) { if (!path) return null; const name = path.split('/').pop(); - const viewerName = - fileNameViewers[name] || fileExtensionViewers[name ? name.split('.').pop() : ''] || ''; + const extension = name.includes('.') && name.split('.').pop(); + const viewerName = fileNameViewers[name] || fileExtensionViewers[extension]; return viewers[viewerName]; } 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> |