get editor working

components/codeImage.js

@@ -1,27 +1,16 @@
 import { EOL } from 'os'
 import React from 'react'
-import { NativeTypes } from 'react-dnd-html5-backend'
-import { DropTarget } from 'react-dnd'
 import domtoimage from 'dom-to-image'
-import highlight from 'highlight.js'
 import CodeMirror from 'react-codemirror'
 
-const padding = '50px 50px'
+// hack to only call modes on browser
-
+if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
-const DEFAULT_CODE = `
+  require('codemirror/mode/javascript/javascript');
-const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
+  require('codemirror/mode/xml/xml');
-
+  require('codemirror/mode/markdown/markdown');
-const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
+}
-
-const unfold = (f, seed) => {
-  const go = (f, seed, acc) => {
-    const res = f(seed)
-    return res ? go(f, res[1], acc.concat([res[0]])) : acc
-  }
-  return go(f, seed, [])
-}`
 
-const MAX_LINES = 40
+const padding = '50px 50px'
 
 class CodeImage extends React.Component {
   constructor (props) {
@@ -45,41 +34,21 @@ class CodeImage extends React.Component {
       })
   }
 
-  highlight () {
+  updateCode (newCode) {
-    highlight.initHighlighting.called = false
+    this.setState({ code: newCode })
-    highlight.initHighlighting()
-  }
-
-  componentDidMount () {
-    // highlight
-    this.highlight()
-
-    //highlight when content changes
-    this.editor.addEventListener('input', () => {
-      console.log('edit')
-      this.highlight()
-    })
   }
 
   render () {
-    let code = this.state.droppedContent || this.props.children || DEFAULT_CODE
+    const options = { lineNumbers: false, mode: 'javascript' }
-    const split = code.split(EOL)
-    if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL)
 
-    return this.props.connectDropTarget(
+    return (
       <div id='section'>
-        <link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/default.css'/>
+        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css'/>
         <div id='container' ref={(container) => { this.container = container }}>
-
+         <div id='anotherContainer'>
-          <div contentEditable="true" ref={(editor) => { this.editor = editor}}>
+           <CodeMirror value={this.state.code} onChange={this.updateCode} options={options} />
-            <pre>
+         </div>
-              <code>
-                {this.props.initCode}
-              </code>
-            </pre>
-          </div>
         </div>
-        <button onClick={this.highlight}/>
         <style jsx>{`
           #section {
             width: 100%;
@@ -92,10 +61,12 @@ class CodeImage extends React.Component {
             padding: ${padding};
            
           }
-          pre {
+          #anotherContainer {
             background: white;
-            padding: 10px;
+            min-width: 700px;
-            box-shadow: 10px 10px 12px -5px rgba(0,0,0,0.17);
+            min-height: 400px;
+            margin: 0px;
+            padding: 15px;
           }
         `}</style>
       </div>
@@ -103,21 +74,4 @@ class CodeImage extends React.Component {
   }
 }
 
-const drop = (props, monitor, component) => {
+export default CodeImage
-  const bundle = monitor.getItem()
-  const file = bundle.files[0]
-  const reader = new FileReader()
-  reader.onload = function(event) {
-    component.setState({
-      droppedContent: event.target.result
-    })
-  };
-  reader.readAsText(file, "UTF-8");
-}
-
-export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  canDrop: monitor.canDrop(),
-  item: monitor.getItem()
-}))(CodeImage)

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.16.2",
     "body-parser": "^1.17.2",
+    "codemirror": "^5.26.0",
     "dom-to-image": "^2.5.2",
     "express": "^4.15.3",
     "form-data": "^2.2.0",
@@ -18,10 +19,10 @@
     "morgan": "^1.8.2",
     "next": "^2.4.3",
     "react": "^15.5.4",
+    "react-codemirror": "^1.0.0",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "^15.5.4",
-    "react-codemirror": "^1.0.0",
     "react-syntax-highlight": "^0.0.6"
   }
 }

pages/index.js

