@gechiui/block-editor/src/components/text-decoration-control/index.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { Button } from '@gechiui/components';
import { formatStrikethrough, formatUnderline } from '@gechiui/icons';
import { __ } from '@gechiui/i18n';

const TEXT_DECORATIONS = [
	{
		name: __( '下划线' ),
		value: 'underline',
		icon: formatUnderline,
	},
	{
		name: __( '删除线' ),
		value: 'line-through',
		icon: formatStrikethrough,
	},
];

/**
 * Control to facilitate text decoration selections.
 *
 * @param {Object}   props          Component props.
 * @param {string}   props.value    Currently selected text decoration.
 * @param {Function} props.onChange Handles change in text decoration selection.
 *
 * @return {GCElement} Text decoration control.
 */
export default function TextDecorationControl( { value, onChange } ) {
	return (
		<fieldset className="block-editor-text-decoration-control">
			<legend>{ __( '装饰' ) }</legend>
			<div className="block-editor-text-decoration-control__buttons">
				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
					return (
						<Button
							key={ textDecoration.value }
							icon={ textDecoration.icon }
							isSmall
							isPressed={ textDecoration.value === value }
							onClick={ () =>
								onChange(
									textDecoration.value === value
										? undefined
										: textDecoration.value
								)
							}
							aria-label={ textDecoration.name }
						/>
					);
				} ) }
			</div>
		</fieldset>
	);
}