[QUESTION] Selection of custom components not possible from canvas.

Hey,

I tried to figure this out by myself, but I'm feeling I'm going a little bit in circles. So I hope you will have some time to read this through and help me with the problem.

I get an html template with multiple custom component tags => <custom-component-tag></custom-component-tag><custom-component-tag></custom-component-tag><custom-component-tag></custom-component-tag>.

For all of the components I define a new component in grapesjs as described in the documentation. For each component I render just a different view, but I don't manipulate the model, because I want the html to remain the same upon saving.

Even though the components have the following config the selection feature doesn't seem to work with them. An example code can be seen below.

I provided a screen video in which you can see that the component is visible inside the component tree and can be selected from there, but the selection is not possible from the canvas.

PS: This example component which I select in the video is highlighted, but some of the others, have an toolset for dragging etc., but aren't highlighted. This would be the second issue.

private createCustomComponent(editor) {
    const comps = editor.DomComponents;
    const defaultType = comps.getType('default');
    const defaultModel = defaultType.model;
    comps.addType('custom-component', {
      model: defaultModel.extend({
          defaults: Object.assign({}, defaultModel.prototype.defaults, {
            removable: true,
            draggable: true,
            droppable: false,
            badgable: true,
            stylable: true,
            highlightable: true,
            copyable: false,
            resizable: false,
            editable: true,
          })
        },
        {
          isComponent: function (el) {
            if (el.tagName === 'CUSTOM-COMPONENT-TAG') {
              return {type: 'custom-component'};
            }
          }
        }),
      // Define the View
      view: defaultType.view.extend({
        render: function () {
          defaultType.view.prototype.render.apply(this, arguments);
          const value = document.createElement('div');
          this.el.appendChild(value);
          console.dir(this.el);
          return this;
        },
      }),
    });
  }

Thank you in advance :)