Is there any way using keymap when 'editable' of the view is false

zlv-thisF · December 2, 2020, 10:10am

hey, guys!

I have checked the soucecode, seems key events only works when editorView’s editable is true.

However I would like to keep the ‘Mod-A’ shortcut to select the document in readonly mode (editable: false) just as what it does in editable mode

any ideas ?

marijn · December 2, 2020, 11:00am

With editable: false, the contenteditable attribute on the document node is removed, which by default makes the browser disable keyboard focus for the element. When the node isn’t focused, it doesn’t even receive keyboard events, so it’s hard to implement any keybindings for it.

You could use the attributes prop to add a tabIndex=0 attribute to your editor to make it focusable. But this might lead to some other key bindings also firing, and if those do change the document, editable: false (which works only on the DOM) level won’t stop them.

zlv-thisF · December 2, 2020, 11:19am

wow, thanks a lot !

I am wandering that i should accomplish that by createRange and getSelection API when it’s readonly.

prosed · June 11, 2025, 11:14pm

I haven’t had success with keymap when the editor is non-editable, even when I set a tabIndex and confirm it’s focused with document.activeElement === document.querySelector('.ProseMirror') returning true.

I’ve had to resort to handleDOMEvents.keydown but this is messy and duplicative.

@marijn I wonder if you’re certain that the approach you outlined should work, or if there might be something more required? If you’re sure then I guess I have some issue I’m overlooking.

prosed · June 11, 2025, 11:24pm

@marijn the “issue” seems to be in these lines:

github.com/ProseMirror/prosemirror-view

src/input.ts

a72140e21


      
          view.dom.addEventListener(event, view.input.eventHandlers[event] = (event: Event) => {
            if (eventBelongsToView(view, event) && !runCustomHandler(view, event) &&
                (view.editable || !(event.type in editHandlers)))
              handler(view, event)

Specifically that !(event.type in editHandlers) resolves to false.

Is there some way around this you’d recommend?

The use case is that we trigger a find-box via ProseMirror keymap, which remains relevant even though the editor is non-editable.

marijn · June 12, 2025, 8:29am

Indeed, keymap uses the handleKeyDown prop, which is part of the library’s built-in handling of key events. This is disabled for uneditable editors on the assumption that a lot of keybindings will change the document in ways you don’t want to happen in a read-only editor. “Raw” event handlers registered through handleDOMEvents will fire, and you can tie something like a keymap into them using the keydownHandler helper from prosemirror-keymap. Maybe that’s a workaround that helps here?