From 78c1a1c8dec0d88fdbad6789214afe9001ea255f Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Tue, 13 Nov 2018 18:41:32 +0100
Subject: [PATCH] Add undo level after input timeout

---
 .../editor/src/components/rich-text/index.js  | 30 ++++++++-----------
 .../e2e/specs/__snapshots__/undo.test.js.snap | 20 +++----------
 test/e2e/specs/undo.test.js                   | 22 +++-----------
 3 files changed, 21 insertions(+), 51 deletions(-)

diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
index 6cfc00a5cbde26..1aa6dba573c968 100644
--- a/packages/editor/src/components/rich-text/index.js
+++ b/packages/editor/src/components/rich-text/index.js
@@ -20,7 +20,7 @@ import {
 	getScrollContainer,
 } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
-import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, UP, DOWN } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { pasteHandler, children, getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
@@ -117,6 +117,14 @@ export class RichText extends Component {
 		this.lastHistoryValue = value;
 	}
 
+	componentDidMount() {
+		document.addEventListener( 'selectionchange', this.onSelectionChange );
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener( 'selectionchange', this.onSelectionChange );
+	}
+
 	setRef( node ) {
 		this.editableRef = node;
 	}
@@ -348,6 +356,10 @@ export class RichText extends Component {
 		this.onChange( transformed, {
 			withoutHistory: true,
 		} );
+
+		// Create an undo level when input stops for over a second.
+		this.props.clearTimeout( this.onInput.timeout );
+		this.onInput.timeout = this.props.setTimeout( this.onCreateUndoLevel, 1000 );
 	}
 
 	/**
@@ -551,10 +563,6 @@ export class RichText extends Component {
 				this.splitContent();
 			}
 		}
-
-		if ( [ LEFT, RIGHT, UP, DOWN ].indexOf( keyCode ) >= 0 ) {
-			this.onCreateUndoLevel();
-		}
 	}
 
 	/**
@@ -735,18 +743,6 @@ export class RichText extends Component {
 			const record = this.formatToValue( value );
 			this.applyRecord( record );
 		}
-
-		if ( isSelected && ! prevProps.isSelected ) {
-			document.addEventListener( 'selectionchange', this.onSelectionChange );
-			window.addEventListener( 'mousedown', this.onCreateUndoLevel );
-			window.addEventListener( 'touchstart', this.onCreateUndoLevel );
-		}
-
-		if ( ! isSelected && prevProps.isSelected ) {
-			document.removeEventListener( 'selectionchange', this.onSelectionChange );
-			window.removeEventListener( 'mousedown', this.onCreateUndoLevel );
-			window.removeEventListener( 'touchstart', this.onCreateUndoLevel );
-		}
 	}
 
 	formatToValue( value ) {
diff --git a/test/e2e/specs/__snapshots__/undo.test.js.snap b/test/e2e/specs/__snapshots__/undo.test.js.snap
index 6fddf05734a0dd..1ae6c8e4458b79 100644
--- a/test/e2e/specs/__snapshots__/undo.test.js.snap
+++ b/test/e2e/specs/__snapshots__/undo.test.js.snap
@@ -14,27 +14,15 @@ exports[`undo Should undo to expected level intervals 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`undo should undo typing after arrow navigation 1`] = `
+exports[`undo should undo typing after a pause 1`] = `
 "<!-- wp:paragraph -->
-<p>before keyboard after keyboard</p>
+<p>before pause after pause</p>
 <!-- /wp:paragraph -->"
 `;
 
-exports[`undo should undo typing after arrow navigation 2`] = `
+exports[`undo should undo typing after a pause 2`] = `
 "<!-- wp:paragraph -->
-<p>before keyboard</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`undo should undo typing after mouse move 1`] = `
-"<!-- wp:paragraph -->
-<p>before move after move</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`undo should undo typing after mouse move 2`] = `
-"<!-- wp:paragraph -->
-<p>before move</p>
+<p>before pause</p>
 <!-- /wp:paragraph -->"
 `;
 
diff --git a/test/e2e/specs/undo.test.js b/test/e2e/specs/undo.test.js
index 7b63f838bf292e..1ef7b9b32b88c4 100644
--- a/test/e2e/specs/undo.test.js
+++ b/test/e2e/specs/undo.test.js
@@ -14,12 +14,12 @@ describe( 'undo', () => {
 		await newPost();
 	} );
 
-	it( 'should undo typing after mouse move', async () => {
+	it( 'should undo typing after a pause', async () => {
 		await clickBlockAppender();
 
-		await page.keyboard.type( 'before move' );
-		await page.mouse.down();
-		await page.keyboard.type( ' after move' );
+		await page.keyboard.type( 'before pause' );
+		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
+		await page.keyboard.type( ' after pause' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
@@ -42,20 +42,6 @@ describe( 'undo', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should undo typing after arrow navigation', async () => {
-		await clickBlockAppender();
-
-		await page.keyboard.type( 'before keyboard' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.type( ' after keyboard' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await pressWithModifier( META_KEY, 'z' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
 	it( 'Should undo to expected level intervals', async () => {
 		await clickBlockAppender();