Trouble recording value change on codeEditor

Support
#1

Hello. I am having trouble recognizing a value change in the codeEditor component on Jmix 2.2.3. I used ComponentValueChangeEvent handler, which works but only when the component loses focus. I would like to recognize a change as the user types. It seems like valueChangeMode of EAGER would be useful but does not seem to be available for this component. Does anyone have a suggestion?

#3

Hi!

As you clarified, the codeEditor component doesn’t support the EAGER value change mode. By default, valueChangeEvent is fired on the client-side component’s blur event.

But you can implement this yourself. It will be enough to subscribe to the change event on the client-side and dispatch the event that is listened on the server side:

    @Subscribe
    public void onInit(InitEvent event) {
        codeEditor.getElement().executeJs("""
                        $0._editor.on('change', () => {
                            const customEvent = new CustomEvent(
                                'value-changed', 
                                {detail: {value: this._editor.getValue()}}
                            );

                            this.dispatchEvent(customEvent);
                        });
                """);
    }

Best regards,
Dmitriy

#5

Very cool. This works great. I would have never figured this out on my own. Thank you!