Iam Using Quill mention with ngx-quill. Every text edit and formatting is working. Iam not able to find the onSelect event of QUILL MENTION LIST. What I ultimately want is that to push mentioned objects, which will be selecting from dropdowns, into an array. mention-clicked and hover is the only event listener available regarding to mention elements. How to get the selected mentions???
HTML
<quill-editor [modules]="{ mention: mentionConfig }" [style]="{height: '300px'}"></quill-editor>
Angular TS IMPORTS
import Quill from 'quill';
import 'quill-mention';
import { QuillEditorComponent } from 'ngx-quill';
TS / JS
@ViewChild(QuillEditorComponent) editor!: QuillEditorComponent;
mentionConfig = {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
mentionDenotationChars: ["@"],
"toolbar":false,
source: (searchTerm: string, renderList:any) => {
// Your mention source logic here
const values = [
{ id: 1, value: 'Alice' },
{ id: 2, value: 'Bob' },
{ id: 3, value: 'Charlie' },
];
const matches = values.filter(mention => mention.value.toLowerCase().includes(searchTerm.toLowerCase()));
renderList(matches, searchTerm);
}
};
TS / JS
@ViewChild(QuillEditorComponent) editor!: QuillEditorComponent;
mentionConfig = {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
onSelect: (item, insertItem)=>{
console.log(item);//Will have the added suggestion/Tag
}
mentionDenotationChars: ["@"],
"toolbar":false,
source: (searchTerm: string, renderList:any) => {
// Your mention source logic here
const values = [
{ id: 1, value: 'Alice' },
{ id: 2, value: 'Bob' },
{ id: 3, value: 'Charlie' },
];
const matches = values.filter(mention => mention.value.toLowerCase().includes(searchTerm.toLowerCase()));
renderList(matches, searchTerm);
}
};