Toggle editor editable

1

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”。

    May-22-2020 21-16-16
    May-22-2020 21-16-16702×398 2.47 MB

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

    May-22-2020 21-20-15
    May-22-2020 21-20-15702×398 3.93 MB

Thanks! Any help greatly appreciated!

2

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

3

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

Thanks! :pray:

4

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).

5

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.

x
x1008×392 76.5 KB

6

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