From c29f5aee6880236430e4eaab65791697cc12b3a2 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Wed, 13 Jul 2016 19:52:50 -0400
Subject: [PATCH] add syntax highlighting for different file types, and linting
 for html and css

---
 client/modules/IDE/components/Editor.js | 17 +++++++++++++++++
 package.json                            |  2 ++
 2 files changed, 19 insertions(+)

diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 9be67dff..ccb6d52e 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -1,11 +1,19 @@
 import React, { PropTypes } from 'react';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/javascript-lint';
+import 'codemirror/addon/lint/css-lint';
+import 'codemirror/addon/lint/html-lint';
 import { JSHINT } from 'jshint';
 window.JSHINT = JSHINT;
+import { CSSLint } from 'csslint';
+window.CSSLint = CSSLint;
+import { HTMLHint } from 'htmlhint';
+window.HTMLHint = HTMLHint;
 
 class Editor extends React.Component {
 
@@ -43,6 +51,15 @@ class Editor extends React.Component {
     if (this.props.isTabIndent !== prevProps.isTabIndent) {
       this._cm.setOption('indentWithTabs', this.props.isTabIndent);
     }
+    if (this.props.file.name !== prevProps.name) {
+      if (this.props.file.name.match(/.+\.js$/)) {
+        this._cm.setOption('mode', 'javascript');
+      } else if (this.props.file.name.match(/.+\.css$/)) {
+        this._cm.setOption('mode', 'css');
+      } else if (this.props.file.name.match(/.+\.html$/)) {
+        this._cm.setOption('mode', 'htmlmixed');
+      }
+    }
   }
 
   componentWillUnmount() {
diff --git a/package.json b/package.json
index 1623aa62..23b2dd8d 100644
--- a/package.json
+++ b/package.json
@@ -65,11 +65,13 @@
     "codemirror": "^5.14.2",
     "connect-mongo": "^1.2.0",
     "cookie-parser": "^1.4.1",
+    "csslint": "^0.10.0",
     "dotenv": "^2.0.0",
     "escape-string-regexp": "^1.0.5",
     "eslint-loader": "^1.3.0",
     "express": "^4.13.4",
     "express-session": "^1.13.0",
+    "htmlhint": "^0.9.13",
     "jshint": "^2.9.2",
     "moment": "^2.14.1",
     "mongoose": "^4.4.16",