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.
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.
selectable property doesn’t give the desirable result
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.