@@ -6,6 +6,19 @@ import Axios from 'axios'
 import CodeImage from '../components/codeImage'
 import api from '../lib/api'
 
+const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
+
+const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
+
+const unfold = (f, seed) => {
+  const go = (f, seed, acc) => {
+    const res = f(seed)
+    return res ? go(f, res[1], acc.concat([res[0]])) : acc
+  }
+  return go(f, seed, [])
+}
+  `
+
 class Home extends React.Component {
   /* pathname, asPath, err, req, res */
   static async getInitialProps ({ asPath }) {
@@ -17,6 +30,7 @@ class Home extends React.Component {
       return {}
     }
   }
+
   render () {
     return (
       <div>
@@ -31,7 +45,7 @@ class Home extends React.Component {
         </style>
         <h1>Welcome to Code Image</h1>
         <CodeImage>
-          {this.props.content}
+          {DEFAULT_CODE}
         </CodeImage>
       </div>
     )

yarn.lock

@@ -116,7 +116,7 @@ arrify@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
 
-asap@~2.0.3:
+asap@^2.0.3, asap@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
 
@@ -1064,7 +1064,7 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codemirror@^5.18.2:
+codemirror@^5.18.2, codemirror@^5.26.0:
   version "5.26.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.26.0.tgz#bcbee86816ed123870c260461c2b5c40b68746e5"
 
@@ -1287,6 +1287,19 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+disposables@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/disposables/-/disposables-1.0.1.tgz#064727a25b54f502bd82b89aa2dfb8df9f1b39e3"
+
+dnd-core@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-2.4.0.tgz#c4a5bc2aea75164f8a295d769d5f551810e7d411"
+  dependencies:
+    asap "^2.0.3"
+    invariant "^2.0.0"
+    lodash "^4.2.0"
+    redux "^3.2.0"
+
 dom-to-image@^2.5.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.5.2.tgz#6476b9f43c27c00b76ce4f164d20e5eeab032497"
@@ -1756,6 +1769,10 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -1842,7 +1859,7 @@ interpret@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
 
-invariant@^2.2.0, invariant@^2.2.2:
+invariant@^2.0.0, invariant@^2.1.0, invariant@^2.2.0, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -2104,6 +2121,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash-es@^4.2.1:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -2112,7 +2133,7 @@ lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
-lodash@^4.14.0, lodash@^4.2.0, lodash@^4.5.1, lodash@^4.6.1:
+lodash@^4.14.0, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -2656,7 +2677,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@~15.5.7:
+prop-types@15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -2757,6 +2778,23 @@ react-deep-force-update@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.0.1.tgz#4f7f6c12c3e7de42f345992a3c518236fa1ecad3"
 
+react-dnd-html5-backend@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.4.1.tgz#439d2bcaf8bd8b87a51386beb51c128826182ddd"
+  dependencies:
+    lodash "^4.2.0"
+
+react-dnd@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.4.0.tgz#96f0042cd4cd375b4f0c3413f6ec84d267b7d792"
+  dependencies:
+    disposables "^1.0.1"
+    dnd-core "^2.4.0"
+    hoist-non-react-statics "^1.2.0"
+    invariant "^2.1.0"
+    lodash "^4.2.0"
+    prop-types "^15.5.8"
+
 react-dom@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
@@ -2843,6 +2881,15 @@ redbox-react@^1.3.6:
     prop-types "^15.5.4"
     sourcemapped-stacktrace "^1.1.6"
 
+redux@^3.2.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.0.tgz#07a623cafd92eee8abe309d13d16538f6707926f"
+  dependencies:
+    lodash "^4.2.1"
+    lodash-es "^4.2.1"
+    loose-envify "^1.1.0"
+    symbol-observable "^1.0.3"
+
 regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
@@ -3231,6 +3278,10 @@ supports-color@^3.1.0:
   dependencies:
     has-flag "^1.0.0"
 
+symbol-observable@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+
 tapable@^0.2.5, tapable@~0.2.5:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"