Add useStateWithHistory hook and use to show a block editor with undo/redo

packages/compose/src/hooks/use-state-with-history/index.ts

@@ -2,7 +2,63 @@
  * WordPress dependencies
  */
 import { createUndoManager } from '@wordpress/undo-manager';
-import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
+import { useCallback, useMemo, useReducer } from '@wordpress/element';
+import type { UndoManager } from '@wordpress/undo-manager';
+
+type UndoRedoState< T > = {
+	manager: UndoManager;
+	value: T;
+};
+
+function undoRedoReducer< T >(
+	state: UndoRedoState< T >,
+	action:
+		| { type: 'UNDO' }
+		| { type: 'REDO' }
+		| { type: 'RECORD'; value: T; isStaged: boolean }
+): UndoRedoState< T > {
+	switch ( action.type ) {
+		case 'UNDO': {
+			const undoRecord = state.manager.undo();
+			if ( undoRecord ) {
+				return {
+					...state,
+					value: undoRecord[ 0 ].changes.prop.from,
+				};
+			}
+			return state;
+		}
+		case 'REDO': {
+			const redoRecord = state.manager.redo();
+			if ( redoRecord ) {
+				return {
+					...state,
+					value: redoRecord[ 0 ].changes.prop.to,
+				};
+			}
+			return state;
+		}
+		case 'RECORD': {
+			state.manager.addRecord(
+				[
+					{
+						id: 'object',
+						changes: {
+							prop: { from: state.value, to: action.value },
+						},
+					},
+				],
+				action.isStaged
+			);
+			return {
+				...state,
+				value: action.value,
+			};
+		}
+	}
+
+	return state;
+}
 
 /**
  * useState with undo/redo history.
@@ -11,44 +67,28 @@ import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
  * @return Value, setValue, hasUndo, hasRedo, undo, redo.
  */
 export default function useStateWithHistory< T >( initialValue: T ) {
-	const manager = useRef( createUndoManager() );
-	const [ value, setValue ] = useState( initialValue );
-	const currentValue = useRef( value );
-	useEffect( () => {
-		currentValue.current = value;
-	}, [ value ] );
+	const undoManager = useMemo( () => createUndoManager(), [] );
+	const [ state, dispatch ] = useReducer( undoRedoReducer, {
+		manager: undoManager,
+		value: initialValue,
+	} );
 
 	return {
-		value,
+		value: state.value,
 		setValue: useCallback( ( newValue: T, isStaged: boolean ) => {
-			manager.current.addRecord(
-				[
-					{
-						id: 'object',
-						changes: {
-							prop: { from: currentValue.current, to: newValue },
-						},
-					},
-				],
-				isStaged
-			);
-			setValue( newValue );
+			dispatch( {
+				type: 'RECORD',
+				value: newValue,
+				isStaged,
+			} );
 		}, [] ),
-		hasUndo: !! manager.current.getUndoRecord(),
-		hasRedo: !! manager.current.getRedoRecord(),
+		hasUndo: !! state.manager.hasUndo(),
+		hasRedo: !! state.manager.hasRedo(),
 		undo: useCallback( () => {
-			const undoRecord = manager.current.getUndoRecord();
-			if ( undoRecord ) {
-				manager.current.undo();
-				setValue( undoRecord[ 0 ].changes.prop.from );
-			}
+			dispatch( { type: 'UNDO' } );
 		}, [] ),
 		redo: useCallback( () => {
-			const redoRecord = manager.current.getRedoRecord();
-			if ( redoRecord ) {
-				manager.current.redo();
-				setValue( redoRecord[ 0 ].changes.prop.to );
-			}
+			dispatch( { type: 'REDO' } );
 		}, [] ),
 	};
 }

packages/compose/src/hooks/use-state-with-history/test/index.js

@@ -29,7 +29,7 @@ const TestComponent = () => {
 };
 
 describe( 'useStateWithHistory', () => {
-	it( 'should  allow undo/redo', async () => {
+	it( 'should allow undo/redo', async () => {
 		render( <TestComponent /> );
 		const input = screen.getByRole( 'textbox' );
 		expect( input ).toHaveValue( 'foo' );

packages/core-data/src/actions.js

@@ -425,14 +425,13 @@ export const editEntityRecord =
 export const undo =
 	() =>
 	( { select, dispatch } ) => {
-		const undoEdit = select.getUndoManager().getUndoRecord();
-		if ( ! undoEdit ) {
+		const undoRecord = select.getUndoManager().undo();
+		if ( ! undoRecord ) {
 			return;
 		}
-		select.getUndoManager().undo();
 		dispatch( {
 			type: 'UNDO',
-			record: undoEdit,
+			record: undoRecord,
 		} );
 	};
 
@@ -443,14 +442,13 @@ export const undo =
 export const redo =
 	() =>
 	( { select, dispatch } ) => {
-		const redoEdit = select.getUndoManager().getRedoRecord();
-		if ( ! redoEdit ) {
+		const redoRecord = select.getUndoManager().redo();
+		if ( ! redoRecord ) {
 			return;
 		}
-		select.getUndoManager().redo();
 		dispatch( {
 			type: 'REDO',
-			record: redoEdit,
+			record: redoRecord,
 		} );
 	};
 

packages/core-data/src/selectors.ts

@@ -904,7 +904,7 @@ export function getRedoEdit( state: State ): Optional< any > {
  * @return Whether there is a previous edit or not.
  */
 export function hasUndo( state: State ): boolean {
-	return Boolean( state.undoManager.getUndoRecord() );
+	return state.undoManager.hasUndo();
 }
 
 /**
@@ -916,7 +916,7 @@ export function hasUndo( state: State ): boolean {
  * @return Whether there is a next edit or not.
  */
 export function hasRedo( state: State ): boolean {
-	return Boolean( state.undoManager.getRedoRecord() );
+	return state.undoManager.hasRedo();
 }
 
 /**

packages/undo-manager/src/index.js

@@ -153,19 +153,29 @@ export function createUndoManager() {
 				dropPendingRedos();
 				appendStagedRecordToLatestHistoryRecord();
 			}
+			const undoRecord = history[ history.length - 1 + offset ];
+			if ( ! undoRecord ) {
+				return;
+			}
 			offset -= 1;
+			return undoRecord;
 		},
 
 		redo() {
+			const redoRecord = history[ history.length + offset ];
+			if ( ! redoRecord ) {
+				return;
+			}
 			offset += 1;
+			return redoRecord;
 		},
 
-		getUndoRecord() {
-			return history[ history.length - 1 + offset ];
+		hasUndo() {
+			return !! history[ history.length - 1 + offset ];
 		},
 
-		getRedoRecord() {
-			return history[ history.length + offset ];
+		hasRedo() {
+			return !! history[ history.length + offset ];
 		},
 	};
 }