import { Fragment, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { toggleFormat, registerFormatType, insert, applyFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton, RichTextShortcut } from '@wordpress/block-editor';
import InputPopover from './_input-popover';
registerFormatType( 'wp-yomigana/rt', {
title: __( 'Ruby Character', 'wp-yomigana' ),
tagName: 'rt',
className: null,
edit( {isActive, value, onChange} ) {
return ;
}
} );
registerFormatType( 'wp-yomigana/ruby', {
title: __( 'Ruby', 'wp-yomigana' ),
tagName: 'ruby',
className: null,
edit ({ isActive, value, onChange, onFocus, contentRef }) {
const [ isOpen, setIsOpen ] = useState( false );
const onToggle = () => {
if ( isActive ) {
onChange( toggleFormat( value, {
type: 'wp-yomigana/ruby'
} ) );
} else {
setIsOpen( true );
}
};
const onSubmit = ( ruby ) => {
setIsOpen( false );
const rubyEnd = value.end;
const rubyStart = value.start;
let newValue = insert( value, ruby, rubyEnd );
newValue.start = rubyStart;
newValue.end = rubyEnd + ruby.length;
newValue = applyFormat( newValue, {
type: 'wp-yomigana/ruby'
}, rubyStart, rubyEnd + ruby.length );
newValue = applyFormat( newValue, {
type: 'wp-yomigana/rt'
}, rubyEnd, rubyEnd + ruby.length );
onChange( newValue );
onFocus();
};
const onClose = () => {
setIsOpen( false );
onFocus();
};
// @see keycodes/src/index.js
// Command + Alt + r
const shortcutType = 'primaryAlt';
const shortcutCharacter ='r';
const icon = (
);
return (
{ isOpen && (
setIsOpen( false ) } />
) }
)
}
} );