keyDown event handler and target

1

Hello,

First post on this list :slight_smile:

I have a plugin which handle some events:

    props: {                                                    
        handleKeyDown: (view, event) => {                  
            console.log('===>>> HANDLEKEYDOWN : ', event.target) // wrong node !!!
                                                                                           
        },                                                           
        handleDOMEvents: {                                            
            keydown(view, event) {
                console.log('===>>> KEYDOWN : ', event.target) // wrong node !!!
                const pos = view.posAtDOM(event.target) 
                const resolvedPos = view.state.doc.resolve(pos)                            
            },                                        
            /*
            keyup(view, event) {                  
                console.log('===>>> KEYUP : ', event.target)                               
            },                                                                                                                                                                        
            */                     
            mouseover(view, event) {                                
                console.log('===>>> MOUSEOVER : ', event.target) // correct node       
                const { nodeHover } = storeToRefs(storeEditorEvent)                        
                const pos = view.posAtDOM(event.target)          
                const resolvedPos = view.state.doc.resolve(pos)                   
                                                                                           
                nodeHover.value = resolvedPos         
                event.preventDefault()                                                     
            }                                                 
        },                                                    
                                               
    }

mouseover works just fine, but for the keyDown handlers event.target is always the root editor node, any idea why ?

Thanks :slight_smile:

2

That’s how DOM key events work. They are delivered to the element that has focus.

3

Right, so if I’m typing in the editor (let’s say I’m inside a Paragraph node) there is no way to get the pos for each keydown/keyup event?

4

Having view as an argument of the event handler, you can look for cursor position checking view.state.selection.

5

Right! Thanks