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

…SPACE and ESC
WordPress · Apr 4, 2019 · 011903b · 011903b
1 parent 5cf4e14
commit 011903b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 30 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';
@@ -104,6 +104,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 );
@@ -438,7 +453,13 @@ export class RichText extends Component {
 			change
 		);
 
+		if ( ! transformed ) {
+			didPattern();
+			return;
+		}
+
 		if ( transformed !== change ) {
+			didPattern();
 			this.onCreateUndoLevel();
 			this.onChange( { ...transformed, activeFormats } );
 		}
@@ -620,6 +641,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;
@@ -703,6 +733,7 @@ export class RichText extends Component {
 				} );
 
 				if ( transformation ) {
+					didPattern();
 					this.props.onReplace( [
 						transformation.transform( { content: text } ),
 					] );
@@ -1170,11 +1201,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,35 +15,6 @@ export function getPatterns( { onReplace, valueToFormat } ) {
 		.filter( ( { type } ) => type === 'prefix' );
 
 	return [
-		( record ) => {
-			if ( ! onReplace ) {
-				return record;
-			}
-
-			const start = getSelectionStart( record );
-			const text = getTextContent( record );
-			const characterBefore = text.slice( start - 1, start );
-
-			if ( ! /\s/.test( characterBefore ) ) {
-				return record;
-			}
-
-			const trimmedTextBefore = text.slice( 0, start ).trim();
-			const transformation = findTransform( prefixTransforms, ( { prefix } ) => {
-				return trimmedTextBefore === prefix;
-			} );
-
-			if ( ! transformation ) {
-				return record;
-			}
-
-			const content = valueToFormat( slice( record, start, text.length ) );
-			const block = transformation.transform( content );
-
-			onReplace( [ block ] );
-
-			return record;
-		},
 		( record ) => {
 			const BACKTICK = '`';
 			const start = getSelectionStart( record );
@@ -75,5 +46,32 @@ export function getPatterns( { onReplace, valueToFormat } ) {
 
 			return record;
 		},
+		( record ) => {
+			if ( ! onReplace ) {
+				return record;
+			}
+
+			const start = getSelectionStart( record );
+			const text = getTextContent( record );
+			const characterBefore = text.slice( start - 1, start );
+
+			if ( ! /\s/.test( characterBefore ) ) {
+				return record;
+			}
+
+			const trimmedTextBefore = text.slice( 0, start ).trim();
+			const transformation = findTransform( prefixTransforms, ( { prefix } ) => {
+				return trimmedTextBefore === prefix;
+			} );
+
+			if ( ! transformation ) {
+				return record;
+			}
+
+			const content = valueToFormat( slice( record, start, text.length ) );
+			const block = transformation.transform( content );
+
+			onReplace( [ block ] );
+		},
 	];
 }