Toggle editor editable

Hi, I am having some problems about toggle editor editable to no-editable or no-editable to editable,

  1. when I toggle editor editable to no-editable, it also can insert one char.
  2. when I toggle editor no-editable to editable, it can not select words during first focus time.
  1. When I disable the editor, I can still enter the character “b”。

  2. When I enable the editor, I can not select any character.

Thanks! Any help greatly appreciated!

view.editable seems to always be true in that demo, so there’s probably some other issues in this code.

I’m so sorry! The demo above :point_up_2: has been edited. There is a minimal reproducible demo here :point_down:.

Thanks! :pray:

editable: () => { return window.editable; }

The editor will only call editable when it updates. So you can change window.editable all you want, it just won’t notice. A better approach would be to define a plugin with a state field that tracks whether the editor is editable, have the editable prop return the value of that field, and use transactions (with an annotation) to update the state field (properly, via its apply reducer, not by mutating something).

But according to the source code, View.setProps would call View.updateStateInner, which would update View.editable state immediately.

I tried it in the browser and the contententeditable attribute is indeed updated immedately.

For future travellers:

You can change the editable state of your prosemirror instance dynamically, without a full update using view.setProps

view.setProps({
    editable: () => true, // or false
})
3 Likes