[Code] test colorize before actually loading file, trying to catch a exception throws when loading incomplete ruby code (#41093)

This commit is contained in:
Yulong 2019-07-16 20:56:46 +08:00 committed by GitHub
parent 445e5bf3d5
commit 5d7e2c2544
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -28,11 +28,56 @@ export class CodeBlock extends React.PureComponent<Props> {
private resizeChecker?: ResizeChecker;
private currentHighlightDecorations: string[] = [];
public componentDidMount(): void {
public async componentDidMount() {
if (this.el) {
await this.tryLoadFile(this.props.code, this.props.language || 'text');
this.ed!.onMouseDown((e: editor.IEditorMouseEvent) => {
if (
this.props.onClick &&
(e.target.type === monaco.editor.MouseTargetType.GUTTER_LINE_NUMBERS ||
e.target.type === monaco.editor.MouseTargetType.CONTENT_TEXT)
) {
const position = e.target.position || { lineNumber: 0, column: 0 };
const lineNumber = (this.props.startLine || 0) + position.lineNumber;
this.props.onClick({
lineNumber,
column: position.column,
});
}
});
registerEditor(this.ed!);
if (this.props.highlightRanges) {
const decorations = this.props.highlightRanges.map((range: IRange) => {
return {
range,
options: {
inlineClassName: 'codeSearch__highlight',
},
};
});
this.currentHighlightDecorations = this.ed!.deltaDecorations([], decorations);
}
this.resizeChecker = new ResizeChecker(this.el!);
this.resizeChecker.on('resize', () => {
setTimeout(() => {
this.ed!.layout();
});
});
}
}
private async tryLoadFile(code: string, language: string) {
try {
await monaco.editor.colorize(code, language, {});
this.loadFile(code, language);
} catch (e) {
this.loadFile(code);
}
}
private loadFile(code: string, language: string = 'text') {
this.ed = monaco.editor.create(this.el!, {
value: this.props.code,
language: this.props.language,
value: code,
language,
lineNumbers: this.lineNumbersFunc.bind(this),
readOnly: true,
folding: this.props.folding,
@ -54,39 +99,6 @@ export class CodeBlock extends React.PureComponent<Props> {
renderIndentGuides: false,
automaticLayout: false,
});
this.ed.onMouseDown((e: editor.IEditorMouseEvent) => {
if (
this.props.onClick &&
(e.target.type === monaco.editor.MouseTargetType.GUTTER_LINE_NUMBERS ||
e.target.type === monaco.editor.MouseTargetType.CONTENT_TEXT)
) {
const position = e.target.position || { lineNumber: 0, column: 0 };
const lineNumber = (this.props.startLine || 0) + position.lineNumber;
this.props.onClick({
lineNumber,
column: position.column,
});
}
});
registerEditor(this.ed);
if (this.props.highlightRanges) {
const decorations = this.props.highlightRanges.map((range: IRange) => {
return {
range,
options: {
inlineClassName: 'codeSearch__highlight',
},
};
});
this.currentHighlightDecorations = this.ed.deltaDecorations([], decorations);
}
this.resizeChecker = new ResizeChecker(this.el!);
this.resizeChecker.on('resize', () => {
setTimeout(() => {
this.ed!.layout();
});
});
}
}
public componentDidUpdate(prevProps: Readonly<Props>) {