Custom component used as HTML in block

I've extended the default image component

export default (editor) => {
  const domComponents = editor.DomComponents;
  const imageType = domComponents.getType('image');

  domComponents.addType('image-extended', {
    model: imageType.model.extend({
        defaults: Object.assign({}, imageType.model.prototype.defaults, {
          name: 'Image Extended',
        })
      },
      {
        isComponent(el) {
          if (el.tagName === 'img' && el.classList && el.classList.contains('img-extended')) {
            return {type: 'image-extended'};
          }
        }
      }),
    view: imageType.view
  });
};

Then I've got a block where I'm going to use the extended image. The following works fine.

export default (editor) => {
  let bm = editor.BlockManager;

  bm.add('ImageExtended').set({
    label: 'Image Extended',
    category: 'Layout',
    attributes: {class: 'fa fa-image'},
    content: {
      type: 'image-extended',
      classes: ['img-extended'],
    },
  });
};

However, this block will contain nested HTML (kind of a card) and one of the childs needs to be this custom image component. Using the following the img element is not recognized as my custom image component.

export default (editor) => {
  let bm = editor.BlockManager;

  bm.add('Card').set({
    label: 'Card',
    category: 'Layout',
    attributes: {class: 'fa fa-image'},
    content: '<div class="card"><img class="img-extended"></div>',
  });
};