How to detect the cursor index from getSelection() when hovering over the text of a qill.js editor?

Question

I use the rich text editor quill.js in a web project. As I already know I can use the quill.getSelection() method to retrieve the index of the cursor. Like getSelection() I would like to get the index of the cursor without the user having to click, i.e. the index of the cursor when he hovers over the editor text.

I would like to implement the following functionality: When I hover over a word, the website shows me information about this word. For this I need the current index of the cursor.

How could I do that?

Answer 1

I have found a solution. For this I use my own blot AnalysisBlot, which has a custom attribute analysisid:

let Inline = Quill.import('blots/inline'); 
class AnalysisBlot extends Inline { 
    static create(analysisid) {
        let node = super.create()
        node.setAttribute('analysisid', analysisid);
        return node
    }
} 
AnalysisBlot.blotName = 'analysisitem'; 
AnalysisBlot.tagName = 'analysisitem'; 
Quill.register(AnalysisBlot);

Each element created with it has its own ID, which is passed on during the creation. For each element of this blot I have added a hover-event listener: $("analysisitem").hover(enterHoverOverAnalysisItem, leaveHoverOverAnalysisItem);

In the functions I can then query the ID attribute and display context specific information.