diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/source_viewer.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/source_viewer.vue | 45 |
1 files changed, 40 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer.vue index 8f0d051543f..99895926653 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/source_viewer.vue @@ -1,6 +1,9 @@ <script> import { GlSafeHtmlDirective } from '@gitlab/ui'; import LineNumbers from '~/vue_shared/components/line_numbers.vue'; +import { sanitize } from '~/lib/dompurify'; + +const LINE_SELECT_CLASS_NAME = 'hll'; export default { components: { @@ -46,7 +49,15 @@ export default { } } - return highlightedContent; + return this.wrapLines(highlightedContent); + }, + }, + watch: { + highlightedContent() { + this.$nextTick(() => this.selectLine()); + }, + $route() { + this.selectLine(); }, }, async mounted() { @@ -73,16 +84,40 @@ export default { return languageDefinition; }, + wrapLines(content) { + return ( + content && + content + .split('\n') + .map((line, i) => `<span id="LC${i + 1}" class="line">${line}</span>`) + .join('\r\n') + ); + }, + selectLine() { + const hash = sanitize(this.$route.hash); + const lineToSelect = hash && this.$el.querySelector(hash); + + if (!lineToSelect) { + return; + } + + if (this.$options.currentlySelectedLine) { + this.$options.currentlySelectedLine.classList.remove(LINE_SELECT_CLASS_NAME); + } + + lineToSelect.classList.add(LINE_SELECT_CLASS_NAME); + this.$options.currentlySelectedLine = lineToSelect; + lineToSelect.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, }, userColorScheme: window.gon.user_color_scheme, + currentlySelectedLine: null, }; </script> <template> - <div class="file-content code" :class="$options.userColorScheme"> + <div class="file-content code js-syntax-highlight" :class="$options.userColorScheme"> <line-numbers :lines="lineNumbers" /> - <pre - class="code gl-pl-3!" - ><code v-safe-html="highlightedContent" class="gl-white-space-pre-wrap!"></code> + <pre class="code"><code v-safe-html="highlightedContent"></code> </pre> </div> </template> |