/**
 * Format Toolbar
 * フォーマットツールバーの拡張
 */

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

/**
 * カスタムハイライトフォーマット
 */
registerFormatType( 'zenblocks/highlight', {
	title: __( 'Highlight', 'zenblocks' ),
	tagName: 'mark',
	className: 'zenblocks-highlight',
	edit: ( { isActive, value, onChange } ) => {
		return (
			<RichTextToolbarButton
				icon="admin-appearance"
				title={ __( 'Highlight', 'zenblocks' ) }
				onClick={ () => {
					onChange(
						toggleFormat( value, {
							type: 'zenblocks/highlight',
						} )
					);
				} }
				isActive={ isActive }
			/>
		);
	},
} );

/**
 * カスタム下線フォーマット
 */
registerFormatType( 'zenblocks/underline', {
	title: __( 'Underline', 'zenblocks' ),
	tagName: 'u',
	className: 'zenblocks-underline',
	edit: ( { isActive, value, onChange } ) => {
		return (
			<RichTextToolbarButton
				icon="editor-underline"
				title={ __( 'Underline', 'zenblocks' ) }
				onClick={ () => {
					onChange(
						toggleFormat( value, {
							type: 'zenblocks/underline',
						} )
					);
				} }
				isActive={ isActive }
			/>
		);
	},
} );
