Avoid insering a span with "e-mention-chip" class while using mention

[Mike]

Hi, 

I'm using the Mention component with a RichTextEditor, and it works like a charm! 

I wanted to know if there is a way to avoid inserting a span tag like below while mentioning someone in RichTextExitor?

<span class="e-mention-chip">someone</span>

[YuvanShankar Arunagiri]

Hi Mike,

We have reviewed your requirement with the Mention component. To highlight the mentioned text, the component renders a <span> element with a custom class name along with the mentioned value. If you wish to remove this span and display only plain text, you can achieve this by using the ValueSelected event. Within this event, you can make a JavaScript interop call to replace the span element with plain text in the Rich Text Editor (RTE) component. Refer to the below code snippet and attached sample.

[Home.razor]:

<SfMention TItem="PersonData" Target="#mentionIntegration_rte-editable" DataSource="@EmailData" ValueSelected="@OnValueSelectedHandler">

…

public async void OnValueSelectedHandler(MentionValueSelectedEventArgs<PersonData> args)

 {

     await JS.InvokeVoidAsync("renderMentionText", "mentionIntegration_rte-editable");

 }

[App.razor]:

<script>

    window.renderMentionText = function (targetId) {

        var targetElem = document.getElementById(targetId);

        let span = targetElem.querySelector('.e-mention-chip');

        if (span) {

            let textNode = document.createTextNode(span.textContent);

            span.parentNode.replaceChild(textNode, span);

        }

    }

</script>

Output screenshot:

Please let us know if you have further queries.


Regards,

YuvanShankar A

Attachment: mentionRTE_b697744f.zip

[Mike]

Hi YuvanShankar,

Thank you for your quick reply. 

Your solution fixed my issue.

Regards,

Mike

[YuvanShankar Arunagiri]

You are welcome, Mike. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.