react-lite-coder
Advanced tools
Comparing version
(function() { | ||
var CodeMirror, React, T, _, cx, div, textarea; | ||
var CodeMirror, React, T, cx, div, textarea; | ||
_ = require('lodash'); | ||
cx = require('classnames'); | ||
React = require('react'); | ||
CodeMirror = require('codemirror'); | ||
React = require('react'); | ||
require('codemirror/addon/display/placeholder'); | ||
T = React.PropTypes; | ||
div = React.createFactory('div'); | ||
@@ -18,43 +16,48 @@ | ||
T = React.PropTypes; | ||
module.exports = React.createClass({ | ||
displayName: 'lite-code-editor', | ||
propTypes: { | ||
readOnly: T.bool, | ||
option: T.object, | ||
defaultValue: T.string, | ||
mode: T.string, | ||
onChange: T.func.isRequired, | ||
codeType: T.string, | ||
name: T.string, | ||
theme: T.string, | ||
onChange: T.func.isRequired | ||
placeholder: T.string, | ||
text: T.string | ||
}, | ||
getDefaultProps: function() { | ||
return { | ||
mode: 'null', | ||
codeType: 'null', | ||
placeholder: 'Code goes here...', | ||
readOnly: false, | ||
theme: 'default' | ||
text: '' | ||
}; | ||
}, | ||
componentDidMount: function() { | ||
var defaultOption, editor, option; | ||
defaultOption = { | ||
var editor; | ||
this.option = { | ||
indentUnit: 2, | ||
indentWithTabs: true, | ||
indentWithTabs: false, | ||
lineNumbers: true, | ||
lineWrapping: false, | ||
placeholder: 'Code goes here...', | ||
mode: this.props.codeType, | ||
placeholder: this.props.placeholder, | ||
readOnly: this.props.readOnly, | ||
smartIndent: true, | ||
tabSize: 2 | ||
tabMode: 'spaces', | ||
tabSize: 2, | ||
theme: 'default', | ||
extraKeys: { | ||
'Tab': function(cm) { | ||
return cm.replaceSelection(' ', 'end'); | ||
} | ||
} | ||
}; | ||
editor = this.refs.editor.getDOMNode(); | ||
option = _.assign({}, defaultOption, this.props.option, { | ||
mode: this.props.mode, | ||
readOnly: this.props.readOnly, | ||
theme: this.props.theme | ||
}); | ||
this.editor = CodeMirror.fromTextArea(editor, option); | ||
this.editor = CodeMirror.fromTextArea(editor, this.option); | ||
return this.editor.on('change', this.onEditorChange); | ||
}, | ||
componentWillReceiveProps: function(nextProps) { | ||
if (this.editor.getOption('mode') !== nextProps.mode) { | ||
return this.editor.setOption('mode', nextProps.mode); | ||
if (this.editor.getOption('mode' !== nextProps.codeType)) { | ||
return this.editor.setOption('mode', nextProps.codeType); | ||
} | ||
@@ -70,6 +73,5 @@ }, | ||
className: 'editor', | ||
defaultValue: this.props.text, | ||
readOnly: this.props.readOnly, | ||
ref: 'editor', | ||
readOnly: this.props.readOnly, | ||
defaultValue: this.props.defaultValue, | ||
placeholder: this.props.placeholder, | ||
onChange: this.props.onChange | ||
@@ -80,4 +82,6 @@ }); | ||
var className, obj; | ||
className = cx('lite-code-editor', ( | ||
obj = {}, | ||
className = cx(( | ||
obj = { | ||
'lite-code-editor': true | ||
}, | ||
obj["is-for-" + this.props.name] = this.props.name != null, | ||
@@ -84,0 +88,0 @@ obj |
(function() { | ||
var React, T, _, code, cx, div, hljs, pre; | ||
var React, T, code, cx, div, hljs, pre; | ||
_ = require('lodash'); | ||
cx = require('classnames'); | ||
@@ -12,4 +10,2 @@ | ||
T = React.PropTypes; | ||
code = React.createFactory('code'); | ||
@@ -21,11 +17,15 @@ | ||
T = React.PropTypes; | ||
module.exports = React.createClass({ | ||
displayName: 'lite-code-viewer', | ||
propTypes: { | ||
mode: T.string, | ||
name: T.string | ||
codeType: T.string, | ||
name: T.string, | ||
text: T.string | ||
}, | ||
getDefaultProps: function() { | ||
return { | ||
mode: 'nohighlight' | ||
codeType: 'nohighlight', | ||
text: '' | ||
}; | ||
@@ -40,12 +40,13 @@ }, | ||
highlightCode: function() { | ||
var codes, highlighter; | ||
if (this.props.mode !== 'nohighlight') { | ||
highlighter = this.refs.highlighter.getDOMNode(); | ||
codes = highlighter.querySelectorAll('pre code'); | ||
if (codes.length != null) { | ||
return _.forEach(codes, function(code) { | ||
return hljs.highlightBlock(code); | ||
}); | ||
} | ||
var codes, viewer; | ||
if (this.props.codeType === 'nohighlight') { | ||
return; | ||
} | ||
viewer = this.refs.viewer.getDOMNode(); | ||
codes = viewer.querySelectorAll('pre code'); | ||
if (codes != null ? codes.length : void 0) { | ||
return [].forEach.call(codes, function(code) { | ||
return hljs.highlightBlock(code); | ||
}); | ||
} | ||
}, | ||
@@ -63,8 +64,6 @@ render: function() { | ||
className: className, | ||
ref: 'highlighter' | ||
}, pre({ | ||
className: 'pre' | ||
}, code({ | ||
className: this.props.mode | ||
}, this.props.children))); | ||
ref: 'viewer' | ||
}, pre(null, code({ | ||
className: this.props.codeType | ||
}, this.props.text))); | ||
} | ||
@@ -71,0 +70,0 @@ }); |
{ | ||
"name": "react-lite-coder", | ||
"version": "0.0.1", | ||
"description": "Code Editor and Code Viewer for Jianliao.com", | ||
"version": "0.0.2", | ||
"description": "Code Editor and Code Viewer of Jianliao.com", | ||
"main": "lib/index.js", | ||
"dependencies": { | ||
"classnames": "^2.1.3", | ||
"codemirror": "^5.5.0", | ||
"highlight.js": "^8.7.0", | ||
"react": "^0.13.3" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^5.6.20", | ||
"babel-loader": "^5.3.1", | ||
"autoprefixer-loader": "^2.0.0", | ||
"babel-core": "^5.8.20", | ||
"babel-loader": "^5.3.2", | ||
"cirru-script": "^0.2.3", | ||
"coffee-loader": "^0.7.2", | ||
"coffee-script": "^1.9.3", | ||
"css-loader": "^0.15.3", | ||
"css-loader": "^0.15.6", | ||
"del": "^1.2.0", | ||
"extract-text-webpack-plugin": "^0.8.2", | ||
"file-loader": "^0.8.4", | ||
@@ -23,26 +29,21 @@ "gulp": "^3.9.0", | ||
"rsyncwrapper": "^0.4.3", | ||
"run-sequence": "^1.1.1", | ||
"run-sequence": "^1.1.2", | ||
"stir-template": "^0.1.4", | ||
"style-loader": "^0.12.3", | ||
"url-loader": "^0.5.6", | ||
"webpack": "^1.10.1", | ||
"volubile-ui": "0.0.10", | ||
"webpack": "^1.10.5", | ||
"webpack-dev-server": "^1.10.1" | ||
}, | ||
"peerDependencies": { | ||
"classnames": "^2.1.3", | ||
"codemirror": "^5.4.0", | ||
"highlight.js": "^8.6.0", | ||
"lodash": "^3.10.0", | ||
"react": "^0.13.3" | ||
}, | ||
"scripts": { | ||
"build": "gulp build", | ||
"dev": "gulp html && webpack-dev-server --hot", | ||
"publish": "gulp rsync", | ||
"script": "gulp script" | ||
"build": "gulp build && gulp script", | ||
"dev": "gulp html && webpack-dev-server --hot" | ||
}, | ||
"keywords": [ | ||
"code-editor", | ||
"code-viewer", | ||
"react", | ||
"react-component", | ||
"code-editor", | ||
"code-viewer" | ||
"react-lite", | ||
"teambition" | ||
], | ||
@@ -49,0 +50,0 @@ "author": "Teambition", |
@@ -1,2 +0,33 @@ | ||
React Lite Code Editor, Code Viewer | ||
React Lite Coder | ||
---- | ||
Code Editor and Code Viewer of jianliao.com | ||
Demo http://ui.talk.ai/react-lite-coder/ | ||
### Usage | ||
### Develop | ||
```text | ||
npm i | ||
``` | ||
You need a static file server for the HTML files. Personally I suggest using Nginx. | ||
Develop: | ||
```bash | ||
gulp html # regenerate index.html | ||
webpack-dev-server --hot # enable live-reloading | ||
``` | ||
Build (Pack and optimize js, reivision js and add entry in `index.html`): | ||
```bash | ||
gulp build | ||
``` | ||
### License | ||
MIT |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
23030
91.14%4
-20%21
50%147
2.8%34
1033.33%23
15%+ Added
+ Added
+ Added
+ Added
- Removed