Make decoration editable within non-editable instance

v6
1

I’m starting to work with CodeMirror 6 and am wondering if it’s possible, in a CM instance that is both not-editable and read-only, to create a Decoration that can be edited.

My use-case is that I am rendering read-only code samples for a documentation site, but would like to allow the user to set custom values within a sample (like an API key).

Currently I have a setup where, when a range is “editable” I create a mark decoration that wraps the content in a <button> to make it look editable, and when the user clicks it the button hidden and a widget decoration that renders an <input type="text"> is inserted. The UX for this is nice but the implementation is tricky, because I have to manage various events on the input, communicate the new value to the original code sample, etc.

Is there a more straightforward way to make a substring editable in a non-editable CM instance? I was hoping I would be as simple as setting contenteditable on the decoration, but something about that isn’t working either.

2

I guess you could simply use a transaction filter. See the single-line editor example. Though I’d have to agree that if you only ever intend to let users edit specific fields using <input> elements is better from an UX and accessibility standpoint. I’d even argue that you don’t need CodeMirror if plain old text inputs suffice.

3

hey @jodyh were you able to achieve this ? if yes can you help me with the same ?