From b863eb0427249373d3340ee27dcfcc3bf35eabb8 Mon Sep 17 00:00:00 2001 From: briandennis Date: Sat, 17 Jun 2017 20:47:25 -0700 Subject: [PATCH] get editor working --- components/codeImage.js | 88 ++++++++++------------------------------- package.json | 3 +- pages/index.js | 16 +++++++- yarn.lock | 61 +++++++++++++++++++++++++--- 4 files changed, 94 insertions(+), 74 deletions(-) diff --git a/components/codeImage.js b/components/codeImage.js index 33a7a7d..0b248d2 100644 --- a/components/codeImage.js +++ b/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' - -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, []) -}` +// hack to only call modes on browser +if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { + require('codemirror/mode/javascript/javascript'); + require('codemirror/mode/xml/xml'); + require('codemirror/mode/markdown/markdown'); +} -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 () { - highlight.initHighlighting.called = false - highlight.initHighlighting() - } - - componentDidMount () { - // highlight - this.highlight() - - //highlight when content changes - this.editor.addEventListener('input', () => { - console.log('edit') - this.highlight() - }) + updateCode (newCode) { + this.setState({ code: newCode }) } render () { - let code = this.state.droppedContent || this.props.children || DEFAULT_CODE - const split = code.split(EOL) - if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL) + const options = { lineNumbers: false, mode: 'javascript' } - return this.props.connectDropTarget( + return (
- +
{ this.container = container }}> - -
{ this.editor = editor}}> - 
-              
-                {this.props.initCode}
-              
-
-
+
+ +
-
@@ -103,21 +74,4 @@ class CodeImage extends React.Component { } } -const drop = (props, monitor, component) => { - 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) +export default CodeImage \ No newline at end of file diff --git a/package.json b/package.json index de6ccff..971d37f 100644 --- a/package.json +++ b/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" } } diff --git a/pages/index.js b/pages/index.js index 08b387c..71e523e 100644 --- a/pages/index.js +++ b/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 (
@@ -31,7 +45,7 @@ class Home extends React.Component {

Welcome to Code Image

- {this.props.content} + {DEFAULT_CODE}
) diff --git a/yarn.lock b/yarn.lock index b48536b..3dd08b6 100644 --- a/yarn.lock +++ b/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"