Keybindings when contenteditable=true?

We have occasions (looking up selected text on different services, entering comments) when we want keybindings for commands to work even when the document has contenteditable=true. Currently these keybindings do not work.

What’s the best approach here?

Cheers, Tom

Is the problem that your entire document is editable, so the ProseMirror editor doesn’t receive its own focus, and thus doesn’t receive key events? You could try putting it in a contenteditable=false parent element or an iframe.

So sorry but I stated that backwards. I meant to say “when contentEditable=false.” In the interim, my colleague, @saranrapjs, explained that it is, indeed, more about focus than about the contenteditable (though they may be tied).

The situation is that in our “Read Only” mode, our keybindings are not effective.

It is possible to make an uneditable element focusable by using the tabindex attribute. That might help here.

Awesome, Thanks!

These are great tips; we ended up adding a keydown listener, carrying over the same bindings using keydownHandler from prosemirror-keymap, that delegates to whichever EditorView is currently in view (in a context where there are multiple) whenever that EditorView is not currently focused. But we didn’t think to try to manage this using HTML attributes — will have to see how that works!