render editor

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["react", "es2015"],
+  "presets": ["react", "es2015", "stage-0"],
   "env": {
     "production": {
       "plugins": [

README.md

@@ -1,2 +1,5 @@
 MERN Stack - MongoDB, Express, React/Redux, Node
 https://github.com/Hashnode/mern-starter
+
+* https://github.com/petehunt/react-howto
+* https://github.com/gajus/react-css-modules

client/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { render } from 'react-dom';
+import Editor from '../shared/components/Editor/Editor'
 
 render(
-	<h1>Hello world!</h1>,
+	<Editor />,
 	document.getElementById('root')
 )

package.json

@@ -17,7 +17,10 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-react-hmre": "^1.1.1",
+    "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.8.0",
+    "css-loader": "^0.23.1",
+    "style-loader": "^0.13.1",
     "webpack": "^1.13.0",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0"
@@ -28,6 +31,7 @@
   "dependencies": {
     "babel-core": "^6.8.0",
     "react": "^15.0.2",
+    "react-css-modules": "^3.7.6",
     "react-dom": "^15.0.2"
   }
 }

shared/components/Editor/Editor.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/javascript/javascript';
+
+import '../../..//node_modules/codemirror/lib/codemirror.css';
+import './p5-widget-codemirror-theme.css';
+
+export default React.createClass({
+	_cm: CodeMirror.Editor,
+	componentDidMount: function() {
+		this._cm = CodeMirror(this.refs.container, {
+      theme: 'p5-widget',
+      // value: this.props.content,
+      value: 'var a = "Hello World!"',
+      lineNumbers: true,
+      mode: 'javascript'
+    });
+	},
+	componentWillUnmount: function() {
+		this._cm = null;
+	},
+	render: function() {
+		return <div ref="container" className="editor-holder"></div>;
+	}
+});

shared/components/Editor/p5-widget-codemirror-theme.css

@@ -0,0 +1,39 @@
+:root {
+  --light-gray: #A0A0A0;
+  --dark-gray: #666;
+  --almost-black: #222;
+  --dark-brown: #704F21;
+  --light-brown: #a67f59;
+  --pinkish: #DC3787; /* not p5 pink, but related */
+  --dark-blueish: #00A1D3;
+}
+
+.cm-s-p5-widget span { color: var(--dark-gray); }
+
+.cm-s-p5-widget span.cm-meta { color: var(--dark-gray); }
+.cm-s-p5-widget span.cm-keyword { line-height: 1em; color: var(--dark-brown); }
+.cm-s-p5-widget span.cm-atom { color: var(--pinkish); }
+.cm-s-p5-widget span.cm-number { color: var(--pinkish); }
+.cm-s-p5-widget span.cm-def { color: var(--dark-blueish); }
+.cm-s-p5-widget span.cm-variable { color: var(--dark-blueish); }
+.cm-s-p5-widget span.cm-variable-2 { color: var(--almost-black); }
+.cm-s-p5-widget span.cm-variable-3 { color: var(--almost-black); }
+.cm-s-p5-widget span.cm-property { color: var(--almost-black); }
+.cm-s-p5-widget span.cm-operator { color: var(--light-brown); }
+.cm-s-p5-widget span.cm-comment { color: var(--light-gray); }
+.cm-s-p5-widget span.cm-string { color: var(--dark-blueish); }
+.cm-s-p5-widget span.cm-string-2 { color: var(--dark-blueish); }
+
+.cm-s-p5-widget span.cm-error { color: #f00; }
+
+.cm-s-p5-widget .CodeMirror-activeline-background { background: #e8f2ff; }
+.cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
+
+/* These styles don't seem to be set by CodeMirror's javascript mode. */
+
+.cm-s-p5-widget span.cm-qualifier { color: #555; }
+.cm-s-p5-widget span.cm-builtin { color: #30a; }
+.cm-s-p5-widget span.cm-bracket { color: #cc7; }
+.cm-s-p5-widget span.cm-tag { color: #170; }
+.cm-s-p5-widget span.cm-attribute { color: #00c; }
+.cm-s-p5-widget span.cm-link { color: #219; }

webpack.config.js

@@ -26,6 +26,10 @@ module.exports = {
           presets: ['react-hmre'],
         },
       },
+      {
+        test: /\.css$/,
+        loaders: ['style', 'css']
+      }
     ],
   },
 };