{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-mention",
  "framework": "blazor",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "mention",
  "dependencies": [
    "Syncfusion.Blazor.RichTextEditor"
  ],
  "description": "Rich Text Editor integrates mention suggestions into editable content alongside the standard rich-text editing toolbar.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/blazor/llms.txt",
    "skillPack": "syncfusion/blazor-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/blazor/rich-text-editor-mention.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-mention/RichTextEditor.razor",
      "content": "@page \"/rich-text-editor/mention-integration\"\n@using Syncfusion.Blazor.DropDowns\n@using Syncfusion.Blazor.RichTextEditor\n\n<div class=\"control-section\">\n    <SfRichTextEditor ID=\"mentionIntegration\">\n        <p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">@@Maria</a></span>,</p>\n        <p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>\n    </SfRichTextEditor>\n</div>\n     <div id=\"mention_integration\">\n    <SfMention TItem=\"PersonData\" Target=\"#mentionIntegration .e-rte-content .e-content\" DataSource=\"@EmailData\" SuggestionCount=8 AllowSpaces=\"true\" PopupHeight=\"200px\" PopupWidth=\"250px\" SuffixText=\" \">\n            <ItemTemplate>\n                <table>\n                    <tr>\n                        <td><div id=\"mention-TemplateList\"><img class=\"mentionEmpImage\" src=\"https://cdn.syncfusion.com/blazor/images/dropdown-list/employees/EmployeeImage).png\" alt=\"Employee Profile\" />\n                            <span class=\"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom @((context as PersonData).Status)\"></span></div></td>\n                        <td><span class=\"person\">@((context as PersonData).Name)</span><span class=\"email\">@((context as PersonData).EmailId)</span></td>\n                    </tr>\n                </table>\n            </ItemTemplate>\n            <DisplayTemplate>\n                <a href=\"mailto:@((context as PersonData).EmailId)\" title=\"@((context as PersonData).EmailId)\">@@@((context as PersonData).Name)</a>\n            </DisplayTemplate>\n            <ChildContent>\n            <MentionFieldSettings Text=\"Name\"></MentionFieldSettings>\n            </ChildContent>\n        </SfMention>\n    </div>\n<style>\n    #mention-TemplateList {\n        position: relative;\n        display: inline-block;\n        padding: 2px;\n    }\n    .person, .email {\n        display: block;\n        line-height: 20px;\n        text-indent: 5px;\n    }\n    .person {\n        font-size: 16px;\n    }\n    .mentionEmpImage {\n        display: inline-block;\n        width: 46px;\n        height: 46px;\n        padding: 3px;\n        border-radius: 25px;\n    }\n    #mention-TemplateList .e-badge-success {\n        left: 76%;\n        bottom: 4px;\n        top: auto;\n    }\n    #mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {\n        line-height: 8px;\n    }\n    #mention-TemplateList .e-badge-success {\n        background-color: #4d841d;\n\t\tcolor: #fff;\n    }\n    #mention-TemplateList .e-badge-success.away {\n        background-color: #fedd2d;\n\t\tcolor: #fff;\n    }\n\t#mention-TemplateList .e-badge-success.busy {\n        background-color: #de1a1a;\n\t\tcolor: #fff;\n    }\n    #mention-TemplateList .e-badge.e-badge-dot {\n        height: 10px;\n        width: 10px;\n    }\n    #mention_integration .e-mention-chip{\n        cursor: pointer;\n    }\n</style>\n@code {\n    public class PersonData\n    {\n        public string? Name { get; set; }\n        public string? EmailId { get; set; }\n        public string? EmployeeImage { get; set; }\n        public string? Status { get; set; }\n    }\n    private List<PersonData> EmailData = new List<PersonData>\n    {\n        new PersonData() { Name = \"Selma Rose\", Status = \"active\", EmployeeImage = \"2\", EmailId = \"selma@gmail.com\" },\n        new PersonData() { Name = \"Russo Kay\", Status = \"away\", EmployeeImage = \"8\", EmailId = \"russo@gmail.com\" },\n        new PersonData() { Name = \"Camden Kate\", Status = \"busy\", EmployeeImage = \"9\", EmailId = \"camden@gmail.com\" },\n    };\n}"
    }
  ]
}