DxHtmlEditorMention Class

Defines a mention list.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxHtmlEditorMention :
    DxSettingsComponent<HtmlEditorMentionModel>

Remarks

<DxHtmlEditor> supports mentions that allow a user to reference other users in text or conversation threads. When a user types a predefined marker, the editor displays a drop-down list of available names. The component allows you to use multiple mention lists. To identify a mention list, use a unique marker.

Create a Mention List

Follow the steps below to create and configure a mention list:

Add a DxHtmlEditorMention object to the DxHtmlEditorMentions collection.
Use the DxHtmlEditorMention.Data property to specify a data source for mentions.
Specify the DisplayFieldName property to obtain display values for mentions from data source fields.
Assign a unique marker to the Marker property.
Specify the SearchFieldNames property to enable search operations for mentions.
Optional. Use SearchMinLength and SearchDelay properties to configure search settings.

Example

The following code snippet implements mentions to emulate the functionality common to many collaboration tools:

Razor
PageMarkup
CSS

razor

<DxHtmlEditor Markup="@Markup" Height="200px">
    <DxHtmlEditorMentions>
        <DxHtmlEditorMention Data="@EmployeesData"
                             DisplayFieldName="@nameof(MentionData.Name)"
                             SearchFieldNames="@SearchFieldNames" />
    </DxHtmlEditorMentions>
</DxHtmlEditor>

@code {
    string Markup = @"<p>
                      <span class='dx-mention' spellcheck='false' data-marker='@' data-mention-value='Kevin Carter'>
                        <span>
                            <span>@</span>
                            Kevin Carter
                        </span>
                      </span>
                      I think John's expertise can be very valuable in our startup.
                    </p>";
    string[] SearchFieldNames = { nameof(MentionData.Name) };

    class MentionData {
        public string Name { get; set; }
        public string Team { get; set; }
    }
    MentionData[] EmployeesData = {
        new MentionData() { Name = "John Heart", Team = "Engineering" },
        new MentionData() { Name = "Kevin Carter", Team = "Engineering" },
        new MentionData() { Name = "Olivia Peyton", Team = "Management" },
        new MentionData() { Name = "Robert Reagan", Team = "Management" },
        new MentionData() { Name = "Cynthia Stanwick", Team = "Engineering" },
        new MentionData() { Name = "Brett Wade", Team = "Analysis" },
        new MentionData() { Name = "Greta Sims", Team = "QA" },
    };
}

html

<div id="chat-window">
    <div class="message" tabindex="0">
        <div class="photo">
            
        </div>
        <div class="name"> Kevin Carter </div>
        <div class="date"> 07/03/24 - 12:22AM </div>
        <div class="text">
            <span class="mention" spellcheck="false">
                <span><span>@@</span>John Heart</span>
            </span>
            What experience do you have in this field?
        </div>
    </div>
    

    <div class="message" tabindex="0">
        <div class="photo">
            
        </div>
        <div class="name"> John Heart </div>
        <div class="date"> 07/03/24 - 12:25AM </div>
        <div class="text"> I've been in the audio/video industry since 2001, and I've been the CEO of DevAv since 2009. </div>
    </div>
    

    <div class="message" tabindex="0">
        <div class="photo">
            
        </div>
        <div class="name"> Kevin Carter </div>
        <div class="date"> 07/03/24 - 12:26AM </div>
        <div class="text">
            That's very interesting.
            <span class="mention" spellcheck="false">
                <span><span>@@</span>Olivia Peyton</span>
            </span>
            , what do you think?
        </div>
    </div>
</div>

css

#chat-window {
    background-color: rgba(191, 191, 191, 0.15);
    height: 350px;
    padding: 10px;
    width: 100%;
}
.message {
    height: 100px;
    background-color: inherit;
    display: inline-block;
    max-width: 60%;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--dxds-color-surface-neutral-default-rest);
}
.name {
    font-weight: bold;
}
.date {
    opacity: 0.5;
}
.photo {
    float: left;
    height: 100%;
}
.photo > img {
    height: 40px;
    width: 40px;
    display: block;
    border-radius: 40px;
    margin-right: 10px;
    object-fit: cover;
    object-position: top;
}
.mention {
    color: var(--dxds-color-content-primary-default-rest);
}

Run Demo: HTML Editor - Mentions

Implements

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.Internal.HtmlEditorMentionModel> DxHtmlEditorMention