mirror of
https://github.com/discourse/discourse.git
synced 2025-06-23 03:51:43 +08:00
d09f283e91
Syntax highlighting is a CPU-intensive process which we run a lot while rendering posts and while using the composer preview. Moving it to a background worker releases the main thread to the browser, which makes the UX much smoother.
38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import Component from "@ember/component";
|
|
import { highlightText } from "discourse/lib/highlight-syntax";
|
|
import { escapeExpression } from "discourse/lib/utilities";
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
|
import { htmlSafe } from "@ember/template";
|
|
|
|
export default Component.extend({
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
if (this.code === this.previousCode) return;
|
|
|
|
this.set("previousCode", this.code);
|
|
this.set("highlightResult", null);
|
|
const toHighlight = this.code;
|
|
highlightText(escapeExpression(toHighlight), this.lang).then(
|
|
({ result }) => {
|
|
if (toHighlight !== this.code) return; // Code has changed since highlight was requested
|
|
this.set("highlightResult", result);
|
|
}
|
|
);
|
|
},
|
|
|
|
@discourseComputed("code", "highlightResult")
|
|
displayCode(code, highlightResult) {
|
|
if (highlightResult) return htmlSafe(highlightResult);
|
|
return code;
|
|
},
|
|
|
|
@discourseComputed("highlightResult", "lang")
|
|
codeClasses(highlightResult, lang) {
|
|
const classes = [];
|
|
if (lang) classes.push(lang);
|
|
if (highlightResult) classes.push("hljs");
|
|
|
|
return classes.join(" ");
|
|
}
|
|
});
|