key and drag events

Author: scniro

README.md

@@ -18,7 +18,7 @@ import CodeMirror from 'react-codemirror2'
   }}
   onSetDefaultValue={(defaultValue) => {
   }}
-  onChange={(internalValue) => {
+  onChange={(cm, metadata, internalValue) => {
   }}
   onCursorActivity={() => {
   }}
@@ -34,6 +34,18 @@ import CodeMirror from 'react-codemirror2'
   }}
   onUpdate={() => {
   }}
+  onKeyDown={(cm, event) => {
+  }}
+  onKeyUp={(cm, event) => {
+  }}
+  onKeyPress={(cm, event) => {
+  }}
+  onDragEnter={(cm, event) => {
+  }}
+  onDragOver={(cm, event) => {
+  }}
+  onDrop={(cm, event) => {
+  }
 />
 ```
 

demo/index.jsx

@@ -5,33 +5,47 @@ import CodeMirror from '../src/react-codemirror2.jsx';
 require('./index.scss');
 
 render(
-  <CodeMirror
-    defaultValue='react-codemirror2'
-    options={{theme: 'material', lineNumbers: true}}
-    editorWillMount={(cm) => {
-    }}
-    editorDidMount={(cm) => {
-    }}
-    editorDidConfigure={(cm) => {
-    }}
-    editorWillUnmount={(cm) => {
-    }}
-    onSetDefaultValue={(defaultValue) => {
-    }}
-    onChange={(internalValue) => {
-    }}
-    onCursorActivity={() => {
-    }}
-    onViewportChange={(cm, viewportStart, viewportEnd) => {
-    }}
-    onGutterClick={(cm, lineNumber, event) => {
-    }}
-    onFocus={() => {
-    }}
-    onBlur={() => {
-    }}
-    onScroll={() => {
-    }}
-    onUpdate={() => {
-    }}/>
+  <div>
+    <CodeMirror
+      defaultValue='react-codemirror2'
+      options={{theme: 'material', lineNumbers: true}}
+      editorWillMount={(cm) => {
+      }}
+      editorDidMount={(cm) => {
+      }}
+      editorDidConfigure={(cm) => {
+      }}
+      editorWillUnmount={(cm) => {
+      }}
+      onSetDefaultValue={(defaultValue) => {
+      }}
+      onChange={(cm, metadata, internalValue) => {
+      }}
+      onCursorActivity={() => {
+      }}
+      onViewportChange={(cm, viewportStart, viewportEnd) => {
+      }}
+      onGutterClick={(cm, lineNumber, event) => {
+      }}
+      onFocus={() => {
+      }}
+      onBlur={() => {
+      }}
+      onScroll={() => {
+      }}
+      onUpdate={() => {
+      }}
+      onKeyDown={(cm, event) => {
+      }}
+      onKeyUp={(cm, event) => {
+      }}
+      onKeyPress={(cm, event) => {
+      }}
+      onDragEnter={(cm, event) => {
+      }}
+      onDragOver={(cm, event) => {
+      }}
+      onDrop={(cm, event) => {
+      }}/>
+  </div>
   , document.getElementById('app'));

index.js

@@ -19,9 +19,9 @@ export default class CodeMirror extends React.Component {
 
     this.editor = codemirror(this.ref);
 
-    this.editor.on('change', () => {
+    this.editor.on('change', (cm, metadata) => {
       if (this.props.onChange && this.initHydration) {
-        this.props.onChange(this.editor.getValue());
+        this.props.onChange(cm, metadata, this.editor.getValue());
       }
     });
 
@@ -57,6 +57,42 @@ export default class CodeMirror extends React.Component {
       this.editor.on('update', this.props.onUpdate);
     }
 
+    if (this.props.onKeyDown) {
+      this.editor.on('keydown', (cm, event) => {
+        this.props.onKeyDown(cm, event);
+      });
+    }
+
+    if (this.props.onKeyUp) {
+      this.editor.on('keyup', (cm, event) => {
+        this.props.onKeyUp(cm, event);
+      });
+    }
+
+    if (this.props.onKeyPress) {
+      this.editor.on('keypress', (cm, event) => {
+        this.props.onKeyPress(cm, event);
+      });
+    }
+
+    if (this.props.onDragEnter) {
+      this.editor.on('dragenter', (cm, event) => {
+        this.props.onDragEnter(cm, event);
+      });
+    }
+
+    if (this.props.onDragOver) {
+      this.editor.on('dragover', (cm, event) => {
+        this.props.onDragOver(cm, event);
+      });
+    }
+
+    if (this.props.onDrop) {
+      this.editor.on('drop', (cm, event) => {
+        this.props.onDrop(cm, event);
+      });
+    }
+
     this.hydrate(this.props);
 
     if (this.props.editorDidMount) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-codemirror2",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "a tiny react codemirror component wrapper",
   "main": "index.js",
   "scripts": {

src/react-codemirror2.jsx

@@ -19,9 +19,9 @@ export default class CodeMirror extends React.Component {
 
     this.editor = codemirror(this.ref);
 
-    this.editor.on('change', () => {
+    this.editor.on('change', (cm, metadata) => {
       if (this.props.onChange && this.initHydration) {
-        this.props.onChange(this.editor.getValue());
+        this.props.onChange(cm, metadata, this.editor.getValue());
       }
     });
 
@@ -57,6 +57,42 @@ export default class CodeMirror extends React.Component {
       this.editor.on('update', this.props.onUpdate);
     }
 
+    if(this.props.onKeyDown) {
+      this.editor.on('keydown', (cm, event) => {
+        this.props.onKeyDown(cm, event);
+      });
+    }
+
+    if(this.props.onKeyUp) {
+      this.editor.on('keyup', (cm, event) => {
+        this.props.onKeyUp(cm, event);
+      });
+    }
+
+    if(this.props.onKeyPress) {
+      this.editor.on('keypress', (cm, event) => {
+        this.props.onKeyPress(cm, event);
+      });
+    }
+
+    if(this.props.onDragEnter) {
+      this.editor.on('dragenter', (cm, event) => {
+        this.props.onDragEnter(cm, event);
+      });
+    }
+
+    if(this.props.onDragOver) {
+      this.editor.on('dragover', (cm, event) => {
+        this.props.onDragOver(cm, event);
+      });
+    }
+
+    if(this.props.onDrop) {
+      this.editor.on('drop', (cm, event) => {
+        this.props.onDrop(cm, event);
+      });
+    }
+
     this.hydrate(this.props);
 
     if (this.props.editorDidMount) {