Add: Space to indent list item (#39949)

* Add: Space to indent list item

* enhancement conditions

* remove unused import

Co-authored-by: ntsekouras <[email protected]>

packages/block-library/src/list-item/edit.js

@@ -24,6 +24,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import {
 	useEnter,
 	useBackspace,
+	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
 } from './hooks';
@@ -67,11 +68,16 @@ export default function ListItemEdit( {
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useBackspaceRef = useBackspace( { clientId } );
+	const useSpaceRef = useSpace( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [ useEnterRef, useBackspaceRef ] ) }
+					ref={ useMergeRefs( [
+						useEnterRef,
+						useBackspaceRef,
+						useSpaceRef,
+					] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>

packages/block-library/src/list-item/hooks/index.js

@@ -2,3 +2,4 @@ export { default as useOutdentListItem } from './use-outdent-list-item';
 export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
 export { default as useBackspace } from './use-backspace';
+export { default as useSpace } from './use-space';

packages/block-library/src/list-item/hooks/use-space.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { SPACE } from '@wordpress/keycodes';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useIndentListItem from './use-indent-list-item';
+
+export default function useSpace( clientId ) {
+	const { getSelectionStart, getSelectionEnd } = useSelect(
+		blockEditorStore
+	);
+	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
+
+	return useRefEffect(
+		( element ) => {
+			function onKeyDown( event ) {
+				if (
+					event.defaultPrevented ||
+					event.keyCode !== SPACE ||
+					! canIndent
+				) {
+					return;
+				}
+				const selectionStart = getSelectionStart();
+				const selectionEnd = getSelectionEnd();
+				if (
+					selectionStart.offset === 0 &&
+					selectionEnd.offset === 0
+				) {
+					event.preventDefault();
+					indentListItem();
+				}
+			}
+
+			element.addEventListener( 'keydown', onKeyDown );
+			return () => {
+				element.removeEventListener( 'keydown', onKeyDown );
+			};
+		},
+		[ canIndent, indentListItem ]
+	);
+}