如何在html中按下按钮时触发Angular Mentions？

Question

I have created an @ and # button to add @ and # on my WYSIWYG editor and wish to trigger angular mentions by clicking on the html buttons. However the issue is whenever I press the button the mention-list tag pops up but I cannot perform any selections on the data I have provided

The code below actually triggers the Angular mentions but it also emits the close() event after clicking of the @ or # button so I can see the names and dates as a popup mention-list tag on my editor but cannot select any of them. How do I fix this issue so that I can trigger mentions and select names & dates instead of sending a close() event before?

Component Html file

 <div id="controls">
  <button class="button btn-editor" (click)="insChar('@')">@</button>
  <button class="button btn-editor" (click)="insChar('#')">#</button>
 </div>
 <div id="editor" (closed)="closed()" contenteditable [mentionConfig]="mentionConfig" 
  placeholder="Jot something down..." > 
 </div>

Component Typescript file

export class TextEditorComponent implements OnInit {

 tribute: string;
 mentionConfig: any;

 ngOnInit(){
 }

 constructor(){
   this.mentionConfig = {
      mentions: [
        {
            items: ['Alec', 'Joyce', 'Nalin', 'Dominic'],
            triggerChar: '@',
            mentionSelect: (item)=>{
              this.tribute = `@${item.name}`;
              return this.tribute;
            },
            labelKey: 'name',
            maxItems: 5, 
            disableSearch: false
        },
        {
            items: [ '20-12-13', '13-04-19', '16-12-11'],
            triggerChar: '#',
            mentionSelect: (item)=>{
              this.tribute = `#${item.date}`;
              return this.tribute;
            },
            labelKey: 'date',
            maxItems: 5, 
            disableSearch: false
        }
      ], 
    };
 }


 insChar(char: string){
    if(window.getSelection){
      document.getElementById('editor').focus();
      let r = window.getSelection().getRangeAt(0).cloneRange();
      window.getSelection().removeAllRanges();
      const a = document.createTextNode(`${char}`);

      let code = char==='@'?'Digit2':'Digit3';
      let event = new KeyboardEvent('keydown',{'key':`${char}`, 'code':`${code}`});

      r.insertNode(a);
      r.setStartAfter(a);
      this.sel.addRange(r);
      document.getElementById('editor').dispatchEvent(event);
    }
  }

  closed(){ // insert mentions
    console.log('closed');

    if(this.tribute !== '')
    {
      const input = document.createElement('input');
      input.setAttribute('value',`${this.tribute}`);
      input.setAttribute('type','button');
      input.style.border = 'none';
      input.style.padding = "3px";
      input.style.backgroundColor = '#dff6f0';
      input.style.color = '#2e279d';
      input.style.fontWeight = '';
      input.style.fontSize = 'inherit';
      input.style.cursor = 'pointer';
      const range = window.getSelection().getRangeAt(0);
      window.getSelection().removeAllRanges();

      let sp = document.createTextNode(' ');
      range.insertNode(input);
      range.insertNode(sp);
      range.setStartAfter(input);
      window.getSelection().addRange(range);
      this.tribute = '';
    }
  }
}

Answer 1

Your #editor element has the (closed) event. In your insChar() method, you call document.getElementById('editor').dispatchEvent(event);

That will trigger the close event on the #editor element.

So consider passing the $event to the closed method:

<div id="editor" (closed)="closed($event)" contenteditable [mentionConfig]="mentionConfig" 
  placeholder="Jot something down..." > 
</div>

And checking to see what triggered the close event, to filter out the events that are trigged by you manually dispatching the event.

Answer 2

insChar(char: string){
 if(window.getSelection){
      document.getElementById('editor').focus();
      let code = char==='@'?'Digit2':'Digit3';
      let event = new KeyboardEvent('keydown',{'key':`${char}`, 'code':`${code}`});
      document.getElementById('editor').dispatchEvent(event); //keyboard event first

      let r = window.getSelection().getRangeAt(0).cloneRange();
      window.getSelection().removeAllRanges();
      const a = document.createTextNode(`${char}`);
      r.insertNode(a);
      r.setStartAfter(a);
      window.getSelection().addRange(r); //inserting @ or # later
   }
}

The closed() event is always triggered first, I don't know the reason but I realized that the keyboard event actually triggered after the opened() event of angular mentions. Somehow this code works best.