DxHtmlEditorMention Class

Defines a mention list.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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:

1. Add a DxHtmlEditorMention object to the DxHtmlEditorMentions collection.
2. Use the DxHtmlEditorMention.Data property to specify a data source for mentions.
3. Specify the DisplayFieldName property to obtain display values for mentions from data source fields.
4. Assign a unique marker to the Marker property.
5. Specify the SearchFieldNames property to enable search operations for mentions.
6. 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

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

PageMarkup

<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>

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(--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

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.Internal.HtmlEditorMentionModel>

DxHtmlEditorMention