{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-mention",
  "framework": "react",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "mention",
  "dependencies": [
    "@syncfusion/ej2-react-dropdowns",
    "@syncfusion/ej2-react-richtexteditor"
  ],
  "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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/rich-text-editor-mention.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-mention/RichTextEditor.tsx",
      "content": "/**\n * Rich Text Editor Mention integration sample\n */\nimport { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';\nimport { MentionComponent } from '@syncfusion/ej2-react-dropdowns';\nimport * as React from 'react';\n\nfunction MentionIntegration() {\n    let mentionObj;\n    const 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    const fieldsData: { [key: string]: string } = { text: 'Name' };\n    function itemTemplate(data: any): JSX.Element {\n        return (\n            <table>\n                <tr>\n                    <td>\n                        <div id=\"mention-TemplateList\">\n                            <img className=\"mentionEmpImage\" src={\"src/rich-text-editor/images/\" + data.Eimg + \".png\"} />\n                            <span className={\"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom\" + data.Status}></span>\n                        </div>\n                    </td>\n                    <td className=\"mentionNameList\">\n                        <span className=\"person\">{data.Name}</span>\n                        <span className=\"email\">{data.EmailId}</span>\n                    </td>\n                </tr>\n            </table>\n        );\n    }\n    function displayTemplate(data: any): JSX.Element {\n        return (\n            <React.Fragment>\n                <a href={`mailto:${data.EmailId}`} title={data.EmailId}>@{data.Name}</a>\n            </React.Fragment>\n        );\n    }\n    function actionBegineHandler(args: any): void {\n        if (args.requestType === 'EnterAction' &&  mentionObj.element.classList.contains('e-popup-open')) {\n            args.cancel = true;\n        }\n    }\n    return (\n        <div className='control-pane'>\n            <div className='control-section' id=\"rte\">\n                <div className='rte-control-section'>\n                    <RichTextEditorComponent id=\"mention_integration\" placeholder=\"Type @ and tag the name\" actionBegin={actionBegineHandler.bind(this)}  >\n                        <p>Hello <span contentEditable={false} className='e-mention-chip'><a href=\"mailto:maria@gmail.com\" title=\"maria@gmail.com\">@Maria</a></span>, </p>\n                        <p>Welcome to Mention demo, it easily integrates any editable element like input, textarea or any contenteditable supported element.</p>\n                        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]} />\n                    </RichTextEditorComponent>\n                </div>\n            </div>\n\n            <MentionComponent ref={(scope) => { mentionObj = scope; }} id=\"mentionEditor\" target=\"#mention_integration_rte-edit-view\" suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={data} fields={fieldsData}\n                popupWidth=\"250px\" popupHeight=\"200px\" itemTemplate={itemTemplate} displayTemplate={displayTemplate} suffixText={'&nbsp;'}></MentionComponent>\n\n\n        </div>\n    );\n}\nexport default MentionIntegration;"
    }
  ]
}