Detect document changes, while maintaining AutoComplete

1

Hi,
I need to detect changes made within CodeMirror; I’ve found the following works perfectly, but with it has disabled autocomplete; any ideas?

extensions: [
    basicSetup,
    EditorView.updateListener.of(update => this.updated(update)),
    sql({
        dialect: MySQL,
        upperCaseKeywords: true,
    })
]
2

There’s really no way adding an update listener could break autocomplete, unless this.updated somehow messes with the editor in a way that causes it.

3

Sorry, should have included that function:

updated(update: ViewUpdate) {
    if (update.docChanged && this.editor) {
        this.valueChange.emit(this.editor.state.doc.toString())
    }
}

I’m inside Angular 14 by the way; but all I’m doing there is reading the value and sending it to an EventEmitter Output.

But 100%; if I comment that EditorView line; auto-complete comes back; put it in; it stops working

Any further debugging I should try?

4

You could try to reduce the setup to a small self-contained script. If you can get this to show up on codemirror.net/try I can take a look.

5

Got it! Thanks for your help - you were quite right; it nothing to do with CodeMirror.

For anyone finding this; I was using Two-way binding (on a property called value) to keep the value updated for the parent component; so had the code:

    ngOnChanges(changes: SimpleChanges) {
        if (this.editor && changes.value) {
            this.editor.dispatch({
                changes: { from: 0, to: this.editor.state.doc.length, insert: this.value || '' }
            }); 
        }
    }

This meant every time the CodeMirror value changed (while typing) it was calling the above and rewriting the value - cancelling the autocomplete; easy fix, just added && this.value != this.editor.state.doc.toString() to the if clause.

1 Like