From 0a1481ac168631cd93b2c878c194e4f626b7e720 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Sat, 10 Mar 2018 16:07:20 -0500
Subject: [PATCH] Title: Override history of textarea to dispatch undo

---
 editor/components/post-title/index.js | 90 ++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 24 deletions(-)

diff --git a/editor/components/post-title/index.js b/editor/components/post-title/index.js
index f59de8bd35cb9a..7ea5e8a81a3081 100644
--- a/editor/components/post-title/index.js
+++ b/editor/components/post-title/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { connect } from 'react-redux';
 import Textarea from 'react-autosize-textarea';
 import classnames from 'classnames';
 
@@ -12,15 +11,14 @@ import { __ } from '@wordpress/i18n';
 import { Component, compose } from '@wordpress/element';
 import { keycodes } from '@wordpress/utils';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import { withContext, withFocusOutside } from '@wordpress/components';
+import { KeyboardShortcuts, withContext, withFocusOutside } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import PostPermalink from '../post-permalink';
-import { getEditedPostAttribute } from '../../store/selectors';
-import { insertBlock, editPost, clearSelectedBlock } from '../../store/actions';
 
 /**
  * Constants
@@ -36,6 +34,7 @@ class PostTitle extends Component {
 		this.onSelect = this.onSelect.bind( this );
 		this.onUnselect = this.onUnselect.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
+		this.redirectHistory = this.redirectHistory.bind( this );
 
 		this.state = {
 			isSelected: false,
@@ -67,6 +66,26 @@ class PostTitle extends Component {
 		}
 	}
 
+	/**
+	 * Emulates behavior of an undo or redo on its corresponding key press
+	 * combination. This is a workaround to React's treatment of undo in a
+	 * controlled textarea where characters are updated one at a time.
+	 * Instead, leverage the store's undo handling of title changes.
+	 *
+	 * @see https://github.com/facebook/react/issues/8514
+	 *
+	 * @param {KeyboardEvent} event Key event.
+	 */
+	redirectHistory( event ) {
+		if ( event.shiftKey ) {
+			this.props.onRedo();
+		} else {
+			this.props.onUndo();
+		}
+
+		event.preventDefault();
+	}
+
 	render() {
 		const { title, placeholder } = this.props;
 		const { isSelected } = this.state;
@@ -75,35 +94,57 @@ class PostTitle extends Component {
 		return (
 			<div className={ className }>
 				{ isSelected && <PostPermalink /> }
-				<Textarea
-					className="editor-post-title__input"
-					value={ title }
-					onChange={ this.onChange }
-					placeholder={ placeholder || __( 'Add title' ) }
-					aria-label={ placeholder || __( 'Add title' ) }
-					onFocus={ this.onSelect }
-					onKeyDown={ this.onKeyDown }
-					onKeyPress={ this.onUnselect }
-				/>
+				<KeyboardShortcuts
+					shortcuts={ {
+						'mod+z': this.redirectHistory,
+						'mod+shift+z': this.redirectHistory,
+					} }
+				>
+					<Textarea
+						className="editor-post-title__input"
+						value={ title }
+						onChange={ this.onChange }
+						placeholder={ placeholder || __( 'Add title' ) }
+						aria-label={ placeholder || __( 'Add title' ) }
+						onFocus={ this.onSelect }
+						onKeyDown={ this.onKeyDown }
+						onKeyPress={ this.onUnselect }
+					/>
+				</KeyboardShortcuts>
 			</div>
 		);
 	}
 }
 
-const applyConnect = connect(
-	( state ) => ( {
-		title: getEditedPostAttribute( state, 'title' ),
-	} ),
-	{
+const applyWithSelect = withSelect( ( select ) => {
+	const { getEditedPostAttribute } = select( 'core/editor' );
+
+	return {
+		title: getEditedPostAttribute( 'title' ),
+	};
+} );
+
+const applyWithDispatch = withDispatch( ( dispatch ) => {
+	const {
+		insertBlock,
+		editPost,
+		clearSelectedBlock,
+		undo,
+		redo,
+	} = dispatch( 'core/editor' );
+
+	return {
 		onEnterPress() {
-			return insertBlock( createBlock( getDefaultBlockName() ), 0 );
+			insertBlock( createBlock( getDefaultBlockName() ), 0 );
 		},
 		onUpdate( title ) {
-			return editPost( { title } );
+			editPost( { title } );
 		},
+		onUndo: undo,
+		onRedo: redo,
 		clearSelectedBlock,
-	}
-);
+	};
+} );
 
 const applyEditorSettings = withContext( 'editor' )(
 	( settings ) => ( {
@@ -112,7 +153,8 @@ const applyEditorSettings = withContext( 'editor' )(
 );
 
 export default compose(
-	applyConnect,
+	applyWithSelect,
+	applyWithDispatch,
 	applyEditorSettings,
 	withFocusOutside
 )( PostTitle );