Changing appearance of caret - getting the location right

1

Noob here. I’m amazed by how feature rich and powerful ProseMirror is.

I’m hitting a wall trying to change the appearance of the caret. The problem I’m trying to solve is that I have custom keyboard navigation in my editor, and some of these navigation can make the caret jump far away. I want to make it easier for the user to track the new caret position.

Is there a way for me to get the absolute position of the caret more reliably?

Currently in my plugin’s update

`
const { state } = view if (state.selection.empty) { const { from } = state.selection const pos = view.coordsAtPos(from) const editorRect = view.dom.getBoundingClientRect()

    // Get the computed style of the editor
    const editorStyle = window.getComputedStyle(view.dom)
    const lineHeight = parseFloat(editorStyle.lineHeight)
    const fontSize = parseFloat(editorStyle.fontSize)
    
    // Calculate positions
    const left = pos.left - editorRect.left
    const top = pos.top - editorRect.top + (lineHeight - fontSize) / 2

`

The top position calculated is offset, and the offset varies as a function of the window size

Any suggestions would be greatly appreciated

2

There are many more problems to this than you would initially anticipate and I would advise that you carefully consider them. For one thing there’s the limitation of not being able to detect which side of a wrapping text block the caret is on, and they’ll share the same position in the document in both cases. You can try to handle it with offsets but you can only handle one or the other side that way. There’s no quick and easy way to work around that or detect the real caret position.

To answer your specific question, there’s nothing in the library that’s going to help you with that besides what you’ve already got in your code, at least as far as I know.