Welcome to mirror list, hosted at ThFree Co, Russian Federation.

markdown_viewer.vue « viewers « content_viewer « components « vue_shared « javascripts « assets « app - gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: 00d12654ee328ff14303bb96cddff4a2a945cafc (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<script>
import { GlSkeletonLoader } from '@gitlab/ui';
import { forEach, escape } from 'lodash';
import SafeHtml from '~/vue_shared/directives/safe_html';
import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale';
import { renderGFM } from '~/behaviors/markdown/render_gfm';

const { CancelToken } = axios;
let axiosSource;

export default {
  components: {
    GlSkeletonLoader,
  },
  directives: {
    SafeHtml,
  },
  props: {
    content: {
      type: String,
      required: true,
    },
    commitSha: {
      type: String,
      required: false,
      default: '',
    },
    filePath: {
      type: String,
      required: false,
      default: '',
    },
    projectPath: {
      type: String,
      required: true,
    },
    images: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  data() {
    return {
      previewContent: null,
      isLoading: false,
    };
  },
  watch: {
    content() {
      this.previewContent = null;
    },
  },
  created() {
    axiosSource = CancelToken.source();
    this.fetchMarkdownPreview();
  },
  updated() {
    this.fetchMarkdownPreview();
  },
  destroyed() {
    if (this.isLoading) axiosSource.cancel(__('Cancelling Preview'));
  },
  methods: {
    fetchMarkdownPreview() {
      if (this.content && this.previewContent === null) {
        this.isLoading = true;
        const postBody = {
          text: this.content,
          path: this.filePath,
        };
        if (this.commitSha) {
          postBody.ref = this.commitSha;
        }
        const postOptions = {
          cancelToken: axiosSource.token,
        };

        axios
          .post(
            `${gon.relative_url_root}/${this.projectPath}/preview_markdown`,
            postBody,
            postOptions,
          )
          .then(({ data }) => {
            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(() => {
              renderGFM(this.$refs.markdownPreview);
            });
          })
          .catch(() => {
            this.previewContent = __('An error occurred while fetching Markdown preview');
            this.isLoading = false;
          });
      }
    },
  },
  safeHtmlConfig: { ADD_TAGS: ['gl-emoji', 'use'] },
};
</script>

<template>
  <div ref="markdownPreview" class="md-previewer" data-testid="md-previewer">
    <gl-skeleton-loader v-if="isLoading" />
    <div
      v-else
      v-safe-html:[$options.safeHtmlConfig]="previewContent"
      class="md gl-ml-auto gl-mr-auto"
    ></div>
  </div>
</template>