r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add syntax highlighting for different file types, and linting for html and css

Browse source
This commit is contained in:
catarak 2016-07-13 19:52:50 -04:00
parent 4d6e4857ba
commit c29f5aee68
2 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
client/modules/IDE/components/Editor.js
View file

@ -1,11 +1,19 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import CodeMirror from 'codemirror'; import CodeMirror from 'codemirror';
import 'codemirror/mode/javascript/javascript'; import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/addon/selection/active-line'; import 'codemirror/addon/selection/active-line';
import 'codemirror/addon/lint/lint'; import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint'; import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/css-lint';
import 'codemirror/addon/lint/html-lint';
import { JSHINT } from 'jshint'; import { JSHINT } from 'jshint';
window.JSHINT = JSHINT; window.JSHINT = JSHINT;
import { CSSLint } from 'csslint';
window.CSSLint = CSSLint;
import { HTMLHint } from 'htmlhint';
window.HTMLHint = HTMLHint;
class Editor extends React.Component { class Editor extends React.Component {
@ -43,6 +51,15 @@ class Editor extends React.Component {
if (this.props.isTabIndent !== prevProps.isTabIndent) { if (this.props.isTabIndent !== prevProps.isTabIndent) {
this._cm.setOption('indentWithTabs', this.props.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() { componentWillUnmount() {

2
package.json
View file

@ -65,11 +65,13 @@
"codemirror": "^5.14.2", "codemirror": "^5.14.2",
"connect-mongo": "^1.2.0", "connect-mongo": "^1.2.0",
"cookie-parser": "^1.4.1", "cookie-parser": "^1.4.1",
"csslint": "^0.10.0",
"dotenv": "^2.0.0", "dotenv": "^2.0.0",
"escape-string-regexp": "^1.0.5", "escape-string-regexp": "^1.0.5",
"eslint-loader": "^1.3.0", "eslint-loader": "^1.3.0",
"express": "^4.13.4", "express": "^4.13.4",
"express-session": "^1.13.0", "express-session": "^1.13.0",
"htmlhint": "^0.9.13",
"jshint": "^2.9.2", "jshint": "^2.9.2",
"moment": "^2.14.1", "moment": "^2.14.1",
"mongoose": "^4.4.16", "mongoose": "^4.4.16",