Upgrade highlight.js

Major version bump for highlight.js. Update usage of deprecated function & some cleanups.
This commit is contained in:
David Baker 2021-10-18 19:32:20 +01:00
parent a2bc090607
commit 2b7ea16c2d
4 changed files with 54 additions and 30 deletions

View file

@ -76,7 +76,7 @@
"focus-visible": "^5.2.0", "focus-visible": "^5.2.0",
"gfm.css": "^1.1.2", "gfm.css": "^1.1.2",
"glob-to-regexp": "^0.4.1", "glob-to-regexp": "^0.4.1",
"highlight.js": "^10.5.0", "highlight.js": "^11.3.1",
"html-entities": "^1.4.0", "html-entities": "^1.4.0",
"is-ip": "^3.1.0", "is-ip": "^3.1.0",
"jszip": "^3.7.0", "jszip": "^3.7.0",
@ -188,7 +188,9 @@
"@types/react": "17.0.14" "@types/react": "17.0.14"
}, },
"jest": { "jest": {
"snapshotSerializers": ["enzyme-to-json/serializer"], "snapshotSerializers": [
"enzyme-to-json/serializer"
],
"testEnvironment": "./__test-utils__/environment.js", "testEnvironment": "./__test-utils__/environment.js",
"testMatch": [ "testMatch": [
"<rootDir>/test/**/*-test.[jt]s?(x)" "<rootDir>/test/**/*-test.[jt]s?(x)"

View file

@ -500,12 +500,11 @@ $hover-select-border: 4px;
float: left; float: left;
margin: 0 0.5em 0 -1.5em; margin: 0 0.5em 0 -1.5em;
color: gray; color: gray;
} & span {
.mx_EventTile_lineNumber {
text-align: right; text-align: right;
display: block; display: block;
padding-left: 1em; padding-left: 1em;
}
} }
.mx_EventTile_collapsedCodeBlock { .mx_EventTile_collapsedCodeBlock {

View file

@ -45,6 +45,8 @@ import EditMessageComposer from '../rooms/EditMessageComposer';
import LinkPreviewGroup from '../rooms/LinkPreviewGroup'; import LinkPreviewGroup from '../rooms/LinkPreviewGroup';
import { IBodyProps } from "./IBodyProps"; import { IBodyProps } from "./IBodyProps";
const MAX_HIGHLIGHT_LENGTH = 4096;
interface IState { interface IState {
// the URLs (if any) to be previewed with a LinkPreviewWidget inside this TextualBody. // the URLs (if any) to be previewed with a LinkPreviewWidget inside this TextualBody.
links: string[]; links: string[];
@ -117,9 +119,6 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
setTimeout(() => { setTimeout(() => {
if (this.unmounted) return; if (this.unmounted) return;
for (let i = 0; i < codes.length; i++) { for (let i = 0; i < codes.length; i++) {
// If the code already has the hljs class we want to skip this.
// This happens after the codeblock was edited.
if (codes[i].className.includes("hljs")) continue;
this.highlightCode(codes[i]); this.highlightCode(codes[i]);
} }
}, 10); }, 10);
@ -212,30 +211,54 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
private addLineNumbers(pre: HTMLPreElement): void { private addLineNumbers(pre: HTMLPreElement): void {
// Calculate number of lines in pre // Calculate number of lines in pre
const number = pre.innerHTML.replace(/\n(<\/code>)?$/, "").split(/\n/).length; const number = pre.innerHTML.replace(/\n(<\/code>)?$/, "").split(/\n/).length;
pre.innerHTML = '<span class="mx_EventTile_lineNumbers"></span>' + pre.innerHTML + '<span></span>'; const lineNumbers = document.createElement('span');
const lineNumbers = pre.getElementsByClassName("mx_EventTile_lineNumbers")[0]; lineNumbers.className = 'mx_EventTile_lineNumbers';
// Iterate through lines starting with 1 (number of the first line is 1) // Iterate through lines starting with 1 (number of the first line is 1)
for (let i = 1; i <= number; i++) { for (let i = 1; i <= number; i++) {
lineNumbers.innerHTML += '<span class="mx_EventTile_lineNumber">' + i + '</span>'; const s = document.createElement('span');
s.textContent = i.toString();
lineNumbers.appendChild(s);
} }
pre.prepend(lineNumbers);
pre.append(document.createElement('span'));
} }
private highlightCode(code: HTMLElement): void { private highlightCode(code: HTMLElement): void {
// Auto-detect language only if enabled and only for codeblocks if (code.textContent.length > MAX_HIGHLIGHT_LENGTH) {
if ( console.log(
"Code block is bigger than highlight limit (" +
code.textContent.length + " > " + MAX_HIGHLIGHT_LENGTH +
"): not highlighting",
);
return;
}
console.log('highlighting');
let advertisedLang;
for (const cl of code.className.split(/\s+/)) {
if (cl.startsWith('language-')) {
const maybeLang = cl.split('-', 2)[1];
if (highlight.getLanguage(maybeLang)) {
advertisedLang = maybeLang;
break;
}
}
}
if (advertisedLang) {
// If the code says what language it is, highlight it in that language
// We don't use highlightElement here because we can't force language detection
// off. It should use the one we've found in the CSS class but we'd rather pass
// it in explicitly to make sure.
code.innerHTML = highlight.highlight(advertisedLang, code.textContent).value;
} else if (
SettingsStore.getValue("enableSyntaxHighlightLanguageDetection") && SettingsStore.getValue("enableSyntaxHighlightLanguageDetection") &&
code.parentElement instanceof HTMLPreElement code.parentElement instanceof HTMLPreElement
) { ) {
highlight.highlightBlock(code); // User has language detection enabled and the code is within a pre
} else { // we only auto-highlight if the code block is in a pre), so highlight
// Only syntax highlight if there's a class starting with language- // the block with auto-highlighting enabled.
const classes = code.className.split(/\s+/).filter(function(cl) { highlight.highlightElement(code);
return cl.startsWith('language-') && !cl.startsWith('language-_');
});
if (classes.length != 0) {
highlight.highlightBlock(code);
}
} }
} }

View file

@ -4350,10 +4350,10 @@ has@^1.0.0, has@^1.0.1, has@^1.0.3:
dependencies: dependencies:
function-bind "^1.1.1" function-bind "^1.1.1"
highlight.js@^10.5.0: highlight.js@^11.3.1:
version "10.7.3" version "11.3.1"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.3.1.tgz#813078ef3aa519c61700f84fe9047231c5dc3291"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== integrity sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2" version "3.3.2"