RichText/Patterns/Input Interaction: allow undo of patterns with BACK…

…SPACE and ESC
WordPress · Apr 12, 2019 · 442b734 · 442b734
1 parent 880a4bb
commit 442b734
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 29 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -17,7 +17,7 @@ import memize from 'memize';
 import { Component, Fragment, RawHTML } from '@wordpress/element';
 import { isHorizontalEdge } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
-import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, SPACE } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, SPACE, ESCAPE } from '@wordpress/keycodes';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { pasteHandler, children, getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
@@ -103,6 +103,21 @@ function createPrepareEditableTree( props ) {
 	}, value.formats );
 }
 
+/**
+ * To be run after performing an automatic pattern transform, which should be
+ * undoable across RichText instances.
+ */
+function didPattern() {
+	didPattern.state = true;
+
+	setTimeout( () => {
+		document.addEventListener( 'selectionchange', function callback() {
+			didPattern.state = false;
+			document.removeEventListener( 'selectionchange', callback );
+		} );
+	} );
+}
+
 export class RichText extends Component {
 	constructor( { value, onReplace, multiline } ) {
 		super( ...arguments );
@@ -437,7 +452,13 @@ export class RichText extends Component {
 			change
 		);
 
+		if ( ! transformed ) {
+			didPattern();
+			return;
+		}
+
 		if ( transformed !== change ) {
+			didPattern();
 			this.onCreateUndoLevel();
 			this.onChange( { ...transformed, activeFormats } );
 		}
@@ -619,6 +640,15 @@ export class RichText extends Component {
 			}
 		}
 
+		if (
+			( keyCode === BACKSPACE || keyCode === ESCAPE ) &&
+			didPattern.state
+		) {
+			event.preventDefault();
+			this.props.undo();
+			return;
+		}
+
 		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
 			const value = this.createRecord();
 			const { replacements, text, start, end } = value;
@@ -702,6 +732,7 @@ export class RichText extends Component {
 				} );
 
 				if ( transformation ) {
+					didPattern();
 					this.props.onReplace( [
 						transformation.transform( { content: text } ),
 					] );
@@ -1169,11 +1200,13 @@ const RichTextContainer = compose( [
 			enterFormattedText,
 			exitFormattedText,
 		} = dispatch( 'core/block-editor' );
+		const { undo } = dispatch( 'core/editor' );
 
 		return {
 			onCreateUndoLevel: __unstableMarkLastChangeAsPersistent,
 			onEnterFormattedText: enterFormattedText,
 			onExitFormattedText: exitFormattedText,
+			undo,
 		};
 	} ),
 	withSafeTimeout,

diff --git a/packages/block-editor/src/components/rich-text/patterns.js b/packages/block-editor/src/components/rich-text/patterns.js
@@ -15,62 +15,62 @@ export function getPatterns( { onReplace, valueToFormat } ) {
 
 	return [
 		( record ) => {
-			if ( ! onReplace ) {
-				return record;
-			}
-
+			const BACKTICK = '`';
 			const { start } = record;
 			const text = getTextContent( record );
 			const characterBefore = text.slice( start - 1, start );
 
-			if ( ! /\s/.test( characterBefore ) ) {
+			// Quick check the text for the necessary character.
+			if ( characterBefore !== BACKTICK ) {
 				return record;
 			}
 
-			const trimmedTextBefore = text.slice( 0, start ).trim();
-			const transformation = findTransform( prefixTransforms, ( { prefix } ) => {
-				return trimmedTextBefore === prefix;
-			} );
+			const textBefore = text.slice( 0, start - 1 );
+			const indexBefore = textBefore.lastIndexOf( BACKTICK );
 
-			if ( ! transformation ) {
+			if ( indexBefore === -1 ) {
 				return record;
 			}
 
-			const content = valueToFormat( slice( record, start, text.length ) );
-			const block = transformation.transform( content );
+			const startIndex = indexBefore;
+			const endIndex = start - 2;
 
-			onReplace( [ block ] );
+			if ( startIndex === endIndex ) {
+				return record;
+			}
+
+			record = remove( record, startIndex, startIndex + 1 );
+			record = remove( record, endIndex, endIndex + 1 );
+			record = applyFormat( record, { type: 'code' }, startIndex, endIndex );
 
 			return record;
 		},
 		( record ) => {
-			const BACKTICK = '`';
+			if ( ! onReplace ) {
+				return record;
+			}
+
 			const { start } = record;
 			const text = getTextContent( record );
 			const characterBefore = text.slice( start - 1, start );
 
-			// Quick check the text for the necessary character.
-			if ( characterBefore !== BACKTICK ) {
+			if ( ! /\s/.test( characterBefore ) ) {
 				return record;
 			}
 
-			const textBefore = text.slice( 0, start - 1 );
-			const indexBefore = textBefore.lastIndexOf( BACKTICK );
+			const trimmedTextBefore = text.slice( 0, start ).trim();
+			const transformation = findTransform( prefixTransforms, ( { prefix } ) => {
+				return trimmedTextBefore === prefix;
+			} );
 
-			if ( indexBefore === -1 ) {
+			if ( ! transformation ) {
 				return record;
 			}
 
-			const startIndex = indexBefore;
-			const endIndex = start - 2;
-
-			if ( startIndex === endIndex ) {
-				return record;
-			}
+			const content = valueToFormat( slice( record, start, text.length ) );
+			const block = transformation.transform( content );
 
-			record = remove( record, startIndex, startIndex + 1 );
-			record = remove( record, endIndex, endIndex + 1 );
-			record = applyFormat( record, { type: 'code' }, startIndex, endIndex );
+			onReplace( [ block ] );
 
 			return record;
 		},