{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-mention",
  "framework": "angular",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "mention",
  "dependencies": [
    "@syncfusion/ej2-angular-richtexteditor"
  ],
  "description": "Rich text editor sample providing user suggestions when typing mention characters.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/rich-text-editor-mention.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-mention/mention-integration.component.ts",
      "content": "/**\n * Rich Text Editor Mention integration Functionality Sample\n */\nimport { Component, ViewEncapsulation, ViewChild} from '@angular/core';\nimport { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorModule, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor';\nimport { MentionModule } from '@syncfusion/ej2-angular-dropdowns';\nimport { Mention } from '@syncfusion/ej2-angular-dropdowns';\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'mention-integration.html',\n    styleUrls: ['mention-integration.css'],\n    encapsulation: ViewEncapsulation.None,\n    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService],\n    standalone: true,\n    imports: [ RichTextEditorModule, MentionModule]\n})\nexport class MentionIntegrationComponent {\n    @ViewChild('mention') mentionObj!: Mention;\n    public data: { [key: string]: Object }[] = [\n        { Name: \"Selma Rose\", Status: \"active\", Eimg: \"2\", EmailId: \"selma@gmail.com\" },\n        { Name: \"Maria\", Status: \"active\", Eimg: \"1\", EmailId: \"maria@gmail.com\" },\n        { Name: \"Russo Kay\", Status: \"busy\", Eimg: \"8\", EmailId: \"russo@gmail.com\" },\n        { Name: \"Camden Kate\", Status: \"active\", Eimg: \"9\", EmailId: \"camden@gmail.com\" },\n        { Name: \"Robert\", Status: \"busy\", Eimg: \"dp\", EmailId: \"robert@gmail.com\" },\n        { Name: \"Garth\", Status: \"active\", Eimg: \"7\", EmailId: \"garth@gmail.com\" },\n        { Name: \"Andrew James\", Status: \"away\", Eimg: \"pic04\", EmailId: \"noah@gmail.com\" },\n        { Name: \"Olivia\", Status: \"busy\", Eimg: \"5\", EmailId: \"olivia@gmail.com\" },\n        { Name: \"Sophia\", Status: \"away\", Eimg: \"6\", EmailId: \"sophia@gmail.com\" },\n        { Name: \"Margaret\", Status: \"active\", Eimg: \"3\", EmailId: \"margaret@gmail.com\" },\n        { Name: \"Ursula Ann\", Status: \"active\", Eimg: \"dp\", EmailId: \"ursula@gmail.com\" },\n        { Name: \"Laura Grace\", Status: \"away\", Eimg: \"4\", EmailId: \"laura@gmail.com\" },\n        { Name: \"Albert\", Status: \"active\", Eimg: \"pic03\", EmailId: \"albert@gmail.com\" },\n        { Name: \"William\", Status: \"away\", Eimg: \"10\", EmailId: \"william@gmail.com\" }\n      ];\n      public  fieldsData: { [key: string]: string } = { text: 'Name' };\n\n}\n"
    },
    {
      "target": "src/components/rich-text-editor-mention/mention-integration.css",
      "content": "#mention-TemplateList {\n    position: relative;\n    display: inline-block;\n    padding:2px;\n}\n.mentionNameList .person, .mentionNameList.email {\n    display: block;\n    line-height: 20px;\n    text-indent: 5px;\n}\n.mentionNameList .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    color: #fff;\n}\n#mention-TemplateList .e-badge-success.away {\n    background-color: #fedd2d;\n    color: #fff;\n}\n#mention-TemplateList .e-badge-success.busy {\n    background-color: #de1a1a;\n    color: #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}"
    },
    {
      "target": "src/components/rich-text-editor-mention/mention-integration.html",
      "content": "\n<div class=\"control-section\">\n    <ejs-richtexteditor id=\"mention_integration\"  placeholder=\"Type @ and tag the name\">\n        <ng-template #valueTemplate>\n            <p>Hello <span contenteditable=\"false\" class=\"e-mention-chip\"><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">&#64;Maria</a></span>&#8203;</p>\n            <p>Welcome to the mention integration with rich text editor demo. Type <code>&#64;</code> character and tag user from the suggestion list. </p>\n        </ng-template>\n    </ejs-richtexteditor>\n</div>\n\n<ejs-mention #mention [dataSource]='data' target='#mention_integration_rte-edit-view' [fields]='fieldsData' [suggestionCount]=\"8\" [showMentionChar]=\"false\" [allowSpaces]=\"true\"  \npopupWidth='250px' popupHeight='200px' [suffixText]='&nbsp;'>\n    <ng-template #itemTemplate let-data>\n        <table>\n            <tr>\n              <td>\n                <div id=\"mention-TemplateList\"> \n                  <img class=\"mentionEmpImage\" src=\"./assets/rich-text-editor/images/{{data.Eimg}}.png\" alt=\"employee\" />\n                  <span class=\"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom {{data.Status}}\"></span>\n                </div>\n                </td>\n                <td class=\"mentionNameList\">\n                  <span class=\"person\">{{data.Name}}</span>\n                  <span class=\"email\">{{data.EmailId}}</span>\n                </td>\n              </tr>\n            </table>\n    </ng-template>\n    <ng-template #displayTemplate let-data>\n        <a href=\"mailto:{{data.EmailId}}\" title=\"{{data.EmailId}}\">&#64;{{data.Name}}</a>\n    </ng-template>\n</ejs-mention>\n\n"
    }
  ]
}