Inline style map

Code

<div id="entry-inline-styles"></div>

const app = Redactor('#entry-inline-styles', {
    inlineItems: {
        red: {
            title: 'Red',
            icon: '<svg ...>',
            command: 'inline.set',
            params: {
                tag: 'span',
                styles: {
                    color: 'red'
                }
            }
        },
        greenBold: {
            title: 'Green bold',
            icon: '<svg ...>',
            command: 'inline.set',
            params: {
                tag: 'span',
                classes: 'green-bold'
            }
        }
    },
    activeState: {
        customRules: {
            red: ({ selection }) => {
                const el = selection.getClosest?.('span');
                if (!el?.style?.color) return false;

                const color = el.style.color.replace(/\s/g, '');
                return color === 'red' || color === 'rgb(255,0,0)';
            },
            greenBold: ({ selection }) => Boolean(selection.getClosest?.('.green-bold'))
        }
    }
});