# Listen to text changes of an existing state/view

**URL:** <https://discuss.codemirror.net/t/listen-to-text-changes-of-an-existing-state-view/5952>\
**Category:** v6\
**Created:** [March 12, 2023, 3:08pm UTC](https://discuss.codemirror.net/t/listen-to-text-changes-of-an-existing-state-view/5952 "2023-03-12T15:08:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fregante](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/fregante/32/3111_2.png) [@fregante](https://discuss.codemirror.net/u/fregante)\
**Post date:** [March 12, 2023, 3:08pm UTC](https://discuss.codemirror.net/t/listen-to-text-changes-of-an-existing-state-view/5952/1 "2023-03-12T15:08:30Z")

</div>

I found a couple of old discussions regarding v6 equivalents of onChange, but they all start from a fresh editor:

- [Example of onchange for CodeMirror6?](https://discuss.codemirror.net/t/example-of-onchange-for-codemirror6/3151)
- [CodeMirror 6: Proper way to listen for changes](https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395)

```plaintext
let state = EditorState.create({
    extensions: [updateListenerExtension]
});

```

Is there a way to attach a listener to an existing item on the page? I need to do this from an extension so I want to make sure I don’t break the 3rd-party editor by recreating the whole state.

I’m testing the following code on [https://codemirror.net](https://codemirror.net)

```plaintext
const cmView = document.querySelector('.cm-content').cmView;
const EditorView = cmView.view.constructor;
const updateListenerExtension = EditorView.updateListener.of((v) => {
    console.log(v.state.doc.toString());
});

cmView.view.state./*TODO: .addExtension(updateListenerExtension) */

```

---

<div class="post-metadata">

**Author:** ![Michiel](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/michiel/32/1496_2.png) [@Michiel](https://discuss.codemirror.net/u/Michiel)\
**Post date:** [March 13, 2023, 3:14pm UTC](https://discuss.codemirror.net/t/listen-to-text-changes-of-an-existing-state-view/5952/2 "2023-03-13T15:14:51Z")

</div>

There is a way to attach extensions, but for that you do need access to the `StateEffect.appendConfig` value that the codemirror instance you want to listen to uses. The way codemirror/javascript works now, there is no way to do that…

It isn’t pretty, but [your GhostText PR](https://github.com/fregante/GhostText/pull/253) works if I do

```auto
sendBack(target, cmView.view.state.doc.toString());
let last_doc = cmView.view.state.doc;

setInterval(() => {
	if (last_doc !== cmView.view.state.doc) {
		sendBack(target, cmView.view.state.doc.toString());
		last_doc = cmView.view.state.doc;
	}
}, 100);

target.addEventListener("gt:transfer", () => {
	cmView.view.dispatch({
		changes: {
			from: 0,
			to: cmView.view.state.doc.length,
			insert: target.getAttribute("gt-value"),
		},
	});
	last_doc = cmView.view.state.doc;
});

```

You could also use `cmView.addEventListener("input", () => ...)`, but I feel like that will miss cases where extensions change text based on shortcuts.

and I think `setInterval` is really the only way to make this work reliably 😕

---

<div class="post-metadata">

**Author:** ![fregante](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/fregante/32/3111_2.png) [@fregante](https://discuss.codemirror.net/u/fregante)\
**Post date:** [March 13, 2023, 3:29pm UTC](https://discuss.codemirror.net/t/listen-to-text-changes-of-an-existing-state-view/5952/3 "2023-03-13T15:29:38Z")

</div>

Thank you! I suppose this is a start to move things along in my PR. I’m thinking about using the input event to track keypresses and then use the polling to complement that and update the field twice per second.

I hope a helper for this will be implemented in CM6 however

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [March 20, 2023, 12:28pm UTC](https://discuss.codemirror.net/t/listen-to-text-changes-of-an-existing-state-view/5952/4 "2023-03-20T12:28:23Z")

</div>

Let’s continue this discussion in [this thread](https://discuss.codemirror.net/t/expose-api-for-browser-extensions/5864/8).