[Question] Two html tags as one (link/button)

You should create a custom component

@artf I tried extending original link component, but it seems not working

var linkType = editor.DomComponents.getType('link');
domComps.addType('link', {
    model: linkType.model.extend({
        defaults: Object.assign({}, linkType.model.prototype.defaults, {
            traits: [
                {
                    label: 'Link',
                    name: 'href',
                    placeholder: 'http://meusite.com.br'
                },
                {
                    label: 'Conteúdo',
                    type: 'input-conteudo',
                    placeholder: 'Botão'
                },
                {
                    label: 'Cor',
                    type: 'color',
                    name: 'background-color'
                }
            ],
            toHTML: function() {
                return '<div class="row"><a class="btn">Link Here</a></div>';
            },
        }),
    })
});

It's not changing anything..

I already tried to disable autorender and render after all changes.

I could change the content only setting a new, using BlockManager:

bm.get('c85').set({ content: '<div class"row"><a class="btn">Link Here</a></div>' }); But when click in button, it's selecting only the button (not div) and when I click div, it's not selecting my button custom settings;

@artf as you said, I tried to use Components, but I didn't get expected result. Could you help me?

My link block prints this content: <div style="height:45px;margin:0 auto 10px auto;padding: 5px 5px 5px 5px;width: 100%;text-align:center"><a class="btn btn-purple">Button</a></div>

I'm trying to get button when click in div too, or when click in button, select all div.

In components, I tried:

domComps.addType('link', {
    model: linkType.model.extend({
        defaults: Object.assign({}, linkType.model.prototype.defaults, {
            traits: [
                {
                    label: 'Link',
                    name: 'href',
                    placeholder: 'http://mywebsite.com'
                },
                {
                    label: 'Content',
                    type: 'input-content',
                    placeholder: 'Button'
                }
            ]
        }),
    },{
        isComponent: function(el, sec) {
            if(el.tagName == 'A'){
                return {type: 'link'};
            }
            // I already tried to return always link:
            // return {type: 'link'};
        },
    })
});