Componente personalizado usado como HTML en bloque

He ampliado el componente de imagen por defecto '''js 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, { nombre: 'Imagen extendida', }) }, { isComponent(el) { si (el.tagName === 'img' && el.classList && el.classList.contains('img-extended')) { return {type: 'image-extended'}; } } }), ver: imageType.view }); };

Luego tengo un bloque donde voy a usar la imagen extendida. Lo siguiente funciona bien.
'''js
Export default (editor) => {
  Sea bm = editor. Jefe de bloque;

bm.add('ImageExtended').set({
    etiqueta: 'Imagen extendida',
    categoría: 'Diseño',
    Atributos: {Clase: 'FA FA-Imagen'},
    Contenido: {
      Tipo: 'Imagen extendida',
      Clases: ['IMG-Extendido'],
    },
  });
};

Sin embargo, este bloque contendrá HTML anidado (una especie de tarjeta) y uno de los hijos debe ser este componente de imagen personalizado. Usando lo siguiente, el elemento img no se reconoce como mi componente de imagen personalizada. '''js Export default (editor) => { Sea bm = editor. Jefe de bloque;

bm.add('Card').set({ etiqueta: 'Tarjeta', categoría: 'Diseño', Atributos: {Clase: 'FA FA-Imagen'}, Contenido: '<div class="card"><img class="img-extended"></div>', }); };