@gechiui/block-editor/src/components/writing-flow/index.js

Generic block editor.

/**
 * External dependencies
 */
import classNames from 'classnames';

/**
 * GeChiUI dependencies
 */
import { useSelect } from '@gechiui/data';
import { __ } from '@gechiui/i18n';
import { useMergeRefs, useRefEffect } from '@gechiui/compose';
import { forwardRef } from '@gechiui/element';

/**
 * Internal dependencies
 */
import useMultiSelection from './use-multi-selection';
import useTabNav from './use-tab-nav';
import useArrowNav from './use-arrow-nav';
import useSelectAll from './use-select-all';
import { store as blockEditorStore } from '../../store';

export function useWritingFlow() {
	const [ before, ref, after ] = useTabNav();
	const hasMultiSelection = useSelect(
		( select ) => select( blockEditorStore ).hasMultiSelection(),
		[]
	);

	return [
		before,
		useMergeRefs( [
			ref,
			useMultiSelection(),
			useSelectAll(),
			useArrowNav(),
			useRefEffect(
				( node ) => {
					node.tabIndex = -1;

					if ( ! hasMultiSelection ) {
						return;
					}

					node.setAttribute(
						'aria-label',
						__( '多个选定的区块' )
					);

					return () => {
						node.removeAttribute( 'aria-label' );
					};
				},
				[ hasMultiSelection ]
			),
		] ),
		after,
	];
}

function WritingFlow( { children, ...props }, forwardedRef ) {
	const [ before, ref, after ] = useWritingFlow();
	return (
		<>
			{ before }
			<div
				{ ...props }
				ref={ useMergeRefs( [ ref, forwardedRef ] ) }
				className={ classNames(
					props.className,
					'block-editor-writing-flow'
				) }
			>
				{ children }
			</div>
			{ after }
		</>
	);
}

/**
 * Handles selection and navigation across blocks. This component should be
 * wrapped around BlockList.
 *
 * @param {Object}    props          Component properties.
 * @param {GCElement} props.children Children to be rendered.
 */
export default forwardRef( WritingFlow );