From 2896b2e24a4d6a3dc8d110edef87823de0d7cc08 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 23 Mar 2018 15:08:01 +1100
Subject: [PATCH 1/3] Prevent changes from being lost while in Text Mode

Store the value of the PostTextEditor text area in local state. This
prevents text from being lost if the post is autosaved during editing.
---
 editor/components/post-text-editor/index.js | 42 +++++++++++----------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/editor/components/post-text-editor/index.js b/editor/components/post-text-editor/index.js
index 5061421b308e9e..bf17d9b1729603 100644
--- a/editor/components/post-text-editor/index.js
+++ b/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,45 @@ 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.handleFocus = this.handleFocus.bind( this );
+		this.handleChange = this.handleChange.bind( this );
+		this.handleBlur = this.handleBlur.bind( this );
 
 		this.state = {
-			initialValue: props.value,
+			value: null,
+			isDirty: false,
 		};
 	}
 
-	onChange( event ) {
-		this.props.onChange( event.target.value );
+	handleFocus() {
+		this.setState( { value: this.props.value } );
 	}
 
-	onPersist( event ) {
-		const { value } = event.target;
-		if ( value !== this.state.initialValue ) {
-			this.props.onPersist( value );
+	handleChange( event ) {
+		const value = event.target.value;
+		this.props.onChange( value );
+		this.setState( { value, isDirty: true } );
+	}
 
-			this.setState( {
-				initialValue: value,
-			} );
+	handleBlur() {
+		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.handleFocus }
+				onChange={ this.handleChange }
+				onBlur={ this.handleBlur }
 				className="editor-post-text-editor"
 			/>
 		);

From c4035be7a6de0a6e13ff272a483fa78988f34213 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 26 Mar 2018 10:29:01 +1100
Subject: [PATCH 2/3] Avoid 'handle-' method names

Try to describe what the method does instead of merely what event it
handles.
---
 editor/components/post-text-editor/index.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/editor/components/post-text-editor/index.js b/editor/components/post-text-editor/index.js
index bf17d9b1729603..3fe5773a86ff06 100644
--- a/editor/components/post-text-editor/index.js
+++ b/editor/components/post-text-editor/index.js
@@ -21,9 +21,9 @@ class PostTextEditor extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.handleFocus = this.handleFocus.bind( this );
-		this.handleChange = this.handleChange.bind( this );
-		this.handleBlur = this.handleBlur.bind( this );
+		this.startEditing = this.startEditing.bind( this );
+		this.edit = this.edit.bind( this );
+		this.stopEditing = this.stopEditing.bind( this );
 
 		this.state = {
 			value: null,
@@ -31,17 +31,19 @@ class PostTextEditor extends Component {
 		};
 	}
 
-	handleFocus() {
+	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 } );
 	}
 
-	handleChange( event ) {
+	edit( event ) {
 		const value = event.target.value;
 		this.props.onChange( value );
 		this.setState( { value, isDirty: true } );
 	}
 
-	handleBlur() {
+	stopEditing() {
 		if ( this.state.isDirty ) {
 			this.props.onPersist( this.state.value );
 		}
@@ -54,9 +56,9 @@ class PostTextEditor extends Component {
 			<Textarea
 				autoComplete="off"
 				value={ this.state.value || this.props.value }
-				onFocus={ this.handleFocus }
-				onChange={ this.handleChange }
-				onBlur={ this.handleBlur }
+				onFocus={ this.startEditing }
+				onChange={ this.edit }
+				onBlur={ this.stopEditing }
 				className="editor-post-text-editor"
 			/>
 		);

From af209c25fb9b3e50813fb94a10ae352632bd2443 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 29 Mar 2018 11:44:13 +1100
Subject: [PATCH 3/3] Don't ignore *all* external updates in the post text
 editor

If the post text editor isn't dirty, update the editor with any external
updates.
---
 editor/components/post-text-editor/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/editor/components/post-text-editor/index.js b/editor/components/post-text-editor/index.js
index 3fe5773a86ff06..76b191dbaac13e 100644
--- a/editor/components/post-text-editor/index.js
+++ b/editor/components/post-text-editor/index.js
@@ -31,6 +31,14 @@ class PostTextEditor extends Component {
 		};
 	}
 
+	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