/**
 * Block editor rich text format dropdown modifications.
 *
 * @link  https://developer.wordpress.org/block-editor/how-to-guides/format-api/
 * @link  https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86
 * @link  https://github.com/WordPress/gutenberg/tree/trunk/packages/format-library
 *
 * @package    Zooey
 * @copyright  WebMan Design, Oliver Juhas
 *
 * @since  1.2.5
 */

( () => {
	"use strict";

	const { _x } = wp.i18n;

	// <span class="screen-reader-text">
	wp.richText.registerFormatType( 'zooey/span-screen-reader-text', {
		title: _x( 'Accessibly hidden', 'Text format label.', 'zooey' ),
		tagName: 'span',
		className: 'screen-reader-text',
		edit: ( { isActive, onChange, value } ) => React.createElement(
			wp.blockEditor.RichTextToolbarButton,
			{
				// @link  https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/library/unseen.svg
				icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.7 12.7s0-.1-.1-.2c0-.2-.2-.4-.4-.6-.3-.5-.9-1.2-1.6-1.8-.7-.6-1.5-1.3-2.6-1.8l-.6 1.4c.9.4 1.6 1 2.1 1.5.6.6 1.1 1.2 1.4 1.6.1.2.3.4.3.5v.1l.7-.3.7-.3Zm-5.2-9.3-1.8 4c-.5-.1-1.1-.2-1.7-.2-3 0-5.2 1.4-6.6 2.7-.7.7-1.2 1.3-1.6 1.8-.2.3-.3.5-.4.6 0 0 0 .1-.1.2s0 0 .7.3l.7.3V13c0-.1.2-.3.3-.5.3-.4.7-1 1.4-1.6 1.2-1.2 3-2.3 5.5-2.3H13v.3c-.4 0-.8-.1-1.1-.1-1.9 0-3.5 1.6-3.5 3.5s.6 2.3 1.6 2.9l-2 4.4.9.4 7.6-16.2-.9-.4Zm-3 12.6c1.7-.2 3-1.7 3-3.5s-.2-1.4-.6-1.9L12.4 16Z" /></svg>,
				title: _x( 'Accessibly hidden', 'Text format label.', 'zooey' ),
				onClick: () => {
					onChange(
						wp.richText.toggleFormat( value, { type: 'zooey/span-screen-reader-text' } )
					)
				},
				isActive: isActive
			}
		)
	} );

	// <span class="is-aria-hidden" aria-hidden="true">
	wp.richText.registerFormatType( 'zooey/span-aria-hidden', {
		title: _x( 'Hidden for assistive technology', 'Text format label.', 'zooey' ),
		tagName: 'span',
		className: 'is-aria-hidden',
		attributes: {
			ariaHidden: 'aria-hidden',
		},
		edit: ( { isActive, onChange, value } ) => React.createElement(
			wp.blockEditor.RichTextToolbarButton,
			{
				// @link  https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/library/megaphone.svg
				icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="m15.63 3.6-1.76 3.77L5 9.25h-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5H5l1.86.4a3.75 3.75 0 0 0 2.26 3.9l-1.1 2.37 1.1.5 1.2-2.58.72-1.54.75-1.61.65-1.4 2.11-4.53.8-1.7 1.37-2.95ZM18 6.5l-1.19.25-.79 1.7L18.16 8h.34v6.5h-.34l-4.52-.96-1.92 4.14a3.8 3.8 0 0 0 2.45-2.49h-.02L18 16h2V6.5Zm-4.92 2.57-1.85 3.97-5.73-1.22v-1.14Zm-4.74 4.89 2.24.47-.81 1.76a2.25 2.25 0 0 1-1.43-2.23" /></svg>,
				title: _x( 'Hidden for assistive technology', 'Text format label.', 'zooey' ),
				onClick: () => {
					onChange(
						wp.richText.toggleFormat( value, {
							type: 'zooey/span-aria-hidden',
							attributes: {
								ariaHidden: 'true',
							},
						} )
					)
				},
				isActive: isActive
			}
		)
	} );
} )();
