added basic code editor

Author: dorcheng

client/components/CodeEditor.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import Draft, { Editor, EditorState} from 'draft-js';
+import CodeUtils from 'draft-js-code';
+
+export class CodeEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editorState: this.props.editorState
+    };
+  }
+
+  // handleKeyCommand = (command) => {
+  //   const { editorState } = this.state;
+  //   let newState;
+
+  //   if (CodeUtils.hasSelectionInBlock(editorState)) {
+  //     newState = CodeUtils.handleKeyCommand(editorState, command);
+  //   }
+
+  //   if (!newState) {
+  //     newState = RichUtils.handleKeyCommand(editorState, command);
+  //   }
+
+  //   if (newState) {
+  //     this.onChange(newState);
+  //     return 'handled';
+  //   }
+  //   return 'not-handled';
+  // }
+
+  // keyBindingFn = (evt) => {
+  //   const { editorState } = this.state;
+  //   if (!CodeUtils.hasSelectionInBlock(editorState)) return Draft.getDefaultKeyBinding(evt);
+
+  //   const command = CodeUtils.getKeyBinding(evt);
+
+  //   return command || Draft.getDefaultKeyBinding(evt);
+  // }
+
+  // handleReturn = (evt) => {
+  //   const { editorState } = this.state;
+  //   if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled';
+
+  //   this.onChange(CodeUtils.handleReturn(evt, editorState));
+  //   return 'handled';
+  // }
+
+  // onTab = (evt) => {
+  //   const { editorState } = this.state;
+  //   if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled';
+
+  //   this.onChange(CodeUtils.onTab(evt, editorState));
+  //   return 'handled';
+  // }
+
+  render() {
+
+    console.log('WHAT IS THIS', this.state)
+
+    return (
+      <Editor
+        editorState={this.props.editorState}
+        onChange={this.props.onChange}
+        // keyBindingFn={this.keyBindingFn}
+        // handleKeyCommand={this.handleKeyCommand}
+        // handleReturn={this.handleReturn}
+        // onTab={this.onTab}
+      />
+    );
+  }
+}

client/components/main.js

@@ -1,40 +1,55 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {withRouter, Link} from 'react-router-dom'
+import { Editor, EditorState} from 'draft-js';
 import {logout} from '../store'
+import AceEditor from 'react-ace'
+import brace from 'brace';
+import 'brace/mode/javascript';
+import 'brace/theme/monokai';
 
-/**
- * COMPONENT
- *  The Main component is our 'picture frame' - it displays the navbar and anything
- *  else common to our entire app. The 'picture' inside the frame is the space
- *  rendered out by the component's `children`.
- */
-const Main = (props) => {
-  const {children, handleClick, isLoggedIn} = props
+class Main extends Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this)
+  }
+
+  onChange = (obj) => {
+    console.log(obj)
+  }
+
+  render () {
+    return (
+      <AceEditor
+        mode="javascript"
+        theme="monokai"
+        height="50em"
+        onChange={this.onChange}
+      />
+    )
+  }
 
-  return (
-    <div>
-      <h1>BOILERMAKER</h1>
-      <nav>
-        {
-          isLoggedIn
-            ? <div>
-              {/* The navbar will show these links after you log in */}
-              <Link to="/home">Home</Link>
-              <a href="#" onClick={handleClick}>Logout</a>
-            </div>
-            : <div>
-              {/* The navbar will show these links before you log in */}
-              <Link to="/login">Login</Link>
-              <Link to="/signup">Sign Up</Link>
-            </div>
-        }
-      </nav>
-      <hr />
-      {children}
-    </div>
-  )
+    // <div>
+    //   <h1>BOILERMAKER</h1>
+    //   <nav>
+    //     {
+    //       isLoggedIn
+    //         ? <div>
+    //           {/* The navbar will show these links after you log in */}
+    //           <Link to="/home">Home</Link>
+    //           <a href="#" onClick={handleClick}>Logout</a>
+    //         </div>
+    //         : <div>
+    //           {/* The navbar will show these links before you log in */}
+    //           <Link to="/login">Login</Link>
+    //           <Link to="/signup">Sign Up</Link>
+    //         </div>
+    //     }
+    //   </nav>
+    //   <hr />
+    //   {children}
+    // </div>
 }
 
 /**

client/index.scss

@@ -18,4 +18,4 @@ nav a {
 form div {
     margin: 1em;
     display: inline-block;
-}
+}

package.json

@@ -23,9 +23,13 @@
   "dependencies": {
     "axios": "^0.15.3",
     "body-parser": "^1.16.1",
+    "brace": "^0.11.0",
     "compression": "^1.7.1",
     "connect-session-sequelize": "^4.1.0",
     "css-loader": "^0.28.8",
+    "draft-js": "^0.10.4",
+    "draft-js-code": "^0.3.0",
+    "draft-js-prism": "^1.0.5",
     "express": "^4.14.1",
     "express-session": "^1.15.1",
     "history": "^4.6.3",
@@ -35,8 +39,10 @@
     "passport-google-oauth": "^1.0.0",
     "pg": "^6.4.2",
     "pg-hstore": "^2.3.2",
+    "prismjs": "^1.9.0",
     "prop-types": "^15.5.8",
     "react": "^16.0.0",
+    "react-ace": "^5.9.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.2",
     "react-router-dom": "^4.1.1",
@@ -63,6 +69,7 @@
     "eslint": "^4.10.0",
     "eslint-config-fullstack": "^3.0.0",
     "eslint-plugin-react": "^7.4.0",
+    "file-loader": "^1.1.6",
     "mocha": "^3.3.0",
     "nodemon": "^1.12.1",
     "react-test-renderer": "^16.0.0",

public/index.html

@@ -5,6 +5,8 @@
     <meta name='viewport' content='width=device-width initial-scale=1.0'>
     <title>Boilermaker</title>
     <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="/Draft.css" />
+    <link rel="stylesheet" href="/prism.css" />
     <script defer src="/bundle.js"></script>
   </head>
   <body>

webpack.config.js

@@ -24,7 +24,7 @@ module.exports = {
         use: [
           'style-loader',
           'css-loader',
-          'sass-loader'
+          'sass-loader',
         ]
       },
       {