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 );