How to implement cursor navigation/selection around block nodes?

Hi there, I wish to create a UI that’s similar to the experience of Apple Notes. In Apple Notes, image blocks sort of works like ‘paragraphs that contains a single image’. You can move cursor before and after the image. I’ll put some examples here:

Word Navigation


Word Navigation (option+left arrow) Word Navigation (Right) Word Navigation (option+right arrow)

Character Navigation

Character Navigation

Selection and Deletion (backspace)

Image Selection and deletion from the head of the paragraph

At the moment, I am trying to understand what work do I need here in order to implement all of these behaviour. Do I need to handle the key events myself and implement this navigation/selection logic? Is it possible to create such ‘paragraphs of a single image’ via NodeSpec alone?

Any suggestions feel free to let me know. Cheers!