Style manager of text type customization

[saharhagekr]

Hello!
Thanks again for this amazing product.

I am trying to implement a minimalistic design for the style manager for the texts. Something like a rich text editor in the side panel.
For that, i created my own set of style objects enabled and it's like a select but with only one button

Enabling the property is working fine, i designed it as i like.
But disabling the property isn't available, since we have to add a 'none' value to the select list for it to disable it. Is there a way to do it in a way that when we click again on the property, it gets disabled?

Thanks again for the help!

`
const styleManagerSectors = [

    {
        name: 'Style',
        open: true,
        properties: [
            'font-family',
            'font-size',
            {
                property: 'font-weight',
                type: 'radio',
                list: [
                    // { value: 'normal', name: 'Normal', className: 'fa fa-times'},
                    { value: 'bold', name: 'Bold', className: 'fa fa-bold'}
                ]
            },
            {
                property: 'text-decoration',
                type: 'radio',
                defaults: 'none',
                list: [
                  { value: 'underline', name: 'underline', className: 'fa fa-underline' },
                ],
            },
            {
                property: 'text-decoration',
                type: 'radio',
                defaults: 'none',
                list: [
                  { value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough'}
                ],
            },
            {
                property: 'text-style',
                type: 'radio',
                defaults: 'none',
                list: [
                  { value: 'italic', name: 'Italic', className: 'fa fa-italic'}
                ],
            },
            {
                extend: 'text-align',
                default: 'center',
                options: [
                  { id : 'left',  label : 'Left', className: 'fa fa-align-left' },
                  { id : 'center',  label : 'Center', className: 'fa fa-align-center' },
                  { id : 'right',   label : 'Right', className: 'fa fa-align-right'  },
                ],
            },
        ]
    },
    etc...
   ]

`

[artf]

An empty value should reset the style property

[
    { value: '', name: 'Normal', className: 'fa fa-times'},
    { value: 'bold', name: 'Bold', className: 'fa fa-bold'}
]

[saharhagekr]

@artf Thank you so much for your reply.

I am aware of that. But for the UI that i need to build, it doesn't work to have another icon fa-times. I need to disable the property when the user clicks on an enabled property.
Please check the attached screenshot so you can understand my point.
This is part of my style manager.
Thank you again!

[saharhagekr]

Hello @artf
Any updates on this? Is it do-able or not this can't be done?
Thanks again