Merge branch 'jaszhix-master'

README.md

@@ -71,6 +71,7 @@ Looking for a way to set it up using webpack? Checkout `example` directory for a
 |onFocus| function that trigger by editor `focus` event|
 |onBlur| function that trigger by editor `blur` event|
 |editorProps| Object of properties to apply directly to the Ace editor instance|
+|setOptions| Object of [options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) to apply directly to the Ace editor instance|
 |keyboardHandler| String corresponding to the keybinding mode to set (such as vim)|
 |commands| Array of new commands to add to the editor
 

example/index.html

@@ -11,6 +11,9 @@ <h2>Mode: java, theme: github</h2>
   <h2>Mode: javascript, theme: monokai</h2>
   <div id="example2"></div>
   <button onclick="reloadProps();">Reload NEW! Props</button>
+  <h2>Mode: javascript, theme: monokai (using setOptions property)</h2>
+  <div id="example3"></div>
+  <button onclick="reloadProps2();">Reload NEW! Props</button>
   <script src="/static/bundle.js"></script>
 </body>
 </html>

example/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom'
+import { render } from 'react-dom';
 import AceEditor from 'react-ace';
 import brace from 'brace';
 
@@ -9,6 +9,7 @@ import 'brace/mode/javascript';
 import 'brace/theme/github';
 import 'brace/theme/monokai';
 import 'brace/theme/solarized_light';
+import 'brace/ext/language_tools';
 
 
 function onLoad(editor) {
@@ -62,3 +63,52 @@ global.reloadProps = function() {
     document.getElementById('example2')
   );
 };
+
+// Render the third editor using setOptions prop
+
+const defaultValue2 =
+`function onLoad(editor) {
+  if (true) {
+    console.log(\"i\'ve loaded\");
+  }
+}`;
+
+render(
+  <AceEditor
+    mode="javascript"
+    theme="monokai"
+    name="blah3"
+    onLoad={onLoad}
+    height="6em"
+    setOptions={{
+      enableBasicAutocompletion: false,
+      enableLiveAutocompletion: false,
+      tabSize: 4,
+      fontSize: 14,
+      showGutter: true
+    }}
+    value={defaultValue2}
+  />,
+  document.getElementById('example3')
+);
+
+global.reloadProps2 = function() {
+  render(
+    <AceEditor
+      mode="javascript"
+      theme="monokai"
+      name="blah3"
+      onLoad={onLoad}
+      height="6em"
+      setOptions={{
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        tabSize: 2,
+        fontSize: 16,
+        showGutter: false
+      }}
+      value={defaultValue2}
+    />,
+    document.getElementById('example3')
+  );
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ace",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "A react component for Ace Editor",
   "main": "lib/ace.js",
   "scripts": {
@@ -45,7 +45,8 @@
     "brace"
   ],
   "dependencies": {
-    "brace": "^0.8.0"
+    "brace": "^0.8.0",
+    "lodash.isequal": "^4.1.1"
   },
   "peerDependencies": {
     "react": "^0.13.0 || ^0.14.0 || ^15.0.1"

src/ace.jsx

@@ -1,5 +1,6 @@
 import ace from 'brace';
 import React, { Component, PropTypes } from 'react';
+import isEqual from 'lodash.isequal';
 
 const editorOptions = [
   'minLines',
@@ -21,6 +22,7 @@ export default class ReactAce extends Component {
       'onBlur',
       'onCopy',
       'onPaste',
+      'handleOptions',
     ]
     .forEach(method => {
       this[method] = this[method].bind(this);
@@ -67,6 +69,7 @@ export default class ReactAce extends Component {
     this.editor.on('copy', this.onCopy);
     this.editor.on('paste', this.onPaste);
     this.editor.on('change', this.onChange);
+    this.handleOptions(this.props);
 
     for (let i = 0; i < editorOptions.length; i++) {
       const option = editorOptions[i];
@@ -116,6 +119,9 @@ export default class ReactAce extends Component {
     if (nextProps.showGutter !== oldProps.showGutter) {
       this.editor.renderer.setShowGutter(nextProps.showGutter);
     }
+    if (!isEqual(nextProps.setOptions, oldProps.setOptions)) {
+      this.handleOptions(nextProps);
+    }
     if (this.editor.getValue() !== nextProps.value) {
       // editor.setValue is a synchronous function call, change event is emitted before setValue return.
       this.silent = true;
@@ -160,6 +166,13 @@ export default class ReactAce extends Component {
     }
   }
 
+  handleOptions(props) {
+    const setOptions = Object.keys(props.setOptions);
+    for (let y = 0; y < setOptions.length; y++) {
+      this.editor.setOption(setOptions[y], props.setOptions[setOptions[y]]);
+    }
+  }
+
   render() {
     const { name, className, width, height } = this.props;
     const divStyle = { width, height };
@@ -199,6 +212,7 @@ ReactAce.propTypes = {
   showPrintMargin: PropTypes.bool,
   cursorStart: PropTypes.number,
   editorProps: PropTypes.object,
+  setOptions: PropTypes.object,
   keyboardHandler: PropTypes.string,
   wrapEnabled: PropTypes.bool,
   enableBasicAutocompletion: PropTypes.oneOfType([
@@ -232,6 +246,7 @@ ReactAce.defaultProps = {
   tabSize: 4,
   cursorStart: 1,
   editorProps: {},
+  setOptions: {},
   wrapEnabled: false,
   enableBasicAutocompletion: false,
   enableLiveAutocompletion: false,