RichText: Fix undo after pattern (#13917)

* Fix undo after pattern * Update e2e test
WordPress · Mar 5, 2019 · 5ebdc02 · 5ebdc02
1 parent 8c82d3e
commit 5ebdc02
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/list.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/list.test.js.snap
@@ -76,7 +76,7 @@ exports[`List can be created by using an asterisk at the start of a paragraph bl
 
 exports[`List can undo asterisk transform 1`] = `
 "<!-- wp:paragraph -->
-<p>1.</p>
+<p>1. </p>
 <!-- /wp:paragraph -->"
 `;
 

diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -133,9 +133,7 @@ export class RichText extends Component {
 		this.savedContent = value;
 		this.patterns = getPatterns( {
 			onReplace,
-			onCreateUndoLevel: this.onCreateUndoLevel,
 			valueToFormat: this.valueToFormat,
-			onChange: this.onChange,
 		} );
 		this.enterPatterns = getBlockTransforms( 'from' )
 			.filter( ( { type } ) => type === 'enter' );
@@ -395,10 +393,7 @@ export class RichText extends Component {
 		}
 
 		let { selectedFormat } = this.state;
-		const { formats, text, start, end } = this.patterns.reduce(
-			( accumlator, transform ) => transform( accumlator ),
-			this.createRecord()
-		);
+		const { formats, text, start, end } = this.createRecord();
 
 		if ( this.formatPlaceholder ) {
 			formats[ this.state.start ] = formats[ this.state.start ] || [];
@@ -420,10 +415,22 @@ export class RichText extends Component {
 			delete formats[ this.state.start ];
 		}
 
-		this.onChange( { formats, text, start, end, selectedFormat }, {
+		const change = { formats, text, start, end, selectedFormat };
+
+		this.onChange( change, {
 			withoutHistory: true,
 		} );
 
+		const transformed = this.patterns.reduce(
+			( accumlator, transform ) => transform( accumlator ),
+			change
+		);
+
+		if ( transformed !== change ) {
+			this.onCreateUndoLevel();
+			this.onChange( { ...transformed, selectedFormat } );
+		}
+
 		// 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 );

diff --git a/packages/editor/src/components/rich-text/patterns.js b/packages/editor/src/components/rich-text/patterns.js
@@ -10,7 +10,7 @@ import {
 	slice,
 } from '@wordpress/rich-text';
 
-export function getPatterns( { onReplace, valueToFormat, onCreateUndoLevel, onChange } ) {
+export function getPatterns( { onReplace, valueToFormat } ) {
 	const prefixTransforms = getBlockTransforms( 'from' )
 		.filter( ( { type } ) => type === 'prefix' );
 
@@ -40,7 +40,6 @@ export function getPatterns( { onReplace, valueToFormat, onCreateUndoLevel, onCh
 			const content = valueToFormat( slice( record, start, text.length ) );
 			const block = transformation.transform( content );
 
-			onCreateUndoLevel();
 			onReplace( [ block ] );
 
 			return record;
@@ -70,8 +69,6 @@ export function getPatterns( { onReplace, valueToFormat, onCreateUndoLevel, onCh
 				return record;
 			}
 
-			onChange( record );
-
 			record = remove( record, startIndex, startIndex + 1 );
 			record = remove( record, endIndex, endIndex + 1 );
 			record = applyFormat( record, { type: 'code' }, startIndex, endIndex );