{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-mention",
  "framework": "aspnet-core",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "mention",
  "dependencies": [
    "Syncfusion.AspNetCore.RichTextEditor",
    "Syncfusion.AspNetCore.DropDowns"
  ],
  "description": "Rich text editor with at-mention dropdown that inserts users from a suggestion list.",
  "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/aspnet-core/llms.txt",
    "skillPack": "syncfusion/aspnetcore-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-core/rich-text-editor-mention.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-mention/rich-text-editor.cshtml",
      "content": "@page\r\n@model EJ2CoreSampleBrowser.Pages.RichTextEditor.MentionIntegration\r\n\r\n@using Syncfusion.EJ2\r\n@using Syncfusion.EJ2.DropDowns;\r\n@{\r\n    char nameMentionChar = '@';\r\n}\r\n\r\n<div class=\"control-section\">\r\n    <div class=\"sample-container\">\r\n        <div class=\"default-section\">\r\n            <ejs-richtexteditor id=\"mention_integration\" placeholder=\"Type @@ and tag the name\" actionBegin=\"actionBegin\">\r\n                    <e-content-template>\r\n                        <p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">@@Maria</a></span>&#8203;</p>\r\n                        <p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>\r\n                    </e-content-template>\r\n            </ejs-richtexteditor>\r\n            <ejs-mention id=\"mention\" target=\"#mention_integration_rte-edit-view\" created=\"onMentionCreate\" mentionChar=\"@nameMentionChar\" showMentionChar=true dataSource=\"@Model.mention\" popupHeight=\"200px\" popupWidth=\"250px\" allowSpaces=\"true\" suggestionCount=\"8\" displayTemplate=\"<a href='mailto:${EmailId}' title=${EmailId}>${Name}</a>\" itemTemplate=\"<table><tr><td><div id='mention-TemplateList'><img class='mentionEmpImage' src='../images/Mention/${Eimg}.png' alt='employee'/><span class='e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom ${Status}'></span></div></td><td><span class='person'>${Name}</span><span class='email'>${EmailId}</span></td></tr></table>\">\r\n                 <e-mention-fields text=\"Name\"></e-mention-fields>                                                                                                                                                                                      \r\n            </ejs-mention>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n    <style>\r\n        #mention-TemplateList {\r\n        position: relative;\r\n        display: inline-block;\r\n        padding:2px;\r\n    }\r\n    .person {\r\n        display: block;\r\n        line-height: 18px;\r\n        text-indent: 5px;\r\n        font-size: 16px;\r\n    }\r\n    .email {\r\n        display: block;\r\n        line-height: 22px;\r\n        text-indent: 2px;\r\n    }\r\n    .mentionEmpImage {\r\n        display: inline-block;\r\n        width: 46px;\r\n        height: 46px;\r\n        padding: 3px;\r\n        border-radius: 25px;\r\n    }\r\n    #mention-TemplateList .e-badge-success {\r\n        left: 76%;\r\n        bottom: 4px;\r\n        top: auto;\r\n    }\r\n    #mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {\r\n        line-height: 8px;\r\n    }\r\n    #mention-TemplateList .e-badge-success.away {\r\n        background-color: #fedd2d;\r\n\t\tcolor: #fff;\r\n    }\r\n\t#mention-TemplateList .e-badge-success.busy {\r\n        background-color: #de1a1a;\r\n\t\tcolor: #fff;\r\n    }\r\n    #mention-TemplateList .e-badge.e-badge-dot {\r\n        height: 10px;\r\n        width: 10px;\r\n    }\r\n    #mention_integration .e-mention-chip{\r\n        cursor: pointer;\r\n    }\r\n    </style>\r\n    <script type=\"text/javascript\">\r\n        var mentionObj;\r\n        function actionBegin(args) {\r\n            if (args.requestType === 'EnterAction' && mentionObj.element.classList.contains('e-popup-open')) {\r\n                args.cancel = true;\r\n            }\r\n        }\r\n\r\n        function onMentionCreate() {\r\n            mentionObj = this;\r\n        }\r\n        \r\n    </script>"
    },
    {
      "target": "src/components/rich-text-editor-mention/rich-text-editor.cshtml.cs",
      "content": "using Microsoft.AspNetCore.Mvc.RazorPages;\r\n\r\nnamespace EJ2CoreSampleBrowser.Pages.RichTextEditor;\r\n\r\npublic class MentionIntegration : PageModel\r\n{\r\n    public List<EmailData> mention = new List<EmailData>();\r\n    public void OnGet()\r\n    {\r\n        mention.Add(new EmailData { Name = \"Selma Rose\", Status = \"active\", Eimg = \"2\", EmailId = \"selma@gmail.com\" });\r\n        mention.Add(new EmailData { Name = \"Maria\", Status = \"active\", Eimg = \"1\", EmailId = \"maria@gmail.com\" });\r\n        mention.Add(new EmailData { Name = \"Camden Kate\", Status = \"active\", Eimg = \"9\", EmailId = \"camden@gmail.com\" });\r\n    }\r\n}\r\n\r\npublic class EmailData\r\n{\r\n    public string Name { get; set; }\r\n    public string Status { get; set; }\r\n    public string Eimg { get; set; }\r\n    public string EmailId { get; set; }\r\n}"
    }
  ]
}