Switch between editor being editable or not

v6
#1

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: [
		basicSetup,
		javascript(),
		listenerExtension,
		EditorView.editable.of(!this.props.isDisabled)
	]}),
	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.

Thanks!

#2

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) {
  view.update({
    reconfigure: {[editableTag]: EditorView.editable.of(value)}
  })
}

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

#3

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