# Toggle editor editable

**URL:** <https://discuss.prosemirror.net/t/toggle-editor-editable/2787>\
**Category:** Uncategorized\
**Created:** [May 22, 2020, 1:09pm UTC](https://discuss.prosemirror.net/t/toggle-editor-editable/2787 "2020-05-22T13:09:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![var](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/v/e0b2c6/32.png) [@var](https://discuss.prosemirror.net/u/var)\
**Post date:** [May 22, 2020, 1:09pm UTC](https://discuss.prosemirror.net/t/toggle-editor-editable/2787/1 "2020-05-22T13:09:45Z")

</div>

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.

> **[Hulking Materialistic Crow](https://glitch.com/~hulking-materialistic-crow)**
>
> Remixing http://prosemirror.net/examples/basic/ 🎏 Glitch is the friendly community where everyone can discover & create the best apps on the web.

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!

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [May 25, 2020, 8:14am UTC](https://discuss.prosemirror.net/t/toggle-editor-editable/2787/2 "2020-05-25T08:14:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![var](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/v/e0b2c6/32.png) [@var](https://discuss.prosemirror.net/u/var)\
**Post date:** [May 26, 2020, 3:50pm UTC](https://discuss.prosemirror.net/t/toggle-editor-editable/2787/3 "2020-05-26T15:50:55Z")

</div>

I’m so sorry! The demo above 👆 has been edited. There is a minimal reproducible demo here 👇.

> **[Glitch](https://glitch.com/edit/#!/salty-humdrum-suede?path=index.js:10:29)**
>
> Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

Thanks! 🙏

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [June 3, 2020, 7:57am UTC](https://discuss.prosemirror.net/t/toggle-editor-editable/2787/4 "2020-06-03T07:57:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lucywang000](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/lucywang000/32/2137_2.png) [@lucywang000](https://discuss.prosemirror.net/u/lucywang000)\
**Post date:** [July 28, 2021, 2:56am UTC](https://discuss.prosemirror.net/t/toggle-editor-editable/2787/5 "2021-07-28T02:56:31Z")

</div>

> [@marijn](#):
>
> The editor will only call `editable` when it updates. So you can change `window.editable` all you want, it just won’t notice.

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](https://discuss.prosemirror.net/uploads/secondsite/original/2X/c/c1439ea58cc7ba2e422253b85009bfcaa6a69ac2.png)

---

<div class="post-metadata">

**Author:** ![sh-ravan](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/sh-ravan/32/3189_2.png) [@sh-ravan](https://discuss.prosemirror.net/u/sh-ravan)\
**Post date:** [June 12, 2023, 5:52am UTC](https://discuss.prosemirror.net/t/toggle-editor-editable/2787/6 "2023-06-12T05:52:08Z")

</div>

For future travellers:

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

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

```