diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-23 21:08:14 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-23 21:08:14 +0300 |
commit | 5e555ebcf6ee2ce13e9956ae599fd811a79b4dbd (patch) | |
tree | 6dd67e2f8f49b54e0fb1f266d1720f461393df59 /app/assets/javascripts/vue_shared | |
parent | 3e53902ee13fc4e0bf3162c0c392dcfe1a0ede4b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared')
4 files changed, 57 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js index bed6dd4d5c6..0d78530d878 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js +++ b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js @@ -134,3 +134,7 @@ export const BIDI_CHARS_CLASS_LIST = 'unicode-bidi has-tooltip'; export const BIDI_CHAR_TOOLTIP = __( 'Potentially unwanted character detected: Unicode BiDi Control', ); + +export const HLJS_COMMENT_SELECTOR = 'hljs-comment'; + +export const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight'; diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js new file mode 100644 index 00000000000..c9f7e5508be --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js @@ -0,0 +1,13 @@ +import { HLJS_ON_AFTER_HIGHLIGHT } from '../constants'; +import wrapComments from './wrap_comments'; + +/** + * Registers our plugins for Highlight.js + * + * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst + * + * @param {Object} hljs - the Highlight.js instance. + */ +export const registerPlugins = (hljs) => { + hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapComments }); +}; diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_comments.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_comments.js new file mode 100644 index 00000000000..4a18733de94 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_comments.js @@ -0,0 +1,38 @@ +import { HLJS_COMMENT_SELECTOR } from '../constants'; + +const createWrapper = (content) => { + const span = document.createElement('span'); + span.className = HLJS_COMMENT_SELECTOR; + span.innerHTML = content; + return span.outerHTML; +}; + +/** + * Highlight.js plugin for wrapping multi-line comments in the `hljs-comment` class. + * This ensures that multi-line comments are rendered correctly in the GitLab UI. + * + * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst + * + * @param {Object} Result - an object that represents the highlighted result from Highlight.js + */ +export default (result) => { + if (!result.value.includes(HLJS_COMMENT_SELECTOR)) return; + + let wrapComment = false; + + // eslint-disable-next-line no-param-reassign + result.value = result.value // Highlight.js expects the result param to be mutated for plugins to work + .split('\n') + .map((lineContent) => { + if (lineContent.includes(HLJS_COMMENT_SELECTOR)) { + wrapComment = true; + return lineContent; + } + const line = wrapComment ? createWrapper(lineContent) : lineContent; + if (lineContent.includes('</span>')) { + wrapComment = false; + } + return line; + }) + .join('\n'); +}; diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue index ed87a202b15..f819a9e5be2 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue @@ -5,6 +5,7 @@ import eventHub from '~/notes/event_hub'; import languageLoader from '~/content_editor/services/highlight_js_language_loader'; import { ROUGE_TO_HLJS_LANGUAGE_MAP, LINES_PER_CHUNK } from './constants'; import Chunk from './components/chunk.vue'; +import { registerPlugins } from './plugins/index'; /* * This component is optimized to handle source code with many lines of code by splitting source code into chunks of 70 lines of code, @@ -111,6 +112,7 @@ export default { let detectedLanguage = language; let highlightedContent; if (this.hljs) { + registerPlugins(this.hljs); if (!detectedLanguage) { const hljsHighlightAuto = this.hljs.highlightAuto(content); highlightedContent = hljsHighlightAuto.value; |