@wordpress/components 32.5.0 → 32.6.0

package/src/autocomplete/autocompleter-ui.tsx

@@ -25,7 +25,7 @@ import getDefaultUseItems from './get-default-use-items';
 import Button from '../button';
 import Popover from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
-import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
+import type { AutocompleterUIProps, KeyedOption } from './types';
 
 type ListBoxProps = {
 	items: KeyedOption[];
@@ -79,112 +79,125 @@ function ListBox( {
 	);
 }
 
-export function getAutoCompleterUI( autocompleter: WPCompleter ) {
+export function AutocompleterUI( {
+	autocompleter,
+	filterValue,
+	instanceId,
+	listBoxId,
+	className,
+	selectedIndex,
+	onChangeOptions,
+	onSelect,
+	reset,
+	contentRef,
+}: AutocompleterUIProps ) {
+	// The useItems hook is derived from the autocompleter prop. This is safe
+	// because the parent renders this component with key={autocompleter.name},
+	// ensuring a fresh mount (and stable hook identity) when the completer changes.
 	const useItems =
 		autocompleter.useItems ?? getDefaultUseItems( autocompleter );
+	// eslint-disable-next-line react-compiler/react-compiler
+	const [ items ] = useItems( filterValue );
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+	} );
+
+	const [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );
+	const popoverRef = useRef< HTMLElement >( null );
+	const popoverRefs = useMergeRefs( [
+		popoverRef,
+		useRefEffect(
+			( node ) => {
+				if ( ! contentRef.current ) {
+					return;
+				}
 
-	function AutocompleterUI( {
-		filterValue,
-		instanceId,
-		listBoxId,
-		className,
-		selectedIndex,
-		onChangeOptions,
-		onSelect,
-		onReset,
-		reset,
-		contentRef,
-	}: AutocompleterUIProps ) {
-		const [ items ] = useItems( filterValue );
-		const popoverAnchor = useAnchor( {
-			editableContentElement: contentRef.current,
-		} );
-
-		const [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );
-		const popoverRef = useRef< HTMLElement >( null );
-		const popoverRefs = useMergeRefs( [
-			popoverRef,
-			useRefEffect(
-				( node ) => {
-					if ( ! contentRef.current ) {
-						return;
-					}
-
-					// If the popover is rendered in a different document than
-					// the content, we need to duplicate the options list in the
-					// content document so that it's available to the screen
-					// readers, which check the DOM ID based aria-* attributes.
-					setNeedsA11yCompat(
-						node.ownerDocument !== contentRef.current.ownerDocument
-					);
-				},
-				[ contentRef ]
-			),
-		] );
-
-		useOnClickOutside( popoverRef, reset );
-
-		const debouncedSpeak = useDebounce( speak, 500 );
-
-		function announce( options: Array< KeyedOption > ) {
-			if ( ! debouncedSpeak ) {
-				return;
-			}
-			if ( !! options.length ) {
-				if ( filterValue ) {
-					debouncedSpeak(
-						sprintf(
-							/* translators: %d: number of results. */
-							_n(
-								'%d result found, use up and down arrow keys to navigate.',
-								'%d results found, use up and down arrow keys to navigate.',
-								options.length
-							),
+				// If the popover is rendered in a different document than
+				// the content, we need to duplicate the options list in the
+				// content document so that it's available to the screen
+				// readers, which check the DOM ID based aria-* attributes.
+				setNeedsA11yCompat(
+					node.ownerDocument !== contentRef.current.ownerDocument
+				);
+			},
+			[ contentRef ]
+		),
+	] );
+
+	useOnClickOutside( popoverRef, reset );
+
+	const debouncedSpeak = useDebounce( speak, 500 );
+
+	function announce( options: Array< KeyedOption > ) {
+		if ( ! debouncedSpeak ) {
+			return;
+		}
+		if ( !! options.length ) {
+			if ( filterValue ) {
+				debouncedSpeak(
+					sprintf(
+						/* translators: %d: number of results. */
+						_n(
+							'%d result found, use up and down arrow keys to navigate.',
+							'%d results found, use up and down arrow keys to navigate.',
 							options.length
 						),
-						'assertive'
-					);
-				} else {
-					debouncedSpeak(
-						sprintf(
-							/* translators: %d: number of results. */
-							_n(
-								'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
-								'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
-								options.length
-							),
+						options.length
+					),
+					'assertive'
+				);
+			} else {
+				debouncedSpeak(
+					sprintf(
+						/* translators: %d: number of results. */
+						_n(
+							'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+							'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
 							options.length
 						),
-						'assertive'
-					);
-				}
-			} else {
-				debouncedSpeak( __( 'No results.' ), 'assertive' );
+						options.length
+					),
+					'assertive'
+				);
 			}
+		} else {
+			debouncedSpeak( __( 'No results.' ), 'assertive' );
 		}
+	}
 
-		useLayoutEffect( () => {
-			onChangeOptions( items );
-			announce( items );
-			// We want to avoid introducing unexpected side effects.
-			// See https://github.com/WordPress/gutenberg/pull/41820
-		}, [ items ] );
+	useLayoutEffect( () => {
+		onChangeOptions( items );
+		announce( items );
+		// We want to avoid introducing unexpected side effects.
+		// See https://github.com/WordPress/gutenberg/pull/41820
+	}, [ items ] );
 
-		if ( items.length === 0 ) {
-			return null;
-		}
+	if ( items.length === 0 ) {
+		return null;
+	}
 
-		return (
-			<>
-				<Popover
-					offset={ 8 }
-					focusOnMount={ false }
-					onClose={ onReset }
-					placement="top-start"
-					className="components-autocomplete__popover"
-					anchor={ popoverAnchor }
-					ref={ popoverRefs }
-				>
+	return (
+		<>
+			<Popover
+				offset={ 8 }
+				focusOnMount={ false }
+				placement="top-start"
+				className="components-autocomplete__popover"
+				anchor={ popoverAnchor }
+				ref={ popoverRefs }
+			>
+				<ListBox
+					items={ items }
+					onSelect={ onSelect }
+					selectedIndex={ selectedIndex }
+					instanceId={ instanceId }
+					listBoxId={ listBoxId }
+					className={ className }
+				/>
+			</Popover>
+			{ contentRef.current &&
+				needsA11yCompat &&
+				createPortal(
 					<ListBox
 						items={ items }
 						onSelect={ onSelect }
@@ -192,27 +205,12 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 						instanceId={ instanceId }
 						listBoxId={ listBoxId }
 						className={ className }
-					/>
-				</Popover>
-				{ contentRef.current &&
-					needsA11yCompat &&
-					createPortal(
-						<ListBox
-							items={ items }
-							onSelect={ onSelect }
-							selectedIndex={ selectedIndex }
-							instanceId={ instanceId }
-							listBoxId={ listBoxId }
-							className={ className }
-							Component={ VisuallyHidden }
-						/>,
-						contentRef.current.ownerDocument.body
-					) }
-			</>
-		);
-	}
-
-	return AutocompleterUI;
+						Component={ VisuallyHidden }
+					/>,
+					contentRef.current.ownerDocument.body
+				) }
+		</>
+	);
 }
 
 function useOnClickOutside(

package/src/autocomplete/get-autocomplete-match.ts

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Internal dependencies
+ */
+import type { WPCompleter } from './types';
+
+type AutocompleteMatch = {
+	completer: WPCompleter;
+	filterValue: string;
+};
+
+export function getAutocompleteMatch(
+	textContent: string,
+	completers: WPCompleter[],
+	filteredOptionsLength: number,
+	isBackspacing: boolean,
+	getTextAfterSelection: () => string
+): AutocompleteMatch | null {
+	if ( ! textContent ) {
+		return null;
+	}
+
+	// Find the completer whose trigger prefix ends closest to the cursor
+	// (rightmost end position). Comparing end positions instead of start
+	// positions correctly resolves overlapping prefixes like "@" and "@@".
+	let completer: WPCompleter | null = null;
+	let triggerIndex = -1;
+	let matchedEndIndex = -1;
+	let matchedPrefixLength = 0;
+
+	for ( const currentCompleter of completers ) {
+		const currentIndex = textContent.lastIndexOf(
+			currentCompleter.triggerPrefix
+		);
+		if ( currentIndex < 0 ) {
+			continue;
+		}
+		const currentEndIndex =
+			currentIndex + currentCompleter.triggerPrefix.length;
+		if (
+			currentEndIndex > matchedEndIndex ||
+			( currentEndIndex === matchedEndIndex &&
+				currentCompleter.triggerPrefix.length > matchedPrefixLength )
+		) {
+			completer = currentCompleter;
+			triggerIndex = currentIndex;
+			matchedEndIndex = currentEndIndex;
+			matchedPrefixLength = currentCompleter.triggerPrefix.length;
+		}
+	}
+
+	if ( ! completer ) {
+		return null;
+	}
+
+	const { allowContext, triggerPrefix } = completer;
+	const textWithoutTrigger = textContent.slice(
+		triggerIndex + triggerPrefix.length
+	);
+
+	// Prevent matching 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" ends up being too long. Returning null here intentionally
+	// resets the autocompleter state in the caller.
+	if ( textWithoutTrigger.length > 50 ) {
+		return null;
+	}
+
+	const mismatch = filteredOptionsLength === 0;
+	const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
+
+	// Allow matching when typing a trigger + the match string or when
+	// clicking in an existing trigger word on the page.
+	// E.g. "Some text @a" — "@a" is detected as a trigger word.
+	const hasOneTriggerWord = wordsFromTrigger.length === 1;
+
+	// Allow matching when backspacing near a trigger word (up to 3
+	// words from the trigger character). This lets us recover from a
+	// mismatch when backspacing while still imposing sane limits.
+	// E.g. "Some text @marcelo sekkkk" — backspacing "kkkk" re-shows
+	// the popup once the text matches again.
+	const matchingWhileBackspacing =
+		isBackspacing && wordsFromTrigger.length <= 3;
+
+	if ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {
+		return null;
+	}
+
+	if (
+		allowContext &&
+		! allowContext(
+			textContent.slice( 0, triggerIndex ),
+			getTextAfterSelection()
+		)
+	) {
+		return null;
+	}
+
+	if (
+		/^\s/.test( textWithoutTrigger ) ||
+		/\s\s+$/.test( textWithoutTrigger )
+	) {
+		return null;
+	}
+
+	return {
+		completer,
+		filterValue: removeAccents( textWithoutTrigger ),
+	};
+}