How can I create block with background image with behavior like built-in "image"?

Hello, I'm trying to create block with background image (similar to Grapedrop Image Box). I added new component like this:

  domc.addType('image-block', {
    extend: 'image',
    model: {
      defaults: function() {
        return {
          name: 'Background Image',
          type: 'image-block',
          tagName: 'div',
          void: false,
          droppable: true,
          resizable: true
        }
      }
    },
    view: {
      tagName: 'div',
      updateSrc: function() {
        const { model, em } = this;
        const srcResult = model.getSrcResult();
        const style = model.getStyle();
        const isDefaultSrc = model.isDefaultSrc();
        const url = "url('".concat(srcResult, "')");

        if (srcResult) {
          model.addStyle({
            '__bg-type': 'img',
            'background-image': isDefaultSrc && style['background-image'] || url,
            'background-size': style['background-size'] || 'cover',
            'background-position': style['background-position'] || 'center center',
            'background-attachment': style['background-attachment'] || 'scroll',
            'background-repeat': style['background-repeat'] || 'no-repeat'
          });

          em.trigger('component:toggled');
        }
        this.$el[srcResult ? 'removeClass' : 'addClass'](this.classEmpty)
      },
      onRender: function() {
        this.updateSrc()
      }
    }
  })

And also I added block:

  bm.add('image-block', {
    label: 'Background Image',
    category: 'Basic',
    content: {
      name: 'Background Image',
      type: 'image-block',
      activeOnRender: 1,
      style: {
        height: '200px'
      }
    }
  })

But unfortunatelly I cannot drop any block inside of it:

Grapedrop Image Box has the same issue. Is it possible to drop elements inside of such compoent?