Merge pull request #5755 from WordPress/fix/post-text-editor

Fix autosave while editing a post using the Text Mode editor

editor/components/post-text-editor/index.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { connect } from 'react-redux';
 import Textarea from 'react-autosize-textarea';
+import { connect } from 'react-redux';
 
 /**
  * WordPress dependencies
@@ -18,41 +18,55 @@ import { getEditedPostContent } from '../../store/selectors';
 import { editPost, resetBlocks, checkTemplateValidity } from '../../store/actions';
 
 class PostTextEditor extends Component {
-	constructor( props ) {
+	constructor() {
 		super( ...arguments );
 
-		this.onChange = this.onChange.bind( this );
-		this.onPersist = this.onPersist.bind( this );
+		this.startEditing = this.startEditing.bind( this );
+		this.edit = this.edit.bind( this );
+		this.stopEditing = this.stopEditing.bind( this );
 
 		this.state = {
-			initialValue: props.value,
+			value: null,
+			isDirty: false,
 		};
 	}
 
-	onChange( event ) {
-		this.props.onChange( event.target.value );
+	componentWillReceiveProps( nextProps ) {
+		// If we receive a new value while we're editing (but before we've made
+		// changes), go ahead and clobber the local state
+		if ( this.props.value !== nextProps.value && this.state.value && ! this.state.isDirty ) {
+			this.setState( { value: nextProps.value } );
+		}
+	}
+
+	startEditing() {
+		// Copying the post content into local state ensures that edits won't be
+		// clobbered by changes to global editor state
+		this.setState( { value: this.props.value } );
 	}
 
-	onPersist( event ) {
-		const { value } = event.target;
-		if ( value !== this.state.initialValue ) {
-			this.props.onPersist( value );
+	edit( event ) {
+		const value = event.target.value;
+		this.props.onChange( value );
+		this.setState( { value, isDirty: true } );
+	}
 
-			this.setState( {
-				initialValue: value,
-			} );
+	stopEditing() {
+		if ( this.state.isDirty ) {
+			this.props.onPersist( this.state.value );
 		}
+
+		this.setState( { value: null, isDirty: false } );
 	}
 
 	render() {
-		const { value } = this.props;
-
 		return (
 			<Textarea
 				autoComplete="off"
-				value={ value }
-				onChange={ this.onChange }
-				onBlur={ this.onPersist }
+				value={ this.state.value || this.props.value }
+				onFocus={ this.startEditing }
+				onChange={ this.edit }
+				onBlur={ this.stopEditing }
 				className="editor-post-text-editor"
 			/>
 		);