GrapesJS - Make Parts of the template non-editable

Question

I am trying to make areas of a template not editable. In my example, I want to make everything inside #isviw completely not editable.

This is my code at the moment, but the issue is that my settings (e.g. removable: false) don't seem to be applied.

Here is my code:

var editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    style: '.txt-red{color: red}',
    plugins: ['grapesjs-preset-newsletter'],
    storageManager: false,
    propagate: ['editable', 'removable', 'draggable'],
    pluginsOpts: {
        'grapesjs-preset-newsletter': {}
    }
});

var domc = editor.DomComponents;
var defaultType = domc.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;

var isviwModel = defaultModel.extend(
    {
        init: function () {
            this.set('removable', false);
            this.set('draggable', false);
            this.set('droppable', false);
            this.set('badgable', false);
            this.set('stylable', false);
            this.set('highlightable', false);
            this.set('copyable', false);
            this.set('resizable', false);
            this.set('editable', false);

            defaultModel.prototype.init.apply(this, arguments);
        }
    },
    {
        isComponent: function (el) {
            if (el.tagName == 'div') {
                return { type: 'isviw' };
            }
        },
    }
);

editor.DomComponents.addType('isviw', {
    model: isviwModel,
    view: defaultView,
});

Answer 1

editor.DomComponents.addType('isviw', {
model: defaultModel.extend({
        defaults: {...defaultModel.prototype.defaults,
             removable: true,draggable: true,droppable: true,
                badgable: true,stylable: true,highlightable: true,
                copyable: true,resizable: false,editable: false
        },
    },
    {
        isComponent: function (el) {
            if (el.tagName == 'div') {
                return { type: 'isviw' };
            }
        },
    }),
view: defaultView,

});