1 files changed, 41 insertions, 9 deletions
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
index 0da57f9e6fa..142c135e9c1 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/workers/highlight_utils.js
@@ -1,15 +1,47 @@
-import hljs from 'highlight.js/lib/core';
-import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import hljs from 'highlight.js';
 import { registerPlugins } from '../plugins/index';
+import { LINES_PER_CHUNK, NEWLINE, ROUGE_TO_HLJS_LANGUAGE_MAP } from '../constants';
 
-const initHighlightJs = async (fileType, content, language) => {
-  const languageDefinition = await languageLoader[language]();
-
+const initHighlightJs = (fileType, content) => {
   registerPlugins(hljs, fileType, content);
-  hljs.registerLanguage(language, languageDefinition.default);
 };
 
-export const highlight = (fileType, content, language) => {
-  initHighlightJs(fileType, content, language);
-  return hljs.highlight(content, { language }).value;
+const splitByLineBreaks = (content = '') => content.split(/\r?\n/);
+
+const createChunk = (language, rawChunkLines, highlightedChunkLines = [], startingFrom = 0) => ({
+  highlightedContent: highlightedChunkLines.join(NEWLINE),
+  rawContent: rawChunkLines.join(NEWLINE),
+  totalLines: rawChunkLines.length,
+  startingFrom,
+  language,
+});
+
+const splitIntoChunks = (language, rawContent, highlightedContent) => {
+  const result = [];
+  const splitRawContent = splitByLineBreaks(rawContent);
+  const splitHighlightedContent = splitByLineBreaks(highlightedContent);
+
+  for (let i = 0; i < splitRawContent.length; i += LINES_PER_CHUNK) {
+    const chunkIndex = Math.floor(i / LINES_PER_CHUNK);
+    const highlightedChunk = splitHighlightedContent.slice(i, i + LINES_PER_CHUNK);
+    const rawChunk = splitRawContent.slice(i, i + LINES_PER_CHUNK);
+    result[chunkIndex] = createChunk(language, rawChunk, highlightedChunk, i);
+  }
+
+  return result;
+};
+
+const highlight = (fileType, rawContent, lang) => {
+  const language = ROUGE_TO_HLJS_LANGUAGE_MAP[lang.toLowerCase()];
+  let result;
+
+  if (language) {
+    initHighlightJs(fileType, rawContent, language);
+    const highlightedContent = hljs.highlight(rawContent, { language }).value;
+    result = splitIntoChunks(language, rawContent, highlightedContent);
+  }
+
+  return result;
 };
+
+export { highlight, splitIntoChunks };