From 2f2c1d1e8bce644b1dd8bddec6740226a8c4163a Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Tue, 3 May 2016 16:13:04 -0400
Subject: [PATCH] render editor

---
 .babelrc                                      |  2 +-
 README.md                                     |  3 ++
 client/index.js                               |  3 +-
 package.json                                  |  4 ++
 shared/components/Editor/Editor.jsx           | 26 +++++++++++++
 .../Editor/p5-widget-codemirror-theme.css     | 39 +++++++++++++++++++
 webpack.config.js                             |  4 ++
 7 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 shared/components/Editor/Editor.jsx
 create mode 100644 shared/components/Editor/p5-widget-codemirror-theme.css

diff --git a/.babelrc b/.babelrc
index 9f73d79c..d42d161e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["react", "es2015"],
+  "presets": ["react", "es2015", "stage-0"],
   "env": {
     "production": {
       "plugins": [
diff --git a/README.md b/README.md
index 99a54a8e..a3f67a11 100644
--- a/README.md
+++ b/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
diff --git a/client/index.js b/client/index.js
index 25140a92..1874933d 100644
--- a/client/index.js
+++ b/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')
 )
\ No newline at end of file
diff --git a/package.json b/package.json
index 678edd59..f4a24ffe 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx
new file mode 100644
index 00000000..812da37e
--- /dev/null
+++ b/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>;
+	}
+});
\ No newline at end of file
diff --git a/shared/components/Editor/p5-widget-codemirror-theme.css b/shared/components/Editor/p5-widget-codemirror-theme.css
new file mode 100644
index 00000000..ea45b8f5
--- /dev/null
+++ b/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; }
diff --git a/webpack.config.js b/webpack.config.js
index 02e7f2fd..58bf067a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,6 +26,10 @@ module.exports = {
           presets: ['react-hmre'],
         },
       },
+      {
+        test: /\.css$/,
+        loaders: ['style', 'css']
+      }
     ],
   },
 };
\ No newline at end of file