Merge pull request JedWatson#79 from skidding/preserve-scroll-position

Add option to preserve scroll position between updates

Author: JedWatson

README.md

@@ -69,6 +69,7 @@ You can interact with the CodeMirror instance using a `ref` and the `getCodeMirr
 
 * `autoSave` `Boolean` automatically persist changes to underlying textarea (default false)
 * `value` `String` the editor value
+* `preserveScrollPosition` `Boolean=false` Preserve previous scroll position after updating value
 * `options` `Object (newValue)` options passed to the CodeMirror instance
 * `onChange` `Function (newValue)` called when a change is made
 * `onFocusChange` `Function (focused)` called when the editor is focused or loses focus

lib/Codemirror.js

@@ -18,7 +18,13 @@ var CodeMirror = React.createClass({
 		onScroll: React.PropTypes.func,
 		options: React.PropTypes.object,
 		path: React.PropTypes.string,
-		value: React.PropTypes.string
+		value: React.PropTypes.string,
+		preserveScrollPosition: React.PropTypes.bool
+	},
+	getDefaultProps: function getDefaultProps() {
+		return {
+			preserveScrollPosition: false
+		};
 	},
 	getCodeMirrorInstance: function getCodeMirrorInstance() {
 		return this.props.codeMirrorInstance || require('codemirror');
@@ -49,7 +55,13 @@ var CodeMirror = React.createClass({
 	},
 	componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
 		if (this.codeMirror && nextProps.value !== undefined && this.codeMirror.getValue() !== nextProps.value) {
-			this.codeMirror.setValue(nextProps.value);
+			if (this.props.preserveScrollPosition) {
+				var prevScrollPosition = this.codeMirror.getScrollInfo();
+				this.codeMirror.setValue(nextProps.value);
+				this.codeMirror.scrollTo(prevScrollPosition.left, prevScrollPosition.top);
+			} else {
+				this.codeMirror.setValue(nextProps.value);
+			}
 		}
 		if (typeof nextProps.options === 'object') {
 			for (var optionName in nextProps.options) {

src/Codemirror.js

@@ -15,6 +15,12 @@ const CodeMirror = React.createClass({
 		options: React.PropTypes.object,
 		path: React.PropTypes.string,
 		value: React.PropTypes.string,
+		preserveScrollPosition: React.PropTypes.bool,
+	},
+	getDefaultProps () {
+		return {
+			preserveScrollPosition: false,
+		};
 	},
 	getCodeMirrorInstance () {
 		return this.props.codeMirrorInstance || require('codemirror');
@@ -45,7 +51,13 @@ const CodeMirror = React.createClass({
 	},
 	componentWillReceiveProps: function (nextProps) {
 		if (this.codeMirror && nextProps.value !== undefined && this.codeMirror.getValue() !== nextProps.value) {
-			this.codeMirror.setValue(nextProps.value);
+			if (this.props.preserveScrollPosition) {
+				var prevScrollPosition = this.codeMirror.getScrollInfo();
+				this.codeMirror.setValue(nextProps.value);
+				this.codeMirror.scrollTo(prevScrollPosition.left, prevScrollPosition.top);
+			} else {
+				this.codeMirror.setValue(nextProps.value);
+			}
 		}
 		if (typeof nextProps.options === 'object') {
 			for (let optionName in nextProps.options) {