# CodeMirror 6: Proper way to listen for changes

**URL:** https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395
**Category:** Uncategorized
**Created:** [April 27, 2020, 8:12pm UTC](https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395 "2020-04-27T20:12:12Z")
**Posts on this page:** 1
**Showing post:** 5

<div class="post-metadata">

### Author: ![raldone01](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/raldone01/32/834_2.png) [@raldone01](https://discuss.codemirror.net/u/raldone01)
#### Post date: [July 21, 2020, 7:35am UTC](https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395/5 "2020-07-21T07:35:57Z")

</div>

I read your conversation and decided to use a ViewPlugin. When reading the documentation I struggled a bit to figure out that a plugin can be added as an extension.  
I came up with the following solution to watch the editor:

```
initEditor() {
	const compThis = this //save this context
	const editor = new EditorView({
        state: EditorState.create({
          doc: 'Loading the real content',
          extensions: [
            ViewPlugin.fromClass(class {
              constructor(view) {}

              update(update) {
                if (update.docChanged)
                  compThis.onDocumentChanged() //escort the update event up one level. This function saves the contents and interact with the other UI.
              }
            }),
            lineNumbers(),
            highlightSpecialChars(),
            history(),
            foldGutter(),
            multipleSelections(),
            defaultHighlighter,
            bracketMatching(),
            closeBrackets(),
            autocomplete(),
            rectangularSelection(),
            highlightActiveLine(),
            highlightSelectionMatches(),
            keymap([
              ...defaultKeymap,
              ...searchKeymap,
              ...historyKeymap,
              ...foldKeymap,
              ...commentKeymap,
              ...gotoLineKeymap,
              ...autocompleteKeymap,
              ...lintKeymap
            ])
          ]
        })
	this.$refs.editor.append(this.editorView.dom)
	//other init stuff
}

```

I doubt that this is used in the way its intended to be used? Is there a better way to do this? How can I pass information down to my plugin?

---

_[View the full topic](https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395)._