get language in monaco and misc fixes

src/components/CodeEditor.jsx

@@ -33,6 +33,7 @@ import 'code-blast-codemirror/code-blast.js';
 
 import emmet from '@emmetio/codemirror-plugin';
 import { prettify } from '../utils';
+import { modes } from '../codeModes';
 
 import '../lib/monaco/monaco.bundle';
 import '../lib/monaco/monaco.css';
@@ -40,14 +41,14 @@ import '../lib/monaco/monaco.css';
 emmet(CodeMirror);
 window.MonacoEnvironment = {
 	getWorkerUrl(moduleId, label) {
-		let MonacoWorker;
-
 		switch (label) {
 			case 'html':
 				return 'lib/monaco/workers/html.worker.bundle.js';
 			case 'json':
 				return 'lib/monaco/workers/json.worker.bundle.js';
 			case 'css':
+			case 'scss':
+			case 'less':
 				return 'lib/monaco/workers/css.worker.bundle.js';
 			case 'typescript':
 			case 'javascript':
@@ -66,7 +67,7 @@ export default class CodeEditor extends Component {
 		if (nextProps.prefs !== this.props.prefs) {
 			const { prefs } = nextProps;
 
-			if (this.props.mode === 'monaco') {
+			if (this.props.type === 'monaco') {
 				this.instance.updateOptions({ fontSize: prefs.fontSize });
 			} else {
 				this.instance.setOption(
@@ -90,8 +91,26 @@ export default class CodeEditor extends Component {
 			}
 		}
 
+		if (nextProps.type !== this.props.type) {
+			// debugger;
+			if (
+				this.node.parentElement.querySelector('.monaco-editor, .CodeMirror')
+			) {
+				this.node.parentElement
+					.querySelector('.monaco-editor, .CodeMirror')
+					.remove();
+			}
+			console.log('CODEEDITOR SHOULD UPDATE');
+
+			return true;
+		}
+
 		return false;
 	}
+	componentDidUpdate(prevProps) {
+		console.log('CODEEDITOR UPDATED');
+		this.initEditor();
+	}
 	setModel(model) {
 		this.instance.swapDoc
 			? this.instance.swapDoc(model)
@@ -106,15 +125,33 @@ export default class CodeEditor extends Component {
 		return this.instance.getValue();
 	}
 	saveViewState() {
-		if (this.props.mode === 'monaco') {
+		if (this.props.type === 'monaco') {
 			return this.instance.saveViewState();
 		}
 	}
 	restoreViewState(state) {
-		if (this.props.mode === 'monaco') {
+		if (this.props.type === 'monaco') {
 			this.instance.restoreViewState(state);
 		}
 	}
+	setOption(option, value) {}
+	setLanguage(value) {
+		console.log('setting', this.props.type, modes[value].cmMode);
+		if (this.props.type === 'monaco') {
+			monaco.editor.setModelLanguage(
+				this.instance.getModel(),
+				this.getMonacoLanguageFromMode(modes[value].cmMode)
+			);
+		} else {
+			this.instance.setOption('mode', modes[value].cmMode);
+			CodeMirror.autoLoadMode(
+				this.instance,
+				modes[value].cmPath || modes[value].cmMode
+			);
+		}
+	}
+
+	clearGutter(gutterName) {}
 
 	refresh() {
 		this.instance.refresh ? this.instance.refresh() : this.instance.layout();
@@ -123,11 +160,25 @@ export default class CodeEditor extends Component {
 		this.instance.focus();
 	}
 
+	getMonacoLanguageFromMode(mode) {
+		if (['htmlmixed'].includes(mode)) {
+			return 'html';
+		}
+		if (['css', 'sass', 'scss', 'less', 'stylus'].includes(mode)) {
+			return 'css';
+		}
+		if (['javascript', 'text/typescript-jsx', 'jsx'].includes(mode)) {
+			return 'javascript';
+		}
+		return mode;
+	}
+
 	initEditor() {
 		const { options, prefs } = this.props;
-		if (this.props.mode === 'monaco') {
+		console.log(this.props.type);
-			this.instance = monaco.editor.create(this.textarea, {
+		if (this.props.type === 'monaco') {
-				language: 'javascript',
+			this.instance = monaco.editor.create(this.node, {
+				language: this.getMonacoLanguageFromMode(options.mode),
 				roundedSelection: false,
 				scrollBeyondLastLine: false,
 				theme: 'vs-dark',
@@ -141,14 +192,22 @@ export default class CodeEditor extends Component {
 				automaticLayout: true
 			});
 			window.monacoInstance = this.instance;
-			this.instance.onDidChangeModelContent(this.props.onChange);
+			this.instance.onDidChangeModelContent(change => {
-			setTimeout(() => {
+				this.props.onChange(this.instance, { ...change, origin: '+input' });
-				// this.instance.layout();
+			});
-			}, 1000);
+			this.instance.addCommand(
+				monaco.KeyMod.WinCtrl | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F,
+				() => {
+					if (options.prettier) {
+						prettify({
+							content: this.instance.getValue(),
+							type: options.prettierParser
+						}).then(formattedCode => this.instance.setValue(formattedCode));
+					}
+				}
+			);
 		} else {
-			this.instance = CodeMirror.fromTextArea(
+			this.instance = CodeMirror.fromTextArea(this.node, {
-				this.textarea.querySelector('textarea'),
-				{
 				mode: options.mode,
 				lineNumbers: true,
 				lineWrapping: !!prefs.lineWrap,
@@ -218,8 +277,7 @@ export default class CodeEditor extends Component {
 					},
 					Enter: 'emmetInsertLineBreak'
 				}
-				}
+			});
-			);
 			this.instance.on('focus', editor => {
 				if (typeof this.props.onFocus === 'function')
 					this.props.onFocus(editor);
@@ -254,10 +312,12 @@ export default class CodeEditor extends Component {
 	}
 
 	render() {
-		return (
+		const node =
-			<div ref={el => (this.textarea = el)} style="width:100%;height:100%;">
+			this.props.type === 'monaco' ? (
-				{this.props.mode === 'monaco' ? null : <textarea />}
+				<div ref={el => (this.node = el)} style="width:100%;height:100%;" />
-			</div>
+			) : (
+				<textarea ref={el => (this.node = el)} />
 			);
+		return node;
 	}
 }

src/components/ContentWrap.jsx

@@ -488,35 +488,23 @@ export default class ContentWrap extends Component {
 	updateHtmlMode(value) {
 		this.props.onCodeModeChange('html', value);
 		this.props.currentItem.htmlMode = value;
-		this.cm.html.setOption('mode', modes[value].cmMode);
+		this.cm.html.setLanguage(value);
-		CodeMirror.autoLoadMode(
-			this.cm.html,
-			modes[value].cmPath || modes[value].cmMode
-		);
 		return this.handleModeRequirements(value);
 	}
 	updateCssMode(value) {
 		this.props.onCodeModeChange('css', value);
 		this.props.currentItem.cssMode = value;
-		this.cm.css.setOption('mode', modes[value].cmMode);
 		this.cm.css.setOption('readOnly', modes[value].cmDisable);
 		window.cssSettingsBtn.classList[
 			modes[value].hasSettings ? 'remove' : 'add'
 		]('hide');
-		CodeMirror.autoLoadMode(
+		this.cm.css.setLanguage(value);
-			this.cm.css,
-			modes[value].cmPath || modes[value].cmMode
-		);
 		return this.handleModeRequirements(value);
 	}
 	updateJsMode(value) {
 		this.props.onCodeModeChange('js', value);
 		this.props.currentItem.jsMode = value;
-		this.cm.js.setOption('mode', modes[value].cmMode);
+		this.cm.js.setLanguage(value);
-		CodeMirror.autoLoadMode(
-			this.cm.js,
-			modes[value].cmPath || modes[value].cmMode
-		);
 		return this.handleModeRequirements(value);
 	}
 	codeModeChangeHandler(e) {
@@ -709,6 +697,7 @@ export default class ContentWrap extends Component {
 							</div>
 						</div>
 						<CodeEditor
+							type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
 							options={{
 								mode: 'htmlmixed',
 								profile: 'xhtml',
@@ -721,7 +710,7 @@ export default class ContentWrap extends Component {
 							}}
 							prefs={this.props.prefs}
 							onChange={this.onHtmlCodeChange.bind(this)}
-							onCreation={el => (this.cm.html = el)}
+							ref={editor => (this.cm.html = editor)}
 							onFocus={this.editorFocusHandler.bind(this)}
 						/>
 					</div>
@@ -776,6 +765,7 @@ export default class ContentWrap extends Component {
 							</div>
 						</div>
 						<CodeEditor
+							type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
 							options={{
 								mode: 'css',
 								gutters: [
@@ -789,7 +779,7 @@ export default class ContentWrap extends Component {
 							}}
 							prefs={this.props.prefs}
 							onChange={this.onCssCodeChange.bind(this)}
-							onCreation={el => (this.cm.css = el)}
+							ref={editor => (this.cm.css = editor)}
 							onFocus={this.editorFocusHandler.bind(this)}
 						/>
 					</div>
@@ -831,6 +821,7 @@ export default class ContentWrap extends Component {
 							</div>
 						</div>
 						<CodeEditor
+							type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
 							options={{
 								mode: 'javascript',
 								gutters: [
@@ -844,7 +835,7 @@ export default class ContentWrap extends Component {
 							prefs={this.props.prefs}
 							autoComplete={this.props.prefs.autoComplete}
 							onChange={this.onJsCodeChange.bind(this)}
-							onCreation={el => (this.cm.js = el)}
+							ref={editor => (this.cm.js = editor)}
 							onFocus={this.editorFocusHandler.bind(this)}
 						/>
 						{/* Inlet(scope.cm.js); */}

src/components/ContentWrapFiles.jsx

@@ -188,7 +188,7 @@ export default class ContentWrapFiles extends Component {
 	}
 
 	onHtmlCodeChange(editor, change) {
-		this.cmCodes.html = this.editor.getValue();
+		this.cmCodes.html = editor.getValue();
 
 		this.props.onCodeChange(
 			this.state.selectedFile,
@@ -663,7 +663,7 @@ export default class ContentWrapFiles extends Component {
 							</div>
 						</div>
 						<CodeEditor
-							mode={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
+							type={this.props.prefs.isMonacoEditorOn ? 'monaco' : 'codemirror'}
 							value={
 								this.state.selectedFile ? this.state.selectedFile.content : ''
 							}