Allow focus on uneditable node view

1

I’m trying to find a way to allow content in a node view with contenteditable="false" to be interacted with normally (selecting text, clicking controls, etc).

Here’s an example: https://adhesive-actress.glitch.me/

The editor view’s “focus” event listener seems to detect a click on the node view; it then moves focus to the start of the next editable node.

I’ve tried returning true from stopEvent and calling event.stopPropagation on all events in the node view’s dom, but nothing I’ve tried so far has been able to keep the focus in the clicked node view, probably because the view is polling for selection changes.

Is there a way to mark an uneditable node view as something that can be interacted with normally?

2

Have you tried setting dom.tabIndex = 0 in the node view? That seems to help a lot. ProseMirror assumes that if its editable node has focus, it should control the selection. By making the inner node focusable, you allow its content to be selected without focusing the editor.

3 Likes
3

Perfect - thanks Marijn!