WIP

src/components/ContentWrapFiles.jsx

@@ -638,6 +638,7 @@ export default class ContentWrapFiles extends Component {
 							</div>
 						</div>
 						<UserCodeMirror
+							mode={'monaco'}
 							value={
 								this.state.selectedFile ? this.state.selectedFile.content : ''
 							}

src/components/UserCodeMirror.jsx

@@ -66,7 +66,22 @@ export default class UserCodeMirror extends Component {
 
 	initEditor() {
 		const { options, prefs } = this.props;
-		this.cm = CodeMirror.fromTextArea(this.textarea, {
+		if (this.props.mode === 'monaco') {
+			this.instance = monaco.editor.create(el, {
+				language: options.language,
+				roundedSelection: false,
+				scrollBeyondLastLine: false,
+				theme: 'vs-dark',
+				fontSize: 16,
+				minimap: {
+					enabled: false
+				},
+				wordWrap: 'on',
+				fontLigatures: true
+			});
+			this.instance.onDidChangeModelContent(onChange);
+		} else {
+			this.instance = CodeMirror.fromTextArea(this.textarea, {
 				mode: options.mode,
 				lineNumbers: true,
 				lineWrapping: !!prefs.lineWrap,
@@ -114,11 +129,12 @@ export default class UserCodeMirror extends Component {
 					},
 					Tab: function(editor) {
 						if (options.emmet) {
-						const didEmmetWork = editor.execCommand('emmetExpandAbbreviation');
+							const didEmmetWork = editor.execCommand(
+								'emmetExpandAbbreviation'
+							);
 							if (didEmmetWork === true) {
 								return;
 							}
-					}
 							const input = $('[data-setting=indentWith]:checked');
 							if (
 								!editor.somethingSelected() &&
@@ -131,21 +147,26 @@ export default class UserCodeMirror extends Component {
 							} else {
 								CodeMirror.commands.defaultTab(editor);
 							}
+						}
 					},
 					Enter: 'emmetInsertLineBreak'
 				}
 			});
-		this.cm.on('focus', editor => {
-			if (typeof this.props.onFocus === 'function') this.props.onFocus(editor);
+			this.instance.on('focus', editor => {
+				if (typeof this.props.onFocus === 'function')
+					this.props.onFocus(editor);
 			});
-		this.cm.on('change', this.props.onChange);
-		this.cm.addKeyMap({
+			this.instance.on('change', this.props.onChange);
+			this.instance.addKeyMap({
 				'Ctrl-Space': 'autocomplete'
 			});
-		this.cm.on('inputRead', (editor, input) => {
+			this.instance.on('inputRead', (editor, input) => {
 				// Process further If this has autocompletition on and also the global
 				// autocomplete setting is on.
-			if (!this.props.options.noAutocomplete && this.props.prefs.autoComplete) {
+				if (
+					!this.props.options.noAutocomplete &&
+					this.props.prefs.autoComplete
+				) {
 					if (
 						input.origin !== '+input' ||
 						input.text[0] === ';' ||
@@ -154,12 +175,14 @@ export default class UserCodeMirror extends Component {
 					) {
 						return;
 					}
-				CodeMirror.commands.autocomplete(this.cm, null, {
+					CodeMirror.commands.autocomplete(editor, null, {
 						completeSingle: false
 					});
 				}
 			});
-		this.props.onCreation(this.cm);
+		}
+
+		this.props.onCreation(this.instance);
 	}
 
 	render() {

src/style.css

@@ -1931,6 +1931,10 @@ while the theme CSS file is loading */
 .tabs__tabpanel-wrap {
 	flex: 1;
 }
+.monaco-editor {
+	width: 100%;
+	height: 300px !important; /* 25px for header */
+}
 
 @media screen and (max-width: 600px) {
 	body {