domAtPos for atom block nodes

1

I try to get the current hovered DOM node with view.domAtPos like this:

new Plugin({
  props: {
    handleDOMEvents: {
      mousemove(view, event) {
        const posAtCoords = view.posAtCoords({
          left: event.clientX,
          top: event.clientY,
        })

        if (!posAtCoords) {
          return false
        }
        
        const pos = posAtCoords.pos
        
        // wrong for atom block nodes
        const node = view.domAtPos(pos)

        return false
      },
    },
  },
})

For atom block nodes (like an image) domAtPos always returns the prosemirror element itself and I don’t know why. I would have expected to get the image tag. I’ve set up a demo reproducing this:

The image node is at position 6.

Bildschirmaufnahme-2021-05-31-um-11.33.20
Bildschirmaufnahme-2021-05-31-um-11.33.20902×712 1.14 MB

1 Like
2

You can use view.nodeDOM to get the img DOM.

And domAtPos also returns the offset to the result DOM instead of directly returning the target DOM

3

yeah I’m doing this for now:

let node = view.nodeDOM(posAtCoords.inside) || view.domAtPos(posAtCoords.pos).node
4

There is no position inside of atom nodes, and since domAtPos will return a parent node + offset for a given position, it is indeed impossible for it to return an atom node. As mentioned, nodeDOM might be what you’re looking for, or use the offset to access the proper child element of the node domAtPos returns (being careful about cases where that offset is at the end of the node or the node is a text node).