# Make decoration editable within non-editable instance

**URL:** https://discuss.codemirror.net/t/make-decoration-editable-within-non-editable-instance/5190
**Category:** v6
**Created:** [October 25, 2022, 6:30pm UTC](https://discuss.codemirror.net/t/make-decoration-editable-within-non-editable-instance/5190 "2022-10-25T18:30:09Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![jodyh](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/jodyh/32/2613_2.png) [@jodyh](https://discuss.codemirror.net/u/jodyh)
#### Post date: [October 25, 2022, 6:30pm UTC](https://discuss.codemirror.net/t/make-decoration-editable-within-non-editable-instance/5190/1 "2022-10-25T18:30:09Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![push-f](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/p/ce73a5/32.png) [@push-f](https://discuss.codemirror.net/u/push-f)
#### Post date: [October 25, 2022, 6:37pm UTC](https://discuss.codemirror.net/t/make-decoration-editable-within-non-editable-instance/5190/2 "2022-10-25T18:37:02Z")

</div>

I guess you could simply use a [transaction filter](https://codemirror.net/docs/ref/#state.EditorState%5EtransactionFilter). See the [single-line editor example](https://codemirror.net/try/?example=Single-line%20editor). 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.

---

<div class="post-metadata">

### Author: ![dev-1995](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/dev-1995/32/4350_2.png) [@dev-1995](https://discuss.codemirror.net/u/dev-1995)
#### Post date: [April 13, 2024, 12:12pm UTC](https://discuss.codemirror.net/t/make-decoration-editable-within-non-editable-instance/5190/3 "2024-04-13T12:12:16Z")

</div>

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