A bit better JSX syntax highlighting (#19).

Author: sapegin

src/components/Editor/Editor.js

@@ -1,5 +1,5 @@
 // CodeMirror
-import 'codemirror/mode/xml/xml';
+import '../../utils/codemirror-jsx';
 import 'codemirror/lib/codemirror.css';
 
 import _ from 'lodash';
@@ -20,7 +20,7 @@ export default class Editor extends Component {
 		onChange: PropTypes.func
 	}
 	static codemirrorOptions = {
-		mode: 'xml',
+		mode: 'jsx',
 		lineNumbers: false,
 		lineWrapping: true,
 		smartIndent: false,

src/utils/codemirror-jsx.js

@@ -0,0 +1,15 @@
+import CodeMirror from 'codemirror/lib/codemirror';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/addon/mode/multiplex';
+
+// TODO: Real JSX syntax highlighting
+// https://github.com/codemirror/CodeMirror/issues/3122
+
+CodeMirror.defineMode('jsx', (config) => {
+	return CodeMirror.multiplexingMode(CodeMirror.getMode(config, 'htmlmixed'), {
+		open: '{',
+		close: '}',
+		delimStyle: 'delimit',
+		mode: CodeMirror.getMode(config, 'javascript')
+	});
+});