@gechiui/block-editor/src/components/rich-text/format-toolbar/index.js

Generic block editor.

/**
 * External dependencies
 */

import { orderBy } from 'lodash';
import classnames from 'classnames';

/**
 * GeChiUI dependencies
 */

import { __ } from '@gechiui/i18n';
import { ToolbarItem, DropdownMenu, Slot } from '@gechiui/components';
import { chevronDown } from '@gechiui/icons';

const POPOVER_PROPS = {
	position: 'bottom right',
	isAlternate: true,
};

const FormatToolbar = () => {
	return (
		<>
			{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
				<Slot
					name={ `RichText.ToolbarControls.${ format }` }
					key={ format }
				/>
			) ) }
			<Slot name="RichText.ToolbarControls">
				{ ( fills ) => {
					if ( ! fills.length ) {
						return null;
					}

					const allProps = fills.map( ( [ { props } ] ) => props );
					const hasActive = allProps.some(
						( { isActive } ) => isActive
					);

					return (
						<ToolbarItem>
							{ ( toggleProps ) => (
								<DropdownMenu
									icon={ chevronDown }
									/* translators: button label text should, if possible, be under 16 characters. */
									label={ __( '更多' ) }
									toggleProps={ {
										...toggleProps,
										className: classnames(
											toggleProps.className,
											{ 'is-pressed': hasActive }
										),
										describedBy: __(
											'显示更多块工具'
										),
									} }
									controls={ orderBy(
										fills.map( ( [ { props } ] ) => props ),
										'title'
									) }
									popoverProps={ POPOVER_PROPS }
								/>
							) }
						</ToolbarItem>
					);
				} }
			</Slot>
		</>
	);
};

export default FormatToolbar;