Merge branch 'master' of https://github.com/securingsincity/react-ace

README.md

@@ -70,9 +70,10 @@ Looking for a way to set it up using webpack? Checkout `example` directory for a
 |defaultValue | ''| Default value of the editor|
 |onLoad| | Function onLoad|
 |onBeforeLoad| | function that trigger before editor setup|
-|onChange| | function that occurs on document change it has 1 argument value. see the example above|
+|onChange| | function that occurs on document change it has 2 arguments the value and the event. see the example above|
 |onCopy| | function that trigger by editor `copy` event, and pass text as argument|
 |onPaste| | function that trigger by editor `paste` event, and pass text as argument|
+|onSelectionChange| | function that trigger 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 that trigger by editor `focus` event|
 |onBlur| | function that trigger by editor `blur` event|
 |onScroll| | function that trigger by editor `scroll` event|

example/index.js

@@ -64,6 +64,11 @@ class App extends Component {
       value: newValue
     })
   }
+
+  onSelectionChange(newValue, event) {
+    console.log('select-change', newValue);
+    console.log('select-change-event', event);
+  }
   setTheme(e) {
     this.setState({
       theme: e.target.value
@@ -212,6 +217,7 @@ class App extends Component {
           name="blah2"
           onLoad={this.onLoad}
           onChange={this.onChange}
+          onSelectionChange={this.onSelectionChange}
           fontSize={this.state.fontSize}
           height="100%"
           showPrintMargin={this.state.showPrintMargin}

src/ace.jsx

@@ -25,6 +25,7 @@ export default class ReactAce extends Component {
       'onBlur',
       'onCopy',
       'onPaste',
+      'onSelectionChange',
       'onScroll',
       'handleOptions',
       'updateRef',
@@ -80,6 +81,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.getSession().selection.on('changeSelection', this.onSelectionChange);
     this.editor.session.on('changeScrollTop', this.onScroll);
     this.handleOptions(this.props);
     this.editor.getSession().setAnnotations(annotations || []);
@@ -203,10 +205,17 @@ export default class ReactAce extends Component {
     this.editor = null;
   }
 
-  onChange() {
+  onChange(event) {
     if (this.props.onChange && !this.silent) {
       const value = this.editor.getValue();
-      this.props.onChange(value);
+      this.props.onChange(value, event);
+    }
+  }
+
+  onSelectionChange(event) {
+    if (this.props.onSelectionChange) {
+      const value = this.editor.getSelection();
+      this.props.onSelectionChange(value, event);
     }
   }
 
@@ -308,6 +317,7 @@ ReactAce.propTypes = {
   value: PropTypes.string,
   defaultValue: PropTypes.string,
   onLoad: PropTypes.func,
+  onSelectionChange: PropTypes.func,
   onBeforeLoad: PropTypes.func,
   minLines: PropTypes.number,
   maxLines: PropTypes.number,

tests/src/ace.spec.js

@@ -125,6 +125,7 @@ describe('Ace Component', () => {
 
       expect(onChangeCallback.callCount).to.equal(1);
       expect(onChangeCallback.getCall(0).args[0]).to.equal(expectText);
+      expect(onChangeCallback.getCall(0).args[1].action).to.eq('insert')
     });
 
     it('should call the onCopy method', () => {
@@ -170,6 +171,19 @@ describe('Ace Component', () => {
       expect(onFocusCallback.callCount).to.equal(1);
     });
 
+    it('should call the onSelectionChange method callback', () => {
+      const onSelectionChangeCallback = sinon.spy();
+      const wrapper = mount(<AceEditor onSelectionChange={onSelectionChangeCallback}/>, mountOptions);
+
+      // Check is not previously called
+      expect(onSelectionChangeCallback.callCount).to.equal(0);
+
+      // Trigger the focus event
+      wrapper.instance().editor.getSession().selection.selectAll()
+
+      expect(onSelectionChangeCallback.callCount).to.equal(1);
+    });
+
     it('should call the onBlur method callback', () => {
       const onBlurCallback = sinon.spy();
       const wrapper = mount(<AceEditor onBlur={onBlurCallback}/>, mountOptions);

types.d.ts

@@ -149,7 +149,8 @@ export interface AceEditorProps {
     scrollMargin?: number[]
     onLoad?: (editor: EditorProps) => void
     onBeforeLoad?: (ace: any) => void
-    onChange?: (value: string) => void
+    onChange?: (value: string, event?: any) => void
+    onSelection?: (selectedText: string, event?: any) => void
     onCopy?: (value: string) => void
     onPaste?: (value: string) => void
     onFocus?: () => void