Get back editor autocompletion in file mode

src/components/ContentWrapFiles.jsx

@@ -18,7 +18,8 @@ export default class ContentWrapFiles extends Component {
 		super(props);
 		this.state = {
 			isConsoleOpen: false,
-			isCssSettingsModalOpen: false
+			isCssSettingsModalOpen: false,
+			editorOptions: this.getEditorOptions()
 		};
 
 		this.fileBuffers = {};
@@ -77,6 +78,29 @@ export default class ContentWrapFiles extends Component {
 	componentDidMount() {
 		this.props.onRef(this);
 	}
+	getEditorOptions(fileName = '') {
+		let options = {
+			gutters: [
+				'error-gutter',
+				'CodeMirror-linenumbers',
+				'CodeMirror-foldgutter'
+			],
+			emmet: true
+		};
+		if (fileName.match(/\.css$/)) {
+		} else if (fileName.match(/\.js$/)) {
+			delete options.emmet;
+		} else if (fileName.match(/\.html$/)) {
+			// HTML
+			options = {
+				...options,
+				noAutocomplete: true,
+				matchTags: { bothTags: true }
+			};
+		}
+
+		return options;
+	}
 
 	createEditorDoc(file) {
 		let mode;
@@ -405,7 +429,10 @@ export default class ContentWrapFiles extends Component {
 		this.props.onEditorFocus(editor);
 	}
 	fileSelectHandler(file) {
-		this.setState({ selectedFile: file });
+		this.setState({
+			editorOptions: this.getEditorOptions(file.name),
+			selectedFile: file
+		});
 		if (!this.fileBuffers[file.name]) {
 			this.createEditorDoc(file);
 		}
@@ -553,14 +580,7 @@ export default class ContentWrapFiles extends Component {
 							</div>
 						</div>
 						<UserCodeMirror
-							options={{
+							options={this.state.editorOptions}
-								mode: 'htmlmixed',
-								profile: 'xhtml',
-								gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-								noAutocomplete: true,
-								matchTags: { bothTags: true },
-								emmet: true
-							}}
 							prefs={this.props.prefs}
 							onChange={this.onHtmlCodeChange.bind(this)}
 							onCreation={editor => (this.cm = editor)}

src/components/UserCodeMirror.jsx

@@ -45,7 +45,7 @@ export default class UserCodeMirror extends Component {
 	shouldComponentUpdate(nextProps) {
 		if (nextProps.prefs !== this.props.prefs) {
 			const { prefs } = nextProps;
-			console.log('updating', nextProps.options.mode);
+			console.log('updating CM prefs', prefs);
 
 			this.cm.setOption('indentWithTabs', prefs.indentWith !== 'spaces');
 			this.cm.setOption(
@@ -74,7 +74,7 @@ export default class UserCodeMirror extends Component {
 
 	initEditor() {
 		const { options, prefs } = this.props;
-		console.log(100, prefs.lineWrap);
+		console.log(100, options);
 		this.cm = CodeMirror.fromTextArea(this.textarea, {
 			mode: options.mode,
 			lineNumbers: true,
@@ -143,10 +143,11 @@ export default class UserCodeMirror extends Component {
 		this.cm.addKeyMap({
 			'Ctrl-Space': 'autocomplete'
 		});
-		if (!options.noAutocomplete) {
 		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 (
-					!this.props.prefs.autoComplete ||
 					input.origin !== '+input' ||
 					input.text[0] === ';' ||
 					input.text[0] === ',' ||
@@ -157,8 +158,8 @@ export default class UserCodeMirror extends Component {
 				CodeMirror.commands.autocomplete(this.cm, null, {
 					completeSingle: false
 				});
-			});
 			}
+		});
 		this.props.onCreation(this.cm);
 	}