domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Move syntax highlighting to web worker (#11017)

Browse source 
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>
This commit is contained in:
silverwind 2020-04-13 15:02:31 +02:00 • committed by GitHub
parent cc4da79fb6
commit 27e3cddfbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 83 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

15
web_src/js/index.js
View file

@ -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(),