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
|
<script>
import SafeHtml from '~/vue_shared/directives/safe_html';
import { handleBlobRichViewer } from '~/blob/viewer';
import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
import { handleLocationHash } from '~/lib/utils/common_utils';
import { sanitize } from '~/lib/dompurify';
import ViewerMixin from './mixins';
import {
MARKUP_FILE_TYPE,
MARKUP_CONTENT_SELECTOR,
ELEMENTS_PER_CHUNK,
CONTENT_LOADED_EVENT,
} from './constants';
export default {
components: {
MarkdownFieldView,
},
directives: {
SafeHtml,
},
mixins: [ViewerMixin],
data() {
return {
isLoading: true,
initialContent: null,
remainingContent: [],
};
},
computed: {
rawContent() {
return this.initialContent || this.richViewer || this.content;
},
isMarkup() {
return this.type === MARKUP_FILE_TYPE;
},
},
created() {
this.optimizeMarkupRendering();
},
mounted() {
this.renderRemainingMarkup();
handleBlobRichViewer(this.$refs.content, this.type);
},
methods: {
optimizeMarkupRendering() {
/**
* If content is markup we optimize rendering by splitting it into two parts:
* - initialContent (top section of the file - is rendered right away)
* - remainingContent (remaining content - is rendered over a longer time period)
*
* This is done so that the browser doesn't render the whole file at once (improves TBT)
*/
if (!this.isMarkup) return;
const tmpWrapper = document.createElement('div');
tmpWrapper.innerHTML = sanitize(this.rawContent, this.$options.safeHtmlConfig);
const fileContent = tmpWrapper.querySelector(MARKUP_CONTENT_SELECTOR);
if (!fileContent) return;
const initialContent = [...fileContent.childNodes].slice(0, ELEMENTS_PER_CHUNK);
this.remainingContent = [...fileContent.childNodes].slice(ELEMENTS_PER_CHUNK);
fileContent.innerHTML = '';
fileContent.append(...initialContent);
this.initialContent = tmpWrapper.outerHTML;
},
renderRemainingMarkup() {
/**
* Rendering large Markdown files can block the main thread due to the amount of HTML being parsed.
* The optimization below ensures that content is rendered over a longer time period instead of all at once.
* More details here: https://gitlab.com/gitlab-org/gitlab/-/issues/331448
* */
if (!this.isMarkup || !this.remainingContent.length) {
this.onContentLoaded();
return;
}
const fileContent = this.$refs.content.$el.querySelector(MARKUP_CONTENT_SELECTOR);
for (let i = 0; i < this.remainingContent.length; i += ELEMENTS_PER_CHUNK) {
const nextChunkEnd = i + ELEMENTS_PER_CHUNK;
const content = this.remainingContent.slice(i, nextChunkEnd);
setTimeout(() => {
fileContent.append(...content);
if (nextChunkEnd < this.remainingContent.length) return;
this.onContentLoaded();
}, i);
}
},
onContentLoaded() {
this.$emit(CONTENT_LOADED_EVENT);
handleLocationHash();
this.isLoading = false;
},
},
safeHtmlConfig: {
ADD_TAGS: ['gl-emoji', 'copy-code'],
},
};
</script>
<template>
<markdown-field-view
ref="content"
v-safe-html:[$options.safeHtmlConfig]="rawContent"
:is-loading="isLoading"
/>
</template>
|
