onChange event is not triggered during source editing

[ismailatkurt]

onChage event is successfully triggered from ordinary view of component. But when I edit source of content (just trying yo add some "div" elements) onChange event is not triggered

onEditorStateChange(editorState) {
    debugger
    let state = this.state;
    state.pageContent = editorState.editor.getData();
    this.setState(state)
}

<CKEditor
    activeClass="p10"
    content={this.state.pageContent}
    events={{
        "change": this.onEditorStateChange
    }}
    config={{
        allowedContent: true,
        basicEntities : false,
        entities : false,
        forceSimpleAmpersand : true,
    }}
/>

[ohtanya]

@ismailatkurt I'm dealing with the same issue currently. According to https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#event-change you should listen for the key or native input event like below, but I can't figure out how to implement this in React.

editor.on( 'mode', function() {
    if ( this.mode == 'source' ) {
        var editable = editor.editable();
        editable.attachListener( editable, 'input', function() {
            // Handle changes made in the source mode.
        } );
    }
} );

[ohtanya]

@ismailatkurt I got it to work like this.

 <CKEditor content={this.state.content}
    events={{ 
      change: this.handleChange,
      mode: this.editSource
    }}
/>

handleChange = (e) => {
    const content = e.editor.getData();
    this.setState({ content })
}

editSource = (mode) => {
    const editor = mode.editor;
    if (editor.mode === 'source') {
        const editable = editor._.editable;
        editable.attachListener(editable, 'input', e => {
            this.handleChange(mode)
        });
    }
}

[ismailatkurt]

thanks @ohtanya worked like charm! Though it seems like a workaround :)

[codeslayer1]

Closing this since the issue is resolved