{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-mention",
  "framework": "vue",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "mention",
  "dependencies": [
    "@syncfusion/ej2-vue-dropdowns",
    "@syncfusion/ej2-vue-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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/rich-text-editor-mention.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-mention/RichTextEditor.vue",
      "content": "<template>\n    <div>\n        <div class=\"control-section\">\n            <div class=\"sample-container\">\n                <div class=\"default-section\">\n                    <ejs-richtexteditor id=\"mention_integration\"  placeholder=\"Type @ and tag the name\">\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                    </ejs-richtexteditor>\n                </div>\n                <ejs-mention ref=\"mentionObj\" id=\"mentionEditor\" target=\"#mention_integration_rte-edit-view\" :suggestionCount=\"8\" :showMentionChar=\"false\" :allowSpaces=\"true\" :dataSource=\"data\" :fields=\"fieldsData\" \n                popupWidth='250px' popupHeight='200px' :itemTemplate=\"'iTemplate'\" :displayTemplate=\"'dTemplate'\" suffixText=' '>\n                    <template v-slot:iTemplate=\"{data}\">\n                       <table><tr><td><div id=\"mention-TemplateList\"><img class=\"mentionEmpImage\" :src=\"data.Eimg\" alt=\"employee\" /><span :class=\"'e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom'+ data.Status\"></span></div></td><td class=\"mentionNameList\"><span class=\"person\">{{data.Name}}</span><span class=\"email\">{{data.EmailId}}</span></td></tr></table>\n                    </template>\n                    <template v-slot:dTemplate=\"{data}\">                \n                            <a :href=\"'mailto:' + data.EmailId\" :title=\"data.EmailId\">@{{data.Name}}</a>\n                    </template>\n                </ejs-mention>\n            </div>\n        </div>\n\n    </div>\n</template>\n<script>\nimport { RichTextEditorComponent, Toolbar, Link, Image, QuickToolbar, HtmlEditor, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from \"@syncfusion/ej2-vue-richtexteditor\";\nimport { MentionComponent } from \"@syncfusion/ej2-vue-dropdowns\";\n\n    const emailData = [\n        {\n            \"Name\": \"Selma Rose\",\n            \"Status\": \"active\",\n            \"Eimg\": \"https://ej2.syncfusion.com/vue/demos/styles/images/Employees/2.png\",\n            \"EmailId\": \"selma@gmail.com\"\n        },\n        {\n            \"Name\": \"Maria\",\n            \"Status\": \"active\",\n            \"Eimg\": \"https://ej2.syncfusion.com/vue/demos/styles/images/Employees/1.png\",\n            \"EmailId\": \"maria@gmail.com\"\n        },\n        {\n            \"Name\": \"Russo Kay\",\n            \"Status\": \"busy\",\n            \"Eimg\": \"https://ej2.syncfusion.com/vue/demos/styles/images/Employees/8.png\",\n            \"EmailId\": \"russo@gmail.com\"\n        }\n    ];\n\nexport default {\n    components: {\n      'ejs-richtexteditor': RichTextEditorComponent,\n      'ejs-mention': MentionComponent\n    },\n    data: function() {\n        return {\n          data: emailData,\n          fieldsData: { text: 'Name' },\n        };\n    },\n    provide:{\n        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]\n    }\n}\n</script>\n\n<style scoped>\n    #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\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"
    },
    {
      "target": "src/components/rich-text-editor-mention/RichTextEditorView.vue",
      "content": "<template>\n  <RTE />\n</template>\n\n<script setup>\nimport RTE from '../../components/RichTextEditor.vue'\n</script>"
    }
  ]
}