[Code] test colorize before actually loading file, trying to catch a exception throws when loading incomplete ruby code (#41093)
This commit is contained in:
parent
445e5bf3d5
commit
5d7e2c2544
1 changed files with 40 additions and 28 deletions
|
@ -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>) {
|
||||
|
|
Loading…
Reference in a new issue