Refactor code block’s syntax highlight loader in the Content Editor
What does this MR do and why?
Context: The Content Editor loads highlight.js languages asynchronously to avoid loading a lot of unnecessary JavaScript at the same time.
This MR refactors how the Content Editor loads highlight.js languages asynchronously. In our first iteration, we were performing a DOM lookup to extract all the code block languages from pre elements that existed in the initial document.
The new approach moves the responsibility of loading a language to the Code Block view. The code block view is a Vue component that renders the code block in the Content Editor. We load the highlight.js language when the mounted hook of this component is invoked.
Screenshots or screen recordings
Code blocks should get correct syntax highlighting after this change
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Edit a Wiki page with a code block in the Content Editor.
- The code block should appear highlighted.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #359019 (closed)