packages/format-library/src/language/index.js - trunk - githubmirror/gutenberg

packages/format-library/src/language/index.js
131 строка3 KB
Marco Ciampini
ESLint: Replace strict config with bulk suppressions (#81248)
07 авг 2026, 14:34
07 авг 2026, 14:347f43eaf
import { __ } from '@wordpress/i18n';
import { RichTextToolbarButton } from '@wordpress/block-editor';
import {
	TextControl,
	SelectControl,
	Button,
	Popover,
} from '@wordpress/components';
import { Stack } from '@wordpress/ui';
import { useState } from '@wordpress/element';
import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
import { language as languageIcon } from '@wordpress/icons';

const name = 'core/language';
const title = __( 'Language' );

export const language = {
	name,
	title,
	tagName: 'bdo',
	className: null,
	attributes: {
		lang: 'lang',
		dir: 'dir',
	},
	edit: Edit,
};

function Edit( { isActive, value, onChange, contentRef } ) {
	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
	const togglePopover = () => {
		setIsPopoverVisible( ( state ) => ! state );
	};

	return (
		<>
			<RichTextToolbarButton
				icon={ languageIcon }
				label={ title }
				title={ title }
				onClick={ () => {
					if ( isActive ) {
						onChange( removeFormat( value, name ) );
					} else {
						togglePopover();
					}
				} }
				isActive={ isActive }
				role="menuitemcheckbox"
			/>
			{ isPopoverVisible && (
				<InlineLanguageUI
					value={ value }
					onChange={ onChange }
					onClose={ togglePopover }
					contentRef={ contentRef }
				/>
			) }
		</>
	);
}

function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
	const popoverAnchor = useAnchor( {
		editableContentElement: contentRef.current,
		settings: language,
	} );

	const [ lang, setLang ] = useState( '' );
	const [ dir, setDir ] = useState( 'ltr' );

	return (
		<Popover
			className="block-editor-format-toolbar__language-popover"
			anchor={ popoverAnchor }
			onClose={ onClose }
		>
			<Stack
				render={ <form /> }
				direction="column"
				gap="lg"
				className="block-editor-format-toolbar__language-container-content"
				onSubmit={ ( event ) => {
					event.preventDefault();
					onChange(
						applyFormat( value, {
							type: name,
							attributes: {
								lang,
								dir,
							},
						} )
					);
					onClose();
				} }
			>
				<TextControl
					label={ title }
					value={ lang }
					onChange={ ( val ) => setLang( val ) }
					help={ __(
						'A valid language attribute, like "en" or "fr".'
					) }
				/>
				<SelectControl
					label={ __( 'Text direction' ) }
					value={ dir }
					options={ [
						{
							label: __( 'Left to right' ),
							value: 'ltr',
						},
						{
							label: __( 'Right to left' ),
							value: 'rtl',
						},
					] }
					onChange={ ( val ) => setDir( val ) }
				/>
				<Stack justify="right">
					<Button
						__next40pxDefaultSize
						variant="primary"
						type="submit"
						text={ __( 'Apply' ) }
					/>
				</Stack>
			</Stack>
		</Popover>
	);
}