Move syntax highlighting to web worker (#11017)

This should eliminate page freezes when loading big files/diff.
`highlightBlock` is needed to preserve existing nodes when highlighting
and for that, highlight.js needs access to the DOM API so I added a DOM
implementation to make it work, which adds around 300kB to the output
file size of the lazy-loaded `highlight.js`.

Co-authored-by: Lauris BH <lauris@nix.lv>

1 files changed, 7 insertions, 8 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 6476b2cfbf..63a5134bbd 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -11,12 +11,12 @@ import './vendor/semanticdropdown.js';
 import {svg} from './utils.js';
 
 import initContextPopups from './features/contextpopup.js';
-import initHighlight from './features/highlight.js';
 import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
 import initUserHeatmap from './features/userheatmap.js';
 import initDateTimePicker from './features/datetimepicker.js';
 import createDropzone from './features/dropzone.js';
+import highlight from './features/highlight.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
@@ -29,7 +29,6 @@ let previewFileModes;
 let simpleMDEditor;
 const commentMDEditors = {};
 let codeMirrorEditor;
-let hljs;
 
 // Silence fomantic's error logging when tabs are used without a target content element
 $.fn.tab.settings.silent = true;
@@ -49,7 +48,7 @@ function initCommentPreviewTab($form) {
       $previewPanel.html(data);
       emojify.run($previewPanel[0]);
       $('pre code', $previewPanel[0]).each(function () {
-        hljs.highlightBlock(this);
+        highlight(this);
       });
     });
   });
@@ -75,7 +74,7 @@ function initEditPreviewTab($form) {
         $previewPanel.html(data);
         emojify.run($previewPanel[0]);
         $('pre code', $previewPanel[0]).each(function () {
-          hljs.highlightBlock(this);
+          highlight(this);
         });
       });
     });
@@ -1011,7 +1010,7 @@ async function initRepository() {
               $renderContent.html(data.content);
               emojify.run($renderContent[0]);
               $('pre code', $renderContent[0]).each(function () {
-                hljs.highlightBlock(this);
+                highlight(this);
               });
             }
             const $content = $segment.parent();
@@ -1337,7 +1336,7 @@ function initWikiForm() {
               preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
               emojify.run($('.editor-preview')[0]);
               $(preview).find('pre code').each((_, e) => {
-                hljs.highlightBlock(e);
+                highlight(e);
               });
             });
           };
@@ -2633,8 +2632,8 @@ $(document).ready(async () => {
   });
 
   // parallel init of lazy-loaded features
-  [hljs] = await Promise.all([
-    initHighlight(),
+  await Promise.all([
+    highlight(document.querySelectorAll('pre code')),
     initGitGraph(),
     initClipboard(),
     initUserHeatmap(),