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,100 +66,123 @@ export default class UserCodeMirror extends Component {
 
 	initEditor() {
 		const { options, prefs } = this.props;
-		this.cm = CodeMirror.fromTextArea(this.textarea, {
+		if (this.props.mode === 'monaco') {
-			mode: options.mode,
+			this.instance = monaco.editor.create(el, {
-			lineNumbers: true,
+				language: options.language,
-			lineWrapping: !!prefs.lineWrap,
+				roundedSelection: false,
-			autofocus: options.autofocus || false,
+				scrollBeyondLastLine: false,
-			autoCloseBrackets: true,
+				theme: 'vs-dark',
-			autoCloseTags: !!prefs.autoCloseTags,
+				fontSize: 16,
-			matchBrackets: true,
+				minimap: {
-			matchTags: options.matchTags || false,
+					enabled: false
-			tabMode: 'indent',
-			keyMap: prefs.keyMap || 'sublime',
-			theme: prefs.editorTheme || 'monokai',
-			lint: !!options.lint,
-			tabSize: +prefs.indentSize || 2,
-			indentWithTabs: prefs.indentWith !== 'spaces',
-			indentUnit: +prefs.indentSize,
-			foldGutter: true,
-			styleActiveLine: true,
-			gutters: options.gutters || [],
-			// cursorScrollMargin: '20', has issue with scrolling
-			profile: options.profile || '',
-			extraKeys: {
-				Up: function(editor) {
-					// Stop up/down keys default behavior when saveditempane is open
-					// if (isSavedItemsPaneOpen) {
-					// return;
-					// }
-					CodeMirror.commands.goLineUp(editor);
 				},
-				Down: function(editor) {
+				wordWrap: 'on',
-					// if (isSavedItemsPaneOpen) {
+				fontLigatures: true
-					// return;
+			});
-					// }
+			this.instance.onDidChangeModelContent(onChange);
-					CodeMirror.commands.goLineDown(editor);
+		} else {
-				},
+			this.instance = CodeMirror.fromTextArea(this.textarea, {
-				'Shift-Tab': function(editor) {
+				mode: options.mode,
-					CodeMirror.commands.indentAuto(editor);
+				lineNumbers: true,
-				},
+				lineWrapping: !!prefs.lineWrap,
-				'Shift-Ctrl-F': function(editor) {
+				autofocus: options.autofocus || false,
-					if (options.prettier) {
+				autoCloseBrackets: true,
-						prettify({
+				autoCloseTags: !!prefs.autoCloseTags,
-							content: editor.getValue(),
+				matchBrackets: true,
-							type: options.prettierParser
+				matchTags: options.matchTags || false,
-						}).then(formattedCode => editor.setValue(formattedCode));
+				tabMode: 'indent',
-					}
+				keyMap: prefs.keyMap || 'sublime',
-				},
+				theme: prefs.editorTheme || 'monokai',
-				Tab: function(editor) {
+				lint: !!options.lint,
-					if (options.emmet) {
+				tabSize: +prefs.indentSize || 2,
-						const didEmmetWork = editor.execCommand('emmetExpandAbbreviation');
+				indentWithTabs: prefs.indentWith !== 'spaces',
-						if (didEmmetWork === true) {
+				indentUnit: +prefs.indentSize,
-							return;
+				foldGutter: true,
+				styleActiveLine: true,
+				gutters: options.gutters || [],
+				// cursorScrollMargin: '20', has issue with scrolling
+				profile: options.profile || '',
+				extraKeys: {
+					Up: function(editor) {
+						// Stop up/down keys default behavior when saveditempane is open
+						// if (isSavedItemsPaneOpen) {
+						// return;
+						// }
+						CodeMirror.commands.goLineUp(editor);
+					},
+					Down: function(editor) {
+						// if (isSavedItemsPaneOpen) {
+						// return;
+						// }
+						CodeMirror.commands.goLineDown(editor);
+					},
+					'Shift-Tab': function(editor) {
+						CodeMirror.commands.indentAuto(editor);
+					},
+					'Shift-Ctrl-F': function(editor) {
+						if (options.prettier) {
+							prettify({
+								content: editor.getValue(),
+								type: options.prettierParser
+							}).then(formattedCode => editor.setValue(formattedCode));
 						}
-					}
+					},
-					const input = $('[data-setting=indentWith]:checked');
+					Tab: function(editor) {
-					if (
+						if (options.emmet) {
-						!editor.somethingSelected() &&
+							const didEmmetWork = editor.execCommand(
-						(!prefs.indentWith || prefs.indentWith === 'spaces')
+								'emmetExpandAbbreviation'
-					) {
+							);
-						// softtabs adds spaces. This is required because by default tab key will put tab, but we want
+							if (didEmmetWork === true) {
-						// to indent with spaces if `spaces` is preferred mode of indentation.
+								return;
-						// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
+							}
-						CodeMirror.commands.insertSoftTab(editor);
+							const input = $('[data-setting=indentWith]:checked');
-					} else {
+							if (
-						CodeMirror.commands.defaultTab(editor);
+								!editor.somethingSelected() &&
-					}
+								(!prefs.indentWith || prefs.indentWith === 'spaces')
-				},
+							) {
-				Enter: 'emmetInsertLineBreak'
+								// softtabs adds spaces. This is required because by default tab key will put tab, but we want
-			}
+								// to indent with spaces if `spaces` is preferred mode of indentation.
-		});
+								// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
-		this.cm.on('focus', editor => {
+								CodeMirror.commands.insertSoftTab(editor);
-			if (typeof this.props.onFocus === 'function') this.props.onFocus(editor);
+							} else {
-		});
+								CodeMirror.commands.defaultTab(editor);
-		this.cm.on('change', this.props.onChange);
+							}
-		this.cm.addKeyMap({
+						}
-			'Ctrl-Space': 'autocomplete'
+					},
-		});
+					Enter: 'emmetInsertLineBreak'
-		this.cm.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 (
-					input.origin !== '+input' ||
-					input.text[0] === ';' ||
-					input.text[0] === ',' ||
-					input.text[0] === ' '
-				) {
-					return;
 				}
-				CodeMirror.commands.autocomplete(this.cm, null, {
+			});
-					completeSingle: false
+			this.instance.on('focus', editor => {
-				});
+				if (typeof this.props.onFocus === 'function')
-			}
+					this.props.onFocus(editor);
-		});
+			});
-		this.props.onCreation(this.cm);
+			this.instance.on('change', this.props.onChange);
+			this.instance.addKeyMap({
+				'Ctrl-Space': 'autocomplete'
+			});
+			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 (
+						input.origin !== '+input' ||
+						input.text[0] === ';' ||
+						input.text[0] === ',' ||
+						input.text[0] === ' '
+					) {
+						return;
+					}
+					CodeMirror.commands.autocomplete(editor, null, {
+						completeSingle: false
+					});
+				}
+			});
+		}
+
+		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 {