From da7c1ebafd208bcbd0b3e670ab660d3e92e50283 Mon Sep 17 00:00:00 2001
From: Valeriy <ValeraS@users.noreply.github.com>
Date: Thu, 27 Sep 2018 13:49:38 +0300
Subject: [PATCH] fix:modifying js code themes (#230)

* fix:modifying js code themes

* define themes only once
---
 .../templates/Challenges/classic/Editor.js    | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/learn/src/templates/Challenges/classic/Editor.js b/packages/learn/src/templates/Challenges/classic/Editor.js
index c22cb69a55..4292f39d01 100644
--- a/packages/learn/src/templates/Challenges/classic/Editor.js
+++ b/packages/learn/src/templates/Challenges/classic/Editor.js
@@ -39,6 +39,34 @@ const modeMap = {
   jsx: 'javascript'
 };
 
+var monacoThemesDefined = false;
+const defineMonacoThemes = (monaco) => {
+  if (monacoThemesDefined) {
+    return;
+  }
+  monacoThemesDefined = true;
+  const yellowCollor = 'FFFF00';
+  const lightBlueColor = '9CDCFE';
+  const darkBlueColor = '00107E';
+  monaco.editor.defineTheme('vs-dark-custom', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: 'delimiter.js', foreground: lightBlueColor },
+      { token: 'delimiter.parenthesis.js', foreground: yellowCollor },
+      { token: 'delimiter.array.js', foreground: yellowCollor },
+      { token: 'delimiter.bracket.js', foreground: yellowCollor }
+    ]
+  });
+  monaco.editor.defineTheme('vs-custom', {
+    base: 'vs',
+    inherit: true,
+    rules: [
+      { token: 'identifier.js', foreground: darkBlueColor }
+    ]
+  });
+};
+
 class Editor extends PureComponent {
   constructor(...props) {
     super(...props);
@@ -65,6 +93,10 @@ class Editor extends PureComponent {
     document.removeEventListener('keyup', this.focusEditor);
   }
 
+  editorWillMount(monaco) {
+    defineMonacoThemes(monaco);
+  }
+
   editorDidMount(editor, monaco) {
     this._editor = editor;
     this._editor.focus();
@@ -100,12 +132,13 @@ class Editor extends PureComponent {
 
   render() {
     const { contents, ext, theme, fileKey } = this.props;
-    const editorTheme = theme === 'night' ? 'vs-dark' : 'vs';
+    const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
     return (
       <div className='classic-editor editor'>
         <base href='/' />
         <MonacoEditor
           editorDidMount={::this.editorDidMount}
+          editorWillMount={::this.editorWillMount}
           key={`${editorTheme}-${fileKey}`}
           language={modeMap[ext]}
           onChange={::this.onChange}