[Question] isComponent() is not invoked

[alfaalex81]

I'm trying to make a plugin, but I have a problem with isComponent. My component does not call it whene the editor loading the code, this is the script. Where I'm wrong?

index

      var editor = grapesjs.init({
        height: '100%',
        showOffsets: 1,
        noticeOnUnload: 0,
        storageManager: { autoload: 1 },
        container: '#gjs',
        fromElement: true,

        plugins: ['grapesjs-plugin-boilerplate']
      });
      window.editor = editor;

component

export default (editor, config = {}) => {
    const domc = editor.DomComponents;
    const defaultType = domc.getType('default');
    const defaultModel = defaultType.model;
    const defaultView = defaultType.view;

    domc.addType("alea-video", {
        model: defaultModel.extend({
        },{
            isComponent(el) {
                if(el.getAttribute && el.getAttribute('data-gjs-type')) {
                    return {
                        type: 'alea-video'
                    };
                }
            }
        }),
        view: defaultView.extend({
            tagName: 'div',
            render: function () {
                defaultType.view.prototype.render.apply(this, arguments);

                var iframe = document.createElement("iframe");
                var value = document.createElement("div");

                iframe.setAttribute('width', '560');
                iframe.setAttribute('height', '316');
                iframe.setAttribute('frameborder', '0');
                iframe.setAttribute('allowfullscreen', '');
                iframe.setAttribute('src', '//www.youtube.com/embed/DaDjyRH_3DA');
                value.classList.add("video-container");
                //value.style.backgroundColor = 'red';
                value.setAttribute('data-et','video');
                //value.setAttribute('data-provider','yt');

                value.appendChild(iframe);
                this.el.appendChild(value);

                return this;
            },

        })
    });
}

block

export default (editor, config = {}) => {
    const bm = editor.BlockManager;
    bm.add("bm-alea-video", {
        label: "Video",
        category: "Basic",
        attributes: { class: "fa fa-map" },
        content: { type: "alea-video" }
    })
}

[artf]

isComponent is used, inside the parser, when you add an HTML string and you don't declare explicitly its type (eg. <div data-gjs-type="my-custom-type">.. tells already the type so isComponent is not necessary). If you pass an object content: { type: "alea-video" } the parsing is skipped

[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.