Rich text: extract persistent change marking

packages/block-editor/src/components/rich-text/index.js

@@ -40,6 +40,7 @@ import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { useCaretInFormat } from './use-caret-in-format';
+import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
 import { useInputRules } from './use-input-rules';
 import { useFormatTypes } from './use-format-types';
@@ -118,11 +119,9 @@ function RichTextWrapper(
 	const { selectionStart, selectionEnd, isSelected, disabled } = useSelect(
 		selector
 	);
-	const {
-		__unstableMarkLastChangeAsPersistent,
-		selectionChange,
-		__unstableMarkAutomaticChange,
-	} = useDispatch( blockEditorStore );
+	const { selectionChange, __unstableMarkAutomaticChange } = useDispatch(
+		blockEditorStore
+	);
 	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
@@ -296,7 +295,6 @@ function RichTextWrapper(
 		placeholder,
 		__unstableIsSelected: isSelected,
 		__unstableMultilineTag: multilineTag,
-		__unstableOnCreateUndoLevel: __unstableMarkLastChangeAsPersistent,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
 		__unstableDependencies: dependencies,
@@ -312,6 +310,7 @@ function RichTextWrapper(
 	} );
 
 	useCaretInFormat( hasActiveFormats );
+	useMarkPersistent( { hasActiveFormats, html: adjustedValue, value } );
 
 	function onKeyDown( event ) {
 		const { keyCode } = event;

packages/block-editor/src/components/rich-text/use-mark-persistent.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useLayoutEffect, useRef } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export function useMarkPersistent( { hasActiveFormats, html, value } ) {
+	const previousText = useRef();
+	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
+		blockEditorStore
+	);
+
+	// Must be set synchronously to make sure it applies to the last change.
+	useLayoutEffect( () => {
+		// Ignore mount.
+		if ( ! previousText.current ) {
+			previousText.current = value.text;
+			return;
+		}
+
+		// Text input, so don't create an undo level for every character.
+		// Create an undo level after 1 second of no input.
+		if ( previousText.current !== value.text ) {
+			const timeout = window.setTimeout( () => {
+				__unstableMarkLastChangeAsPersistent();
+			}, 1000 );
+			previousText.current = value.text;
+			return () => {
+				window.clearTimeout( timeout );
+			};
+		}
+
+		__unstableMarkLastChangeAsPersistent();
+	}, [ html, hasActiveFormats ] );
+}

packages/rich-text/src/component/index.js

@@ -20,8 +20,6 @@ import { useIndentListItemOnSpace } from './use-indent-list-item-on-space';
 import { useInputAndSelection } from './use-input-and-selection';
 import { useDelete } from './use-delete';
 
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
-
 export function useRichText( {
 	value = '',
 	selectionStart,
@@ -33,7 +31,6 @@ export function useRichText( {
 	onChange,
 	__unstableMultilineTag: multilineTag,
 	__unstableDisableFormats: disableFormats,
-	__unstableOnCreateUndoLevel: onCreateUndoLevel,
 	__unstableIsSelected: isSelected,
 	__unstableDependencies,
 	__unstableAfterParse,
@@ -132,7 +129,6 @@ export function useRichText( {
 	// Internal values are updated synchronously, unlike props and state.
 	const _value = useRef( value );
 	const record = useRef();
-	const lastHistoryValue = useRef( value );
 
 	function setRecordFromProps() {
 		record.current = formatToValue( value );
@@ -144,26 +140,13 @@ export function useRichText( {
 		setRecordFromProps();
 	}
 
-	function createUndoLevel() {
-		// If the content is the same, no level needs to be created.
-		if ( lastHistoryValue.current === _value.current ) {
-			return;
-		}
-
-		onCreateUndoLevel();
-		lastHistoryValue.current = _value.current;
-	}
-
 	/**
 	 * Sync the value to global state. The node tree and selection will also be
 	 * updated if differences are found.
 	 *
-	 * @param {Object}  newRecord         The record to sync and apply.
-	 * @param {Object}  $2                Named options.
-	 * @param {boolean} $2.withoutHistory If true, no undo level will be
-	 *                                    created.
+	 * @param {Object} newRecord The record to sync and apply.
 	 */
-	function handleChange( newRecord, { withoutHistory } = {} ) {
+	function handleChange( newRecord ) {
 		if ( disableFormats ) {
 			newRecord.formats = Array( newRecord.text.length );
 			newRecord.replacements = Array( newRecord.text.length );
@@ -190,10 +173,6 @@ export function useRichText( {
 			__unstableText: text,
 		} );
 		setActiveFormats( newActiveFormats );
-
-		if ( ! withoutHistory ) {
-			createUndoLevel();
-		}
 	}
 
 	function applyFromProps( { domOnly } = {} ) {
@@ -260,7 +239,6 @@ export function useRichText( {
 			applyRecord,
 			createRecord,
 			handleChange,
-			createUndoLevel,
 			isSelected,
 			onSelectionChange,
 			setActiveFormats,

packages/rich-text/src/component/use-input-and-selection.js

@@ -63,7 +63,6 @@ export function useInputAndSelection( props ) {
 
 		let isComposing = false;
 		let rafId;
-		let timeout;
 
 		function onInput( event ) {
 			// Do not trigger a change if characters are being composed.
@@ -90,7 +89,6 @@ export function useInputAndSelection( props ) {
 				applyRecord,
 				createRecord,
 				handleChange,
-				createUndoLevel,
 			} = propsRef.current;
 
 			// The browser formatted something or tried to insert HTML.
@@ -119,11 +117,7 @@ export function useInputAndSelection( props ) {
 				formats: oldActiveFormats,
 			} );
 
-			handleChange( change, { withoutHistory: true } );
-
-			// Create an undo level when input stops for over a second.
-			defaultView.clearTimeout( timeout );
-			timeout = defaultView.setTimeout( createUndoLevel, 1000 );
+			handleChange( change );
 		}
 
 		/**
@@ -309,7 +303,6 @@ export function useInputAndSelection( props ) {
 				handleSelectionChange
 			);
 			defaultView.cancelAnimationFrame( rafId );
-			defaultView.clearTimeout( timeout );
 		};
 	}, [] );
 }