Ckeditor 5, image src to data-src - ckeditor5

Question

Ckeditor 5 image upload by default outputs <img src="url">, while I want to integrate UI kit images with output like <img uk-img data-src="url" data-srcset="sourcet">.
I am having trouble getting src and srcset from the uploaded image in downcastCustomImg() function, because viewElement is an EmptyElement class and getIdentity() method returns an empty img without attributes.
My idea is to convert src to data-src and srcset to data-srceset, also add empty uk-img.
How do I achieve that?
P.s. using vue.js 3 with cli
I am trying to use the official guide. my code is as follows:
export default class CustomFigureAttributes {
/**
* Plugin's constructor - receives an editor instance on creation.
*/
constructor( editor ) {
// Save reference to the editor.
this.editor = editor;
}
/**
* Sets the conversion up and extends the table & image features schema.
*
* Schema extending must be done in the "afterInit()" call because plugins define their schema in "init()".
*/
afterInit() {
const editor = this.editor;
editor.model.schema.extend('image', {
allowAttributes: ['data-src', 'data-srcset', 'uk-img']
});
editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
editor.conversion.for( 'downcast' ).add( downcastCustomImg( 'img', 'image' ), { priority: 'low' } );
// Define custom attributes that should be preserved.
setupCustomAttributeConversion( 'img', 'image', 'uk-img', editor );
setupCustomAttributeConversion( 'img', 'image', 'src', editor );
setupCustomAttributeConversion( 'img', 'image', 'srcset', editor );
}
}
function downcastCustomImg( viewElementName, modelElementName ) {
return dispatcher => dispatcher.on( `insert:${ modelElementName }`, ( evt, data, conversionApi ) => {
if ( conversionApi.consumable.consume( data.item, 'insert' ) ) {
return;
}
const modelElement = data.item;
const viewFigure = conversionApi.mapper.toViewElement( modelElement );
const viewElement = findViewChild( viewFigure, viewElementName, conversionApi );
if ( !viewElement ) {
return;
}
const src = viewElement.getAttribute( 'src' ) || [];
// CANNOT GET SRC & SRCSET from viewElement, because it is an EmptyElement !!!
conversionApi.writer.setAttribute( 'uk-img', '', viewElement );
conversionApi.writer.setAttribute( 'data-src', src, viewElement );
// conversionApi.writer.setAttribute( 'data-srcset', srcSet, viewElement );
} );
}
/**
* Helper method that searches for a given view element in all children of the model element.
*
* #param {module:engine/view/item~Item} viewElement
* #param {String} viewElementName
* #param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
* #return {module:engine/view/item~Item}
*/
function findViewChild( viewElement, viewElementName, conversionApi ) {
const viewChildren = Array.from( conversionApi.writer.createRangeIn( viewElement ).getItems() );
return viewChildren.find( item => item.is( 'element', viewElementName ) );
}
/**
* Sets up a conversion for a custom attribute on the view elements contained inside a <figure>.
*
* This method:
* - Adds proper schema rules.
* - Adds an upcast converter.
* - Adds a downcast converter.
*/
function setupCustomAttributeConversion( viewElementName, modelElementName, viewAttribute, editor ) {
// Extends the schema to store an attribute in the model.
const modelAttribute = `${ viewAttribute }`;
editor.model.schema.extend( modelElementName, { allowAttributes: [ modelAttribute ] } );
editor.conversion.for( 'upcast' ).add( upcastAttribute( viewElementName, viewAttribute, modelAttribute ) );
editor.conversion.for( 'downcast' ).add( downcastAttribute( modelElementName, viewElementName, viewAttribute, modelAttribute ) );
}
/**
* Returns the custom attribute upcast converter.
*/
function upcastAttribute( viewElementName, viewAttribute, modelAttribute ) {
return dispatcher => dispatcher.on( `element:${ viewElementName }`, ( evt, data, conversionApi ) => {
const viewItem = data.viewItem;
const modelRange = data.modelRange;
const modelElement = modelRange && modelRange.start.nodeAfter;
if ( !modelElement ) {
return;
}
conversionApi.writer.setAttribute( modelAttribute, viewItem.getAttribute( viewAttribute ), modelElement );
} );
}
/**
* Returns the custom attribute downcast converter.
*/
function downcastAttribute( modelElementName, viewElementName, viewAttribute, modelAttribute ) {
return dispatcher => dispatcher.on( `insert:${ modelElementName }`, ( evt, data, conversionApi ) => {
const modelElement = data.item;
const viewFigure = conversionApi.mapper.toViewElement( modelElement );
const viewElement = findViewChild( viewFigure, viewElementName, conversionApi );
if ( !viewElement ) {
return;
}
conversionApi.writer.setAttribute( viewAttribute, modelElement.getAttribute( modelAttribute ), viewElement );
} );
}