[QUESTION] How to change tagName using traits.

I solved it after scanning the internet a bit. Add this trait

traits: [
    {
        type: 'select',
        options: [
            { value: 'h1', name: 'Heading 1' },
            { value: 'h2', name: 'Heading 2' },
            { value: 'h3', name: 'Heading 3' },
            { value: 'h4', name: 'Heading 4' },
            { value: 'h5', name: 'Heading 5' },
            { value: 'h6', name: 'Heading 6' },
        ],
        label: 'Size',
        name: 'tagName',
        changeProp: 1,
    },
],

@hosseinghs try this out. This is same as how @TheComputerM implemented the code before. And it works fine.

this.editor.Components.addType('headings', {
            isComponent: el => el.tagName.startsWith('H') && Number.parseInt(el.tagName.slice(1)) <= 6,
            model: {
                defaults: {
                    traits: [
                        {
                            type: 'select',
                            options: [
                                { id: 'h1', value: 'h1', name: 'Heading 1' },
                                { id: 'h2', value: 'h2', name: 'Heading 2' },
                                { id: 'h3', value: 'h3', name: 'Heading 3' },
                                { id: 'h4', value: 'h4', name: 'Heading 4' },
                                { id: 'h5', value: 'h5', name: 'Heading 5' },
                                { id: 'h6', value: 'h6', name: 'Heading 6' },
                            ],
                            label: 'Size',
                            name: 'tagName',
                            changeProp: true,
                        },
                    ],
                },
            },
});

hi, I'm trying to do the same! my problem is when I click one of the options from traits, my heading element won't be updated to new heading! can you help me?