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

const formatName = 'homegrade-format/boule';

const BouleButton = (props) => {
  const { isActive, value, onChange } = props;
  return (
    <RichTextToolbarButton
      icon="editor-code"
      title="Boule"
      onClick={() => {
        onChange(
          toggleFormat(value, {
            type: formatName,
          })
        );
      }}
      isActive={isActive}
    />
  );
};
registerFormatType(formatName, {
  title: 'Boule',
  tagName: 'span',
  className: 'boule',
  edit: BouleButton,
});
