@wordpress/components 32.5.0 → 32.6.0

package/src/autocomplete/index.tsx

@@ -1,17 +1,12 @@
-/**
- * External dependencies
- */
-import removeAccents from 'remove-accents';
-
 /**
  * WordPress dependencies
  */
 import {
 	renderToString,
 	useEffect,
-	useState,
-	useRef,
 	useMemo,
+	useReducer,
+	useRef,
 } from '@wordpress/element';
 import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
 import {
@@ -27,18 +22,18 @@ import { isAppleOS } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { getAutoCompleterUI } from './autocompleter-ui';
-import { escapeRegExp } from '../utils/strings';
+import { AutocompleterUI } from './autocompleter-ui';
+import { getAutocompleteMatch } from './get-autocomplete-match';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import type {
+	AutocompleteAction,
 	AutocompleteProps,
-	AutocompleterUIProps,
+	AutocompleteState,
 	InsertOption,
 	KeyedOption,
 	OptionCompletion,
 	ReplaceOption,
 	UseAutocompleteProps,
-	WPCompleter,
 } from './types';
 import getNodeText from '../utils/get-node-text';
 
@@ -47,6 +42,59 @@ const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 // Used for generating the instance ID
 const AUTOCOMPLETE_HOOK_REFERENCE = {};
 
+function getCompletionObject(
+	completion: OptionCompletion
+): InsertOption | ReplaceOption {
+	if (
+		completion !== null &&
+		typeof completion === 'object' &&
+		'action' in completion &&
+		completion.action !== undefined &&
+		'value' in completion &&
+		completion.value !== undefined
+	) {
+		return completion;
+	}
+	return {
+		action: 'insert-at-caret',
+		value: completion as React.ReactNode,
+	};
+}
+
+const initialState: AutocompleteState = {
+	selectedIndex: 0,
+	filteredOptions: EMPTY_FILTERED_OPTIONS,
+	filterValue: '',
+	autocompleter: null,
+};
+
+function autocompleteReducer(
+	state: AutocompleteState,
+	action: AutocompleteAction
+): AutocompleteState {
+	switch ( action.type ) {
+		case 'RESET':
+			return initialState;
+		case 'SELECT':
+			return { ...state, selectedIndex: action.index };
+		case 'OPTIONS':
+			return {
+				...state,
+				filteredOptions: action.options,
+				selectedIndex:
+					action.options.length === state.filteredOptions.length
+						? state.selectedIndex
+						: 0,
+			};
+		case 'MATCH':
+			return {
+				...state,
+				autocompleter: action.completer,
+				filterValue: action.query,
+			};
+	}
+}
+
 export function useAutocomplete( {
 	record,
 	onChange,
@@ -55,19 +103,9 @@ export function useAutocomplete( {
 	contentRef,
 }: UseAutocompleteProps ) {
 	const instanceId = useInstanceId( AUTOCOMPLETE_HOOK_REFERENCE );
-	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
-
-	const [ filteredOptions, setFilteredOptions ] = useState<
-		Array< KeyedOption >
-	>( EMPTY_FILTERED_OPTIONS );
-	const [ filterValue, setFilterValue ] =
-		useState< AutocompleterUIProps[ 'filterValue' ] >( '' );
-	const [ autocompleter, setAutocompleter ] = useState< WPCompleter | null >(
-		null
-	);
-	const [ AutocompleterUI, setAutocompleterUI ] = useState<
-		( ( props: AutocompleterUIProps ) => React.JSX.Element | null ) | null
-	>( null );
+	const [ state, dispatch ] = useReducer( autocompleteReducer, initialState );
+	const { selectedIndex, filteredOptions, filterValue, autocompleter } =
+		state;
 
 	const backspacingRef = useRef( false );
 
@@ -91,27 +129,9 @@ export function useAutocomplete( {
 		}
 
 		if ( getOptionCompletion ) {
-			const completion = getOptionCompletion( option.value, filterValue );
-
-			const isCompletionObject = (
-				obj: OptionCompletion
-			): obj is InsertOption | ReplaceOption => {
-				return (
-					obj !== null &&
-					typeof obj === 'object' &&
-					'action' in obj &&
-					obj.action !== undefined &&
-					'value' in obj &&
-					obj.value !== undefined
-				);
-			};
-
-			const completionObject = isCompletionObject( completion )
-				? completion
-				: ( {
-						action: 'insert-at-caret',
-						value: completion,
-				  } as InsertOption );
+			const completionObject = getCompletionObject(
+				getOptionCompletion( option.value, filterValue )
+			);
 
 			if ( 'replace' === completionObject.action ) {
 				onReplace( [ completionObject.value ] );
@@ -125,31 +145,15 @@ export function useAutocomplete( {
 
 		// Reset autocomplete state after insertion rather than before
 		// so insertion events don't cause the completion menu to redisplay.
-		reset();
+		dispatch( { type: 'RESET' } );
 
 		// Make sure that the content remains focused after making a selection
 		// and that the text cursor position is not lost.
 		contentRef.current?.focus();
 	}
 
-	function reset() {
-		setSelectedIndex( 0 );
-		setFilteredOptions( EMPTY_FILTERED_OPTIONS );
-		setFilterValue( '' );
-		setAutocompleter( null );
-		setAutocompleterUI( null );
-	}
-
-	/**
-	 * Load options for an autocompleter.
-	 *
-	 * @param {Array} options
-	 */
 	function onChangeOptions( options: Array< KeyedOption > ) {
-		setSelectedIndex(
-			options.length === filteredOptions.length ? selectedIndex : 0
-		);
-		setFilteredOptions( options );
+		dispatch( { type: 'OPTIONS', options } );
 	}
 
 	function handleKeyDown( event: KeyboardEvent ) {
@@ -167,12 +171,13 @@ export function useAutocomplete( {
 		}
 
 		switch ( event.key ) {
-			case 'ArrowUp': {
+			case 'ArrowUp':
+			case 'ArrowDown': {
+				const offset = event.key === 'ArrowUp' ? -1 : 1;
 				const newIndex =
-					( selectedIndex === 0
-						? filteredOptions.length
-						: selectedIndex ) - 1;
-				setSelectedIndex( newIndex );
+					( selectedIndex + offset + filteredOptions.length ) %
+					filteredOptions.length;
+				dispatch( { type: 'SELECT', index: newIndex } );
 				// See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
 				if ( isAppleOS() ) {
 					speak(
@@ -183,21 +188,8 @@ export function useAutocomplete( {
 				break;
 			}
 
-			case 'ArrowDown': {
-				const newIndex = ( selectedIndex + 1 ) % filteredOptions.length;
-				setSelectedIndex( newIndex );
-				if ( isAppleOS() ) {
-					speak(
-						getNodeText( filteredOptions[ newIndex ].label ),
-						'assertive'
-					);
-				}
-				break;
-			}
-
 			case 'Escape':
-				setAutocompleter( null );
-				setAutocompleterUI( null );
+				dispatch( { type: 'RESET' } );
 				event.preventDefault();
 				break;
 
@@ -207,7 +199,7 @@ export function useAutocomplete( {
 
 			case 'ArrowLeft':
 			case 'ArrowRight':
-				reset();
+				dispatch( { type: 'RESET' } );
 				return;
 
 			default:
@@ -230,132 +222,36 @@ export function useAutocomplete( {
 	}, [ record ] );
 
 	useEffect( () => {
-		if ( ! textContent ) {
-			if ( autocompleter ) {
-				reset();
-			}
-			return;
-		}
-
-		// Find the completer with the highest triggerPrefix index in the
-		// textContent.
-		const completer = completers.reduce< WPCompleter | null >(
-			( lastTrigger, currentCompleter ) => {
-				const triggerIndex = textContent.lastIndexOf(
-					currentCompleter.triggerPrefix
-				);
-				const lastTriggerIndex =
-					lastTrigger !== null
-						? textContent.lastIndexOf( lastTrigger.triggerPrefix )
-						: -1;
-
-				return triggerIndex > lastTriggerIndex
-					? currentCompleter
-					: lastTrigger;
-			},
-			null
-		);
-
-		if ( ! completer ) {
-			if ( autocompleter ) {
-				reset();
-			}
-			return;
-		}
-
-		const { allowContext, triggerPrefix } = completer;
-		const triggerIndex = textContent.lastIndexOf( triggerPrefix );
-		const textWithoutTrigger = textContent.slice(
-			triggerIndex + triggerPrefix.length
-		);
-
-		const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
-		// This is a final barrier to prevent the effect from completing with
-		// an extremely long string, which causes the editor to slow-down
-		// significantly. This could happen, for example, if `matchingWhileBackspacing`
-		// is true and one of the "words" end up being too long. If that's the case,
-		// it will be caught by this guard.
-		if ( tooDistantFromTrigger ) {
-			return;
-		}
-
-		const mismatch = filteredOptions.length === 0;
-		const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
-		// We need to allow the effect to run when not backspacing and if there
-		// was a mismatch. i.e when typing a trigger + the match string or when
-		// clicking in an existing trigger word on the page. We do that if we
-		// detect that we have one word from trigger in the current textual context.
-		//
-		// Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
-		// allow the effect to run. It will run until there's a mismatch.
-		const hasOneTriggerWord = wordsFromTrigger.length === 1;
-		// This is used to allow the effect to run when backspacing and if
-		// "touching" a word that "belongs" to a trigger. We consider a "trigger
-		// word" any word up to the limit of 3 from the trigger character.
-		// Anything beyond that is ignored if there's a mismatch. This allows
-		// us to "escape" a mismatch when backspacing, but still imposing some
-		// sane limits.
-		//
-		// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
-		// if the user presses backspace here, it will show the completion popup again.
-		const matchingWhileBackspacing =
-			backspacingRef.current && wordsFromTrigger.length <= 3;
-
-		if ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {
-			if ( autocompleter ) {
-				reset();
-			}
-			return;
+		function getTextAfterSelection() {
+			return textContent
+				? getTextContent(
+						slice(
+							record,
+							undefined,
+							getTextContent( record ).length
+						)
+				  )
+				: '';
 		}
 
-		const textAfterSelection = getTextContent(
-			slice( record, undefined, getTextContent( record ).length )
+		const match = getAutocompleteMatch(
+			textContent,
+			completers,
+			filteredOptions.length,
+			backspacingRef.current,
+			getTextAfterSelection
 		);
 
-		if (
-			allowContext &&
-			! allowContext(
-				textContent.slice( 0, triggerIndex ),
-				textAfterSelection
-			)
-		) {
+		if ( ! match ) {
 			if ( autocompleter ) {
-				reset();
+				dispatch( { type: 'RESET' } );
 			}
 			return;
 		}
 
-		if (
-			/^\s/.test( textWithoutTrigger ) ||
-			/\s\s+$/.test( textWithoutTrigger )
-		) {
-			if ( autocompleter ) {
-				reset();
-			}
-			return;
-		}
+		const { completer, filterValue: query } = match;
 
-		if ( ! /[\u0000-\uFFFF]*$/.test( textWithoutTrigger ) ) {
-			if ( autocompleter ) {
-				reset();
-			}
-			return;
-		}
-
-		const safeTrigger = escapeRegExp( completer.triggerPrefix );
-		const text = removeAccents( textContent );
-		const match = text
-			.slice( text.lastIndexOf( completer.triggerPrefix ) )
-			.match( new RegExp( `${ safeTrigger }([\u0000-\uFFFF]*)$` ) );
-		const query = match && match[ 1 ];
-
-		setAutocompleter( completer );
-		setAutocompleterUI( () =>
-			completer !== autocompleter
-				? getAutoCompleterUI( completer )
-				: AutocompleterUI
-		);
-		setFilterValue( query === null ? '' : query );
+		dispatch( { type: 'MATCH', completer, query } );
 		// We want to avoid introducing unexpected side effects.
 		// See https://github.com/WordPress/gutenberg/pull/41820
 	}, [ textContent ] );
@@ -370,7 +266,7 @@ export function useAutocomplete( {
 		? `components-autocomplete-item-${ instanceId }-${ selectedKey }`
 		: null;
 	const hasSelection = record.start !== undefined;
-	const showPopover = !! textContent && hasSelection && !! AutocompleterUI;
+	const showPopover = !! textContent && hasSelection && !! autocompleter;
 
 	return {
 		listBoxId,
@@ -378,6 +274,8 @@ export function useAutocomplete( {
 		onKeyDown: withIgnoreIMEEvents( handleKeyDown ),
 		popover: showPopover && (
 			<AutocompleterUI
+				key={ autocompleter.name + autocompleter.triggerPrefix }
+				autocompleter={ autocompleter }
 				className={ className }
 				filterValue={ filterValue }
 				instanceId={ instanceId }
@@ -385,25 +283,48 @@ export function useAutocomplete( {
 				selectedIndex={ selectedIndex }
 				onChangeOptions={ onChangeOptions }
 				onSelect={ select }
-				value={ record }
 				contentRef={ contentRef }
-				reset={ reset }
+				reset={ () => dispatch( { type: 'RESET' } ) }
 			/>
 		),
 	};
 }
 
-function useLastDifferentValue( value: UseAutocompleteProps[ 'record' ] ) {
-	const history = useRef< Set< typeof value > >( new Set() );
+/**
+ * Checks whether two records represent the same user-visible state
+ * (same text content and cursor position).
+ */
+function recordValuesMatch(
+	a: UseAutocompleteProps[ 'record' ],
+	b: UseAutocompleteProps[ 'record' ]
+) {
+	return a.text === b.text && a.start === b.start && a.end === b.end;
+}
 
-	history.current.add( value );
+/**
+ * Tracks the last record whose value differed from the current one.
+ * Used to determine whether the user has actually typed something
+ */
+export function useLastDifferentValue(
+	value: UseAutocompleteProps[ 'record' ]
+) {
+	const history = useRef< Array< typeof value > >( [] );
+
+	const lastEntry = history.current[ history.current.length - 1 ];
+
+	// Only add to history if the value is meaningfully different from
+	// the most recent entry (analogous to Set.add being a no-op for
+	// duplicate references in the original implementation).
+	if ( ! lastEntry || ! recordValuesMatch( value, lastEntry ) ) {
+		history.current.push( value );
+	}
 
 	// Keep the history size to 2.
-	if ( history.current.size > 2 ) {
-		history.current.delete( Array.from( history.current )[ 0 ] );
+	if ( history.current.length > 2 ) {
+		history.current.shift();
 	}
 
-	return Array.from( history.current )[ 0 ];
+	return history.current[ 0 ];
 }
 
 export function useAutocompleteProps( options: UseAutocompleteProps ) {