Switch between editor being editable or not

I’m afraid I’ve tried my best at reading through the docs, but still am unable to get a grasp on how I can use the EditorView.editable facet to toggle between making an editor editable and non-editable.

I’ve tried a number of things, but my most recent attempt was to setup the editor like so:

this.editor = new EditorView({
	state: EditorState.create({extensions: [
	parent: this.codeMirror.current

Here you can see if this.props.isDisabled is initially true, then it will set the facet to false, making it non-editable.

Then to be able to toggle the editor to editable later on I’m unsure about. How can I take this.editor and toggle the editor to be editable in this current state?

Any help would be greatly appreciated.

As an aside, I think I saw somewhere in another message, but can someone confirm, that a wrapper, or alternative API will be provided for such configurations and simple toggling of options in future? I was just curious and wanted to check.


In order to dynamically enable/disable an extension (which is what EditorView.editable is), you’ll have to tag it. I.e., if you do something like this…

let editableTag = Symbol()
let state = EditorState.create({extendions: [
  /* ... */
  tagExtension(editableTag, EditorView.editable.of(false))

function setEditable(view: EditorView, value: boolean) {
    reconfigure: {[editableTag]: EditorView.editable.of(value)}

You can call setEditable to change the content of your tagged extension.

Thank you - this makes a lot of sense :+1: