DxHtmlEditorMentions Class

Contains a collection of mention lists.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

public class DxHtmlEditorMentions :
    CollectionComponent<HtmlEditorMentionModel>

Remarks

Add DxHtmlEditorMention objects to the DxHtmlEditorMentions collection to create and configure mention lists.

Example

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

Html Editor - Mentions

<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" },
    };
}

<div id="chat-window">
    <div class="message" tabindex="0">
        <div class="photo">
            <img alt="Kevin Carter" src="@StaticAssetUtils.GetImagePath("employees/5.jpg")" />
        </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>
    <br />
    <div class="message" tabindex="0">
        <div class="photo">
            <img alt="John Heart" src="@StaticAssetUtils.GetImagePath("employees/11.jpg")" />
        </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>
    <br />
    <div class="message" tabindex="0">
        <div class="photo">
            <img alt="Kevin Carter" src="@StaticAssetUtils.GetImagePath("employees/5.jpg")" />
        </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>

#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(--bs-body-bg)
}
.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(--bs-primary);
}

Run Demo: HTML Editor - Mentions