angularquillreact-quillmentionngx-quill

quill-mention Select Event.How to get Selected mentions from Quill Mention


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);
    }
  };

Solution

  • 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);
        }
      };