From 5d7e2c2544090ba9e3d362fdeedb8e4670cbe3b5 Mon Sep 17 00:00:00 2001
From: Yulong <yulong.huang@elastic.co>
Date: Tue, 16 Jul 2019 20:56:46 +0800
Subject: [PATCH] [Code] test colorize before actually loading file, trying to
 catch a exception throws when loading incomplete ruby code (#41093)

---
 .../public/components/codeblock/codeblock.tsx | 68 +++++++++++--------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx b/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx
index ae1afe7776a9..ff83b93a144c 100644
--- a/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx
+++ b/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx
@@ -28,33 +28,10 @@ export class CodeBlock extends React.PureComponent<Props> {
   private resizeChecker?: ResizeChecker;
   private currentHighlightDecorations: string[] = [];
 
-  public componentDidMount(): void {
+  public async componentDidMount() {
     if (this.el) {
-      this.ed = monaco.editor.create(this.el!, {
-        value: this.props.code,
-        language: this.props.language,
-        lineNumbers: this.lineNumbersFunc.bind(this),
-        readOnly: true,
-        folding: this.props.folding,
-        minimap: {
-          enabled: false,
-        },
-        scrollbar: {
-          vertical: 'hidden',
-          handleMouseWheel: false,
-          verticalScrollbarSize: 0,
-        },
-        hover: {
-          enabled: false, // disable default hover;
-        },
-        contextmenu: false,
-        selectOnLineNumbers: false,
-        selectionHighlight: false,
-        renderLineHighlight: 'none',
-        renderIndentGuides: false,
-        automaticLayout: false,
-      });
-      this.ed.onMouseDown((e: editor.IEditorMouseEvent) => {
+      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 ||
@@ -68,7 +45,7 @@ export class CodeBlock extends React.PureComponent<Props> {
           });
         }
       });
-      registerEditor(this.ed);
+      registerEditor(this.ed!);
       if (this.props.highlightRanges) {
         const decorations = this.props.highlightRanges.map((range: IRange) => {
           return {
@@ -78,7 +55,7 @@ export class CodeBlock extends React.PureComponent<Props> {
             },
           };
         });
-        this.currentHighlightDecorations = this.ed.deltaDecorations([], decorations);
+        this.currentHighlightDecorations = this.ed!.deltaDecorations([], decorations);
       }
       this.resizeChecker = new ResizeChecker(this.el!);
       this.resizeChecker.on('resize', () => {
@@ -88,6 +65,41 @@ export class CodeBlock extends React.PureComponent<Props> {
       });
     }
   }
+  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: code,
+      language,
+      lineNumbers: this.lineNumbersFunc.bind(this),
+      readOnly: true,
+      folding: this.props.folding,
+      minimap: {
+        enabled: false,
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        handleMouseWheel: false,
+        verticalScrollbarSize: 0,
+      },
+      hover: {
+        enabled: false, // disable default hover;
+      },
+      contextmenu: false,
+      selectOnLineNumbers: false,
+      selectionHighlight: false,
+      renderLineHighlight: 'none',
+      renderIndentGuides: false,
+      automaticLayout: false,
+    });
+  }
 
   public componentDidUpdate(prevProps: Readonly<Props>) {
     if (