hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

resolve conflicts

Browse Source
main
briandennis 7 years ago
parent 6db235184a
commit 5ec1219f87
3 changed files with 86 additions and 13 deletions
Show Stats Download Patch File Download Diff File

47
components/codeImage.js
Unescape Escape View File

@ -3,6 +3,8 @@ 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'
@ -22,9 +24,13 @@ const unfold = (f, seed) => {
const MAX_LINES = 40
class CodeImage extends React.Component {
constructor () {
super()
this.state = {}
constructor (props) {
super(props)
this.state = {
code: this.props.children
}
this.save = this.save.bind(this)
}
@ -39,6 +45,22 @@ 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()
})
}
render () {
let code = this.state.droppedContent || this.props.children || DEFAULT_CODE
const split = code.split(EOL)
@ -46,13 +68,18 @@ class CodeImage extends React.Component {
return this.props.connectDropTarget(
<div id='section'>
<link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/default.css'/>
<div id='container' ref={(container) => { this.container = container }}>
<pre>
<code onClick={this.save}>
{code}
</code>
</pre>
<div contentEditable="true" ref={(editor) => { this.editor = editor}}>
<pre>
<code>
{this.props.initCode}
</code>
</pre>
</div>
</div>
<button onClick={this.highlight}/>
<style jsx>{`
#section {
width: 100%;
@ -63,9 +90,7 @@ class CodeImage extends React.Component {
#container {
background: green;
padding: ${padding};
display: flex;
justify-content: center;
align-items: center;
}
pre {
background: white;

5
package.json
Unescape Escape View File

@ -14,11 +14,14 @@
"dom-to-image": "^2.5.2",
"express": "^4.15.3",
"form-data": "^2.2.0",
"highlight.js": "^9.12.0",
"morgan": "^1.8.2",
"next": "^2.4.3",
"react": "^15.5.4",
"react-dnd": "^2.4.0",
"react-dnd-html5-backend": "^2.4.1",
"react-dom": "^15.5.4"
"react-dom": "^15.5.4",
"react-codemirror": "^1.0.0",
"react-syntax-highlight": "^0.0.6"
}
}

47
yarn.lock
Unescape Escape View File

@ -1036,6 +1036,10 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
dependencies:
inherits "^2.0.1"
classnames@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@ -1060,6 +1064,10 @@ 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:
version "5.26.0"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.26.0.tgz#bcbee86816ed123870c260461c2b5c40b68746e5"
combined-stream@^1.0.5, combined-stream@~1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
@ -1151,6 +1159,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
create-react-class@^15.5.1:
version "15.6.0"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"
cross-spawn@5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@ -1724,6 +1740,10 @@ hawk@~3.1.3:
hoek "2.x.x"
sntp "1.x.x"
highlight.js@^9.10.0, highlight.js@^9.12.0:
version "9.12.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -2084,6 +2104,14 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
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:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@ -2416,7 +2444,7 @@ oauth-sign@~0.8.1:
version "0.8.2"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
object-assign@^4.0.1, object-assign@^4.1.0:
object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@ -2714,6 +2742,17 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-codemirror@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-codemirror/-/react-codemirror-1.0.0.tgz#91467b53b1f5d80d916a2fd0b4c7adb85a9001ba"
dependencies:
classnames "^2.2.5"
codemirror "^5.18.2"
create-react-class "^15.5.1"
lodash.debounce "^4.0.8"
lodash.isequal "^4.5.0"
prop-types "^15.5.4"
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"
@ -2744,6 +2783,12 @@ react-proxy@^3.0.0-alpha.0:
dependencies:
lodash "^4.6.1"
react-syntax-highlight@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/react-syntax-highlight/-/react-syntax-highlight-0.0.6.tgz#2a657a9a693ffd16a22181ad08de96902957f87a"
dependencies:
highlight.js "^9.10.0"
react@^15.5.4:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"

Write Preview
Loading…
Cancel
Save