update editor config

public/react/src/modules/page/component/TPICodeMirror.js

@@ -33,13 +33,15 @@ function getModeByMirrorName(mirror_name) {
     return mode;
 }
 const _extraKeys = {"Alt-/": "autocomplete"};
-function createCMOptions(mirror_name) {
+function createCMOptions(mirror_name, theme) {
     let mode = getModeByMirrorName(mirror_name)
 
     let cmOptions = {
         lineNumbers: true,
         mode: mode,
-        theme: "railscasts",
+        // theme: "railscasts",
+        // theme: "vs-dark",
+        theme: theme,
         indentUnit:4,
         matchBrackets: true,
         autoRefresh: true,
@@ -97,6 +99,7 @@ class TPICodeMirror extends Component {
 		super(props)
 		this.state = {
             cmFontSize: fromStore('cmFontSize', 16),
+            cmCodeMode: fromStore('cmCodeMode', 'vs-dark'),
             autoCompleteSwitch: fromStore('autoCompleteSwitch', true),
 		}
 	}
@@ -114,7 +117,7 @@ class TPICodeMirror extends Component {
         } 
     }
 	componentDidMount() {
-        let cmOptions = createCMOptions(this.props.mirror_name)
+        let cmOptions = createCMOptions(this.props.mirror_name, this.state.cmCodeMode)
         extend_editor = window.CodeMirror.fromTextArea(window.$('#extend-challenge-file-edit')[0]
         	, cmOptions);
 
@@ -241,6 +244,12 @@ class TPICodeMirror extends Component {
         this.setState({ cmFontSize: value });
     } 
 
+    onCodeModeChange = (value) => {
+        toStore('cmCodeMode', value);
+        this.setState({ cmCodeMode: value });
+        window.monaco.editor.setTheme(value);
+    }
+
 	render() {
 		const { repositoryCode, showSettingDrawer, settingDrawerOpen } = this.props;
 		const { cmFontSize } = this.state;
@@ -259,6 +268,7 @@ class TPICodeMirror extends Component {
                 >
                     <TPICodeSetting {...this.props} {...this.state} 
                         onFontSizeChange={this.onFontSizeChange}
+                        onCodeModeChange={this.onCodeModeChange}
                         onAutoCompleteSwitchChange={this.onAutoCompleteSwitchChange}
                          ></TPICodeSetting>
                 </Drawer>

public/react/src/modules/page/component/TPICodeSetting.js

@@ -18,12 +18,13 @@ class TPICodeSetting extends Component {
 
 	render() {
 		const { autoCompleteSwitch, onAutoCompleteSwitchChange, onFontSizeChange 
-			, cmFontSize,
+			, cmFontSize, cmCodeMode,
+			onCodeModeChange,
 			shixun } = this.props;
 		const task_pass = shixun.task_pass
 		const forbid_copy = shixun.forbid_copy
 		const test_set_permission = shixun.test_set_permission
-		
+		console.log('==========', cmCodeMode);
 	    return (
     	  	<div className="ide-settings--content">
 			  	<style>{`
@@ -54,6 +55,25 @@ class TPICodeSetting extends Component {
 	    	  				</div>
 	    	  			</div>
 	    	  		</div>*/}
+							<div className="-layout-h -center -justify-between">
+								<div className="ide-settings--item-key">显示模式</div>
+								<div className="ide-settings--item-value">
+									<div className="select -view-flat -value">
+	    	  					<div className="-layout-v -start">
+	    	  						<div className="select--wrapper -layout-h -center -justify" >
+													<Select 
+														style={{ width: '120px' }}
+														value={cmCodeMode}
+														onChange={onCodeModeChange}
+													>
+														<Option value={'vs'}>白色背景</Option>
+														<Option value={'vs-dark'}>黑色背景</Option>
+							          	</Select>
+	    	  						</div>
+	    	  					</div>
+	    	  				</div>
+								</div>
+							</div>
 	    	  		<div className="-layout-h -center -justify-between">
 	    	  			<div className="ide-settings--item-key">字体大小</div>
 	    	  			<div className="ide-settings--item-value">
@@ -61,6 +81,7 @@ class TPICodeSetting extends Component {
 	    	  					<div className="-layout-v -start">
 	    	  						<div className="select--wrapper -layout-h -center -justify" >
 							          	<Select
+														style={{ width: '120px' }}
 							          		value={cmFontSize}
 							          		onChange={onFontSizeChange}>
 	    	  								<Option value={12}>12px</Option>

public/react/src/modules/page/component/monaco/TPIMonaco.css

@@ -93,7 +93,7 @@
 .monaco-editor .monaco-editor-hover code { background-color: rgba(10, 10, 10, 0.4); }
 .monaco-editor .goto-definition-link { color: #4e94ce !important; }
 
-.mtk1 { color: #d4d4d4 !important; }
+/* .mtk1 { color: #d4d4d4 !important; }
 .mtk2 { color: #1e1e1e !important; }
 .mtk3 { color: #cc6666 !important; }
 .mtk4 { color: #9cdcfe !important; }
@@ -116,7 +116,7 @@
 .mtk21 { color: #4f76ac !important; }
 .mtk22 { color: #3dc9b0 !important; }
 .mtk23 { color: #74b0df !important; }
-.mtk24 { color: #4864aa !important; }
+.mtk24 { color: #4864aa !important; } */
 .mtki { font-style: italic; }
 .mtkb { font-weight: bold; }
 .mtku { text-decoration: underline; text-underline-position: under; }

public/react/src/modules/page/component/monaco/TPIMonaco.js

@@ -17,10 +17,11 @@ import * as monaco from 'monaco-editor'
 
 import { fromStore, toStore } from 'educoder'
 import './TPIMonacoConfig'
+import { isThisSecond } from 'date-fns';
 
 // https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors
 monaco.editor.defineTheme('myCoolTheme', {
-      base: 'vs-dark',
+      base: 'vs', // vs、vs-dark、hc-black
       inherit: true,
       rules: [       
         { token: 'green', background: 'FF0000', foreground: '00FF00', fontStyle: 'italic'},
@@ -213,11 +214,13 @@ class TPIMonaco extends Component {
         loadMonacoResouce();
 		this.state = {
             cmFontSize: fromStore('cmFontSize', 16),
+            cmCodeMode: fromStore('cmCodeMode', 'vs-dark'),
             autoCompleteSwitch: fromStore('autoCompleteSwitch', true),
-		}
+        }
 	}
     
 	componentDidUpdate(prevProps, prevState, snapshot) {
+        console.log('++++++++++++++', prevState, this.state);
         const { mirror_name } = this.props
         const editor_monaco = this.editor_monaco;
         if (editor_monaco && !_.isEqual(prevProps.mirror_name, mirror_name)) {
@@ -243,7 +246,6 @@ class TPIMonaco extends Component {
                 editor_monaco.setValue(this.props.repositoryCode)
             }
             // 代码没变也需要layout，可能从命令行自动切回了代码tab
-            editor_monaco.layout();
 
             // Clears the editor's undo history.
             // TODO
@@ -290,11 +292,12 @@ class TPIMonaco extends Component {
                 language: lang,
                 // language: 'css',
 
-                // theme: "vs-dark",
-                theme: "myCoolTheme",
+                // theme: "vs",
+                theme: this.state.cmCodeMode,
+                // theme: 'myCoolTheme',
                 insertSpaces: false,
-                fontSize: this.state.cmFontSize
-                
+                fontSize: this.state.cmFontSize,
+                // theme: this.state.cdCodeMode
             });
 
             window.editor_monaco = editor;
@@ -368,10 +371,17 @@ class TPIMonaco extends Component {
     }
     onFontSizeChange = (value) => {
         toStore('cmFontSize', value)
+        this.setState({ cmFontSize: value });
         this.editor_monaco.updateOptions({fontSize: value})
+    }
 
-        this.setState({ cmFontSize: value });
+    onCodeModeChange = (value) => {
+        toStore('cmCodeMode', value);
+        this.setState({ cmCodeMode: value });
+        window.monaco.editor.setTheme(value);
     }
+
+
     onAutoCompleteSwitchChange = () => {
 
     }
@@ -393,6 +403,7 @@ class TPIMonaco extends Component {
                 >
                     <TPICodeSetting {...this.props} {...this.state} 
                         onFontSizeChange={this.onFontSizeChange}
+                        onCodeModeChange={this.onCodeModeChange}
                         onAutoCompleteSwitchChange={this.onAutoCompleteSwitchChange}
                          ></TPICodeSetting>
                 </Drawer>