Tiptap: Change editable option on the fly

[Zanzavar]

Hi, is there a way to set the editor editable option to switch on/off on the fly? e.g i would like to set the editor from read-only to editable when the user double-clicks on it.

Here is a clone of your read-only example with the addition of the double click handler but it doesn't seem to work:
https://codesandbox.io/s/w6rw2wy6ml

Any ideas what i am missing?

[gmickel]

Hi there!

This works for me:

this.editor.setOptions({editable: false});
this.editor.setOptions({editable: true});

[panayotisk]

Hello,
I guess we need to call ProseMirror's view update afterwards. The following worked for me (checking with chrome dev tools for immediate DOM update)

this.editor.options.editable = true;
this.editor.view.update(this.editor.view.props); 

Gordon, beware! I am afraid that setOptions may also modify other options you set, like for example an onBlur() callback function you may have passed to the options object. Check this carefully please.

[gmickel]

@panayotisk You're absolutely right.
I didn't mention that I was doing some other crazy stuff with the setOptions method. But thanks for the warning!

[frkn-aydn]

I can change the editable state and if editable is true i can change the content very easy. I have a problem with editor menu bar. Its not working when i change editable state with setOptions function. How can make this work.

[philippkuehn]

Yeah, I'll add this feature.

[frkn-aydn]

to get around this problem, I started the code as "editable: true". Before I render the editor, I change the editable state to false and rendered like this. That's fixed my editor menu bar problem. @philippkuehn

[philippkuehn]

This should be fixed in the latest version. You can now use editor.setOptions({editable: false})

[jans-y]

Hi guys,

There is a problem with menuBubble. When I init the editor with editable false, then update it to true, it's not possible to manipulate the link, I have copied the code from official demo.

I have solved this by initialising editor as { editable: true } and the immediately setting it to { editable: false }

Have a nice day.