The focusable state for non-text blocks

Hi, devs!
I’m trying to figure out how to set the focusable state for non-text blocks.


I was thinking about the tabIndex property, about the allowGapCursor property but it doesn’t work for me.

glitch - My image has the contentEditable: false property here but If I remove it, the result will remain the same.

I’ll be glad of your help! I have a lot of questions on this forum, but it might help someone else. :pray:

You’ll generally want to keep focus on the editor element during editing, so tabindex on content elements is not a common thing to use. Leaf nodes (nodes with no editable content) will be set to be ineditable by the library, so that the user doesn’t accidentally get their cursor in there and starts typing in a place where typing makes no sense. You may be looking for the selectable property, which allows the user to create a node selection for your node.

Hmm, the selectable property doesn’t give the desirable result :frowning:

tiptap has this behavior:

And in my node I have two elements. I need to show the menu by focusing on the img and to have possibility to edit caption by focusing on the text input element

I did it. I don’t know how it changes the logic of focusable state but I imported 'prosemirror-view/style/prosemirror.css'; and now I can focus on the image.