Multi select: select all: restore ref callback

packages/block-editor/src/components/writing-flow/use-select-all.js

@@ -7,64 +7,70 @@ import { first, last } from 'lodash';
  * WordPress dependencies
  */
 import { isEntirelySelected } from '@wordpress/dom';
-import { useRef, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 
 export default function useSelectAll() {
-	const ref = useRef();
 	const {
 		getBlockOrder,
 		getSelectedBlockClientIds,
 		getBlockRootClientId,
 	} = useSelect( blockEditorStore );
 	const { multiSelect } = useDispatch( blockEditorStore );
+	const isMatch = useShortcutEventMatch();
 
-	const callback = useCallback( ( event ) => {
-		const selectedClientIds = getSelectedBlockClientIds();
+	return useRefEffect( ( node ) => {
+		function onKeyDown( event ) {
+			const selectedClientIds = getSelectedBlockClientIds();
 
-		if ( ! selectedClientIds.length ) {
-			return;
-		}
+			if ( ! selectedClientIds.length ) {
+				return;
+			}
 
-		if (
-			selectedClientIds.length === 1 &&
-			! isEntirelySelected( event.target )
-		) {
-			return;
-		}
+			if ( ! isMatch( 'core/block-editor/select-all', event ) ) {
+				return;
+			}
 
-		const [ firstSelectedClientId ] = selectedClientIds;
-		const rootClientId = getBlockRootClientId( firstSelectedClientId );
-		let blockClientIds = getBlockOrder( rootClientId );
+			if (
+				selectedClientIds.length === 1 &&
+				! isEntirelySelected( event.target )
+			) {
+				return;
+			}
 
-		// If we have selected all sibling nested blocks, try selecting up a
-		// level. See: https://github.com/WordPress/gutenberg/pull/31859/
-		if ( selectedClientIds.length === blockClientIds.length ) {
-			blockClientIds = getBlockOrder(
-				getBlockRootClientId( rootClientId )
-			);
-		}
+			const [ firstSelectedClientId ] = selectedClientIds;
+			const rootClientId = getBlockRootClientId( firstSelectedClientId );
+			let blockClientIds = getBlockOrder( rootClientId );
 
-		const firstClientId = first( blockClientIds );
-		const lastClientId = last( blockClientIds );
+			// If we have selected all sibling nested blocks, try selecting up a
+			// level. See: https://github.com/WordPress/gutenberg/pull/31859/
+			if ( selectedClientIds.length === blockClientIds.length ) {
+				blockClientIds = getBlockOrder(
+					getBlockRootClientId( rootClientId )
+				);
+			}
 
-		if ( firstClientId === lastClientId ) {
-			return;
+			const firstClientId = first( blockClientIds );
+			const lastClientId = last( blockClientIds );
+
+			if ( firstClientId === lastClientId ) {
+				return;
+			}
+
+			multiSelect( firstClientId, lastClientId );
+			event.preventDefault();
 		}
 
-		multiSelect( firstClientId, lastClientId );
-		event.preventDefault();
-	}, [] );
+		node.addEventListener( 'keydown', onKeyDown );
 
-	useShortcut( 'core/block-editor/select-all', callback, {
-		target: ref,
+		return () => {
+			node.removeEventListener( 'keydown', onKeyDown );
+		};
 	} );
-
-	return ref;
 }

packages/keyboard-shortcuts/src/hooks/use-shortcut-event-match.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isKeyboardEvent } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as keyboardShortcutsStore } from '../store';
+
+/**
+ * Returns a function to check if a keyboard event matches a shortcut name.
+ *
+ * @return {Function} A function to to check if a keyboard event matches a
+ *                    predefined shortcut combination.
+ */
+export default function useShortcutEventMatch() {
+	const { getAllShortcutKeyCombinations } = useSelect(
+		keyboardShortcutsStore
+	);
+
+	/**
+	 * A function to check if a keyboard event matches a predefined shortcut
+	 * combination.
+	 *
+	 * @param {string}        name  Shortcut name.
+	 * @param {KeyboardEvent} event Event to check.
+	 *
+	 * @return {boolean} True if the event matches any shortcuts, false if not.
+	 */
+	function isMatch( name, event ) {
+		return getAllShortcutKeyCombinations( name ).some(
+			( { modifier, character } ) => {
+				return isKeyboardEvent[ modifier ]( event, character );
+			}
+		);
+	}
+
+	return isMatch;
+}

packages/keyboard-shortcuts/src/index.js

@@ -1,2 +1,3 @@
 export { store } from './store';
 export { default as useShortcut } from './hooks/use-shortcut';
+export { default as __unstableUseShortcutEventMatch } from './hooks/use-shortcut-event-match';

packages/keyboard-shortcuts/src/store/selectors.js

@@ -116,6 +116,16 @@ export function getShortcutAliases( state, name ) {
 		: EMPTY_ARRAY;
 }
 
+export const getAllShortcutKeyCombinations = createSelector(
+	( state, name ) => {
+		return compact( [
+			getShortcutKeyCombination( state, name ),
+			...getShortcutAliases( state, name ),
+		] );
+	},
+	( state, name ) => [ state[ name ] ]
+);
+
 /**
  * Returns the raw representation of all the keyboard combinations of a given shortcut name.
  *
@@ -126,15 +136,12 @@ export function getShortcutAliases( state, name ) {
  */
 export const getAllShortcutRawKeyCombinations = createSelector(
 	( state, name ) => {
-		return compact( [
-			getKeyCombinationRepresentation(
-				getShortcutKeyCombination( state, name ),
-				'raw'
-			),
-			...getShortcutAliases( state, name ).map( ( combination ) =>
-				getKeyCombinationRepresentation( combination, 'raw' )
-			),
-		] );
+		return getAllShortcutKeyCombinations(
+			state,
+			name
+		).map( ( combination ) =>
+			getKeyCombinationRepresentation( combination, 'raw' )
+		);
 	},
 	( state, name ) => [ state[ name ] ]
 );