Add undo level after input timeout

WordPress · Nov 15, 2018 · 78c1a1c · 78c1a1c
1 parent 8af22d9
commit 78c1a1c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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();