adding codemirror api events

scniro · Jun 2, 2017 · 2e36c9b · 2e36c9b
1 parent aaf610d
commit 2e36c9b
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -6,11 +6,35 @@
 import CodeMirror from 'react-codemirror2'
 
 <CodeMirror
-  value='foo'
-  options={{theme: 'material'}}
-  onChange={(value) => {
-    console.log(value);
-  }} />
+  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={() => {
+  }}
+/>
 ```
 
-// TODO
+// better docs coming soon. all props are optional...
diff --git a/demo/index.jsx b/demo/index.jsx
@@ -6,7 +6,32 @@ require('./index.scss');
 
 render(
   <CodeMirror
-    value='foo'
-    options={{theme: 'material', viewportMargin: Infinity}}
-    onChange={(value) => console.log(value)}/>
+    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={() => {
+    }}/>
   , document.getElementById('app'));
diff --git a/index.js b/index.js
@@ -3,23 +3,96 @@ let codemirror = require('codemirror');
 
 export default class CodeMirror extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.initHydration = false;
+  }
+
+  componentWillMount() {
+    if (this.props.editorWillMount) {
+      this.props.editorWillMount(codemirror);
+    }
+  }
+
   componentDidMount() {
 
     this.editor = codemirror(this.ref);
-    this.editor.on('change', () => this.props.onChange(this.editor.getValue()));
+
+    this.editor.on('change', () => {
+      if (this.props.onChange && this.initHydration) {
+        this.props.onChange(this.editor.getValue());
+      }
+    });
+
+    if (this.props.onCursorActivity) {
+      this.editor.on('cursorActivity', this.props.onCursorActivity);
+    }
+
+    if (this.props.onViewportChange) {
+      this.editor.on('viewportChange', (cm, start, end) => {
+        this.props.onViewportChange(cm, start, end);
+      });
+    }
+
+    if (this.props.onGutterClick) {
+      this.editor.on('gutterClick', (cm, lineNumber, event) => {
+        this.props.onGutterClick(cm, lineNumber, event);
+      });
+    }
+
+    if (this.props.onFocus) {
+      this.editor.on('focus', this.props.onFocus);
+    }
+
+    if (this.props.onBlur) {
+      this.editor.on('blur', this.props.onBlur);
+    }
+
+    if (this.props.onScroll) {
+      this.editor.on('scroll', this.props.onScroll);
+    }
+
+    if (this.props.onUpdate) {
+      this.editor.on('update', this.props.onUpdate);
+    }
 
     this.hydrate(this.props);
+
+    if (this.props.editorDidMount) {
+      this.props.editorDidMount(codemirror);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
 
     this.hydrate(nextProps);
   }
 
+  componentWillUnmount() {
+
+    if (this.props.editorWillUnmount) {
+      this.props.editorWillUnmount(codemirror);
+    }
+  }
+
   hydrate(props) {
 
     Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key]));
-    this.editor.setValue(props.value || '');
+
+    if (this.props.editorDidConfigure) {
+      this.props.editorDidConfigure(codemirror);
+    }
+
+    if (this.props.defaultValue && !this.initHydration) {
+      this.editor.setValue(props.defaultValue);
+
+      if (this.props.onSetDefaultValue) {
+        this.props.onSetDefaultValue(this.editor.getValue());
+      }
+    }
+
+    this.initHydration = true;
   }
 
   render() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-codemirror2",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "a tiny react codemirror component wrapper",
   "main": "index.js",
   "scripts": {

diff --git a/src/react-codemirror2.jsx b/src/react-codemirror2.jsx
@@ -3,23 +3,96 @@ let codemirror = require('codemirror');
 
 export default class CodeMirror extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.initHydration = false;
+  }
+
+  componentWillMount() {
+    if (this.props.editorWillMount) {
+      this.props.editorWillMount(codemirror);
+    }
+  }
+
   componentDidMount() {
 
     this.editor = codemirror(this.ref);
-    this.editor.on('change', () => this.props.onChange(this.editor.getValue()));
+
+    this.editor.on('change', () => {
+      if (this.props.onChange && this.initHydration) {
+        this.props.onChange(this.editor.getValue());
+      }
+    });
+
+    if(this.props.onCursorActivity) {
+      this.editor.on('cursorActivity', this.props.onCursorActivity);
+    }
+
+    if(this.props.onViewportChange) {
+      this.editor.on('viewportChange', (cm, start, end) => {
+        this.props.onViewportChange(cm, start, end);
+      });
+    }
+
+    if(this.props.onGutterClick) {
+      this.editor.on('gutterClick', (cm, lineNumber, event) => {
+        this.props.onGutterClick(cm, lineNumber, event);
+      });
+    }
+
+    if(this.props.onFocus) {
+      this.editor.on('focus', this.props.onFocus);
+    }
+
+    if(this.props.onBlur) {
+      this.editor.on('blur', this.props.onBlur);
+    }
+
+    if(this.props.onScroll) {
+      this.editor.on('scroll', this.props.onScroll);
+    }
+
+    if(this.props.onUpdate) {
+      this.editor.on('update', this.props.onUpdate);
+    }
 
     this.hydrate(this.props);
+
+    if (this.props.editorDidMount) {
+      this.props.editorDidMount(codemirror);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
 
     this.hydrate(nextProps);
   }
 
+  componentWillUnmount() {
+
+    if (this.props.editorWillUnmount) {
+      this.props.editorWillUnmount(codemirror);
+    }
+  }
+
   hydrate(props) {
 
     Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key]));
-    this.editor.setValue(props.value || '');
+
+    if (this.props.editorDidConfigure) {
+      this.props.editorDidConfigure(codemirror);
+    }
+
+    if (this.props.defaultValue && !this.initHydration) {
+      this.editor.setValue(props.defaultValue);
+
+      if (this.props.onSetDefaultValue) {
+        this.props.onSetDefaultValue(this.editor.getValue());
+      }
+    }
+
+    this.initHydration = true;
   }
 
   render() {