¿Cómo ampliar los rasgos existentes y renderizar los cambios en el lienzo?

Estoy intentando escribir un plugin para gestionar todas las propiedades de los elementos de los bloques Boostrap. Si alguien hace clic en el botón, mostrará propiedades relacionadas con los botones como colores, tamaño, etc. (basado en las clases bootstrap predeterminadas)

El siguiente código modifica las clases de botones y los ajustes almacenados en el modelo, pero no sé cómo renderizar los cambios correctamente.

Aquí está mi código:

        grapesjs.plugins.add('test-plugin', function (editor) {

var domComps = editor. DomComponents;
            var dType = domComps.getType('link');
            var dModel = dType.model;
            var dView = dType.view;
            var inputTypes = [
                { valor: 'btn btn-primario', nombre: 'Primario' },
                { valor: 'btn btn-info', nombre: 'Info' },
                { valor: 'btn btn-danger', nombre: 'Danger' },
                { valor: 'btn btn btn-warning', nombre: 'Warning' },
            ];

domComps.addType('link', {

model: dModel.extend({

defaults: Object.assign({}, dModel.prototype.defaults, {
                        Rasgos: ['Título', 'Href', 'Objetivo', 'Clase', {
                            tipo: 'select',
                            etiqueta: 'Buttons Colors',
                            nombre: 'classProp',
                            opciones: inputTypes,
                            cambioProp: 1,

}],
                    }),
                    init() {
                        this.listenTo(this, 'change:classProp', this.doStuff);
                    },
                    doStuff() {
                        console.log(este);
                        this.set('classProp', this.changed['classProp']);
                        this.view.el.classList.remove();
                        this.view.el.className = this.changed['classProp'];
                        this.attributes.tagName = this.get('classProp')
                        this.view.render();
                        editor.trigger('component:update');
                        editor.store();
                    },
                }, {
                        isComponent: function (el) {
                            if (el.tagName == 'A') {
                                return { type: 'link' };
                            }
                        },

}),
                view: dView.extend({
                    render: función () {
                        console.log(este);
                        this.model.set('classProp', this.model.get('classProp'));
                        editor.render();
                        dView.prototype.render.apply(esto, argumentos);
                        Extiende el método de renderizado original
                        this.el.className = this.model.get('classProp');

devuelvo esto;
                    },
                }),
                vista: dVista,
            });

});