Merge pull request #303 from securingsincity/oninput

Adds the On Input Event

CHANGELOG.md

@@ -1,10 +1,14 @@
 # Changelog
 
-## Next Minor Release - TBD
+## Future Release - TBD
 
 * Fully move to TypeScript interally
 * Publish typings for the split editor
 
+## 5.5.0
+
+* Adds the onInput event
+
 ## 5.4.0
 
 * #285: Added the possibility to change key bindings of existing commands. thanks to @FurcyPin

docs/Ace.md

@@ -69,6 +69,7 @@ render(
 |onSelectionChange| | Function | triggered by editor `selectionChange` event, and passes a [Selection](https://ace.c9.io/#nav=api&api=selection) as it's first argument and the event as the second|
 |onFocus| | Function | triggered by editor `focus` event|
 |onBlur| | Function | triggered by editor `blur` event|
+|onInput| | Function | triggered by editor `input` event|
 |onScroll| | Function | triggered by editor `scroll` event|
 |onValidate| | Function | triggered, when annotations are changed|
 |editorProps| | Object | properties to apply directly to the Ace editor instance|

docs/Split.md

@@ -2,11 +2,11 @@
 
 This allows for a split editor which can create multiple linked instances of the Ace editor. Each instance shares a theme and other properties while having their own value.
 
-## Demo 
+## Demo
 
 http://securingsincity.github.io/react-ace/split.html
 
-## Example Code 
+## Example Code
 
 ```javascript
 import React from 'react';
@@ -39,7 +39,7 @@ render(
 |name| 'brace-editor'| String |Unique Id to be used for the editor|
 |mode| ''| String |Language for parsing and code highlighting|
 |splits| 2 | Number | Number of views to have |
-|orientation| 'beside' | String | The orientation of the splits either `beside` or `below` | 
+|orientation| 'beside' | String | The orientation of the splits either `beside` or `below` |
 |theme| ''| String |theme to use|
 |value | ''| Array of Strings | value you want to populate in each code editor|
 |defaultValue | ''| Array of Strings |Default value for each editor|
@@ -67,6 +67,7 @@ render(
 |onSelectionChange| | Function | triggered by editor `selectionChange` event, and passes a [Selection](https://ace.c9.io/#nav=api&api=selection) as it's first argument and the event as the second|
 |onFocus| | Function | triggered by editor `focus` event|
 |onBlur| | Function | triggered by editor `blur` event|
+|onInput| | Function | triggered by editor `input` event|
 |onScroll| | Function | triggered by editor `scroll` event|
 |editorProps| | Object | properties to apply directly to the Ace editor instance|
 |setOptions| | Object | [options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) to apply directly to the Ace editor instance|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ace",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "A react component for Ace Editor",
   "main": "lib/index.js",
   "types": "types.d.ts",

src/ace.js

@@ -61,6 +61,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.editor.on('input', this.onInput);
     this.editor.getSession().selection.on('changeSelection', this.onSelectionChange);
     if (onValidate) {
       this.editor.getSession().on('changeAnnotation', () => {
@@ -218,7 +219,11 @@ export default class ReactAce extends Component {
       this.props.onSelectionChange(value, event);
     }
   }
-
+  onInput(event) {
+    if (this.props.onInput) {
+      this.props.onInput(event)
+    }
+  }
   onFocus(event) {
     if (this.props.onFocus) {
       this.props.onFocus(event);
@@ -312,6 +317,7 @@ ReactAce.propTypes = {
   onCopy: PropTypes.func,
   onPaste: PropTypes.func,
   onFocus: PropTypes.func,
+  onInput: PropTypes.func,
   onBlur: PropTypes.func,
   onScroll: PropTypes.func,
   value: PropTypes.string,

src/editorOptions.js

@@ -12,6 +12,7 @@ const editorOptions = [
 const editorEvents = [
   'onChange',
   'onFocus',
+  'onInput',
   'onBlur',
   'onCopy',
   'onPaste',

src/split.js

@@ -74,6 +74,7 @@ export default class SplitComponent extends Component {
       editor.setShowPrintMargin(showPrintMargin);
       editor.on('focus', this.onFocus);
       editor.on('blur', this.onBlur);
+      editor.on('input', this.onInput);
       editor.on('copy', this.onCopy);
       editor.on('paste', this.onPaste);
       editor.on('change', this.onChange);
@@ -247,15 +248,21 @@ export default class SplitComponent extends Component {
     }
   }
 
-  onFocus() {
+  onFocus(event) {
     if (this.props.onFocus) {
-      this.props.onFocus();
+      this.props.onFocus(event);
     }
   }
 
-  onBlur() {
+  onInput(event) {
+    if (this.props.onInput) {
+      this.props.onInput(event);
+    }
+  }
+
+  onBlur(event) {
     if (this.props.onBlur) {
-      this.props.onBlur();
+      this.props.onBlur(event);
     }
   }
 
@@ -342,6 +349,7 @@ SplitComponent.propTypes = {
   onCopy: PropTypes.func,
   onPaste: PropTypes.func,
   onFocus: PropTypes.func,
+  onInput: PropTypes.func,
   onBlur: PropTypes.func,
   onScroll: PropTypes.func,
   value: PropTypes.arrayOf(PropTypes.string),