init

Sal Niro · Sal Niro · commit 3150e5286236 · 2017-06-01T13:55:09.000-04:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.idea
+node_modules
+demo/bundle.js
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,2 @@
+.babelrc
+demo
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+### react-codemirror2
+
+```
+import CodeMirror from 'react-codemirror2'
+
+<CodeMirror
+  value='foo'
+  options={{theme: 'material'}}
+  onChange={(value) => {
+    console.log(value);
+  }} />
+```
+
+// TODO
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>react-codemirror2</title>
+</head>
+<body>
+<div id="app"></div>
+<script src="/bundle.js"></script>
+</body>
+</html>
diff --git a/demo/index.jsx b/demo/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import {render} from 'react-dom';
+import CodeMirror from '../index.jsx';
+
+require('./index.scss');
+
+render(
+  <CodeMirror
+    value='foo'
+    options={{theme: 'material', viewportMargin: Infinity}}
+    onChange={(value) => console.log(value)}/>
+  , document.getElementById('app'));
diff --git a/demo/index.scss b/demo/index.scss
@@ -0,0 +1,2 @@
+@import '../node_modules/codemirror/lib/codemirror';
+@import '../node_modules/codemirror/theme/material';
diff --git a/demo/server.js b/demo/server.js
@@ -0,0 +1,23 @@
+let express = require('express');
+let app = express();
+
+app.set('port', 5000);
+
+app.use(express.static('.'));
+
+app.use(function (req, res, next) {
+  if (req.path.substr(-1) === '/' && req.path.length > 1) {
+    let query = req.url.slice(req.path.length);
+    res.redirect(301, req.path.slice(0, -1) + query);
+  } else {
+    next();
+  }
+});
+
+app.all('/*', function (req, res, next) {
+  res.sendFile(`${__dirname}/index.html`)
+});
+
+app.listen(app.get('port'), function () {
+  console.log(`react-codemirror2 demo listening on port ${app.get('port')}`);
+});
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -0,0 +1,32 @@
+let path = require('path');
+let context = path.resolve(__dirname, '..');
+
+let config = {
+
+  entry: path.normalize(`${context}/demo/index.jsx`),
+  output: {
+    path: path.normalize(`${context}/demo/`),
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [{
+      test: /\.jsx?/,
+      exclude: /(node_modules)/,
+      use: [{
+        loader: 'babel-loader'
+      }]
+    }, {
+      test: /(\.scss)$/,
+      exclude: /(node_modules)/,
+      use: [{
+        loader: 'style-loader'
+      }, {
+        loader: 'css-loader'
+      }, {
+        loader: 'sass-loader'
+      }]
+    }]
+  }
+};
+
+module.exports = config;
diff --git a/index.jsx b/index.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+let codemirror = require('codemirror');
+
+export default class CodeMirror extends React.Component {
+
+  componentDidMount() {
+
+    this.editor = codemirror(this.ref);
+    this.editor.on('change', () => this.props.onChange(this.editor.getValue()));
+
+    this.hydrate(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+
+    this.hydrate(nextProps);
+  }
+
+  hydrate(props) {
+
+    Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key]));
+    this.editor.setValue(props.value || '');
+  }
+
+  render() {
+    return (
+      <div ref={(self) => this.ref = self}/>
+    )
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["react", "es2015"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.idea`
	`2`	`+node_modules`
	`3`	`+demo/bundle.js`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@import '../node_modules/codemirror/lib/codemirror';`
	`2`	`+@import '../node_modules/codemirror/theme/material';`