We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How do I render the mention items when loading text into the target

Hi there,

Hope you're having a great day.


I have a few questions about the Blazor Mention component.

Firstly, I have attached a mention component to a rich text box component and it works fine when you are typing and use the mention char. I'm then saving that text and retrieving it later on back into the same control, but the mentions no longer render as mention chips, instead, they are shown as plain text.

Is there a way to tell the mention component to re-render all possible mentions in the rich text control?


I'm also using the suffix text property and was wondering if there is a way to render the suffix text as part of the mention instead of simply having it as plain text behind the mention.


Is there a native way to grab all the mentions from a target component without using regex or something on the string?


Thanks so much,

Paul



1 Reply

PK Priyanka Karthikeyan Syncfusion Team June 19, 2023 03:50 PM UTC

Hi Paul,


Query1: "Firstly, I have attached a mention component to a rich text box component and it works fine when you are typing and use the mention char. I'm then saving that text and retrieving it later on back into the same control, but the mentions no longer render as mention chips, instead, they are shown as plain text.

Is there a way to tell the mention component to re-render all possible mentions in the rich text control?"

We have prepared a sample based on your requirement, but we were unable to reproduce the issue in the latest version. In order to better understand the issue you're facing, could you please modify the shared sample according to your scenario and provide us with the steps to replicate the issue, along with a video illustration sample if possible.


Query2: "I'm also using the suffix text property and was wondering if there is a way to render the suffix text as part of the mention instead of simply having it as plain text behind the mention."


Sorry for the Inconvenience.When the suffix text is added, it doesn't change into 'mention chip'; instead, it is displayed as plain text. This is the behavior of mention component


Query3:"Is there a native way to grab all the mentions from a target component without using regex or something on the string?"


You can grab all the mentions by referring below code.

 Index.razor

@inject IJSRuntime JSRuntime

<SfButton Content="AddValues" OnClick="adds"></SfButton>

public async void adds()

    {

      await JSRuntime.InvokeVoidAsync("GetMentionValue", null);

    }

Layout.cshtml

<script>

 function GetMentionValue(args){

            console.log(document.querySelectorAll('.e-mention-chip'));

 }

</script>


Regards,

Priyanka K


Attachment: RTE_Server_1_cf5440cc_(2)_4ce5c844.zip

Loader.
Live Chat Icon For mobile
Up arrow icon