Preserving html attributes when initializing quill.js

How do I retain custom class names (added via custom handler) when initializing quill instance (especially in react-quill)?

Problem: I need to create a custom toolbar button in quill editor to create an unordered list with specific classname for list items. I've managed to do it using custom handlers and custom toolbar, e.g.

toolbar: {
        ...
        handlers: {
            redList() {
                const range = this.quill.getSelection();
                if (range) {
                   this.quill.format('list', 'bullet');
                    const items = this.quill.getLines(range.index, range.length);

                    items.forEach((item) => {
                        if (item.domNode && item.domNode.tagName === 'LI') {
                            item.domNode.className = 'red-list-item';
                        }
                    });
                }
            },
        },
    },

Everyting works, but when I initialize quill with proper html like

<ul>
<li class="red-list-item">first</li>
<li class="red-list-item">second</li>
</ul>

li's class name seems to be stripped away.

I've looked in direction of adding a custom format e.g.

class RedBulletListItem extends ListItem {
    static create(value) {
        const node = super.create(value);

        node.className = 'red-list-item'; // Make the bullet red

        return node;
    }
}

RedBulletListItem.blotName = 'redList';
RedBulletListItem.tagName = 'LI';
RedBulletListItem.className = 'red-list-item';

Quill.register(RedBulletListItem, false);

or tweaking matchers/clipboard, but that didn't work. Am I looking in the right direction or there's a more simple way to fix this issue?