OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #6973 from matrix-org/dbkr/upgrade_highlightjs 

Upgrade highlight.js
pull/21833/head
David Baker 2021-10-18 19:52:34 +01:00 committed by GitHub
parent df5f4409ad c2fb745188
commit 98ba3fd6e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

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

11
res/css/views/rooms/_EventTile.scss
View File

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

4
src/components/views/elements/SyntaxHighlight.tsx
View File

@ -15,7 +15,7 @@ limitations under the License.
*/
import React from 'react';
import { highlightBlock } from 'highlight.js';
import highlight from 'highlight.js';
import { replaceableComponent } from "../../../utils/replaceableComponent";
interface IProps {
@ -33,7 +33,7 @@ export default class SyntaxHighlight extends React.Component<IProps> {
// componentDidUpdate used here for reusability
public componentDidUpdate(): void {
if (this.el) highlightBlock(this.el);
if (this.el) highlight.highlightElement(this.el);
}
// call componentDidUpdate because _ref is fired on initial render

59
src/components/views/messages/TextualBody.tsx
View File

@ -45,6 +45,8 @@ import EditMessageComposer from '../rooms/EditMessageComposer';
import LinkPreviewGroup from '../rooms/LinkPreviewGroup';
import { IBodyProps } from "./IBodyProps";
const MAX_HIGHLIGHT_LENGTH = 4096;
interface IState {
// the URLs (if any) to be previewed with a LinkPreviewWidget inside this TextualBody.
links: string[];
@ -117,9 +119,6 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
setTimeout(() => {
if (this.unmounted) return;
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]);
}
}, 10);
@ -212,30 +211,54 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
private addLineNumbers(pre: HTMLPreElement): void {
// Calculate number of lines in pre
const number = pre.innerHTML.replace(/\n(<\/code>)?$/, "").split(/\n/).length;
pre.innerHTML = '<span class="mx_EventTile_lineNumbers"></span>' + pre.innerHTML + '<span></span>';
const lineNumbers = pre.getElementsByClassName("mx_EventTile_lineNumbers")[0];
const lineNumbers = document.createElement('span');
lineNumbers.className = 'mx_EventTile_lineNumbers';
// Iterate through lines starting with 1 (number of the first line is 1)
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 {
// Auto-detect language only if enabled and only for codeblocks
if (
if (code.textContent.length > MAX_HIGHLIGHT_LENGTH) {
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") &&
code.parentElement instanceof HTMLPreElement
) {
highlight.highlightBlock(code);
} else {
// Only syntax highlight if there's a class starting with language-
const classes = code.className.split(/\s+/).filter(function(cl) {
return cl.startsWith('language-') && !cl.startsWith('language-_');
});
if (classes.length != 0) {
highlight.highlightBlock(code);
}
// User has language detection enabled and the code is within a pre
// we only auto-highlight if the code block is in a pre), so highlight
// the block with auto-highlighting enabled.
highlight.highlightElement(code);
}
}

8
yarn.lock
View File

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