Prevent the caret from moving outside a custom nodeview for arrow keys

I’m trying to keep the caret inside my custom nodeview as long as I click outside the nodeview, in fact the arrow keys should be default prevented if the caret moves outside the nodeview.

Setting isolating property true solved the issue partially for Enter & Delete keys. What would be the best way to achieve the same experience for arrow keys?

Bind custom commands to arrow keys that check whether their action would take you out of the node, and return true (preventing further handling) when that’s the case.

Thank you for your prompt reply, Yeah that’s pretty much straight forward, but the problem is how to know if the caret is somewhere in the first line ( or the last line ) of the nodeview ?

I can return true (preventing further handling) for,

  • 1st pos + ArrowLeft
  • last pos + ArrowRight

but the problem is

  • 1st line + ArrowUp
  • last line + ArrowDown

I couldn’t find a way to check if the caret is in the first or the last line of the nodeview. Please help!

The EditorView.endOfTextblock helper method can sometimes help with this.

That method didn’t help, I managed to do it with coordsAtPos and posAtCoords methods. It doesn’t look great but it’s okay for the moment and I’m still looking for a better solution.

const threshold = 20;
const coords =  view.coordsAtPos( pos );
let checkPos = view.posAtCoords({ left: coords.left, top: - threshold });
if ( checkPos.pos < startPosOfNode ) {
    return true;
checkPos = view.posAtCoords({ left: coords.left, top: + threshold });
if ( checkPos.pos > endPosOfNode ) {
   return true;