How to avoid wrapping ClassNames【Gutenberg RichText】

I added the buttons for Large, Medium, Small Size Text on Gutenberg RichText Block by using create-guten-blocks. These buttons add ClassName to the selected text when they are clicked. They are working but when I click a button which already has ClassName, it wraps the another ClassName. I mean they end up having double or triple ClassNames..

Like this below..

<span class="text-small"><span class="text-large">text<span><span>

How can I remove the previous ClassName when I click the one which has already ClassName?

Thank you.

     //Large Text
    var TextLarge = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
            icon: <svg xmlns="svg".../></svg>,
                title: 'Large Text,
                onClick: function() {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'my-blocks/text-large' }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }
    var LButton = compose(
        withSelect( function( select ) {
            return {
                selectedBlock: select( 'core/editor' ).getSelectedBlock()
            }
        } ),
        ifCondition( function( props ) {
            return (
                props.selectedBlock &&
                props.selectedBlock.name !== 'core/heading'
            );
        } )
    )( TextLarge );

    wp.richText.registerFormatType(
        'my-blocks/text-large', {
            title: 'Large Text',
            tagName: 'span',
            className: 'text-large',
            edit: LButton,
        }
    );

    //Medium Text
    var TextMedium = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
            icon: <svg xmlns="svg".../></svg>,
                title: 'Medium Text',
                onClick: function() {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'my-blocks/text-medium' }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }
    var MButton = compose(
        withSelect( function( select ) {
            return {
                selectedBlock: select( 'core/editor' ).getSelectedBlock()
            }
        } ),
        ifCondition( function( props ) {
            return (
                props.selectedBlock &&
                props.selectedBlock.name !== 'core/heading'
            );
        } )
    )( TextMedium );

    wp.richText.registerFormatType(
        'my-blocks/text-medium', {
            title: 'Medium Text',
            tagName: 'span',
            className: 'text-medium',
            edit: MButton,
        }
    );

    //Small Text
    var TextSmall = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
            icon: <svg xmlns="svg".../></svg>,
                title: 'Small Text',
                onClick: function() {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'my-blocks/text-small' }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }
    var SButton = compose(
        withSelect( function( select ) {
            return {
                selectedBlock: select( 'core/editor' ).getSelectedBlock()
            }
        } ),
        ifCondition( function( props ) {
            return (
                props.selectedBlock &&
                props.selectedBlock.name !== 'core/heading'
            );
        } )
    )( TextSmall );

    wp.richText.registerFormatType(
        'my-blocks/text-small', {
            title: 'Small Text',
            tagName: 'span',
            className: 'text-small',
            edit: SButton,
        }
    );