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

packages/compose/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Features
+
+-   `useStateWithHistory`: Add a new hook to manage state with undo/redo support.
+
 ## 6.18.0 (2023-08-31)
 
 ## 6.17.0 (2023-08-16)

packages/compose/README.md

@@ -484,6 +484,18 @@ const App = () => {
 };
 ```
 
+### useStateWithHistory
+
+useState with undo/redo history.
+
+_Parameters_
+
+-   _initialValue_ `T`: Initial value.
+
+_Returns_
+
+-   Value, setValue, hasUndo, hasRedo, undo, redo.
+
 ### useThrottle
 
 Throttles a function similar to Lodash's `throttle`. A new throttled function will be returned and any scheduled calls cancelled if any of the arguments change, including the function to throttle, so please wrap functions created on render in components in `useCallback`.

packages/compose/package.json

@@ -37,6 +37,7 @@
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/priority-queue": "file:../priority-queue",
+		"@wordpress/undo-manager": "file:../undo-manager",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"mousetrap": "^1.6.5",

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

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { createUndoManager } from '@wordpress/undo-manager';
+import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
+
+/**
+ * useState with undo/redo history.
+ *
+ * @param initialValue Initial value.
+ * @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 ] );
+
+	return {
+		value,
+		setValue: useCallback( ( newValue: T, isStaged: boolean ) => {
+			manager.current.addRecord(
+				[
+					{
+						id: 'object',
+						changes: {
+							prop: { from: currentValue.current, to: newValue },
+						},
+					},
+				],
+				isStaged
+			);
+			setValue( newValue );
+		}, [] ),
+		hasUndo: !! manager.current.getUndoRecord(),
+		hasRedo: !! manager.current.getRedoRecord(),
+		undo: useCallback( () => {
+			const undoRecord = manager.current.getUndoRecord();
+			if ( undoRecord ) {
+				manager.current.undo();
+				setValue( undoRecord[ 0 ].changes.prop.from );
+			}
+		}, [] ),
+		redo: useCallback( () => {
+			const redoRecord = manager.current.getRedoRecord();
+			if ( redoRecord ) {
+				manager.current.redo();
+				setValue( redoRecord[ 0 ].changes.prop.to );
+			}
+		}, [] ),
+	};
+}

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

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { screen, render, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import useStateWithHistory from '../';
+
+const TestComponent = () => {
+	const { value, setValue, hasUndo, hasRedo, undo, redo } =
+		useStateWithHistory( 'foo' );
+
+	return (
+		<div>
+			<input
+				value={ value }
+				onChange={ ( event ) => setValue( event.target.value ) }
+			/>
+			<button className="undo" onClick={ undo } disabled={ ! hasUndo }>
+				Undo
+			</button>
+			<button className="redo" onClick={ redo } disabled={ ! hasRedo }>
+				Redo
+			</button>
+		</div>
+	);
+};
+
+describe( 'useStateWithHistory', () => {
+	it( 'should  allow undo/redo', async () => {
+		render( <TestComponent /> );
+		const input = screen.getByRole( 'textbox' );
+		expect( input ).toHaveValue( 'foo' );
+		const buttonUndo = screen.getByRole( 'button', { name: 'Undo' } );
+		const buttonRedo = screen.getByRole( 'button', { name: 'Redo' } );
+		expect( buttonUndo ).toBeDisabled();
+		expect( buttonRedo ).toBeDisabled();
+
+		// Make a change
+		fireEvent.change( input, { target: { value: 'bar' } } );
+		expect( input ).toHaveValue( 'bar' );
+		expect( buttonUndo ).toBeEnabled();
+		expect( buttonRedo ).toBeDisabled();
+
+		// Undo the change
+		fireEvent.click( buttonUndo );
+		expect( input ).toHaveValue( 'foo' );
+		expect( buttonUndo ).toBeDisabled();
+		expect( buttonRedo ).toBeEnabled();
+
+		// Redo the change
+		fireEvent.click( buttonRedo );
+		expect( input ).toHaveValue( 'bar' );
+		expect( buttonUndo ).toBeEnabled();
+		expect( buttonRedo ).toBeDisabled();
+	} );
+} );

packages/compose/src/index.js

@@ -33,6 +33,7 @@ export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';
 export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as usePrevious } from './hooks/use-previous';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
+export { default as useStateWithHistory } from './hooks/use-state-with-history';
 export { default as useViewportMatch } from './hooks/use-viewport-match';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useAsyncList } from './hooks/use-async-list';

storybook/main.js

@@ -71,15 +71,15 @@ module.exports = {
 				...config.module,
 				rules: [
 					...config.module.rules,
-					{
+					/*{
 						// Adds a `sourceLink` parameter to the story metadata, based on the file path
 						test: /\/stories\/.+\.(j|t)sx?$/,
 						loader: path.resolve(
 							__dirname,
 							'./webpack/source-link-loader.js'
 						),
 						enforce: 'post',
-					},
+					},*/
 					{
 						test: /\.scss$/,
 						exclude: /\.lazy\.scss$/,

storybook/stories/playground/box/index.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import {
+	BlockEditorProvider,
+	BlockCanvas,
+	BlockTools,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import editorStyles from '../editor-styles';
+import './style.css';
+
+export default function EditorBox() {
+	const [ blocks, updateBlocks ] = useState( [] );
+
+	useEffect( () => {
+		registerCoreBlocks();
+	}, [] );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="editor-box"
+			onKeyDown={ ( event ) => event.stopPropagation() }
+		>
+			<BlockEditorProvider
+				value={ blocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+				settings={ {
+					hasFixedToolbar: true,
+				} }
+			>
+				<BlockTools />
+				<BlockCanvas height="100%" styles={ editorStyles } />
+			</BlockEditorProvider>
+		</div>
+	);
+}

storybook/stories/playground/box/style.css

@@ -0,0 +1,3 @@
+.editor-box {
+	border: 1px solid #ddd;
+}

storybook/stories/playground/fullpage/index.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import {
+	BlockCanvas,
+	BlockEditorProvider,
+	BlockTools,
+	BlockInspector,
+} from '@wordpress/block-editor';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import '@wordpress/format-library';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.lazy.scss';
+import { editorStyles } from '../editor-styles';
+
+export default function EditorFullPage() {
+	const [ blocks, updateBlocks ] = useState( [] );
+
+	useEffect( () => {
+		registerCoreBlocks();
+	}, [] );
+
+	// Ensures that the CSS intended for the playground (especially the style resets)
+	// are only loaded for the playground and don't leak into other stories.
+	useEffect( () => {
+		styles.use();
+
+		return styles.unuse;
+	} );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="playground"
+			onKeyDown={ ( event ) => event.stopPropagation() }
+		>
+			<BlockEditorProvider
+				value={ blocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+			>
+				<div className="playground__sidebar">
+					<BlockInspector />
+				</div>
+				<BlockTools className="playground__content">
+					<BlockCanvas height="100%" styles={ editorStyles } />
+				</BlockTools>
+			</BlockEditorProvider>
+		</div>
+	);
+}

storybook/stories/playground/index.story.js

@@ -1,58 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import {
-	BlockCanvas,
-	BlockEditorProvider,
-	BlockTools,
-	BlockInspector,
-} from '@wordpress/block-editor';
-import { registerCoreBlocks } from '@wordpress/block-library';
-import '@wordpress/format-library';
-
 /**
  * Internal dependencies
  */
-import styles from './style.lazy.scss';
-import { editorStyles } from './editor-styles';
-
-function App() {
-	const [ blocks, updateBlocks ] = useState( [] );
-
-	useEffect( () => {
-		registerCoreBlocks();
-	}, [] );
-
-	// Ensures that the CSS intended for the playground (especially the style resets)
-	// are only loaded for the playground and don't leak into other stories.
-	useEffect( () => {
-		styles.use();
-
-		return styles.unuse;
-	} );
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className="playground"
-			onKeyDown={ ( event ) => event.stopPropagation() }
-		>
-			<BlockEditorProvider
-				value={ blocks }
-				onInput={ updateBlocks }
-				onChange={ updateBlocks }
-			>
-				<div className="playground__sidebar">
-					<BlockInspector />
-				</div>
-				<BlockTools className="playground__content">
-					<BlockCanvas height="100%" styles={ editorStyles } />
-				</BlockTools>
-			</BlockEditorProvider>
-		</div>
-	);
-}
+import EditorFullPage from './fullpage';
+import EditorBox from './box';
+import EditorWithUndoRedo from './with-undo-redo';
 
 export default {
 	title: 'Playground/Block Editor',
@@ -62,38 +13,13 @@ export default {
 };
 
 export const _default = () => {
-	return <App />;
+	return <EditorFullPage />;
 };
 
-function EditorBox() {
-	const [ blocks, updateBlocks ] = useState( [] );
-
-	useEffect( () => {
-		registerCoreBlocks();
-	}, [] );
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className="editor-box"
-			style={ { border: '1px solid #eee' } }
-			onKeyDown={ ( event ) => event.stopPropagation() }
-		>
-			<BlockEditorProvider
-				value={ blocks }
-				onInput={ updateBlocks }
-				onChange={ updateBlocks }
-				settings={ {
-					hasFixedToolbar: true,
-				} }
-			>
-				<BlockTools />
-				<BlockCanvas height="100%" styles={ editorStyles } />
-			</BlockEditorProvider>
-		</div>
-	);
-}
-
 export const Box = () => {
 	return <EditorBox />;
 };
+
+export const UndoRedo = () => {
+	return <EditorWithUndoRedo />;
+};