[Question] - How to extend the existing traits and render the changes in canvas?

[inventorbit]

I am trying to write a plugin to manage all the element properties of Boostrap Blocks. If someone clicks on the button it will show button related properties like button colors, size, etc... (based on default bootstrap classes)

The following code - modifies the button classes and settings got stored in the model however I don't how to actually render the changes properly.

Here's my code:

        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 = [
                { value: 'btn btn-primary', name: 'Primary' },
                { value: 'btn btn-info', name: 'Info' },
                { value: 'btn btn-danger', name: 'Danger' },
                { value: 'btn btn btn-warning', name: 'Warning' },
            ];

            domComps.addType('link', {

                model: dModel.extend({

                    defaults: Object.assign({}, dModel.prototype.defaults, {
                        traits: ['title', 'href', 'target', 'class', {
                            type: 'select',
                            label: 'Button Colors',
                            name: 'classProp',
                            options: inputTypes,
                            changeProp: 1,

                        }],
                    }),
                    init() {
                        this.listenTo(this, 'change:classProp', this.doStuff);
                    },
                    doStuff() {
                        console.log(this);
                        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: function () {
                        console.log(this);
                        //this.model.set('classProp', this.model.get('classProp'));
                        editor.render();
                        dView.prototype.render.apply(this, arguments);
                        // Extend the original render method
                        this.el.className = this.model.get('classProp');

                        return this;
                    },
                }),
                view: dView,
            });

        });

[artf]

You don't need to update the view in this case, just change the classes inside the model. All you need is this

doStuff() {
    this.setClass(this.get('classProp'));
},

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.