New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-lite-coder

Package Overview
Dependencies
Maintainers
2
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lite-coder - npm Package Compare versions

Comparing version

to
0.0.2

example/common.less

68

lib/code-editor.js
(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