I am trying to replace the selected word in Quill Library with an ID from an Input that I create dynamically ANGULAR

Change the selected word "TEST" with the ID of the Input "1"

With this code I am able to get the selected word and actually replace it with a hard coded dummy text but that only happens when I click inside the editor..

replaceSelection(event) {
 var range = this.quill.getSelection();
    if (range) {
      if (range.length == 0) {
        console.log('User cursor is at index', range.index);
      } else {
        var text = this.quill.getText(range.index, range.length);
        console.log('User has highlighted: ', text);
        this.quill.deleteText(range.index, range.length);
        var clickedElement = event.target;
        console.log(`clickedElement`, clickedElement)

  // Get the id of the clicked element
        var id = event.target.id;
        console.log(`id:`);
        this.quill.insertText(range.index, '{{' + id + '}}');
      }
    } else {
      console.log('User cursor is not in editor');
    }
  }
}

When I click the Input ID this line is called:

   console.log('User cursor is not in editor');

As said in API docs .getSelection will return null if editor has no focus. When you click on button that is not inside editor, you lose focus from editor.

However you can provide first argument, that will focus editor before getting selection range.

You just need to change your code to:

var range = this.quill.getSelection(true);

Editor will retain previous selection.