How to change the mention plugin output DOM element in ckeditor5

Question

Actual Output

<span class="mention" data-mention="@lilypad">@lilypad</span>

Tried below,

writer.createUIElement( 'span', null, function( domDocument ) {
 const domElement = this.toDomElement( domDocument );
 domElement.innerHTML = 'this is ui element';
 return domElement;
} );

Like mentioned here https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_writer-Writer.html

editor.conversion.for( 'downcast' ).attributeToElement( { model: 'mention', view: ( modelAttributeValue, { writer } ) => { 
writer.createUIElement( 'span', null, function( domDocument ) {
 const domElement = this.toDomElement( domDocument );
 domElement.innerHTML = 'this is ui element';
 return domElement;
});
}
});

But its not working

(https://i.stack.imgur.com/rFIPS.png)

Expected output

<span class="mention mention-parent" data-mention="@lilypad" id="parent-id">@lilypad<span class="mention mention-child" id="child-id">Sample text</span></span>

Answer 1

Please check the documentation for this!

Fully customized mention feed

Here they mention to use the property itemRenderer: customItemRenderer in the object of feeds array. We can modify the function to suit your needs!

function customItemRenderer( item ) {
    const itemElement = document.createElement( 'span' );

    itemElement.classList.add( 'mention-parent' );
    itemElement.id = `mention-list-item-id-${ item.userId }`;
    itemElement.textContent = `${ item.name } `;

    const usernameElement = document.createElement( 'span' );

    usernameElement.classList.add( 'mention-parent' );
    usernameElement.textContent = item.id;

    itemElement.appendChild( usernameElement );

    return itemElement;
}

This demo does not get the desired output, but its a good starting point to solve your issue!