├── .gitignore
├── .npmignore
├── README.md
├── package.json
└── src
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | .nyc_output
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # Compiled binary addons (http://nodejs.org/api/addons.html)
21 | build
22 | 
23 | # Dependency directory
24 | # Commenting this out is preferred by some people, see
25 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
26 | node_modules
27 | 
28 | # Users Environment Variables
29 | .lock-wscript
30 | 
31 | # JetBrains IDE
32 | .idea/
33 | 
34 | # Babel Build
35 | lib
36 | 
37 | # UMD Build
38 | dist


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # ignore git
 2 | .git/
 3 | .gitignore
 4 | 
 5 | # ignore coverage report
 6 | coverage/
 7 | 
 8 | # node modules
 9 | node_modules/
10 | 
11 | # source
12 | src/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # REACT-ACE-EDITOR
 2 | 
 3 | ## Introduction
 4 | This is a react wrapper around the [Ace Editor](https://ace.c9.io)
 5 | [Ace Editor Demo](https://ace.c9.io/build/kitchen-sink.html)
 6 | [Ace Editor Github](https://github.com/ajaxorg/ace)
 7 | 
 8 | ## Getting Started
 9 | ```
10 | npm install --save react-ace-editor
11 | ```
12 | 
13 | ## Usage
14 | 
15 | ```
16 | import ReactAce from 'react-ace-editor';
17 | import React, { Component } from 'react';
18 | 
19 | class CodeEditor extends Component {
20 |   constructor() {
21 |     super();
22 |     this.onChange = this.onChange.bind(this);
23 |   }
24 |   onChange(newValue, e) {
25 |     console.log(newValue, e);
26 | 
27 |     const editor = this.ace.editor; // The editor object is from Ace's API
28 |     console.log(editor.getValue()); // Outputs the value of the editor
29 |   }
30 |   render() {
31 |     return (
32 |       <ReactAce
33 |         mode="javascript"
34 |         theme="eclipse"
35 |         setReadOnly=false
36 |         onChange={this.onChange}
37 |         style={{ height: '400px' }}
38 |         ref={instance => { this.ace = instance; }} // Let's put things into scope
39 |       />
40 |     );
41 |   }
42 | }
43 | ```
44 | 
45 | ## More Documentation
46 | For all the available method from the Ace Editor, please checkout [Ace Editor's API documentation](https://ace.c9.io/#nav=api&api=editor)
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-ace-editor",
 3 |   "version": "0.0.3",
 4 |   "description": "A react wrapper for the ace editor",
 5 |   "main": "./dist/index.js",
 6 |   "dependencies": {
 7 |     "brace": "^0.11.1",
 8 |     "prop-types": "^15.6.2",
 9 |     "react": "^16.4.2"
10 |   },
11 |   "devDependencies": {
12 |     "babel-cli": "^6.24.1",
13 |     "babel-preset-es2015": "^6.24.1",
14 |     "babel-preset-react": "^6.24.1"
15 |   },
16 |   "scripts": {
17 |     "build": "babel src --presets=es2015,react --out-dir dist",
18 |     "prepublish": "npm run build",
19 |     "publish": "npm publish ./"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git+https://github.com/chunsli/react-ace-editor.git"
24 |   },
25 |   "keywords": [
26 |     "react",
27 |     "ace",
28 |     "code",
29 |     "editor"
30 |   ],
31 |   "author": "Matt Li",
32 |   "license": "ISC",
33 |   "bugs": {
34 |     "url": "https://github.com/chunsli/react-ace-editor/issues"
35 |   },
36 |   "homepage": "https://github.com/chunsli/react-ace-editor#readme"
37 | }
38 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | if (typeof window !== 'undefined') {
 5 |   const ace = require('brace');
 6 | }
 7 | 
 8 | class CodeEditor extends Component {
 9 |   componentDidMount() {
10 |     if (typeof window !== 'undefined') {
11 |       const {
12 |         onChange,
13 |         setReadOnly,
14 |         setValue,
15 |         theme,
16 |         mode,
17 |       } = this.props;
18 | 
19 |       require(`brace/mode/${mode}`);
20 |       require(`brace/theme/${theme}`);
21 | 
22 |       const editor = ace.edit('ace-editor');
23 |       this.editor = editor;
24 |       editor.getSession().setMode(`ace/mode/${mode}`);
25 |       editor.setTheme(`ace/theme/${theme}`);
26 |       editor.on('change', e => onChange(editor.getValue(), e));
27 |       editor.setReadOnly(setReadOnly);
28 |       editor.setValue(setValue);
29 |     }
30 |   }
31 | 
32 |   shouldComponentUpdate() {
33 |     return false;
34 |   }
35 | 
36 |   render() {
37 |     const { style, editorId } = this.props;
38 |     return (
39 |       <div id={editorId} style={style}></div>
40 |     );
41 |   }
42 | }
43 | 
44 | CodeEditor.propTypes = {
45 |   editorId: PropTypes.string,
46 |   onChange: PropTypes.func,
47 |   setReadOnly: PropTypes.bool,
48 |   setValue: PropTypes.string,
49 |   theme: PropTypes.string,
50 |   mode: PropTypes.string,
51 |   style: PropTypes.object,
52 | };
53 | 
54 | CodeEditor.defaultProps = {
55 |   editorId: 'ace-editor',
56 |   onChange: () => {},
57 |   setValue: '',
58 |   setReadOnly: false,
59 |   theme: 'eclipse',
60 |   mode: 'javascript',
61 |   style: { height: '300px', width: '400px'}
62 | };
63 | 
64 | module.exports = CodeEditor;
65 | 


--------------------------------------------------------------------------------